@hitachivantara/uikit-react-core 5.91.1 → 5.91.2

package/dist/esm/TagsInput/TagsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useFocus } from \"../hooks/useFocus\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport type { HvInputProps, HvInputSuggestion } from \"../Input\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport interface HvTagSuggestion extends HvInputSuggestion {}\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends Omit<\n    HvInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"value\" | \"defaultValue\"\n  > {\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n\n  /** The function that will be executed onChange. */\n  onChange?: (event: React.SyntheticEvent, value: HvTagProps[]) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** The validation function that will be executed when adding tags in the suggestions mode. */\n  suggestionValidation?: (value: string) => boolean;\n  /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n  suggestionsLoose?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<HTMLElement, HvTagsInputProps>(\n  function HvTagsInput(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly,\n      disabled,\n      required,\n      label: textAreaLabel,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onAdd,\n      onDelete,\n      onBlur,\n      onFocus,\n      placeholder,\n      endAdornment,\n      hideCounter,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      resizable,\n      inputProps,\n      countCharProps,\n      multiline,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n    const [validationMessage, setValidationMessage] = useControlled(\n      statusMessage,\n      \"\",\n    );\n\n    const [stateValid, setStateValid] = useState(true);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const skipReset = useRef(false);\n    const blurTimeout = useRef<any>();\n    const focusUtils = useFocus({ containerRef });\n\n    const forkedContainerRef = useForkRef(ref, containerRef);\n\n    const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n    // suggestions related state\n    const [suggestionValues, setSuggestionValues] = useState<\n      HvTagSuggestion[] | null\n    >(null);\n\n    const isStateInvalid = useMemo(() => {\n      return hasCounter && value.length > maxTagsQuantity;\n    }, [hasCounter, maxTagsQuantity, value.length]);\n\n    const canShowSuggestions = suggestionListCallback != null;\n    const hasSuggestions = !!suggestionValues;\n\n    const errorMessages = useMemo(\n      () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n      [validationMessages],\n    );\n\n    const performValidation = useCallback(\n      (currValue: HvTagProps[]) => {\n        if (\n          maxTagsQuantity !== null &&\n          maxTagsQuantity !== undefined &&\n          currValue.length > maxTagsQuantity\n        ) {\n          setValidationState(validationStates.invalid);\n          setValidationMessage(errorMessages.maxCharError);\n          setStateValid(false);\n        } else {\n          setValidationState(validationStates.valid);\n          setValidationMessage(\"\");\n          setStateValid(true);\n        }\n      },\n      [\n        errorMessages.maxCharError,\n        maxTagsQuantity,\n        setValidationMessage,\n        setValidationState,\n      ],\n    );\n\n    /**\n     * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n     * Also executes the user provided onDelete and onChange events.\n     *\n     * @param {number}  tagPos - the position at which to remove the tag\n     * @param {Event}   event  - the event associated with the delete\n     * @param {boolean} refocus    - whether or not to set the cursor at the end of the array\n     */\n    const deleteTag = useCallback(\n      (tagPos: number, event: React.SyntheticEvent, refocus = false) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ] as HvTagProps[];\n        setValue(newTagsArr);\n        if (refocus) {\n          setTimeout(() => focusUtils.focusChild(tagPos), 10);\n        }\n        performValidation(newTagsArr);\n        onDelete?.(event, value[tagPos] as HvTagProps, tagPos);\n        onChange?.(event, newTagsArr);\n        skipReset.current = true;\n      },\n      [focusUtils, onChange, onDelete, performValidation, setValue, value],\n    );\n\n    /**\n     * Adds a Tag to the array of tags.\n     * Also executes the user provided onAdd and onDelete events.\n     */\n    const addTag = useCallback(\n      (event: React.SyntheticEvent, tagInput?: string) => {\n        event.preventDefault();\n        const tag = tagInput ?? inputRef.current?.value ?? \"\";\n        if (tag === \"\") return;\n\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag] as HvTagProps[];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n        inputRef.current!.value = \"\";\n      },\n      [onAdd, onChange, performValidation, setValue, value],\n    );\n\n    const canShowError =\n      (status !== undefined &&\n        status === \"invalid\" &&\n        statusMessage !== undefined) ||\n      !stateValid;\n\n    useEffect(() => {\n      if (skipReset.current || !inputRef.current) return;\n      inputRef.current.value = \"\";\n      skipReset.current = false;\n    }, [value]);\n\n    const isMounted = useIsMounted();\n\n    const focusInput = () => {\n      inputRef.current?.focus();\n    };\n\n    const getSuggestions = useCallback(\n      (li: number) => {\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      [elementId],\n    );\n\n    /**\n     * Clears the suggestion array.\n     */\n    const suggestionClearHandler = useCallback(() => {\n      if (isMounted.current) {\n        setSuggestionValues(null);\n      }\n    }, [isMounted]);\n\n    /**\n     * Fills of the suggestion array.\n     */\n    const suggestionHandler = useCallback(\n      (val: string) => {\n        const suggestionsArray = suggestionListCallback?.(val);\n        if (suggestionsArray?.[0]?.label) {\n          setSuggestionValues(suggestionsArray);\n        } else {\n          suggestionClearHandler();\n        }\n      },\n      [suggestionClearHandler, suggestionListCallback],\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        addTag(event, item.value || String(item.label));\n\n        focusInput();\n        suggestionClearHandler();\n      };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (\n      event: React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (isKey(event, \"Esc\")) {\n        suggestionClearHandler();\n        focusInput();\n      } else if (isKey(event, \"Tab\")) {\n        suggestionClearHandler();\n      }\n    };\n\n    /**\n     * Handler for the `onChange` event on the tag input\n     */\n    const onChangeHandler = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\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(event.target.value);\n        }\n      },\n      [canShowSuggestions, suggestionHandler],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the form element\n     */\n    const onInputKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n          addTag(event);\n        }\n      },\n      [addTag, canShowSuggestions, commitTagOn],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the list container.\n     */\n    const onKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent) => {\n        const tagInput = inputRef.current?.value || \"\";\n        if (tagInput === \"\") {\n          switch (event.code) {\n            case \"ArrowLeft\":\n              focusUtils.focusPrevious();\n              return;\n            case \"ArrowRight\":\n              focusUtils.focusNext();\n              return;\n            case \"End\":\n              focusUtils.focusLast();\n              return;\n            case \"Home\":\n              focusUtils.focusFirst();\n              return;\n            case \"Backspace\":\n            case \"Delete\": {\n              // if a tag is focused, its onDelete will be called instead\n              if (document.activeElement === inputRef.current) {\n                deleteTag(value.length - 1, event);\n              }\n              return;\n            }\n            default:\n              return;\n          }\n        }\n\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            return;\n          case \"Enter\":\n            if (\n              canShowSuggestions &&\n              suggestionsLoose &&\n              (suggestionValidation?.(tagInput) || !suggestionValidation)\n            ) {\n              addTag(event);\n              focusInput();\n              suggestionClearHandler();\n            }\n            return;\n          default:\n            return;\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        focusUtils,\n        getSuggestions,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\n        value.length,\n      ],\n    );\n\n    /**\n     * Handler for the `onDelete` event on the tag component\n     */\n    const onDeleteTagHandler = useCallback(\n      (event: React.MouseEvent<HTMLElement>, i: number) => {\n        deleteTag(i, event, true);\n        setValidationState(validationStates.standBy);\n      },\n      [deleteTag, setValidationState],\n    );\n\n    /**\n     * Handler for the `onClick` event on the list container\n     */\n    const onContainerClickHandler = useCallback(() => {\n      inputRef.current?.focus();\n      clearTimeout(blurTimeout.current);\n    }, []);\n\n    const onBlurHandler: HvFormElementProps[\"onBlur\"] = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt);\n        }\n        onBlur?.(evt, inputRef.current?.value || \"\");\n      }, 10);\n    };\n\n    const onFocusHandler: HvFormElementProps[\"onFocus\"] = (evt) => {\n      clearTimeout(blurTimeout.current);\n      onFocus?.(evt, inputRef.current?.value || \"\");\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={validationState}\n        required={required}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n          },\n          className,\n        )}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                className={classes.label}\n                id={setId(id, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={textAreaLabel}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                className={classes.description}\n                id={setId(elementId, \"description\")}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        {hasCounter && (\n          <HvCharCounter\n            id={setId(elementId, \"charCounter\")}\n            className={classes.characterCounter}\n            separator={middleCountLabel}\n            currentCharQuantity={value.length}\n            maxCharQuantity={maxTagsQuantity}\n            {...countCharProps}\n          />\n        )}\n\n        {/* eslint-disable jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={forkedContainerRef}\n          className={cx(classes.tagsList, {\n            [classes.error]: canShowError,\n            [classes.resizable]: resizable && multiline,\n            [classes.invalid]: isStateInvalid,\n            [classes.singleLine]: !multiline,\n          })}\n          onKeyDown={onKeyDownHandler}\n          onClick={onContainerClickHandler}\n        >\n          {value?.map((t, i) => {\n            const tag: HvTagProps =\n              typeof t === \"string\" ? { label: t, type: \"semantic\" } : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvTag\n                key={`${label}-${i}`}\n                type={type}\n                label={label}\n                disabled={disabled}\n                tabIndex={-1}\n                className={cx(classes.chipRoot, classes.listItemRoot)}\n                {...(!(readOnly || disabled || type === \"categorical\") && {\n                  onDelete: (event) => onDeleteTagHandler(event, i),\n                })}\n                {...otherProps}\n              />\n            );\n          })}\n          {!disabled && !readOnly && (\n            <input\n              id={setId(elementId, \"input\")}\n              onChange={onChangeHandler}\n              autoComplete=\"off\"\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              className={cx(\n                classes.tagInputContainerRoot,\n                classes.tagInputRoot,\n                classes.input,\n              )}\n              ref={inputRef}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              aria-describedby={\n                ariaDescribedBy ??\n                (description ? setId(elementId, \"description\") : undefined)\n              }\n              {...inputProps}\n              {...others}\n            />\n          )}\n          {!disabled && !readOnly && endAdornment}\n        </div>\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              open={hasSuggestions}\n              anchorEl={containerRef?.current}\n              onClose={suggestionClearHandler}\n              onKeyDown={onSuggestionKeyDown}\n              onSuggestionSelected={suggestionSelectedHandler}\n              suggestionValues={suggestionValues}\n            />\n          </>\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvTagsInput"],"mappings":"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"}
+{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useFocus } from \"../hooks/useFocus\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport type { HvInputProps, HvInputSuggestion } from \"../Input\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport interface HvTagSuggestion extends HvInputSuggestion {}\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends Omit<\n    HvInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"value\" | \"defaultValue\"\n  > {\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n\n  /** The function that will be executed onChange. */\n  onChange?: (event: React.SyntheticEvent, value: HvTagProps[]) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** The validation function that will be executed when adding tags in the suggestions mode. */\n  suggestionValidation?: (value: string) => boolean;\n  /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n  suggestionsLoose?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<HTMLElement, HvTagsInputProps>(\n  function HvTagsInput(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly,\n      disabled,\n      required,\n      label: textAreaLabel,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onAdd,\n      onDelete,\n      onBlur,\n      onFocus,\n      placeholder,\n      endAdornment,\n      hideCounter,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      resizable,\n      inputProps,\n      countCharProps,\n      multiline,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n    const [validationMessage, setValidationMessage] = useControlled(\n      statusMessage,\n      \"\",\n    );\n\n    const [stateValid, setStateValid] = useState(true);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const skipReset = useRef(false);\n    const blurTimeout = useRef<any>(null);\n    const focusUtils = useFocus({ containerRef });\n\n    const forkedContainerRef = useForkRef(ref, containerRef);\n\n    const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n    // suggestions related state\n    const [suggestionValues, setSuggestionValues] = useState<\n      HvTagSuggestion[] | null\n    >(null);\n\n    const isStateInvalid = useMemo(() => {\n      return hasCounter && value.length > maxTagsQuantity;\n    }, [hasCounter, maxTagsQuantity, value.length]);\n\n    const canShowSuggestions = suggestionListCallback != null;\n    const hasSuggestions = !!suggestionValues;\n\n    const errorMessages = useMemo(\n      () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n      [validationMessages],\n    );\n\n    const performValidation = useCallback(\n      (currValue: HvTagProps[]) => {\n        if (\n          maxTagsQuantity !== null &&\n          maxTagsQuantity !== undefined &&\n          currValue.length > maxTagsQuantity\n        ) {\n          setValidationState(validationStates.invalid);\n          setValidationMessage(errorMessages.maxCharError);\n          setStateValid(false);\n        } else {\n          setValidationState(validationStates.valid);\n          setValidationMessage(\"\");\n          setStateValid(true);\n        }\n      },\n      [\n        errorMessages.maxCharError,\n        maxTagsQuantity,\n        setValidationMessage,\n        setValidationState,\n      ],\n    );\n\n    /**\n     * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n     * Also executes the user provided onDelete and onChange events.\n     *\n     * @param {number}  tagPos - the position at which to remove the tag\n     * @param {Event}   event  - the event associated with the delete\n     * @param {boolean} refocus    - whether or not to set the cursor at the end of the array\n     */\n    const deleteTag = useCallback(\n      (tagPos: number, event: React.SyntheticEvent, refocus = false) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ] as HvTagProps[];\n        setValue(newTagsArr);\n        if (refocus) {\n          setTimeout(() => focusUtils.focusChild(tagPos), 10);\n        }\n        performValidation(newTagsArr);\n        onDelete?.(event, value[tagPos] as HvTagProps, tagPos);\n        onChange?.(event, newTagsArr);\n        skipReset.current = true;\n      },\n      [focusUtils, onChange, onDelete, performValidation, setValue, value],\n    );\n\n    /**\n     * Adds a Tag to the array of tags.\n     * Also executes the user provided onAdd and onDelete events.\n     */\n    const addTag = useCallback(\n      (event: React.SyntheticEvent, tagInput?: string) => {\n        event.preventDefault();\n        const tag = tagInput ?? inputRef.current?.value ?? \"\";\n        if (tag === \"\") return;\n\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag] as HvTagProps[];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n        inputRef.current!.value = \"\";\n      },\n      [onAdd, onChange, performValidation, setValue, value],\n    );\n\n    const canShowError =\n      (status !== undefined &&\n        status === \"invalid\" &&\n        statusMessage !== undefined) ||\n      !stateValid;\n\n    useEffect(() => {\n      if (skipReset.current || !inputRef.current) return;\n      inputRef.current.value = \"\";\n      skipReset.current = false;\n    }, [value]);\n\n    const isMounted = useIsMounted();\n\n    const focusInput = () => {\n      inputRef.current?.focus();\n    };\n\n    const getSuggestions = useCallback(\n      (li: number) => {\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      [elementId],\n    );\n\n    /**\n     * Clears the suggestion array.\n     */\n    const suggestionClearHandler = useCallback(() => {\n      if (isMounted.current) {\n        setSuggestionValues(null);\n      }\n    }, [isMounted]);\n\n    /**\n     * Fills of the suggestion array.\n     */\n    const suggestionHandler = useCallback(\n      (val: string) => {\n        const suggestionsArray = suggestionListCallback?.(val);\n        if (suggestionsArray?.[0]?.label) {\n          setSuggestionValues(suggestionsArray);\n        } else {\n          suggestionClearHandler();\n        }\n      },\n      [suggestionClearHandler, suggestionListCallback],\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        addTag(event, item.value || String(item.label));\n\n        focusInput();\n        suggestionClearHandler();\n      };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (\n      event: React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (isKey(event, \"Esc\")) {\n        suggestionClearHandler();\n        focusInput();\n      } else if (isKey(event, \"Tab\")) {\n        suggestionClearHandler();\n      }\n    };\n\n    /**\n     * Handler for the `onChange` event on the tag input\n     */\n    const onChangeHandler = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\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(event.target.value);\n        }\n      },\n      [canShowSuggestions, suggestionHandler],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the form element\n     */\n    const onInputKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n          addTag(event);\n        }\n      },\n      [addTag, canShowSuggestions, commitTagOn],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the list container.\n     */\n    const onKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent) => {\n        const tagInput = inputRef.current?.value || \"\";\n        if (tagInput === \"\") {\n          switch (event.code) {\n            case \"ArrowLeft\":\n              focusUtils.focusPrevious();\n              return;\n            case \"ArrowRight\":\n              focusUtils.focusNext();\n              return;\n            case \"End\":\n              focusUtils.focusLast();\n              return;\n            case \"Home\":\n              focusUtils.focusFirst();\n              return;\n            case \"Backspace\":\n            case \"Delete\": {\n              // if a tag is focused, its onDelete will be called instead\n              if (document.activeElement === inputRef.current) {\n                deleteTag(value.length - 1, event);\n              }\n              return;\n            }\n            default:\n              return;\n          }\n        }\n\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            return;\n          case \"Enter\":\n            if (\n              canShowSuggestions &&\n              suggestionsLoose &&\n              (suggestionValidation?.(tagInput) || !suggestionValidation)\n            ) {\n              addTag(event);\n              focusInput();\n              suggestionClearHandler();\n            }\n            return;\n          default:\n            return;\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        focusUtils,\n        getSuggestions,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\n        value.length,\n      ],\n    );\n\n    /**\n     * Handler for the `onDelete` event on the tag component\n     */\n    const onDeleteTagHandler = useCallback(\n      (event: React.MouseEvent<HTMLElement>, i: number) => {\n        deleteTag(i, event, true);\n        setValidationState(validationStates.standBy);\n      },\n      [deleteTag, setValidationState],\n    );\n\n    /**\n     * Handler for the `onClick` event on the list container\n     */\n    const onContainerClickHandler = useCallback(() => {\n      inputRef.current?.focus();\n      clearTimeout(blurTimeout.current);\n    }, []);\n\n    const onBlurHandler: HvFormElementProps[\"onBlur\"] = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt);\n        }\n        onBlur?.(evt, inputRef.current?.value || \"\");\n      }, 10);\n    };\n\n    const onFocusHandler: HvFormElementProps[\"onFocus\"] = (evt) => {\n      clearTimeout(blurTimeout.current);\n      onFocus?.(evt, inputRef.current?.value || \"\");\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={validationState}\n        required={required}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n          },\n          className,\n        )}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                className={classes.label}\n                id={setId(id, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={textAreaLabel}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                className={classes.description}\n                id={setId(elementId, \"description\")}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        {hasCounter && (\n          <HvCharCounter\n            id={setId(elementId, \"charCounter\")}\n            className={classes.characterCounter}\n            separator={middleCountLabel}\n            currentCharQuantity={value.length}\n            maxCharQuantity={maxTagsQuantity}\n            {...countCharProps}\n          />\n        )}\n\n        {/* eslint-disable jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={forkedContainerRef}\n          className={cx(classes.tagsList, {\n            [classes.error]: canShowError,\n            [classes.resizable]: resizable && multiline,\n            [classes.invalid]: isStateInvalid,\n            [classes.singleLine]: !multiline,\n          })}\n          onKeyDown={onKeyDownHandler}\n          onClick={onContainerClickHandler}\n        >\n          {value?.map((t, i) => {\n            const tag: HvTagProps =\n              typeof t === \"string\" ? { label: t, type: \"semantic\" } : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvTag\n                key={`${label}-${i}`}\n                type={type}\n                label={label}\n                disabled={disabled}\n                tabIndex={-1}\n                className={cx(classes.chipRoot, classes.listItemRoot)}\n                {...(!(readOnly || disabled || type === \"categorical\") && {\n                  onDelete: (event) => onDeleteTagHandler(event, i),\n                })}\n                {...otherProps}\n              />\n            );\n          })}\n          {!disabled && !readOnly && (\n            <input\n              id={setId(elementId, \"input\")}\n              onChange={onChangeHandler}\n              autoComplete=\"off\"\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              className={cx(\n                classes.tagInputContainerRoot,\n                classes.tagInputRoot,\n                classes.input,\n              )}\n              ref={inputRef}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              aria-describedby={\n                ariaDescribedBy ??\n                (description ? setId(elementId, \"description\") : undefined)\n              }\n              {...inputProps}\n              {...others}\n            />\n          )}\n          {!disabled && !readOnly && endAdornment}\n        </div>\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              open={hasSuggestions}\n              anchorEl={containerRef?.current}\n              onClose={suggestionClearHandler}\n              onKeyDown={onSuggestionKeyDown}\n              onSuggestionSelected={suggestionSelectedHandler}\n              suggestionValues={suggestionValues}\n            />\n          </>\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvTagsInput"],"mappings":"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"}

