@hitachivantara/uikit-react-core 5.83.0 → 5.84.0

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\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  HvWarningText,\n  isInvalid,\n  isValid,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\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 { fixedForwardRef } 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\nexport interface HvValidationMessages {\n  /** The value when a validation fails. */\n  error?: string;\n  /** The message that appears when there are too many characters. */\n  maxCharError?: string;\n  /** The message that appears when there are too few characters. */\n  minCharError?: string;\n  /** The message that appears when the input is empty and required. */\n  requiredError?: string;\n  /** The message that appears when the input is value is incompatible with the expected type. */\n  typeMismatchError?: string;\n}\n\nexport interface HvInputSuggestion {\n  id: string;\n  label: string;\n  value?: string;\n}\n\nexport interface HvInputProps<\n  InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n> extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: React.InputHTMLAttributes<InputElement>[\"value\"];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: React.InputHTMLAttributes<InputElement>[\"value\"];\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  /**\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?: (event: React.ChangeEvent<InputElement>, value: string) => void;\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?: (event: React.KeyboardEvent<InputElement>, value: string) => 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  /** 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 = fixedForwardRef(function HvInput<\n  InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n>(props: HvInputProps<InputElement>, ref: React.Ref<InputElement>) {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = \"\",\n    required,\n    readOnly,\n    disabled,\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<HTMLDivElement>(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      String(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 as any, 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 as any, String(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 as any, String(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 as any, String(value));\n    }\n\n    onKeyDown?.(event as any, String(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, String(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(String(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            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            popperProps={{ ref: suggestionsRef }}\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"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\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  HvWarningText,\n  isInvalid,\n  isValid,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\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 { fixedForwardRef } 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\nexport interface HvValidationMessages {\n  /** The value when a validation fails. */\n  error?: string;\n  /** The message that appears when there are too many characters. */\n  maxCharError?: string;\n  /** The message that appears when there are too few characters. */\n  minCharError?: string;\n  /** The message that appears when the input is empty and required. */\n  requiredError?: string;\n  /** The message that appears when the input is value is incompatible with the expected type. */\n  typeMismatchError?: string;\n}\n\nexport interface HvInputSuggestion {\n  id: string;\n  label: string;\n  value?: string;\n}\n\nexport interface HvInputProps<\n  InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n> extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: React.InputHTMLAttributes<InputElement>[\"value\"];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: React.InputHTMLAttributes<InputElement>[\"value\"];\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  /**\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?: (event: React.ChangeEvent<InputElement>, value: string) => void;\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?: (event: React.KeyboardEvent<InputElement>, value: string) => 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  /** 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 = fixedForwardRef(function HvInput<\n  InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement,\n>(props: HvInputProps<InputElement>, ref: React.Ref<InputElement>) {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = \"\",\n    required,\n    readOnly,\n    disabled,\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<HTMLDivElement>(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      String(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 as any, 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 as any, String(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 as any, String(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 as any, String(value));\n    }\n\n    onKeyDown?.(event as any, String(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, String(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              showGutter\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(String(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            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            popperProps={{ ref: suggestionsRef }}\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"],"mappings":"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"}

package/dist/esm/Input/Input.styles.js

