@hitachivantara/uikit-react-core 5.80.0 → 5.80.2

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  CloseXS,\n  Preview,\n  PreviewOff,\n  Search,\n  Success,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  computeValidationType,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n} from \"../BaseInput/validations\";\nimport {\n  HvAdornment,\n  HvAdornmentProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n  isInvalid,\n  isValid,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { HvInputSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\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?: React.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   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /**\n   * Whether the suggestions should be triggered once the input is focused and not only when typing.\n   * @default false\n   * */\n  suggestOnFocus?: boolean;\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; // TODO - rename in v6 since it doesn't disable but hides the button\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\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\nfunction eventTargetIsInsideContainer(\n  container: HTMLElement | null,\n  event: React.FocusEvent<any>,\n) {\n  return !!container?.contains(event.relatedTarget);\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    enablePortal = false,\n    suggestOnFocus = 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    (event: React.MouseEvent<HTMLButtonElement>) => {\n      // reset validation status to standBy (only when status is uncontrolled)\n      setValidationState(validationStates.standBy);\n\n      changeInputValue(inputRef.current, \"\");\n\n      // prevent triggering the suggestions when clicking on the clear button when suggestOnFocus is true\n      if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n      else {\n        // we want to focus the input when clicked and not active\n        setTimeout(focusInput);\n      }\n    },\n    [canShowSuggestions, setValidationState, suggestOnFocus],\n  );\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      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          onFocus: (event) => {\n            inputProps.onFocus?.(event);\n\n            // trigger suggestions when focusing the input\n            if (canShowSuggestions && suggestOnFocus) {\n              suggestionHandler(value);\n            }\n          },\n\n          onClick: (event) => {\n            inputProps.onClick?.(event);\n\n            // prevent closing the suggestions when clicking on the input when suggestOnFocus is true\n            if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n          },\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            enablePortal={enablePortal}\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"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  CloseXS,\n  Preview,\n  PreviewOff,\n  Search,\n  Success,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  computeValidationType,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n} from \"../BaseInput/validations\";\nimport {\n  HvAdornment,\n  HvAdornmentProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n  isInvalid,\n  isValid,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { HvInputSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\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 Omit<HvBaseInputProps, \"onBlur\" | \"onFocus\" | \"onKeyDown\"> {\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   * 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?: React.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   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /**\n   * Whether the suggestions should be triggered once the input is focused and not only when typing.\n   * @default false\n   * */\n  suggestOnFocus?: boolean;\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; // TODO - rename in v6 since it doesn't disable but hides the button\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\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\nfunction eventTargetIsInsideContainer(\n  container: HTMLElement | null,\n  event: React.FocusEvent<any>,\n) {\n  return !!container?.contains(event.relatedTarget);\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<\n  // no-indent\n  InputElement,\n  HvInputProps\n>(function HvInput(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    enablePortal = false,\n    suggestOnFocus = 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    (event: React.MouseEvent<HTMLButtonElement>) => {\n      // reset validation status to standBy (only when status is uncontrolled)\n      setValidationState(validationStates.standBy);\n\n      changeInputValue(inputRef.current, \"\");\n\n      // prevent triggering the suggestions when clicking on the clear button when suggestOnFocus is true\n      if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n      else {\n        // we want to focus the input when clicked and not active\n        setTimeout(focusInput);\n      }\n    },\n    [canShowSuggestions, setValidationState, suggestOnFocus],\n  );\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      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          onFocus: (event) => {\n            inputProps.onFocus?.(event);\n\n            // trigger suggestions when focusing the input\n            if (canShowSuggestions && suggestOnFocus) {\n              suggestionHandler(value);\n            }\n          },\n\n          onClick: (event) => {\n            inputProps.onClick?.(event);\n\n            // prevent closing the suggestions when clicking on the input when suggestOnFocus is true\n            if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n          },\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            enablePortal={enablePortal}\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":["HvInput","validationState","validationStates"],"mappings":"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"}

package/dist/esm/ListContainer/ListContainer.js

@@ -5,7 +5,7 @@ import { useForkRef } from "../hooks/useForkRef.js";
 import { useClasses } from "./ListContainer.styles.js";
 import { staticClasses } from "./ListContainer.styles.js";
 import ListContext from "./ListContext/ListContext.js";