package/dist/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { getElementById } from \"../utils/document\";\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   * @deprecated tooltips already support multiline and can be styled accordingly.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef<\n  // no-indent\n  unknown,\n  HvTooltipProps\n>(function HvTooltip(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n  const [container, setContainer] = useState(() =>\n    getElementById(containerId ?? rootId),\n  );\n\n  // force extra render to get the correct container DOM element\n  useEffect(() => {\n    setContainer(getElementById(containerId ?? rootId));\n  }, [containerId, rootId]);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{ container }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip"],"mappings":";;;;;;;;AAqEO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,OAAO,IAAI,SAAS;AAC5B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,CAAC,WAAW,YAAY,IAAI;AAAA,IAAS,MACzC,eAAe,eAAe,MAAM;AAAA,EACtC;AAGA,YAAU,MAAM;AACD,iBAAA,eAAe,eAAe,MAAM,CAAC;AAAA,EAAA,GACjD,CAAC,aAAa,MAAM,CAAC;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa,EAAE,UAAU;AAAA,MACxB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { getElementById } from \"../utils/document\";\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   * @deprecated tooltips already support multiline and can be styled accordingly.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement<any>;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef<\n  // no-indent\n  unknown,\n  HvTooltipProps\n>(function HvTooltip(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n  const [container, setContainer] = useState(() =>\n    getElementById(containerId ?? rootId),\n  );\n\n  // force extra render to get the correct container DOM element\n  useEffect(() => {\n    setContainer(getElementById(containerId ?? rootId));\n  }, [containerId, rootId]);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{ container }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip"],"mappings":";;;;;;;;AAqEO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,OAAO,IAAI,SAAS;AAC5B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,CAAC,WAAW,YAAY,IAAI;AAAA,IAAS,MACzC,eAAe,eAAe,MAAM;AAAA,EACtC;AAGA,YAAU,MAAM;AACD,iBAAA,eAAe,eAAe,MAAM,CAAC;AAAA,EAAA,GACjD,CAAC,aAAa,MAAM,CAAC;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa,EAAE,UAAU;AAAA,MACxB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}