@@ -5,7 +5,7 @@ import "../FormElement/Suggestions/Suggestions.js";
 const { staticClasses, useClasses } = createClasses("HvInput", {
   root: { display: "block" },
   labelContainer: { display: "flex", alignItems: "flex-start" },
-  label: { paddingBottom: "6px", display: "block" },
+  label: {},
   description: {},
   adornmentsBox: {
     display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n  root: { display: \"block\" },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: { paddingBottom: \"6px\", display: \"block\" },\n  description: {},\n  adornmentsBox: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"30px\",\n    justifyContent: \"center\",\n    marginRight: 1,\n  },\n  icon: { width: \"30px\", height: \"30px\" },\n  adornmentButton: {\n    \":focus-visible,:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  iconClear: { display: \"none\" },\n  hasSuggestions: {},\n  suggestionsContainer: { width: \"100%\", position: \"relative\" },\n  suggestionList: {\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  inputExtension: {\n    height: theme.space.xs,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  input: {\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputRoot: {\n    \":hover\": {\n      \"& $iconClear\": {\n        display: \"block\",\n      },\n    },\n    \":focus-within $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootFocused: {\n    \"& $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootDisabled: {\n    cursor: \"not-allowed\",\n  },\n  inputRootMultiline: { padding: 0 },\n  inputBorderContainer: {\n    \"$hasSuggestions &\": {\n      display: \"none\",\n    },\n  },\n  error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,yBAAyB;AAAA,MACvB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,KAAK;AAAA,EAC9C;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,MACR,gBAAgB;AAAA,QACd,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,4BAA4B;AAAA,MAC1B,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,SAAS,EAAE;AAAA,EACjC,sBAAsB;AAAA,IACpB,qBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n  root: { display: \"block\" },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: {},\n  adornmentsBox: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"30px\",\n    justifyContent: \"center\",\n    marginRight: 1,\n  },\n  icon: { width: \"30px\", height: \"30px\" },\n  adornmentButton: {\n    \":focus-visible,:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  iconClear: { display: \"none\" },\n  hasSuggestions: {},\n  suggestionsContainer: { width: \"100%\", position: \"relative\" },\n  suggestionList: {\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  inputExtension: {\n    height: theme.space.xs,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  input: {\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputRoot: {\n    \":hover\": {\n      \"& $iconClear\": {\n        display: \"block\",\n      },\n    },\n    \":focus-within $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootFocused: {\n    \"& $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootDisabled: {\n    cursor: \"not-allowed\",\n  },\n  inputRootMultiline: { padding: 0 },\n  inputBorderContainer: {\n    \"$hasSuggestions &\": {\n      display: \"none\",\n    },\n  },\n  error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,yBAAyB;AAAA,MACvB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,KAAK;AAAA,EAC9C;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,MACR,gBAAgB;AAAA,QACd,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,4BAA4B;AAAA,MAC1B,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,SAAS,EAAE;AAAA,EACjC,sBAAsB;AAAA,IACpB,qBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}

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<\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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"}
+{"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 * Implements the listitem pattern, akin to the `<li>` element.\n * Should be composed within a `<HvListContainer>` component.\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/RadioGroup/RadioGroup.js

@@ -116,6 +116,7 @@ const HvRadioGroup = forwardRef(
           label && /* @__PURE__ */ jsx(
             HvLabel,
             {
+              showGutter: true,
               id: setId(elementId, "label"),
               label,
               className: classes.label

package/dist/esm/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n   */\n  name?: string;\n  /**\n   * The value of the form element, represented in one of the child radio buttons values.\n   *\n   * When defined the radio button group state becomes controlled.\n   */\n  value?: any;\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   * If `true` the state is propagated to the children radio buttons' input element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /**\n   * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const childrenArray = Children.toArray(children);\n  const childrenCount = childrenArray.length;\n  for (let i = 0; i !== childrenCount; i += 1) {\n    const child: any = childrenArray[i];\n\n    const childIsControlled = child?.props?.checked !== undefined;\n    const childIsSelected = childIsControlled\n      ? child?.props?.checked\n      : child?.props?.defaultChecked;\n\n    if (childIsSelected) {\n      return child?.props?.value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * A group of radio buttons.\n *\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(\n  function HvRadioGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      value: valueProp,\n      defaultValue,\n      label,\n      description,\n      status,\n      statusMessage,\n      required,\n      readOnly,\n      disabled,\n      orientation = \"vertical\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvRadioGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          checked: boolean,\n          value: any,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n        newValue: any,\n      ) => {\n        childOnChange?.(event, isChecked, newValue);\n\n        onChange?.(event, newValue);\n\n        setValue(newValue);\n      },\n      [onChange, setValue],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any) => {\n        const childValue = child?.props?.value ?? \"on\";\n\n        const childIsSelected = childValue === value;\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name || elementId,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n            newValue: any,\n          ) =>\n            onChildChangeInterceptor(\n              child?.props?.onChange,\n              event,\n              isChecked,\n              newValue,\n            ),\n          inputProps: {\n            ...child?.props?.inputProps,\n            // Set the required attribute directly in the input\n            // the radio form element context shouldn't be aware so the\n            // label doesn't show redundant asterisk\n            required,\n          },\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      elementId,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      required,\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 required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-invalid={status === \"invalid\" ? true : undefined}\n          aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: status === \"invalid\",\n          })}\n          {...others}\n        >\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvRadioGroup"],"mappings":";;;;;;;;;;;;AAsGA,MAAM,+BAA+B,CAAC,aAA8B;AAC5D,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,QAAM,gBAAgB,cAAc;AACpC,WAAS,IAAI,GAAG,MAAM,eAAe,KAAK,GAAG;AACrC,UAAA,QAAa,cAAc,CAAC;AAE5B,UAAA,oBAAoB,OAAO,OAAO,YAAY;AACpD,UAAM,kBAAkB,oBACpB,OAAO,OAAO,UACd,OAAO,OAAO;AAElB,QAAI,iBAAiB;AACnB,aAAO,OAAO,OAAO;AAAA,IAAA;AAAA,EACvB;AAGK,SAAA;AACT;AAOO,MAAM,eAAe;AAAA,EAC1B,SAASA,cAAa,OAAO,KAAK;AAC1B,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,CAAC,OAAO,QAAQ,IAAI;AAAA,MACxB;AAAA,MACA,iBAAiB,SACb;AAAA;AAAA;AAAA,QAGA,MAAM,6BAA6B,QAAQ;AAAA;AAAA,IACjD;AAEA,UAAM,2BAA2B;AAAA,MAC/B,CACE,eAKA,OACA,WACA,aACG;AACa,wBAAA,OAAO,WAAW,QAAQ;AAE1C,mBAAW,OAAO,QAAQ;AAE1B,iBAAS,QAAQ;AAAA,MACnB;AAAA,MACA,CAAC,UAAU,QAAQ;AAAA,IACrB;AAEM,UAAA,mBAAmB,QAAQ,MAAM;AACrC,aAAO,SAAS,IAAI,UAAU,CAAC,UAAe;AACtC,cAAA,aAAa,OAAO,OAAO,SAAS;AAE1C,cAAM,kBAAkB,eAAe;AAEvC,eAAO,aAAa,OAAO;AAAA,UACzB,SAAS;AAAA,UACT,MAAM,OAAO,OAAO,QAAQ,QAAQ;AAAA,UACpC,UAAU,CACR,OACA,WACA,aAEA;AAAA,YACE,OAAO,OAAO;AAAA,YACd;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACF,YAAY;AAAA,YACV,GAAG,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,YAIjB;AAAA,UACF;AAAA,UACA,UAAU,YAAY,OAAO,OAAO;AAAA,UACpC,UAAU,YAAY,OAAO,OAAO;AAAA,QAAA,CACrC;AAAA,MAAA,CACF;AAAA,IAAA,GACA;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAMK,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,UAAM,iBAAiB,eACnB,MAAM,WAAW,OAAO,IACxB;AAGF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ,UAAU;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QAEpC,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B;AAAA,cACA,WAAW,QAAQ;AAAA,YAAA;AAAA,UACrB;AAAA,UAGD,mCACE,eAAc,EAAA,IAAI,MAAM,WAAW,aAAa,GAC9C,UACH,aAAA;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,mBACE,kBAAmB,SAAS,MAAM,WAAW,OAAO,KAAM;AAAA,cAE5D,gBAAc,WAAW,YAAY,OAAO;AAAA,cAC5C,qBAAmB,WAAW,YAAY,iBAAiB;AAAA,cAC3D,oBACE,CAAC,eAAe,MAAM,WAAW,aAAa,GAAG,eAAe,EAC7D,KAAK,GAAG,EACR,UAAU;AAAA,cAEf,WAAW,GAAG,QAAQ,OAAO;AAAA,gBAC3B,CAAC,QAAQ,QAAQ,GAAG,gBAAgB;AAAA,gBACpC,CAAC,QAAQ,UAAU,GAAG,gBAAgB;AAAA,gBACtC,CAAC,QAAQ,OAAO,GAAG,WAAW;AAAA,cAAA,CAC/B;AAAA,cACA,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,UAEC,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,eAAa;AAAA,cACb,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n   */\n  name?: string;\n  /**\n   * The value of the form element, represented in one of the child radio buttons values.\n   *\n   * When defined the radio button group state becomes controlled.\n   */\n  value?: any;\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   * If `true` the state is propagated to the children radio buttons' input element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /**\n   * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const childrenArray = Children.toArray(children);\n  const childrenCount = childrenArray.length;\n  for (let i = 0; i !== childrenCount; i += 1) {\n    const child: any = childrenArray[i];\n\n    const childIsControlled = child?.props?.checked !== undefined;\n    const childIsSelected = childIsControlled\n      ? child?.props?.checked\n      : child?.props?.defaultChecked;\n\n    if (childIsSelected) {\n      return child?.props?.value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * A group of radio buttons.\n *\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(\n  function HvRadioGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      value: valueProp,\n      defaultValue,\n      label,\n      description,\n      status,\n      statusMessage,\n      required,\n      readOnly,\n      disabled,\n      orientation = \"vertical\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvRadioGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          checked: boolean,\n          value: any,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n        newValue: any,\n      ) => {\n        childOnChange?.(event, isChecked, newValue);\n\n        onChange?.(event, newValue);\n\n        setValue(newValue);\n      },\n      [onChange, setValue],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any) => {\n        const childValue = child?.props?.value ?? \"on\";\n\n        const childIsSelected = childValue === value;\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name || elementId,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n            newValue: any,\n          ) =>\n            onChildChangeInterceptor(\n              child?.props?.onChange,\n              event,\n              isChecked,\n              newValue,\n            ),\n          inputProps: {\n            ...child?.props?.inputProps,\n            // Set the required attribute directly in the input\n            // the radio form element context shouldn't be aware so the\n            // label doesn't show redundant asterisk\n            required,\n          },\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      elementId,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      required,\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 required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            showGutter\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-invalid={status === \"invalid\" ? true : undefined}\n          aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: status === \"invalid\",\n          })}\n          {...others}\n        >\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvRadioGroup"],"mappings":"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"}

package/dist/esm/RadioGroup/RadioGroup.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvRadioGroup", {
     overflowClipMargin: 4,
     verticalAlign: "top"
   },
-  label: { marginBottom: theme.space.xs },
+  label: {},
   group: { display: "flex" },
   vertical: {
     flexDirection: "column",

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.styles.js","sources":["../../../src/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"RadioGroup.styles.js","sources":["../../../src/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: {},\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAC;AAAA,EACR,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/Select/Select.js

@@ -16,7 +16,6 @@ import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
-import { HvPanel } from "../Panel/Panel.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 function defaultRenderValue(options) {
@@ -141,6 +140,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
           label && /* @__PURE__ */ jsx(
             HvLabel,
             {
+              showGutter: true,
               id: labelId,
               htmlFor: id,
               label,
@@ -192,8 +192,10 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
               }
             ],
             children: /* @__PURE__ */ jsx(
-              HvPanel,
+              HvListContainer,
               {
+                condensed: true,
+                selectable: true,
                 style: {
                   width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
                 },
@@ -201,7 +203,8 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
                   [classes.panelOpenedUp]: placement.includes("top"),
                   [classes.panelOpenedDown]: placement.includes("bottom")
                 }),
-                children: /* @__PURE__ */ jsx(SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsx(HvListContainer, { condensed: true, selectable: true, ...getListboxProps(), children }) })
+                ...getListboxProps(),
+                children: /* @__PURE__ */ jsx(SelectProvider, { value: contextValue, children })
               }
             )
           }

package/dist/esm/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useRef, useState } from \"react\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\nimport {\n  SelectProvider,\n  useSelect,\n  UseSelectParameters,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport type { Placement } from \"@popperjs/core\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvPanel } from \"../Panel\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { getContainerElement } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { HvOption } from \"./Option\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null,\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: ClassValue[]) => clsx(ids) || undefined;\n\nfunction renderOptions(options?: HvSelectProps<any>[\"options\"]) {\n  return options?.map((option) => (\n    <HvOption key={option.value} {...option}>\n      {option.label}\n    </HvOption>\n  ));\n}\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    >,\n    Pick<HvButtonProps, \"size\" | \"variant\"> {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**  If enabled the panel will be rendered using a portal , if disabled will be under the DOM hierarchy of the parent component. */\n  enablePortal?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>,\n) {\n  const {\n    children: childrenProp,\n    classes: classesProp,\n    className,\n    id: idProp,\n    size,\n    variant = \"secondarySubtle\",\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    inputProps,\n    enablePortal,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\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 required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : (getOptionMetadata(value as OptionValue) ?? null);\n\n  const children = childrenProp ?? renderOptions(optionsProp);\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvDropdownButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        size={size}\n        variant={variant}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(ariaLabelledBy, { [labelId]: label })}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(ariaDescribedBy, {\n          [descriptionId]: description,\n        })}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvDropdownButton>\n      <Popper\n        role=\"none\"\n        open={isOpen}\n        keepMounted\n        disablePortal={!enablePortal}\n        container={enablePortal ? getContainerElement(rootId) : undefined}\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvPanel\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, className, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n        >\n          <SelectProvider value={contextValue}>\n            <HvListContainer condensed selectable {...getListboxProps()}>\n              {children}\n            </HvListContainer>\n          </SelectProvider>\n        </HvPanel>\n      </Popper>\n      <input\n        {...getHiddenInputProps()}\n        autoComplete={autoComplete}\n        {...inputProps}\n      />\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelect"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\nimport {\n  SelectProvider,\n  useSelect,\n  UseSelectParameters,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport type { Placement } from \"@popperjs/core\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { getContainerElement } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { HvOption } from \"./Option\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null,\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: ClassValue[]) => clsx(ids) || undefined;\n\nfunction renderOptions(options?: HvSelectProps<any>[\"options\"]) {\n  return options?.map((option) => (\n    <HvOption key={option.value} {...option}>\n      {option.label}\n    </HvOption>\n  ));\n}\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    >,\n    Pick<HvButtonProps, \"size\" | \"variant\"> {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**  If enabled the panel will be rendered using a portal , if disabled will be under the DOM hierarchy of the parent component. */\n  enablePortal?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>,\n) {\n  const {\n    children: childrenProp,\n    classes: classesProp,\n    className,\n    id: idProp,\n    size,\n    variant = \"secondarySubtle\",\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    inputProps,\n    enablePortal,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\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 required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : (getOptionMetadata(value as OptionValue) ?? null);\n\n  const children = childrenProp ?? renderOptions(optionsProp);\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              showGutter\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvDropdownButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        size={size}\n        variant={variant}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(ariaLabelledBy, { [labelId]: label })}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(ariaDescribedBy, {\n          [descriptionId]: description,\n        })}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvDropdownButton>\n      <Popper\n        role=\"none\"\n        open={isOpen}\n        keepMounted\n        disablePortal={!enablePortal}\n        container={enablePortal ? getContainerElement(rootId) : undefined}\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvListContainer\n          condensed\n          selectable\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, className, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n          {...getListboxProps()}\n        >\n          <SelectProvider value={contextValue}>{children}</SelectProvider>\n        </HvListContainer>\n      </Popper>\n      <input\n        {...getHiddenInputProps()}\n        autoComplete={autoComplete}\n        {...inputProps}\n      />\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelect"],"mappings":"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"}

package/dist/esm/Select/Select.styles.js

@@ -16,10 +16,7 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
     display: "flex",
     alignItems: "flex-start"
   },
-  label: {
-    display: "block",
-    paddingBottom: 6
-  },
+  label: {},
   description: {},
   select: {},
   popper: {
@@ -29,7 +26,13 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
     maxHeight: 400,
     border: `1px solid ${theme.colors.secondary}`,
     marginTop: -1,
-    marginBottom: -1
+    marginBottom: -1,
+    // panel styles
+    position: "relative",
+    padding: theme.space.xs,
+    backgroundColor: theme.colors.atmo1,
+    overflowY: "auto",
+    borderRadius: "inherit"
   },
   panelOpenedUp: {
     borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`

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

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n  root: {\n    position: \"relative\",\n    \"&$disabled,&$readOnly\": {\n      pointerEvents: \"none\",\n    },\n  },\n  disabled: {},\n  readOnly: {},\n  invalid: {\n    border: `1px solid ${theme.colors.negative_120}`,\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    display: \"block\",\n    paddingBottom: 6,\n  },\n  description: {},\n  select: {},\n  popper: {\n    zIndex: theme.zIndices.popover,\n  },\n  panel: {\n    maxHeight: 400,\n    border: `1px solid ${theme.colors.secondary}`,\n    marginTop: -1,\n    marginBottom: -1,\n  },\n  panelOpenedUp: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n  root: {\n    position: \"relative\",\n    \"&$disabled,&$readOnly\": {\n      pointerEvents: \"none\",\n    },\n  },\n  disabled: {},\n  readOnly: {},\n  invalid: {\n    border: `1px solid ${theme.colors.negative_120}`,\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\n  description: {},\n  select: {},\n  popper: {\n    zIndex: theme.zIndices.popover,\n  },\n  panel: {\n    maxHeight: 400,\n    border: `1px solid ${theme.colors.secondary}`,\n    marginTop: -1,\n    marginBottom: -1,\n\n    // panel styles\n    position: \"relative\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo1,\n    overflowY: \"auto\",\n    borderRadius: \"inherit\",\n  },\n  panelOpenedUp: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA;AAAA,IAGd,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/SelectionList/SelectionList.js

@@ -168,6 +168,7 @@ const HvSelectionList = forwardRef(function HvSelectionList2(props, ref) {
         label && /* @__PURE__ */ jsx(
           HvLabel,
           {
+            showGutter: true,
             id: setId(elementId, "label"),
             label,
             className: classes.label