-const HvListContainer = forwardRef((props, ref) => {
+const HvListContainer = forwardRef(function HvListContainer2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/esm/ListContainer/ListContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListContainer.js","sources":["../../../src/ListContainer/ListContainer.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n  /**\n   * If the list items should be focusable and react to mouse over events.\n   * Defaults to true if the list is selectable, false otherwise.\n   */\n  interactive?: boolean;\n  /** If `true` compact the vertical spacing between list items. */\n  condensed?: boolean;\n  /** If `true`, the list items are _visually_ selectable. To enable selection, use `HvSelectionList` */\n  selectable?: boolean;\n  /** If `true`, the list items' left and right padding is removed. */\n  disableGutters?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListContainerClasses;\n}\n\n/**\n * A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n  HTMLUListElement,\n  HvListContainerProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    interactive = false,\n    selectable,\n    condensed,\n    disableGutters,\n    children: childrenProp,\n    ...others\n  } = useDefaultProps(\"HvListContainer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(null);\n\n  const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n  const listContext = useMemo(\n    () => ({\n      topContainerRef: topContainerRef || containerRef,\n      condensed,\n      selectable,\n      disableGutters,\n      interactive,\n      nesting: nesting + 1,\n    }),\n    [\n      condensed,\n      selectable,\n      disableGutters,\n      interactive,\n      nesting,\n      topContainerRef,\n    ],\n  );\n\n  const children = useMemo(() => {\n    if (!interactive) return childrenProp;\n\n    const anySelected = Children.toArray(childrenProp).some(\n      (child) =>\n        isValidElement(child) && child.props.selected && !child.props.disabled,\n    );\n\n    return Children.map(childrenProp, (child: any, i) => {\n      const tabIndex =\n        child.props.tabIndex ||\n        (!anySelected && i === 0) ||\n        (child.props.selected && !child.props.disabled)\n          ? 0\n          : -1;\n\n      return cloneElement(child, {\n        tabIndex,\n        interactive,\n      });\n    });\n  }, [childrenProp, interactive]);\n\n  const handleRef = useForkRef(ref, containerRef);\n\n  return (\n    <HvListContext.Provider value={listContext}>\n      <ul\n        ref={handleRef}\n        id={id}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {children}\n      </ul>\n    </HvListContext.Provider>\n  );\n});\n"],"names":["HvListContext"],"mappings":";;;;;;;AA4CO,MAAM,kBAAkB,WAG7B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,IAAI;AAEhC,QAAM,EAAE,iBAAiB,UAAU,GAAG,IAAI,WAAWA,WAAa;AAElE,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,UAAU;AAAA,IAAA;AAAA,IAErB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,WAAW,QAAQ,MAAM;AACzB,QAAA,CAAC,YAAoB,QAAA;AAEzB,UAAM,cAAc,SAAS,QAAQ,YAAY,EAAE;AAAA,MACjD,CAAC,UACC,eAAe,KAAK,KAAK,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;AAAA,IAAA;AAGlE,WAAO,SAAS,IAAI,cAAc,CAAC,OAAY,MAAM;AACnD,YAAM,WACJ,MAAM,MAAM,YACX,CAAC,eAAe,MAAM,KACtB,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAClC,IACA;AAEN,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAAC,cAAc,WAAW,CAAC;AAExB,QAAA,YAAY,WAAW,KAAK,YAAY;AAE9C,SACG,oBAAAA,YAAc,UAAd,EAAuB,OAAO,aAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"ListContainer.js","sources":["../../../src/ListContainer/ListContainer.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n  /**\n   * If the list items should be focusable and react to mouse over events.\n   * Defaults to true if the list is selectable, false otherwise.\n   */\n  interactive?: boolean;\n  /** If `true` compact the vertical spacing between list items. */\n  condensed?: boolean;\n  /** If `true`, the list items are _visually_ selectable. To enable selection, use `HvSelectionList` */\n  selectable?: boolean;\n  /** If `true`, the list items' left and right padding is removed. */\n  disableGutters?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListContainerClasses;\n}\n\n/**\n * A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n  HTMLUListElement,\n  HvListContainerProps\n>(function HvListContainer(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    interactive = false,\n    selectable,\n    condensed,\n    disableGutters,\n    children: childrenProp,\n    ...others\n  } = useDefaultProps(\"HvListContainer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(null);\n\n  const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n  const listContext = useMemo(\n    () => ({\n      topContainerRef: topContainerRef || containerRef,\n      condensed,\n      selectable,\n      disableGutters,\n      interactive,\n      nesting: nesting + 1,\n    }),\n    [\n      condensed,\n      selectable,\n      disableGutters,\n      interactive,\n      nesting,\n      topContainerRef,\n    ],\n  );\n\n  const children = useMemo(() => {\n    if (!interactive) return childrenProp;\n\n    const anySelected = Children.toArray(childrenProp).some(\n      (child) =>\n        isValidElement(child) && child.props.selected && !child.props.disabled,\n    );\n\n    return Children.map(childrenProp, (child: any, i) => {\n      const tabIndex =\n        child.props.tabIndex ||\n        (!anySelected && i === 0) ||\n        (child.props.selected && !child.props.disabled)\n          ? 0\n          : -1;\n\n      return cloneElement(child, {\n        tabIndex,\n        interactive,\n      });\n    });\n  }, [childrenProp, interactive]);\n\n  const handleRef = useForkRef(ref, containerRef);\n\n  return (\n    <HvListContext.Provider value={listContext}>\n      <ul\n        ref={handleRef}\n        id={id}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {children}\n      </ul>\n    </HvListContext.Provider>\n  );\n});\n"],"names":["HvListContainer","HvListContext"],"mappings":";;;;;;;AA4CO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,IAAI;AAEhC,QAAM,EAAE,iBAAiB,UAAU,GAAG,IAAI,WAAWC,WAAa;AAElE,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,UAAU;AAAA,IAAA;AAAA,IAErB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,WAAW,QAAQ,MAAM;AACzB,QAAA,CAAC,YAAoB,QAAA;AAEzB,UAAM,cAAc,SAAS,QAAQ,YAAY,EAAE;AAAA,MACjD,CAAC,UACC,eAAe,KAAK,KAAK,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;AAAA,IAAA;AAGlE,WAAO,SAAS,IAAI,cAAc,CAAC,OAAY,MAAM;AACnD,YAAM,WACJ,MAAM,MAAM,YACX,CAAC,eAAe,MAAM,KACtB,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAClC,IACA;AAEN,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAAC,cAAc,WAAW,CAAC;AAExB,QAAA,YAAY,WAAW,KAAK,YAAY;AAE9C,SACG,oBAAAA,YAAc,UAAd,EAAuB,OAAO,aAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/ListContainer/ListItem/ListItem.js

@@ -20,7 +20,7 @@ const applyClassNameToElement = (element, className) => {
     className
   });
 };
-const HvListItem = forwardRef((props, ref) => {
+const HvListItem = forwardRef(function HvListItem2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/esm/ListContainer/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  useCallback,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** Indicated if the list item is _visually_ selectable */\n  selectable?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element: React.ReactNode,\n  selected: boolean | undefined,\n  disabled: boolean | undefined,\n  onClick: React.MouseEventHandler<HTMLLIElement>,\n  className?: string,\n) => {\n  if (element == null) return null;\n\n  return cloneElement(element as ReactElement, {\n    className,\n    checked: !!selected,\n    disabled,\n    onChange: onClick,\n  });\n};\n\nconst applyClassNameToElement = (\n  element: React.ReactNode,\n  className?: string,\n) => {\n  if (element == null) return null;\n\n  return cloneElement(element as ReactElement, {\n    className,\n  });\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    selectable: selectableProp,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n    selectable: selectableContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp ?? condensedContext;\n  const disableGutters = disableGuttersProp ?? disableGuttersContext;\n  const interactive = interactiveProp ?? interactiveContext;\n  const selectable = selectableProp ?? selectableContext;\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLLIElement>>(\n    (evt) => {\n      if (disabled) return;\n      onClick?.(evt);\n    },\n    [disabled, onClick],\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined,\n        ),\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleClick,\n      selected,\n      startAdornment,\n    ],\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined,\n        ),\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment],\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events\n    <li\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive || selectable,\n          [classes.selected]: selected || props[\"aria-selected\"],\n          [classes.disabled]: disabled || props[\"aria-disabled\"],\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className,\n      )}\n      tabIndex={interactive ? undefined : tabIndex}\n      onClick={handleClick}\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["HvListContext"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  useCallback,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** Indicated if the list item is _visually_ selectable */\n  selectable?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element: React.ReactNode,\n  selected: boolean | undefined,\n  disabled: boolean | undefined,\n  onClick: React.MouseEventHandler<HTMLLIElement>,\n  className?: string,\n) => {\n  if (element == null) return null;\n\n  return cloneElement(element as ReactElement, {\n    className,\n    checked: !!selected,\n    disabled,\n    onChange: onClick,\n  });\n};\n\nconst applyClassNameToElement = (\n  element: React.ReactNode,\n  className?: string,\n) => {\n  if (element == null) return null;\n\n  return cloneElement(element as ReactElement, {\n    className,\n  });\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<\n  // no-indent\n  React.ComponentRef<\"li\">,\n  HvListItemProps\n>(function HvListItem(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    selectable: selectableProp,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n    selectable: selectableContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp ?? condensedContext;\n  const disableGutters = disableGuttersProp ?? disableGuttersContext;\n  const interactive = interactiveProp ?? interactiveContext;\n  const selectable = selectableProp ?? selectableContext;\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLLIElement>>(\n    (evt) => {\n      if (disabled) return;\n      onClick?.(evt);\n    },\n    [disabled, onClick],\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined,\n        ),\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleClick,\n      selected,\n      startAdornment,\n    ],\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined,\n        ),\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment],\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events\n    <li\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive || selectable,\n          [classes.selected]: selected || props[\"aria-selected\"],\n          [classes.disabled]: disabled || props[\"aria-disabled\"],\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className,\n      )}\n      tabIndex={interactive ? undefined : tabIndex}\n      onClick={handleClick}\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["HvListItem","HvListContext"],"mappings":"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"}

package/dist/esm/Loading/Loading.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { range } from "../utils/helpers.js";
 import { useClasses } from "./Loading.styles.js";
 import { staticClasses } from "./Loading.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
-const HvLoading = (props) => {
+const HvLoading = forwardRef(function HvLoading2(props, ref) {
   const {
     color,
     hidden,
@@ -22,6 +23,7 @@ const HvLoading = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref,
       hidden: !!hidden,
       style: mergeStyles(style, {
         color: getColor(color, small ? "secondary" : "brand"),
@@ -52,7 +54,7 @@ const HvLoading = (props) => {
       ]
     }
   );
-};
+});
 export {
   HvLoading,
   staticClasses as loadingClasses

package/dist/esm/Loading/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    style,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color && (`${size}Color` as const);\n\n  return (\n    <div\n      hidden={!!hidden}\n      style={mergeStyles(style, {\n        color: getColor(color, small ? \"secondary\" : \"brand\"),\n        \"--customColor\": getColor(color),\n      })}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            className={cx(\n              classes.loadingBar,\n              // TODO: hoist to parent & remove unused `colorVariant` in v6\n              classes[size],\n              classes[colorVariant!],\n            )}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgCa,MAAA,YAAY,CAAC,UAA0B;AAC5C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,SAAU,GAAG,IAAI;AAGpC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,CAAC,CAAC;AAAA,MACV,OAAO,YAAY,OAAO;AAAA,QACxB,OAAO,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,QACpD,iBAAiB,SAAS,KAAK;AAAA,MAAA,CAChC;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT,QAAQ;AAAA;AAAA,cAER,QAAQ,IAAI;AAAA,cACZ,QAAQ,YAAa;AAAA,YACvB;AAAA,UAAA;AAAA,UANK;AAAA,QAQR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvLoadingProps\n>(function HvLoading(props, ref) {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    style,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color && (`${size}Color` as const);\n\n  return (\n    <div\n      ref={ref}\n      hidden={!!hidden}\n      style={mergeStyles(style, {\n        color: getColor(color, small ? \"secondary\" : \"brand\"),\n        \"--customColor\": getColor(color),\n      })}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            className={cx(\n              classes.loadingBar,\n              // TODO: hoist to parent & remove unused `colorVariant` in v6\n              classes[size],\n              classes[colorVariant!],\n            )}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n});\n"],"names":["HvLoading"],"mappings":";;;;;;;;AAiCO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,SAAU,GAAG,IAAI;AAGpC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,CAAC;AAAA,MACV,OAAO,YAAY,OAAO;AAAA,QACxB,OAAO,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,QACpD,iBAAiB,SAAS,KAAK;AAAA,MAAA,CAChC;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT,QAAQ;AAAA;AAAA,cAER,QAAQ,IAAI;AAAA,cACZ,QAAQ,YAAa;AAAA,YACvB;AAAA,UAAA;AAAA,UANK;AAAA,QAQR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/esm/LoadingContainer/LoadingContainer.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./LoadingContainer.styles.js";
 import { staticClasses } from "./LoadingContainer.styles.js";
 import { HvLoading } from "../Loading/Loading.js";
-const HvLoadingContainer = (props) => {
+const HvLoadingContainer = forwardRef(function HvLoadingContainer2(props, ref) {
   const {
     children,
     className,
@@ -17,7 +18,7 @@ const HvLoadingContainer = (props) => {
   } = useDefaultProps("HvLoadingContainer", props);
   const { classes, cx } = useClasses(classesProp);
   const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
-  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsx(
       HvLoading,
       {
@@ -34,7 +35,7 @@ const HvLoadingContainer = (props) => {
     ),
     children
   ] });
-};
+});
 export {
   HvLoadingContainer,
   staticClasses as loadingContainerClasses

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingContainer.js","sources":["../../../src/LoadingContainer/LoadingContainer.tsx"],"sourcesContent":["import {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvLoading, HvLoadingProps } from \"../Loading\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./LoadingContainer.styles\";\n\nexport { staticClasses as loadingContainerClasses };\n\nexport type HvLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingContainerProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvLoadingProps, \"label\" | \"small\" | \"hidden\"> {\n  opacity?: number;\n  classes?: HvLoadingContainerClasses;\n}\n\n/**\n * A component that wraps `children` with an `HvLoading` component and\n * and an overlay background with opacity.\n *\n * @example\n * <HvLoadingContainer label=\"Loading...\" hidden={!isLoading}>\n *  <MyComponent>\n * </HvLoadingContainer>\n * */\nexport const HvLoadingContainer = (props: HvLoadingContainerProps) => {\n  const {\n    children,\n    className,\n    classes: classesProp,\n    hidden,\n    small,\n    label,\n    \"aria-label\": ariaLabelProp,\n    opacity,\n    ...others\n  } = useDefaultProps(\"HvLoadingContainer\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const ariaLabel =\n    ariaLabelProp || (typeof label === \"string\" && label) || \"Loading\";\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <HvLoading\n        className={classes.loading}\n        role=\"progressbar\"\n        small={small}\n        label={label}\n        hidden={hidden}\n        aria-label={ariaLabel}\n        style={mergeStyles(undefined, {\n          \"--opacity\": opacity && `${opacity * 100}%`,\n        })}\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8Ba,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,YACJ,iBAAkB,OAAO,UAAU,YAAY,SAAU;AAGzD,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,OAAO,YAAY,QAAW;AAAA,UAC5B,aAAa,WAAW,GAAG,UAAU,GAAG;AAAA,QAAA,CACzC;AAAA,MAAA;AAAA,IACH;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"LoadingContainer.js","sources":["../../../src/LoadingContainer/LoadingContainer.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvLoading, HvLoadingProps } from \"../Loading\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./LoadingContainer.styles\";\n\nexport { staticClasses as loadingContainerClasses };\n\nexport type HvLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingContainerProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvLoadingProps, \"label\" | \"small\" | \"hidden\"> {\n  opacity?: number;\n  classes?: HvLoadingContainerClasses;\n}\n\n/**\n * A component that wraps `children` with an `HvLoading` component and\n * and an overlay background with opacity.\n *\n * @example\n * <HvLoadingContainer label=\"Loading...\" hidden={!isLoading}>\n *  <MyComponent>\n * </HvLoadingContainer>\n * */\nexport const HvLoadingContainer = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvLoadingContainerProps\n>(function HvLoadingContainer(props, ref) {\n  const {\n    children,\n    className,\n    classes: classesProp,\n    hidden,\n    small,\n    label,\n    \"aria-label\": ariaLabelProp,\n    opacity,\n    ...others\n  } = useDefaultProps(\"HvLoadingContainer\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const ariaLabel =\n    ariaLabelProp || (typeof label === \"string\" && label) || \"Loading\";\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      <HvLoading\n        className={classes.loading}\n        role=\"progressbar\"\n        small={small}\n        label={label}\n        hidden={hidden}\n        aria-label={ariaLabel}\n        style={mergeStyles(undefined, {\n          \"--opacity\": opacity && `${opacity * 100}%`,\n        })}\n      />\n      {children}\n    </div>\n  );\n});\n"],"names":["HvLoadingContainer"],"mappings":";;;;;;AA+BO,MAAM,qBAAqB,WAGhC,SAASA,oBAAmB,OAAO,KAAK;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,YACJ,iBAAkB,OAAO,UAAU,YAAY,SAAU;AAGzD,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,OAAO,YAAY,QAAW;AAAA,UAC5B,aAAa,WAAW,GAAG,UAAU,GAAG;AAAA,QAAA,CACzC;AAAA,MAAA;AAAA,IACH;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/Login/Login.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Login.styles.js";
 import { staticClasses } from "./Login.styles.js";
-const HvLogin = (props) => {
+const HvLogin = forwardRef(function HvLogin2(props, ref) {
   const {
-    id,
     className,
     classes: classesProp,
     children,
@@ -15,7 +15,7 @@ const HvLogin = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      id,
+      ref,
       className: cx(classes.root, className),
       style: {
         backgroundImage: background && `url(${background})`
@@ -24,7 +24,7 @@ const HvLogin = (props) => {
       children: /* @__PURE__ */ jsx("div", { className: classes.formContainer, children })
     }
   );
-};
+});
 export {
   HvLogin,
   staticClasses as loginClasses

package/dist/esm/Login/Login.js.map

@@ -1 +1 @@
-{"version":3,"file":"Login.js","sources":["../../../src/Login/Login.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Login.styles\";\n\nexport { staticClasses as loginClasses };\n\nexport type HvLoginClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoginProps extends HvBaseProps {\n  /**\n   *  The path for the background image.\n   */\n  background?: string;\n  /**\n   * Class names to be applied.\n   */\n  classes?: HvLoginClasses;\n}\n\n/**\n * Container layout for the login form.\n */\nexport const HvLogin = (props: HvLoginProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    background,\n    ...others\n  } = useDefaultProps(\"HvLogin\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      id={id}\n      className={cx(classes.root, className)}\n      style={{\n        backgroundImage: background && `url(${background})`,\n      }}\n      {...others}\n    >\n      <div className={classes.formContainer}>{children}</div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA0Ba,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,OAAO;AAAA,QACL,iBAAiB,cAAc,OAAO,UAAU;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAS;AAAA,IAAA;AAAA,EAAA;AAGvD;"}
+{"version":3,"file":"Login.js","sources":["../../../src/Login/Login.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Login.styles\";\n\nexport { staticClasses as loginClasses };\n\nexport type HvLoginClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoginProps extends HvBaseProps {\n  /**\n   *  The path for the background image.\n   */\n  background?: string;\n  /**\n   * Class names to be applied.\n   */\n  classes?: HvLoginClasses;\n}\n\n/**\n * Container layout for the login form.\n */\nexport const HvLogin = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvLoginProps\n>(function HvLogin(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    background,\n    ...others\n  } = useDefaultProps(\"HvLogin\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(classes.root, className)}\n      style={{\n        backgroundImage: background && `url(${background})`,\n      }}\n      {...others}\n    >\n      <div className={classes.formContainer}>{children}</div>\n    </div>\n  );\n});\n"],"names":["HvLogin"],"mappings":";;;;;AA2BO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,OAAO;AAAA,QACL,iBAAiB,cAAc,OAAO,UAAU;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}

package/dist/esm/Pagination/Pagination.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
+import { forwardRef, useState, useCallback, useEffect } from "react";
 import { useTheme, useMediaQuery } from "@mui/material";
 import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
@@ -40,7 +40,7 @@ const DEFAULT_LABELS = {
   /** Label of the last page button */
   lastPage: "Last Page"
 };
-const HvPagination = (props) => {
+const HvPagination = forwardRef(function HvPagination2(props, ref) {
   const {
     classes: classesProp,
     className,
@@ -106,7 +106,7 @@ const HvPagination = (props) => {
       ...currentPageInputProps
     }
   ) });
-  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
       !isXsDown && /* @__PURE__ */ jsx(
         HvTypography,
@@ -201,7 +201,7 @@ const HvPagination = (props) => {
       )
     ] })
   ] });
-};
+});
 export {
   HvPagination,
   staticClasses as paginationClasses

package/dist/esm/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport {\n  Backwards,\n  End,\n  Forwards,\n  Start,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  clamp,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport HvSelect, { Option } from \"./Select\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n  /** The show label. */\n  pageSizePrev: \"Show\",\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName: \"rows\",\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription: \"Select how many to display\",\n  /** Separator of current page and total pages. */\n  pagesSeparator: \"/\",\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle: \"First page\",\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle: \"Previous page\",\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle: \"Next page\",\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle: \"Last page\",\n  /** Aria-label passed to the page input. */\n  paginationInputLabel: \"Current page\",\n  /** Label of the first page button */\n  firstPage: \"First Page\",\n  /** Label of the previous page button */\n  previousPage: \"Previous Page\",\n  /** Label of the next page button */\n  nextPage: \"Next Page\",\n  /** Label of the last page button */\n  lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const muiTheme = useTheme();\n  const isXsDown = useMediaQuery(muiTheme.breakpoints.down(\"xs\"));\n\n  const [pageInput, setPageInput] = useState(page);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);\n\n      onPageChange?.(safePage);\n      setPageInput(safePage);\n    },\n    [page, pages, onPageChange],\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    setPageInput(page);\n  }, [page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        value={String(pageInput + 1)}\n        onChange={(event, value) => setPageInput(Number(value) - 1)}\n        onBlur={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n        onEnter={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            {!isXsDown && (\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            )}\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{\n                header: classes.pageSizeHeader,\n                root: classes.pageSizeRoot,\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            {!isXsDown && (\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            )}\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <HvIconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <HvIconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport {\n  Backwards,\n  End,\n  Forwards,\n  Start,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  clamp,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport HvSelect, { Option } from \"./Select\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n  /** The show label. */\n  pageSizePrev: \"Show\",\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName: \"rows\",\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription: \"Select how many to display\",\n  /** Separator of current page and total pages. */\n  pagesSeparator: \"/\",\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle: \"First page\",\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle: \"Previous page\",\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle: \"Next page\",\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle: \"Last page\",\n  /** Aria-label passed to the page input. */\n  paginationInputLabel: \"Current page\",\n  /** Label of the first page button */\n  firstPage: \"First Page\",\n  /** Label of the previous page button */\n  previousPage: \"Previous Page\",\n  /** Label of the next page button */\n  nextPage: \"Next Page\",\n  /** Label of the last page button */\n  lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvPaginationProps\n>(function HvPagination(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const muiTheme = useTheme();\n  const isXsDown = useMediaQuery(muiTheme.breakpoints.down(\"xs\"));\n\n  const [pageInput, setPageInput] = useState(page);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);\n\n      onPageChange?.(safePage);\n      setPageInput(safePage);\n    },\n    [page, pages, onPageChange],\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    setPageInput(page);\n  }, [page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        value={String(pageInput + 1)}\n        onChange={(event, value) => setPageInput(Number(value) - 1)}\n        onBlur={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n        onEnter={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            {!isXsDown && (\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            )}\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{\n                header: classes.pageSizeHeader,\n                root: classes.pageSizeRoot,\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            {!isXsDown && (\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            )}\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <HvIconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <HvIconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvPagination"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,yBAAyB,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,GAAG;AAEtD,MAAM,iBAAiB;AAAA;AAAA,EAErB,cAAc;AAAA;AAAA,EAEd,mBAAmB;AAAA;AAAA,EAEnB,6BAA6B;AAAA;AAAA,EAE7B,gBAAgB;AAAA;AAAA,EAEhB,0BAA0B;AAAA;AAAA,EAE1B,6BAA6B;AAAA;AAAA,EAE7B,yBAAyB;AAAA;AAAA,EAEzB,yBAAyB;AAAA;AAAA,EAEzB,sBAAsB;AAAA;AAAA,EAEtB,WAAW;AAAA;AAAA,EAEX,cAAc;AAAA;AAAA,EAEd,UAAU;AAAA;AAAA,EAEV,UAAU;AACZ;AAyCO,MAAM,eAAe,WAG1B,SAASA,cAAa,OAAO,KAAK;AAC5B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,WAAW,uBAAuB,CAAC;AAAA,IACnC,eAAe;AAAA,IACf,cAAc;AAAA,IACd,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,QAAM,WAAW;AACjB,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAE9D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAE/C,QAAM,aAAa;AAAA,IACjB,CAAC,YAAoB;AACb,YAAA,WAAW,OAAO,MAAM,OAAO,IAAI,OAAO,MAAM,SAAS,QAAQ,CAAC;AAExE,qBAAe,QAAQ;AACvB,mBAAa,QAAQ;AAAA,IACvB;AAAA,IACA,CAAC,MAAM,OAAO,YAAY;AAAA,EAAA;AAG5B,YAAU,MAAM;AACV,QAAA,QAAQ,SAAS,QAAQ,GAAG;AAC9B,iBAAW,IAAI;AAAA,IACjB;AAAA,EACC,GAAA,CAAC,YAAY,MAAM,KAAK,CAAC;AAE5B,YAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EAAA,GAChB,CAAC,IAAI,CAAC;AAET,QAAM,iBAAiB,MACrB,oBAAC,OAAI,EAAA,WAAW,QAAQ,UACtB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,IAAI,aAAa;AAAA,MAC3B;AAAA,MACA,YAAY;AAAA,QACV,cAAc,QAAQ;AAAA;AAAA,QAEtB,MAAM;AAAA,MACR;AAAA,MACA,SAAS;AAAA,QACP,MAAM,SAAS;AAAA,QACf,OAAO,SAAS;AAAA,QAChB,WAAW,SAAS;AAAA,MACtB;AAAA,MACA,OAAO,OAAO,YAAY,CAAC;AAAA,MAC3B,UAAU,CAAC,OAAO,UAAU,aAAa,OAAO,KAAK,IAAI,CAAC;AAAA,MAC1D,QAAQ,CAAC,KAAK,UAAU,WAAW,KAAK,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;AAAA,MAChE,SAAS,CAAC,KAAK,UAAU,WAAW,KAAK,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;AAAA,MACjE,UAAU,aAAa;AAAA,MACvB,cAAY;AAAA,MACX,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAIA,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACjE,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAW,QAAQ,iBAAkB,GAAG,eAC1C,iCAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,CAAC,YACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,SAAS;AAAA,UAEnB,UAAQ,QAAA;AAAA,QAAA;AAAA,MACX;AAAA,MAEF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,UAAU;AAAA,UACxB,UAAU,aAAa;AAAA,UACvB,WAAW,QAAQ;AAAA,UACnB,cAAY,QAAQ;AAAA,UACpB,UAAU,CAAC,GAAQ,QAAgB,mBAAmB,GAAG;AAAA,UACzD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,QAAQ,QAAQ;AAAA,YAChB,MAAM,QAAQ;AAAA,UAChB;AAAA,UAEC,UAAA,gBAAgB,IAAI,CAAC,WACpB,oBAAC,UAAoB,OAAO,QACzB,UADU,OAAA,GAAA,MAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,MACC,CAAC,YACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UAElB,UAAQ,QAAA;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,EAAA,CAEJ,EAEJ,CAAA;AAAA,yBACC,OAAI,EAAA,WAAW,QAAQ,eAAgB,GAAG,iBACzC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,kBAAkB;AAAA,UAChC,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,CAAC;AAAA,UAC3B,OAAO,QAAQ,aAAa,QAAQ;AAAA,UAEpC,8BAAC,OAAM,EAAA,WAAW,QAAQ,MAAM,UAAS,MAAK;AAAA,QAAA;AAAA,MAChD;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,qBAAqB;AAAA,UACnC,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,OAAO,CAAC;AAAA,UAClC,OAAO,QAAQ,gBAAgB,QAAQ;AAAA,UAEvC,8BAAC,WAAU,EAAA,WAAW,QAAQ,MAAM,UAAS,MAAK;AAAA,QAAA;AAAA,MACpD;AAAA,MACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,UACrB,UAAA;AAAA,QACC,eAAA,eAAA,IAEA,oBAAC,cAAa,EAAA,SAAQ,YAAW,WAAU,QAAQ,UAAA,GACjD,OAAO,CACT,GAAG,CAAA;AAAA,4BAEJ,cAAa,EAAA,WAAU,QAAQ,UAAG,GAAA,QAAQ,cAAc,KAAI;AAAA,QAC7D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,MAAM,IAAI,YAAY;AAAA,YAC1B,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,UAC/B,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,OAAO,CAAC;AAAA,UAClC,OAAO,QAAQ,YAAY,QAAQ;AAAA,UAEnC,8BAAC,UAAS,EAAA,WAAW,QAAQ,MAAM,UAAS,MAAK;AAAA,QAAA;AAAA,MACnD;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,UAC/B,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,QAAQ,CAAC;AAAA,UACnC,OAAO,QAAQ,YAAY,QAAQ;AAAA,UAEnC,8BAAC,KAAI,EAAA,WAAW,QAAQ,MAAM,UAAS,MAAK;AAAA,QAAA;AAAA,MAC9C;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/Panel/Panel.js

@@ -4,7 +4,7 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Panel.styles.js";
 import { staticClasses } from "./Panel.styles.js";
 const HvPanel = forwardRef(
-  (props, ref) => {
+  function HvPanel2(props, ref) {
     const {
       className,
       classes: classesProp,

package/dist/esm/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/Panel/Panel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Panel.styles\";\n\nexport { staticClasses as panelClasses };\n\nexport type HvPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPanelProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n}\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = forwardRef<HTMLDivElement, HvPanelProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvPanel\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div ref={ref} className={cx(classes.root, className)} {...others}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAuBO,MAAM,UAAU;AAAA,EACrB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"Panel.js","sources":["../../../src/Panel/Panel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Panel.styles\";\n\nexport { staticClasses as panelClasses };\n\nexport type HvPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPanelProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n}\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = forwardRef<HTMLDivElement, HvPanelProps>(\n  function HvPanel(props, ref) {\n    const {\n      className,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvPanel\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div ref={ref} className={cx(classes.root, className)} {...others}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["HvPanel"],"mappings":";;;;;AAuBO,MAAM,UAAU;AAAA,EACrB,SAASA,SAAQ,OAAO,KAAK;AACrB,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Panel/Panel.styles.js

@@ -5,7 +5,8 @@ const { useClasses, staticClasses } = createClasses("HvPanel", {
     position: "relative",
     padding: theme.space.sm,
     backgroundColor: theme.colors.atmo1,
-    overflow: "auto"
+    overflow: "auto",
+    borderRadius: "inherit"
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.styles.js","sources":["../../../src/Panel/Panel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvPanel\", {\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"auto\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,EACZ;AACF,CAAC;"}
+{"version":3,"file":"Panel.styles.js","sources":["../../../src/Panel/Panel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvPanel\", {\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"auto\",\n    borderRadius: \"inherit\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,cAAc;AAAA,EAChB;AACF,CAAC;"}

package/dist/esm/Radio/Radio.js

@@ -12,7 +12,7 @@ import { HvFormElement } from "../Forms/FormElement/FormElement.js";
 import { HvLabel } from "../Forms/Label/Label.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const HvRadio = forwardRef(
-  (props, ref) => {
+  function HvRadio2(props, ref) {
     const {
       classes: classesProp,
       className,