package/dist/esm/TreeView/internals/hooks/useInstanceEventHandler.js

@@ -13,7 +13,7 @@ function createUseInstanceEventHandler(registryContainer2) {
       new ObjectToBeRetainedByReact()
     );
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(void 0);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/dist/esm/TreeView/internals/hooks/useInstanceEventHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInstanceEventHandler.js","sources":["../../../../../src/TreeView/internals/hooks/useInstanceEventHandler.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { TreeViewAnyPluginSignature, TreeViewUsedEvents } from \"../types\";\nimport { TreeViewEventListener } from \"../types/events\";\nimport { CleanupTracking, UnregisterToken } from \"../utils/CleanupTracking\";\nimport { FinalizationRegistryBasedCleanupTracking } from \"../utils/FinalizationRegistryBasedCleanupTracking\";\nimport { TimerBasedCleanupTracking } from \"../utils/TimerBasedCleanupTracking\";\nimport { UseTreeViewInstanceEventsInstance } from \"./useTreeViewInstanceEvents.types\";\n\ninterface RegistryContainer {\n  registry: CleanupTracking | null;\n}\n\n// We use class to make it easier to detect in heap snapshots by name\nclass ObjectToBeRetainedByReact {}\n\n// Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts\n// Check https://github.com/facebook/react/issues/15317 to get more information\nexport function createUseInstanceEventHandler(\n  registryContainer: RegistryContainer,\n) {\n  let cleanupTokensCounter = 0;\n\n  return function useInstanceEventHandler<\n    Instance extends UseTreeViewInstanceEventsInstance & {\n      $$signature: TreeViewAnyPluginSignature;\n    },\n    E extends keyof TreeViewUsedEvents<Instance[\"$$signature\"]>,\n  >(\n    instance: Instance,\n    eventName: E,\n    handler: TreeViewEventListener<\n      TreeViewUsedEvents<Instance[\"$$signature\"]>[E]\n    >,\n  ) {\n    type Signature = Instance[\"$$signature\"];\n\n    if (registryContainer.registry === null) {\n      registryContainer.registry =\n        typeof FinalizationRegistry !== \"undefined\"\n          ? new FinalizationRegistryBasedCleanupTracking()\n          : new TimerBasedCleanupTracking();\n    }\n\n    const [objectRetainedByReact] = React.useState(\n      new ObjectToBeRetainedByReact(),\n    );\n    const subscription = React.useRef<(() => void) | null>(null);\n    const handlerRef = React.useRef<\n      TreeViewEventListener<TreeViewUsedEvents<Signature>[E]> | undefined\n    >();\n    handlerRef.current = handler;\n    const cleanupTokenRef = React.useRef<UnregisterToken | null>(null);\n\n    if (!subscription.current && handlerRef.current) {\n      const enhancedHandler: TreeViewEventListener<\n        TreeViewUsedEvents<Signature>[E]\n      > = (params, event) => {\n        if (!event.defaultMuiPrevented) {\n          handlerRef.current?.(params, event);\n        }\n      };\n\n      subscription.current = instance.$$subscribeEvent(\n        eventName as string,\n        enhancedHandler,\n      );\n\n      cleanupTokensCounter += 1;\n      cleanupTokenRef.current = { cleanupToken: cleanupTokensCounter };\n\n      registryContainer.registry.register(\n        objectRetainedByReact, // The callback below will be called once this reference stops being retained\n        () => {\n          subscription.current?.();\n          subscription.current = null;\n          cleanupTokenRef.current = null;\n        },\n        cleanupTokenRef.current,\n      );\n    } else if (!handlerRef.current && subscription.current) {\n      subscription.current();\n      subscription.current = null;\n\n      if (cleanupTokenRef.current) {\n        registryContainer.registry.unregister(cleanupTokenRef.current);\n        cleanupTokenRef.current = null;\n      }\n    }\n\n    React.useEffect(() => {\n      if (!subscription.current && handlerRef.current) {\n        const enhancedHandler: TreeViewEventListener<\n          TreeViewUsedEvents<Signature>[E]\n        > = (params, event) => {\n          if (!event.defaultMuiPrevented) {\n            handlerRef.current?.(params, event);\n          }\n        };\n\n        subscription.current = instance.$$subscribeEvent(\n          eventName as string,\n          enhancedHandler,\n        );\n      }\n\n      if (cleanupTokenRef.current && registryContainer.registry) {\n        // If the effect was called, it means that this render was committed\n        // so we can trust the cleanup function to remove the listener.\n        registryContainer.registry.unregister(cleanupTokenRef.current);\n        cleanupTokenRef.current = null;\n      }\n\n      return () => {\n        subscription.current?.();\n        subscription.current = null;\n      };\n    }, [instance, eventName]);\n  };\n}\n\nconst registryContainer: RegistryContainer = { registry: null };\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const unstable_resetCleanupTracking = () => {\n  registryContainer.registry?.reset();\n  registryContainer.registry = null;\n};\n\nexport const useInstanceEventHandler =\n  createUseInstanceEventHandler(registryContainer);\n"],"names":["registryContainer","useInstanceEventHandler"],"mappings":";;;AAcA,MAAM,0BAA0B;AAAC;AAI1B,SAAS,8BACdA,oBACA;AACA,MAAI,uBAAuB;AAE3B,SAAO,SAASC,yBAMd,UACA,WACA,SAGA;AAGID,QAAAA,mBAAkB,aAAa,MAAM;AACvCA,yBAAkB,WAChB,OAAO,yBAAyB,cAC5B,IAAI,yCAAA,IACJ,IAAI,0BAA0B;AAAA,IAAA;AAGhC,UAAA,CAAC,qBAAqB,IAAI,MAAM;AAAA,MACpC,IAAI,0BAA0B;AAAA,IAChC;AACM,UAAA,eAAe,MAAM,OAA4B,IAAI;AACrD,UAAA,aAAa,MAAM,OAEvB;AACF,eAAW,UAAU;AACf,UAAA,kBAAkB,MAAM,OAA+B,IAAI;AAEjE,QAAI,CAAC,aAAa,WAAW,WAAW,SAAS;AACzC,YAAA,kBAEF,CAAC,QAAQ,UAAU;AACjB,YAAA,CAAC,MAAM,qBAAqB;AACnB,qBAAA,UAAU,QAAQ,KAAK;AAAA,QAAA;AAAA,MAEtC;AAEA,mBAAa,UAAU,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAEwB,8BAAA;AACR,sBAAA,UAAU,EAAE,cAAc,qBAAqB;AAE/DA,yBAAkB,SAAS;AAAA,QACzB;AAAA;AAAA,QACA,MAAM;AACJ,uBAAa,UAAU;AACvB,uBAAa,UAAU;AACvB,0BAAgB,UAAU;AAAA,QAC5B;AAAA,QACA,gBAAgB;AAAA,MAClB;AAAA,IACS,WAAA,CAAC,WAAW,WAAW,aAAa,SAAS;AACtD,mBAAa,QAAQ;AACrB,mBAAa,UAAU;AAEvB,UAAI,gBAAgB,SAAS;AAC3BA,2BAAkB,SAAS,WAAW,gBAAgB,OAAO;AAC7D,wBAAgB,UAAU;AAAA,MAAA;AAAA,IAC5B;AAGF,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,aAAa,WAAW,WAAW,SAAS;AACzC,cAAA,kBAEF,CAAC,QAAQ,UAAU;AACjB,cAAA,CAAC,MAAM,qBAAqB;AACnB,uBAAA,UAAU,QAAQ,KAAK;AAAA,UAAA;AAAA,QAEtC;AAEA,qBAAa,UAAU,SAAS;AAAA,UAC9B;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGE,UAAA,gBAAgB,WAAWA,mBAAkB,UAAU;AAGzDA,2BAAkB,SAAS,WAAW,gBAAgB,OAAO;AAC7D,wBAAgB,UAAU;AAAA,MAAA;AAG5B,aAAO,MAAM;AACX,qBAAa,UAAU;AACvB,qBAAa,UAAU;AAAA,MACzB;AAAA,IAAA,GACC,CAAC,UAAU,SAAS,CAAC;AAAA,EAC1B;AACF;AAEA,MAAM,oBAAuC,EAAE,UAAU,KAAK;AAQjD,MAAA,0BACX,8BAA8B,iBAAiB;"}
+{"version":3,"file":"useInstanceEventHandler.js","sources":["../../../../../src/TreeView/internals/hooks/useInstanceEventHandler.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { TreeViewAnyPluginSignature, TreeViewUsedEvents } from \"../types\";\nimport { TreeViewEventListener } from \"../types/events\";\nimport { CleanupTracking, UnregisterToken } from \"../utils/CleanupTracking\";\nimport { FinalizationRegistryBasedCleanupTracking } from \"../utils/FinalizationRegistryBasedCleanupTracking\";\nimport { TimerBasedCleanupTracking } from \"../utils/TimerBasedCleanupTracking\";\nimport { UseTreeViewInstanceEventsInstance } from \"./useTreeViewInstanceEvents.types\";\n\ninterface RegistryContainer {\n  registry: CleanupTracking | null;\n}\n\n// We use class to make it easier to detect in heap snapshots by name\nclass ObjectToBeRetainedByReact {}\n\n// Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts\n// Check https://github.com/facebook/react/issues/15317 to get more information\nexport function createUseInstanceEventHandler(\n  registryContainer: RegistryContainer,\n) {\n  let cleanupTokensCounter = 0;\n\n  return function useInstanceEventHandler<\n    Instance extends UseTreeViewInstanceEventsInstance & {\n      $$signature: TreeViewAnyPluginSignature;\n    },\n    E extends keyof TreeViewUsedEvents<Instance[\"$$signature\"]>,\n  >(\n    instance: Instance,\n    eventName: E,\n    handler: TreeViewEventListener<\n      TreeViewUsedEvents<Instance[\"$$signature\"]>[E]\n    >,\n  ) {\n    type Signature = Instance[\"$$signature\"];\n\n    if (registryContainer.registry === null) {\n      registryContainer.registry =\n        typeof FinalizationRegistry !== \"undefined\"\n          ? new FinalizationRegistryBasedCleanupTracking()\n          : new TimerBasedCleanupTracking();\n    }\n\n    const [objectRetainedByReact] = React.useState(\n      new ObjectToBeRetainedByReact(),\n    );\n    const subscription = React.useRef<(() => void) | null>(null);\n    const handlerRef = React.useRef<\n      TreeViewEventListener<TreeViewUsedEvents<Signature>[E]> | undefined\n    >(undefined);\n    handlerRef.current = handler;\n    const cleanupTokenRef = React.useRef<UnregisterToken | null>(null);\n\n    if (!subscription.current && handlerRef.current) {\n      const enhancedHandler: TreeViewEventListener<\n        TreeViewUsedEvents<Signature>[E]\n      > = (params, event) => {\n        if (!event.defaultMuiPrevented) {\n          handlerRef.current?.(params, event);\n        }\n      };\n\n      subscription.current = instance.$$subscribeEvent(\n        eventName as string,\n        enhancedHandler,\n      );\n\n      cleanupTokensCounter += 1;\n      cleanupTokenRef.current = { cleanupToken: cleanupTokensCounter };\n\n      registryContainer.registry.register(\n        objectRetainedByReact, // The callback below will be called once this reference stops being retained\n        () => {\n          subscription.current?.();\n          subscription.current = null;\n          cleanupTokenRef.current = null;\n        },\n        cleanupTokenRef.current,\n      );\n    } else if (!handlerRef.current && subscription.current) {\n      subscription.current();\n      subscription.current = null;\n\n      if (cleanupTokenRef.current) {\n        registryContainer.registry.unregister(cleanupTokenRef.current);\n        cleanupTokenRef.current = null;\n      }\n    }\n\n    React.useEffect(() => {\n      if (!subscription.current && handlerRef.current) {\n        const enhancedHandler: TreeViewEventListener<\n          TreeViewUsedEvents<Signature>[E]\n        > = (params, event) => {\n          if (!event.defaultMuiPrevented) {\n            handlerRef.current?.(params, event);\n          }\n        };\n\n        subscription.current = instance.$$subscribeEvent(\n          eventName as string,\n          enhancedHandler,\n        );\n      }\n\n      if (cleanupTokenRef.current && registryContainer.registry) {\n        // If the effect was called, it means that this render was committed\n        // so we can trust the cleanup function to remove the listener.\n        registryContainer.registry.unregister(cleanupTokenRef.current);\n        cleanupTokenRef.current = null;\n      }\n\n      return () => {\n        subscription.current?.();\n        subscription.current = null;\n      };\n    }, [instance, eventName]);\n  };\n}\n\nconst registryContainer: RegistryContainer = { registry: null };\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const unstable_resetCleanupTracking = () => {\n  registryContainer.registry?.reset();\n  registryContainer.registry = null;\n};\n\nexport const useInstanceEventHandler =\n  createUseInstanceEventHandler(registryContainer);\n"],"names":["registryContainer","useInstanceEventHandler"],"mappings":";;;AAcA,MAAM,0BAA0B;AAAC;AAI1B,SAAS,8BACdA,oBACA;AACA,MAAI,uBAAuB;AAE3B,SAAO,SAASC,yBAMd,UACA,WACA,SAGA;AAGID,QAAAA,mBAAkB,aAAa,MAAM;AACvCA,yBAAkB,WAChB,OAAO,yBAAyB,cAC5B,IAAI,yCAAA,IACJ,IAAI,0BAA0B;AAAA,IAAA;AAGhC,UAAA,CAAC,qBAAqB,IAAI,MAAM;AAAA,MACpC,IAAI,0BAA0B;AAAA,IAChC;AACM,UAAA,eAAe,MAAM,OAA4B,IAAI;AACrD,UAAA,aAAa,MAAM,OAEvB,MAAS;AACX,eAAW,UAAU;AACf,UAAA,kBAAkB,MAAM,OAA+B,IAAI;AAEjE,QAAI,CAAC,aAAa,WAAW,WAAW,SAAS;AACzC,YAAA,kBAEF,CAAC,QAAQ,UAAU;AACjB,YAAA,CAAC,MAAM,qBAAqB;AACnB,qBAAA,UAAU,QAAQ,KAAK;AAAA,QAAA;AAAA,MAEtC;AAEA,mBAAa,UAAU,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAEwB,8BAAA;AACR,sBAAA,UAAU,EAAE,cAAc,qBAAqB;AAE/DA,yBAAkB,SAAS;AAAA,QACzB;AAAA;AAAA,QACA,MAAM;AACJ,uBAAa,UAAU;AACvB,uBAAa,UAAU;AACvB,0BAAgB,UAAU;AAAA,QAC5B;AAAA,QACA,gBAAgB;AAAA,MAClB;AAAA,IACS,WAAA,CAAC,WAAW,WAAW,aAAa,SAAS;AACtD,mBAAa,QAAQ;AACrB,mBAAa,UAAU;AAEvB,UAAI,gBAAgB,SAAS;AAC3BA,2BAAkB,SAAS,WAAW,gBAAgB,OAAO;AAC7D,wBAAgB,UAAU;AAAA,MAAA;AAAA,IAC5B;AAGF,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,aAAa,WAAW,WAAW,SAAS;AACzC,cAAA,kBAEF,CAAC,QAAQ,UAAU;AACjB,cAAA,CAAC,MAAM,qBAAqB;AACnB,uBAAA,UAAU,QAAQ,KAAK;AAAA,UAAA;AAAA,QAEtC;AAEA,qBAAa,UAAU,SAAS;AAAA,UAC9B;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGE,UAAA,gBAAgB,WAAWA,mBAAkB,UAAU;AAGzDA,2BAAkB,SAAS,WAAW,gBAAgB,OAAO;AAC7D,wBAAgB,UAAU;AAAA,MAAA;AAG5B,aAAO,MAAM;AACX,qBAAa,UAAU;AACvB,qBAAa,UAAU;AAAA,MACzB;AAAA,IAAA,GACC,CAAC,UAAU,SAAS,CAAC;AAAA,EAC1B;AACF;AAEA,MAAM,oBAAuC,EAAE,UAAU,KAAK;AAQjD,MAAA,0BACX,8BAA8B,iBAAiB;"}

package/dist/esm/hooks/useClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.js","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;\n\nexport const useClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: React.RefObject<T>,\n  handler: (event: HvClickOutsideEvent) => void,\n) => {\n  useEffect(() => {\n    const listener = (event: HvClickOutsideEvent) => {\n      const el = ref?.current;\n      const isKeyUp = event.type === \"keyup\";\n      const isEscape = (event as KeyboardEvent).key === \"Escape\";\n\n      if (!el || el.contains((event?.target as Node) || null)) {\n        return {};\n      }\n\n      return isKeyUp ? (isEscape ? handler(event) : null) : handler(event);\n    };\n\n    document.addEventListener(\"click\", listener);\n    document.addEventListener(\"touchstart\", listener);\n    document.addEventListener(\"keyup\", listener);\n\n    return () => {\n      document.removeEventListener(\"click\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n      document.removeEventListener(\"keyup\", listener);\n    };\n  }, [ref, handler]);\n};\n"],"names":[],"mappings":";AAIa,MAAA,kBAAkB,CAC7B,KACA,YACG;AACH,YAAU,MAAM;AACR,UAAA,WAAW,CAAC,UAA+B;AAC/C,YAAM,KAAK,KAAK;AACV,YAAA,UAAU,MAAM,SAAS;AACzB,YAAA,WAAY,MAAwB,QAAQ;AAElD,UAAI,CAAC,MAAM,GAAG,SAAU,OAAO,UAAmB,IAAI,GAAG;AACvD,eAAO,CAAC;AAAA,MAAA;AAGV,aAAO,UAAW,WAAW,QAAQ,KAAK,IAAI,OAAQ,QAAQ,KAAK;AAAA,IACrE;AAES,aAAA,iBAAiB,SAAS,QAAQ;AAClC,aAAA,iBAAiB,cAAc,QAAQ;AACvC,aAAA,iBAAiB,SAAS,QAAQ;AAE3C,WAAO,MAAM;AACF,eAAA,oBAAoB,SAAS,QAAQ;AACrC,eAAA,oBAAoB,cAAc,QAAQ;AAC1C,eAAA,oBAAoB,SAAS,QAAQ;AAAA,IAChD;AAAA,EAAA,GACC,CAAC,KAAK,OAAO,CAAC;AACnB;"}
+{"version":3,"file":"useClickOutside.js","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;\n\nexport const useClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: React.RefObject<T | null>,\n  handler: (event: HvClickOutsideEvent) => void,\n) => {\n  useEffect(() => {\n    const listener = (event: HvClickOutsideEvent) => {\n      const el = ref?.current;\n      const isKeyUp = event.type === \"keyup\";\n      const isEscape = (event as KeyboardEvent).key === \"Escape\";\n\n      if (!el || el.contains((event?.target as Node) || null)) {\n        return {};\n      }\n\n      return isKeyUp ? (isEscape ? handler(event) : null) : handler(event);\n    };\n\n    document.addEventListener(\"click\", listener);\n    document.addEventListener(\"touchstart\", listener);\n    document.addEventListener(\"keyup\", listener);\n\n    return () => {\n      document.removeEventListener(\"click\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n      document.removeEventListener(\"keyup\", listener);\n    };\n  }, [ref, handler]);\n};\n"],"names":[],"mappings":";AAIa,MAAA,kBAAkB,CAC7B,KACA,YACG;AACH,YAAU,MAAM;AACR,UAAA,WAAW,CAAC,UAA+B;AAC/C,YAAM,KAAK,KAAK;AACV,YAAA,UAAU,MAAM,SAAS;AACzB,YAAA,WAAY,MAAwB,QAAQ;AAElD,UAAI,CAAC,MAAM,GAAG,SAAU,OAAO,UAAmB,IAAI,GAAG;AACvD,eAAO,CAAC;AAAA,MAAA;AAGV,aAAO,UAAW,WAAW,QAAQ,KAAK,IAAI,OAAQ,QAAQ,KAAK;AAAA,IACrE;AAES,aAAA,iBAAiB,SAAS,QAAQ;AAClC,aAAA,iBAAiB,cAAc,QAAQ;AACvC,aAAA,iBAAiB,SAAS,QAAQ;AAE3C,WAAO,MAAM;AACF,eAAA,oBAAoB,SAAS,QAAQ;AACrC,eAAA,oBAAoB,cAAc,QAAQ;AAC1C,eAAA,oBAAoB,SAAS,QAAQ;AAAA,IAChD;AAAA,EAAA,GACC,CAAC,KAAK,OAAO,CAAC;AACnB;"}

package/dist/esm/types/generic.js.map

@@ -1 +1 @@
-{"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  HvExtraDeepProps,\n  HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n  /** Custom element type to override the root component */\n  component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  FixComponentProps<\n    Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n  >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n  E extends HTMLElement = HTMLDivElement,\n  K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends {}\n  ? Partial<{\n      [P in keyof T]: DeepPartial<T[P]>;\n    }>\n  : T;\n\n/** This type extends DeepPartial to allow any extra properties */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n  [P in keyof T]: DeepPartial<T[P]> & Record<string, any>;\n}> &\n  Record<string, any>;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n  // TODO: change `React.ReactElement | null` to `React.ReactNode` in v6 (requires ts@5+)\n  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,\n): (props: P & React.RefAttributes<T>) => React.ReactElement | null {\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/70361#issuecomment-2327456092\n  return forwardRef(render as any) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n *    type Props = {\n *      name: string;\n *      age: number;\n *      visible: boolean;\n *    };\n *\n *    // Expect: { name?: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props>;\n *\n *    // Expect: { name: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n  T,\n  K\n> &\n  Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBAEd,QACkE;AAElE,SAAO,WAAW,MAAa;AACjC;"}
+{"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  HvExtraDeepProps,\n  HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n  /** Custom element type to override the root component */\n  component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  FixComponentProps<\n    Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n  >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n  E extends HTMLElement = HTMLDivElement,\n  K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends {}\n  ? Partial<{\n      [P in keyof T]: DeepPartial<T[P]>;\n    }>\n  : T;\n\n/** This type extends DeepPartial to allow any extra properties */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n  [P in keyof T]: DeepPartial<T[P]> & Record<string, any>;\n}> &\n  Record<string, any>;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n  // TODO: change `React.ReactElement | null` to `React.ReactNode` in v6 (requires ts@5+)\n  render: (props: P, ref: React.Ref<T>) => React.ReactElement<any> | null,\n): (props: P & React.RefAttributes<T>) => React.ReactElement<any> | null {\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/70361#issuecomment-2327456092\n  return forwardRef(render as any) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n *    type Props = {\n *      name: string;\n *      age: number;\n *      visible: boolean;\n *    };\n *\n *    // Expect: { name?: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props>;\n *\n *    // Expect: { name: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n  T,\n  K\n> &\n  Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBAEd,QACuE;AAEvE,SAAO,WAAW,MAAa;AACjC;"}

package/dist/types/index.d.ts

@@ -922,7 +922,7 @@ export declare const filterGroupClasses: {
 declare type FixComponentProps<T> = T extends any ? T : never;
 
 /** React.forwardRef with fixed type declarations */
-export declare function fixedForwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+export declare function fixedForwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement<any> | null): (props: P & React.RefAttributes<T>) => React.ReactElement<any> | null;
 
 export declare const focusClasses: {
     root: string;
@@ -1186,7 +1186,7 @@ export declare interface HvAppSwitcherActionApplication {
     /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */
     iconUrl?: string;
     /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */
-    iconElement?: React.ReactElement;
+    iconElement?: React.ReactElement<any>;
     /** Small description of the application. */
     description?: string;
     /**  URL where the application is accessible. */
@@ -1856,7 +1856,7 @@ export declare const HvBox: <C extends React.ElementType = "div">(props: {
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "style" | "component" | "sx"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "style" | "component" | "sx"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactElement | null;
+} & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
 export declare type HvBoxProps<C extends React.ElementType = "div"> = PolymorphicComponentRef<C, {
     style?: React.CSSProperties;
@@ -2000,7 +2000,7 @@ export declare const HvButton: <C extends React.ElementType = "button">(props: {
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactElement | null;
+} & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
 /**
  * Button component is used to trigger an action or event.
@@ -2027,7 +2027,7 @@ export declare const HvButtonBase: <C extends React.ElementType = "button">(prop
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "selected" | "component" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "selected" | "component" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactElement | null;
+} & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
 export declare type HvButtonBaseClasses = ExtractNames<typeof useClasses_3>;
 
@@ -2753,7 +2753,7 @@ export declare interface HvCreateThemeProps extends HvThemeCustomizationProps {
 
 export declare function hvDateColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, dateFormat?: string): HvTableColumnConfig<D, H>;
 
-export declare const HvDateColumnCell: ({ date, dateFormat, }: HvDateColumnCellProp) => JSX.Element;
+export declare const HvDateColumnCell: ({ date, dateFormat, }: HvDateColumnCellProp) => JSX_2.Element;
 
 export declare interface HvDateColumnCellProp {
     /** The date's text representation format. */
@@ -2945,13 +2945,13 @@ export declare interface HvDotPaginationProps extends Omit<HvRadioGroupProps, "c
      *
      * The default icon is `OtherStep`.
      */
-    unselectedIcon?: React.ReactElement;
+    unselectedIcon?: React.ReactElement<any>;
     /**
      * Icon to override the default one used for the selected state.
      *
      * The default icon is `CurrentStep`.
      */
-    selectedIcon?: React.ReactElement;
+    selectedIcon?: React.ReactElement<any>;
     /**
      *  The number of pages the component has.
      */
@@ -3036,7 +3036,7 @@ export declare interface HvDrawerProps extends Omit<DrawerProps, "classes"> {
 /**
  * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.
  */
-export declare const HvDropdown: <Multiple extends boolean = false, OptionValue extends HvListValue = HvListValue>(props: HvDropdownProps<Multiple, OptionValue> & RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const HvDropdown: <Multiple extends boolean = false, OptionValue extends HvListValue = HvListValue>(props: HvDropdownProps<Multiple, OptionValue> & RefAttributes<HTMLDivElement>) => React.ReactElement<any> | null;
 
 export declare type HvDropdownClasses = ExtractNames<typeof useClasses_59>;
 
@@ -3133,7 +3133,7 @@ export declare type HvDropDownMenuClasses = ExtractNames<typeof useClasses_24>;
 
 export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement, "onClick" | "onToggle"> {
     /** Icon. */
-    icon?: React.ReactElement;
+    icon?: React.ReactElement<any>;
     /**
      * A list containing the elements to be rendered.
      *
@@ -3441,7 +3441,7 @@ export declare interface HvFileUploaderLabels extends HvDropZoneLabels {
  * The `HvFileUploaderPreview` component is available to facilitate the styling
  * of the button (when clickable) and the detection of image unloading.
  */
-export declare const HvFileUploaderPreview: (props: HvFileUploaderPreviewProps) => JSX_2.Element;
+export declare const HvFileUploaderPreview: (props: HvFileUploaderPreviewProps) => string | number | boolean | Iterable<ReactNode> | JSX_2.Element | null | undefined;
 
 export declare type HvFileUploaderPreviewClasses = ExtractNames<typeof useClasses_70>;
 
@@ -3449,7 +3449,7 @@ export declare interface HvFileUploaderPreviewProps extends Omit<HvButtonProps,
     /**
      * Content that represents the preview of an uploaded file.
      */
-    children: React.ReactElement;
+    children: React.ReactNode;
     /**
      * Callback executed when the preview is unmounted.
      *
@@ -3622,7 +3622,7 @@ export declare const HvFocus: ({ classes: classesProp, children, configuration,
 export declare type HvFocusClasses = ExtractNames<typeof useClasses_4>;
 
 export declare interface HvFocusProps extends HvBaseProps<HTMLElement, "children"> {
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     /** Extra configuration for the child element. */
     configuration?: {
         tabIndex?: number;
@@ -3634,7 +3634,7 @@ export declare interface HvFocusProps extends HvBaseProps<HTMLElement, "children
     /** Whether the focus is disabled. */
     disabled?: boolean;
     /** The reference to the root element to hold all Focus' context. */
-    rootRef?: React.RefObject<HTMLElement>;
+    rootRef?: React.RefObject<HTMLElement | null>;
     /** Show focus when click element. v */
     focusOnClick?: boolean;
     /** Show focus when click element. v */
@@ -4026,7 +4026,7 @@ export declare const HvIconButton: <C extends React.ElementType = "button">(prop
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T_2 ? T_2 extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T_2 extends any ? T_2 : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> ? T_1 extends any ? T_1 : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactElement | null;
+} & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
 export declare type HvIconButtonProps<C extends React.ElementType = "button"> = PolymorphicComponentRef<C, Omit<HvButtonProps<C>, "icon" | "focusableWhenDisabled" | "title" | "startIcon" | "endIcon" | "children" | "ref" | "component"> & {
     /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */
@@ -4099,7 +4099,7 @@ export declare interface HvInfoMessageProps extends HvTypographyProps<"label"> {
  * An Inline Editor allows the user to edit a record without making a major switch
  * between viewing and editing, making it an efficient method of updating a record.
  */
-export declare const HvInlineEditor: <C extends React.ElementType = <InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement>(props: HvInputProps<InputElement> & RefAttributes<InputElement>) => React.ReactElement | null>(props: {
+export declare const HvInlineEditor: <C extends React.ElementType = <InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement>(props: HvInputProps<InputElement> & RefAttributes<InputElement>) => React.ReactElement<any> | null>(props: {
     /** The value of the form element. */
     value?: string;
     /** The default value of the form element. */
@@ -4141,7 +4141,7 @@ export declare const HvInlineEditor: <C extends React.ElementType = <InputElemen
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "value" | "classes" | "placeholder" | "disabled" | "variant" | "component" | "onBlur" | "onChange" | "onKeyDown" | "defaultValue" | "buttonProps" | "showIcon" | "typographyProps"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "value" | "classes" | "placeholder" | "disabled" | "variant" | "component" | "onBlur" | "onChange" | "onKeyDown" | "defaultValue" | "buttonProps" | "showIcon" | "typographyProps"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactElement | null;
+} & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
 export declare type HvInlineEditorClasses = ExtractNames<typeof useClasses_85>;
 
@@ -4175,7 +4175,7 @@ export declare type HvInlineEditorProps<C extends React.ElementType = typeof HvI
 /**
  * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.
  */
-export declare const HvInput: <InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement>(props: HvInputProps<InputElement> & RefAttributes<InputElement>) => React.ReactElement | null;
+export declare const HvInput: <InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement>(props: HvInputProps<InputElement> & RefAttributes<InputElement>) => React.ReactElement<any> | null;
 
 export declare type HvInputClasses = ExtractNames<typeof useClasses_47>;
 
@@ -4665,7 +4665,7 @@ export declare function hvNumberColumn<D extends object = Record<string, unknown
 
 export declare const hvNumberFallback: (value: any) => number | "—";
 
-export declare const HvOption: <OptionValue extends {}>(props: HvOptionProps<OptionValue> & RefAttributes<HTMLLIElement>) => React.ReactElement | null;
+export declare const HvOption: <OptionValue extends {}>(props: HvOptionProps<OptionValue> & RefAttributes<HTMLLIElement>) => React.ReactElement<any> | null;
 
 /**
  * Optional
@@ -4814,7 +4814,7 @@ export declare type HvProgressBarStatus = "inProgress" | "completed" | "error";
 
 export declare function hvProgressColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, getPartial?: (row: HvRowInstance<D, H>) => number, getTotal?: (row: HvRowInstance<D, H>) => number, color?: "primary" | "secondary"): HvTableColumnConfig<D, H>;
 
-export declare const HvProgressColumnCell: ({ partial, total, color, "aria-labelledby": ariaLabelledBy, }: HvProgressColumnCellProp) => JSX.Element;
+export declare const HvProgressColumnCell: ({ partial, total, color, "aria-labelledby": ariaLabelledBy, }: HvProgressColumnCellProp) => JSX_2.Element;
 
 export declare interface HvProgressColumnCellProp {
     /** Current value of the bar. */
@@ -5575,7 +5575,7 @@ export declare interface HvSectionProps extends Omit<HvBaseProps<HTMLDivElement>
  *   <HvOption value="cat">Cat</HvOption>
  * </HvSelect>
  * */
-export declare const HvSelect: <OptionValue extends {}, Multiple extends boolean = false>(props: HvSelectProps<OptionValue, Multiple> & RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const HvSelect: <OptionValue extends {}, Multiple extends boolean = false>(props: HvSelectProps<OptionValue, Multiple> & RefAttributes<HTMLButtonElement>) => React.ReactElement<any> | null;
 
 export declare type HvSelectClasses = ExtractNames<typeof useClasses_13>;
 
@@ -6041,7 +6041,7 @@ export declare type HvSwitchClasses = ExtractNames<typeof useClasses_110>;
 
 export declare function hvSwitchColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, switchLabel: string, falseLabel?: string, trueLabel?: string, switchProps?: HvBaseSwitchProps): HvTableColumnConfig<D, H>;
 
-export declare const HvSwitchColumnCell: ({ checked, value, switchLabel, falseLabel, trueLabel, switchProps, }: HvSwitchColumnCellProp) => JSX.Element;
+export declare const HvSwitchColumnCell: ({ checked, value, switchLabel, falseLabel, trueLabel, switchProps, }: HvSwitchColumnCellProp) => JSX_2.Element;
 
 export declare interface HvSwitchColumnCellProp {
     /** Whether the switch is checked or not. */
@@ -6468,7 +6468,7 @@ export declare interface HvTabProps extends Omit<TabProps, "children"> {
     /** If `true`, the tab will be disabled. */
     disabled?: boolean;
     /** The icon element. */
-    icon?: React.ReactElement | string;
+    icon?: React.ReactElement<any> | string;
     /** The label element. */
     label?: React.ReactNode;
     /** The position of the icon relative to the label. */
@@ -6533,7 +6533,7 @@ export declare interface HvTagProps extends Omit<HvButtonBaseProps, "type" | "co
     /** The color variant of the tag */
     color?: HvColorAny;
     /** Icon used to customize the delete icon */
-    deleteIcon?: React.ReactElement;
+    deleteIcon?: React.ReactElement<any>;
     /**
      * The callback fired when the delete icon is pressed.
      * This function has to be provided to the component, in order to render the delete icon
@@ -6791,7 +6791,7 @@ export declare const HvTimeAgo: <C extends React.ElementType = "p">(props: {
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component" | "locale" | "emptyElement" | "showSeconds" | "timestamp" | "disableRefresh" | "justText"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component" | "locale" | "emptyElement" | "showSeconds" | "timestamp" | "disableRefresh" | "justText"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactElement | null;
+} & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
 export declare type HvTimeAgoClasses = ExtractNames<typeof useClasses_120>;
 
@@ -6949,7 +6949,7 @@ export declare interface HvTooltipProps extends Omit<TooltipProps, "classes"> {
     /**
      * Node to apply the tooltip.
      */
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     /**
      * Id attribute value of an HTML Element to have the tooltip appended to it.
      */
@@ -7030,7 +7030,7 @@ export declare interface HvTreeItemProps extends React.HTMLAttributes<HTMLElemen
  * </HvTreeView>
  * ```
  */
-export declare const HvTreeView: <Multiple extends boolean | undefined>(props: HvTreeViewProps<Multiple> & RefAttributes<HTMLUListElement>) => React.ReactElement | null;
+export declare const HvTreeView: <Multiple extends boolean | undefined>(props: HvTreeViewProps<Multiple> & RefAttributes<HTMLUListElement>) => React.ReactElement<any> | null;
 
 export declare type HvTreeViewClasses = ExtractNames<typeof useClasses_122>;
 
@@ -7106,7 +7106,7 @@ export declare const HvTypography: <C extends React.ElementType = "p">(props: {
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "variant" | "component" | "noWrap" | "paragraph"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "variant" | "component" | "noWrap" | "paragraph"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactElement | null;
+} & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
 export declare type HvTypographyClasses = ExtractNames<typeof useClasses_2>;
 
@@ -10326,7 +10326,7 @@ declare const useClasses_99: (classesProp?: Partial<Record<"text" | "root" | "se
     readonly cx: (...args: any) => string;
 };
 
-export declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: React.RefObject<T>, handler: (event: HvClickOutsideEvent) => void) => void;
+export declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: React.RefObject<T | null>, handler: (event: HvClickOutsideEvent) => void) => void;
 
 export declare const useComputation: (valueFn: Function, valueFallback?: Function) => (Function | undefined)[];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.91.1",
+  "version": "5.91.2",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -25,17 +25,17 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.12.2",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@mui/material": "^5.16.14",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-icons": "^5.14.3",
-    "@hitachivantara/uikit-react-shared": "^5.3.28",
-    "@hitachivantara/uikit-react-utils": "^0.2.29",
-    "@hitachivantara/uikit-styles": "^5.44.1",
+    "@hitachivantara/uikit-react-icons": "^5.14.4",
+    "@hitachivantara/uikit-react-shared": "^5.3.29",
+    "@hitachivantara/uikit-react-utils": "^0.2.30",
+    "@hitachivantara/uikit-styles": "^5.44.2",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -62,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "f5d115c12ef1f285c3ddcb34c0e7fbfd8df3666f",
+  "gitHead": "223ba8f31c9f8bae7aa56087ce03602518ebb2a9",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/dist/cjs/BaseCheckBox/icons.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Box = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
-};
-const Check = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z" }) });
-};
-const Partial = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3,8l8,0l0,-2l-8,0l0,2z" }) });
-};
-exports.Box = Box;
-exports.Check = Check;
-exports.Partial = Partial;

package/dist/cjs/BaseRadio/icons.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Selected = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "m7,11a4,4 0 0 1 -4,-4a4,4 0 0 1 4,-4a4,4 0 0 1 4,4a4,4 0 0 1 -4,4",
-      fill: "currentcolor"
-    }
-  ) });
-};
-const Unselected = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg" });
-};
-exports.Selected = Selected;
-exports.Unselected = Unselected;

package/dist/esm/BaseCheckBox/icons.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-const Box = () => {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
-};
-const Check = () => {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z" }) });
-};
-const Partial = () => {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m3,8l8,0l0,-2l-8,0l0,2z" }) });
-};
-export {
-  Box,
-  Check,
-  Partial
-};

package/dist/esm/BaseCheckBox/icons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.js","sources":["../../../src/BaseCheckBox/icons.tsx"],"sourcesContent":["export const Box = () => {\n  return (\n    <svg viewBox=\"0 0 14 14\" fill=\"currentColor\">\n      <path d=\"m0,0l16,0l0,16l-16,0l0,-16z\" />\n    </svg>\n  );\n};\n\nexport const Check = () => {\n  return (\n    <svg viewBox=\"0 0 14 14\" fill=\"currentColor\">\n      <path d=\"m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z\" />\n    </svg>\n  );\n};\n\nexport const Partial = () => {\n  return (\n    <svg viewBox=\"0 0 14 14\" fill=\"currentColor\">\n      <path d=\"m3,8l8,0l0,-2l-8,0l0,2z\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";AAAO,MAAM,MAAM,MAAM;AAErB,SAAA,oBAAC,OAAI,EAAA,SAAQ,aAAY,MAAK,gBAC5B,UAAC,oBAAA,QAAA,EAAK,GAAE,8BAAA,CAA8B,EACxC,CAAA;AAEJ;AAEO,MAAM,QAAQ,MAAM;AAEvB,SAAA,oBAAC,OAAI,EAAA,SAAQ,aAAY,MAAK,gBAC5B,UAAC,oBAAA,QAAA,EAAK,GAAE,4EAAA,CAA4E,EACtF,CAAA;AAEJ;AAEO,MAAM,UAAU,MAAM;AAEzB,SAAA,oBAAC,OAAI,EAAA,SAAQ,aAAY,MAAK,gBAC5B,UAAC,oBAAA,QAAA,EAAK,GAAE,0BAAA,CAA0B,EACpC,CAAA;AAEJ;"}