@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/cjs/components/TagsInput/TagsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\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 label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\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  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\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  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\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 suggestion */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\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 = (props: HvTagsInputProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = [],\n    readOnly = false,\n    disabled = false,\n    required = false,\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    hideCounter = false,\n    middleCountLabel = \"/\",\n    maxTagsQuantity,\n    autoFocus = false,\n    resizable = true,\n    inputProps = {},\n    countCharProps = {},\n    multiline = false,\n    status,\n    statusMessage,\n    validationMessages,\n    commitTagOn = [\"Enter\"],\n    commitOnBlur = false,\n    suggestionListCallback,\n    ...others\n  } = useDefaultProps(\"HvTagsInput\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvTagsInput\");\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(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\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) => {\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} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, 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   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\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 (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (isNil(container)) return;\n        container.scrollLeft = element\n          ? element.offsetLeft -\n            container.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n  }, [multiline, tagCursorPos]);\n\n  useEffect(() => {\n    if (!skipReset.current) {\n      setTagInput(\"\");\n      setTagCursorPos(value.length);\n    }\n    skipReset.current = false;\n  }, [value]);\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    materialInputRef.current.focus();\n  };\n\n  const getSuggestions = useCallback(\n    (li) => {\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) => {\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 = (event, item) => {\n    addTag(event, item.value || item.label);\n\n    // set the input value (only when value is uncontrolled)\n    setTagInput(item.value || item.label);\n\n    focusInput();\n    suggestionClearHandler();\n  };\n\n  /**\n   * Handler for the `onKeyDown` event on the suggestions component\n   */\n  const onSuggestionKeyDown = (event) => {\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    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\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) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\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    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\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        { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n        className\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\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      <HvListContainer\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        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={cx({ [classes.singleLine]: !multiline })}\n                classes={{\n                  gutters: classes.listItemGutters,\n                  root: classes.listItemRoot,\n                }}\n                id={setId(elementId, `tag-${i}`)}\n              >\n                <HvTag\n                  label={label}\n                  className={cx({ [classes.tagSelected]: i === tagCursorPos })}\n                  classes={{\n                    chipRoot: classes.chipRoot,\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  {...otherProps}\n                />\n              </HvListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <HvListItem\n            className={cx(\n              {\n                [classes.singleLine]: !multiline,\n                [classes.tagInputRootEmpty]: value.length === 0,\n              },\n              !!isTagSelected &&\n                css({\n                  [`& .${baseInputClasses.inputRoot}`]: {\n                    backgroundColor: theme.colors.atmo1,\n                  },\n                })\n            )}\n            classes={{\n              root: classes.tagInputContainerRoot,\n              gutters: classes.listItemGutters,\n            }}\n            id={setId(elementId, `tag-${value.length}`)}\n          >\n            <HvInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={cx({\n                [classes.singleLine]: !multiline,\n              })}\n              classes={{\n                root: classes.tagInputRoot,\n                input: classes.input,\n                inputBorderContainer: classes.tagInputBorderContainer,\n                inputRootFocused: classes.tagInputRootFocused,\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              {...others}\n            />\n          </HvListItem>\n        )}\n      </HvListContainer>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvTagsInput","props","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","labelContainer","_jsx","HvLabel","htmlFor","HvInfoMessage","HvCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","HvListContainer","tagsList","error","singleLine","onKeyDown","onClick","ref","map","t","otherProps","HvListItem","tabIndex","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","deleteButtonProps","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","HvWarningText","disableBorder"],"mappings":"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"}
+{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\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 label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\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  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\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  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\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 suggestion */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\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 = (props: HvTagsInputProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = [],\n    readOnly = false,\n    disabled = false,\n    required = false,\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    hideCounter = false,\n    middleCountLabel = \"/\",\n    maxTagsQuantity,\n    autoFocus = false,\n    resizable = true,\n    inputProps = {},\n    countCharProps = {},\n    multiline = false,\n    status,\n    statusMessage,\n    validationMessages,\n    commitTagOn = [\"Enter\"],\n    commitOnBlur = false,\n    suggestionListCallback,\n    ...others\n  } = useDefaultProps(\"HvTagsInput\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvTagsInput\");\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(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\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) => {\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} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, 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   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\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 (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (isNil(container)) return;\n        container.scrollLeft = element\n          ? element.offsetLeft -\n            container.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n  }, [multiline, tagCursorPos]);\n\n  useEffect(() => {\n    if (!skipReset.current) {\n      setTagInput(\"\");\n      setTagCursorPos(value.length);\n    }\n    skipReset.current = false;\n  }, [value]);\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    materialInputRef.current.focus();\n  };\n\n  const getSuggestions = useCallback(\n    (li) => {\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) => {\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 = (event, item) => {\n    addTag(event, item.value || item.label);\n\n    // set the input value (only when value is uncontrolled)\n    setTagInput(item.value || item.label);\n\n    focusInput();\n    suggestionClearHandler();\n  };\n\n  /**\n   * Handler for the `onKeyDown` event on the suggestions component\n   */\n  const onSuggestionKeyDown = (event) => {\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    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\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) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\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    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\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        { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n        className\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\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      <HvListContainer\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        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={cx({ [classes.singleLine]: !multiline })}\n                classes={{\n                  gutters: classes.listItemGutters,\n                  root: classes.listItemRoot,\n                }}\n                id={setId(elementId, `tag-${i}`)}\n              >\n                <HvTag\n                  label={label}\n                  className={cx({ [classes.tagSelected]: i === tagCursorPos })}\n                  classes={{\n                    chipRoot: classes.chipRoot,\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  {...otherProps}\n                />\n              </HvListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <HvListItem\n            className={cx(\n              {\n                [classes.singleLine]: !multiline,\n                [classes.tagInputRootEmpty]: value.length === 0,\n              },\n              !!isTagSelected &&\n                css({\n                  [`& .${baseInputClasses.inputRoot}`]: {\n                    backgroundColor: theme.colors.atmo1,\n                  },\n                })\n            )}\n            classes={{\n              root: classes.tagInputContainerRoot,\n              gutters: classes.listItemGutters,\n            }}\n            id={setId(elementId, `tag-${value.length}`)}\n          >\n            <HvInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={cx({\n                [classes.singleLine]: !multiline,\n              })}\n              classes={{\n                root: classes.tagInputRoot,\n                input: classes.input,\n                inputBorderContainer: classes.tagInputBorderContainer,\n                inputRootFocused: classes.tagInputRootFocused,\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              {...others}\n            />\n          </HvListItem>\n        )}\n      </HvListContainer>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvTagsInput","props","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","jsxs","labelContainer","HvLabel","jsx","HvInfoMessage","HvCharCounter","characterCounter","HvListContainer","tagsList","error","singleLine","map","t","otherProps","HvListItem","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","tabIndex","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","ref","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","parentElement","HvWarningText"],"mappings":"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"}

package/dist/cjs/components/TextArea/TextArea.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const isNil = require("lodash/isNil");
@@ -10,7 +11,6 @@ const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const validations = require("../BaseInput/validations.cjs");
 const TextArea_styles = require("./TextArea.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const CharCounter = require("../Forms/CharCounter/CharCounter.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
@@ -157,76 +157,31 @@ const HvTextArea = React.forwardRef((props, ref) => {
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-    id,
-    name,
-    status: validationState,
-    disabled,
-    required,
-    readOnly,
-    className: cx(classes.root, {
-      [classes.resizable]: resizable,
-      [classes.disabled]: disabled,
-      [classes.invalid]: isStateInvalid
-    }, className),
-    onBlur: onContainerBlurHandler,
-    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.labelContainer,
-      children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-        className: classes.label,
-        id: setId.setId(id, "label"),
-        htmlFor: setId.setId(elementId, "input"),
-        label
-      }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
-        className: classes.description,
-        id: setId.setId(elementId, "description"),
-        children: description
-      })]
-    }), hasCounter && /* @__PURE__ */ jsxRuntime.jsx(CharCounter.HvCharCounter, {
-      id: setId.setId(elementId, "charCounter"),
-      className: classes.characterCounter,
-      separator: middleCountLabel,
-      currentCharQuantity: value.length,
-      maxCharQuantity,
-      ...countCharProps
-    }), /* @__PURE__ */ jsxRuntime.jsx(BaseInput.HvBaseInput, {
-      classes: {
-        root: classes.baseInput,
-        input: classes.input,
-        inputResizable: classes.inputResizable
-      },
-      id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"),
-      name,
-      value,
-      required,
-      readOnly,
-      disabled,
-      onChange: onChangeHandler,
-      autoFocus,
-      onFocus: onFocusHandler,
-      placeholder,
-      invalid: isStateInvalid,
-      resizable,
-      multiline: true,
-      rows,
-      inputProps: {
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-invalid": isStateInvalid ? true : void 0,
-        "aria-errormessage": errorMessageId,
-        "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
-        "aria-controls": maxCharQuantity ? setId.setId(elementId, "charCounter") : void 0,
-        ...inputProps
-      },
-      inputRef: forkedRef,
-      ...others
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-      id: setId.setId(elementId, "error"),
-      className: classes.error,
-      disableBorder: true,
-      children: validationMessage
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, status: validationState, disabled, required, readOnly, className: cx(classes.root, {
+    [classes.resizable]: resizable,
+    [classes.disabled]: disabled,
+    [classes.invalid]: isStateInvalid
+  }, className), onBlur: onContainerBlurHandler, children: [
+    (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+      hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { className: classes.label, id: setId.setId(id, "label"), htmlFor: setId.setId(elementId, "input"), label }),
+      hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { className: classes.description, id: setId.setId(elementId, "description"), children: description })
+    ] }),
+    hasCounter && /* @__PURE__ */ jsxRuntime.jsx(CharCounter.HvCharCounter, { id: setId.setId(elementId, "charCounter"), className: classes.characterCounter, separator: middleCountLabel, currentCharQuantity: value.length, maxCharQuantity, ...countCharProps }),
+    /* @__PURE__ */ jsxRuntime.jsx(BaseInput.HvBaseInput, { classes: {
+      root: classes.baseInput,
+      input: classes.input,
+      inputResizable: classes.inputResizable
+    }, id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"), name, value, required, readOnly, disabled, onChange: onChangeHandler, autoFocus, onFocus: onFocusHandler, placeholder, invalid: isStateInvalid, resizable, multiline: true, rows, inputProps: {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-invalid": isStateInvalid ? true : void 0,
+      "aria-errormessage": errorMessageId,
+      "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
+      "aria-controls": maxCharQuantity ? setId.setId(elementId, "charCounter") : void 0,
+      ...inputProps
+    }, inputRef: forkedRef, ...others }),
+    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), className: classes.error, disableBorder: true, children: validationMessage })
+  ] });
 });
 exports.textAreaClasses = TextArea_styles.staticClasses;
 exports.HvTextArea = HvTextArea;

package/dist/cjs/components/TextArea/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport validationStates, {\n  isInvalid,\n} from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"@core/types/forms\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"@core/components/BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"@core/components/BaseInput\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TextArea.styles\";\n\nexport { staticClasses as textAreaClasses };\n\nexport type HvTextAreaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTextAreaProps\n  extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"rows\" | \"classes\" | \"onFocus\"\n  > {\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel?: string;\n  /**\n   * An Object containing the various texts associated with the input.\n   */\n  validationMessages?: HvValidationMessages;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxCharQuantity?: number;\n  /**\n   * The minimum allowed length of the characters, if this value is null no check\n   * will be perform.\n   */\n  minCharQuantity?: number;\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus?: boolean;\n  /**\n   * The number of rows of the text area\n   */\n  rows?: number;\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable?: boolean;\n  /**\n   * Auto-scroll: automatically scroll to the end on value changes.\n   * Will stop if the user scrolls up and resume if scrolled to the bottom.\n   */\n  autoScroll?: boolean;\n  /**\n   * If true it isn't possible to pass the `maxCharQuantity`\n   */\n  blockMax?: boolean;\n  /**\n   * If `true` the character counter isn't shown even if maxCharQuantity is set.\n   */\n  hideCounter?: boolean;\n  /**\n   * Props passed to the char count.\n   */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /**\n   * Called back when the value is changed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /**\n   * Called back when the value is changed.\n   */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvTextAreaClasses;\n}\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nexport const HvTextArea = forwardRef<any, HvTextAreaProps>((props, ref) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    name,\n    label,\n    description,\n    placeholder,\n    status,\n    statusMessage,\n    validationMessages,\n    maxCharQuantity,\n    minCharQuantity,\n    value: valueProp,\n    inputRef: inputRefProp,\n    rows = 1,\n    defaultValue = \"\",\n    middleCountLabel = \"/\",\n    countCharProps = {},\n    inputProps = {},\n    required = false,\n    readOnly = false,\n    disabled = false,\n    autoFocus = false,\n    resizable = false,\n    autoScroll = false,\n    hideCounter = false,\n    blockMax = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    validation,\n    onChange,\n    onBlur,\n    onFocus,\n    ...others\n  } = useDefaultProps(\"HvTextArea\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvtextarea\");\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef<boolean>(false);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const forkedRef = useForkRef(ref, inputRefProp, inputRef);\n\n  const [focused, setFocused] = useState<boolean>(false);\n\n  const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  const hasCounter = maxCharQuantity != null && !hideCounter;\n\n  // ValidationMessages reference tends to change, as users will not memorize/useState for it;\n  // Dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages]\n  );\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationTypes.none,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    inputRef,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    value,\n  ]);\n\n  const isOverflow = (currentValue) =>\n    isNil(maxCharQuantity) ? false : currentValue.length > maxCharQuantity;\n\n  /**\n   * Limit the string to the maxCharQuantity length.\n   *\n   * @param value - string to evaluate\n   * @returns {string|*} - string according the limit\n   */\n  const limitValue = (currentValue) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    return !isOverflow(currentValue)\n      ? currentValue\n      : currentValue.substring(0, maxCharQuantity);\n  };\n\n  /**\n   * Validates the text area updating the state and modifying the warning text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   *\n   * @returns {undefined}\n   */\n  const onContainerBlurHandler = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the length of the string while is being inputted, also executes the user onChange\n   * allowing the customization of the input if required.\n   *\n   * @param {String} value - The value provided by the HvInput\n   */\n  const onChangeHandler = (event, currentValue) => {\n    isDirty.current = true;\n\n    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n    // Set the input value (only when value is uncontrolled)\n    setValue(limitedValue);\n\n    onChange?.(event, limitedValue);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler = (event) => {\n    setFocused(true);\n\n    // Reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const isScrolledDown = useCallback(() => {\n    const el = inputRef.current;\n    return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;\n  }, [inputRef]);\n\n  const scrollDown = useCallback(() => {\n    const el = inputRef.current;\n    if (el != null) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [inputRef]);\n\n  const addScrollListener = useCallback(() => {\n    const scrollHandler = {\n      handleEvent: () => {\n        setAutoScrolling(isScrolledDown());\n      },\n    };\n    inputRef.current?.addEventListener(\"scroll\", scrollHandler);\n  }, [inputRef, isScrolledDown]);\n\n  useEffect(() => {\n    if (autoScroll) {\n      addScrollListener();\n    }\n  }, [autoScroll, addScrollListener]);\n\n  useEffect(() => {\n    if (autoScrolling) {\n      scrollDown();\n    }\n  }, [valueProp, autoScrolling, scrollDown]);\n\n  // Run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationTypes.none,\n          minCharQuantity,\n          // If blockMax is true maxCharQuantity will never produce an error\n          // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n          maxCharQuantity != null && (blockMax !== true || value != null)\n            ? maxCharQuantity\n            : null,\n          validation,\n          inputProps\n        )));\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.resizable]: resizable,\n          [classes.disabled]: disabled,\n          [classes.invalid]: isStateInvalid,\n        },\n        className\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\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={maxCharQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvBaseInput\n        classes={{\n          root: classes.baseInput,\n          input: classes.input,\n          inputResizable: classes.inputResizable,\n        }}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        invalid={isStateInvalid}\n        resizable={resizable}\n        multiline\n        rows={rows}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : (description && setId(elementId, \"description\")) || undefined,\n          \"aria-controls\": maxCharQuantity\n            ? setId(elementId, \"charCounter\")\n            : undefined,\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        {...others}\n      />\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvTextArea","forwardRef","props","ref","id","className","classes","classesProp","name","label","description","placeholder","status","statusMessage","validationMessages","maxCharQuantity","minCharQuantity","value","valueProp","inputRef","inputRefProp","rows","defaultValue","middleCountLabel","countCharProps","inputProps","required","readOnly","disabled","autoFocus","resizable","autoScroll","hideCounter","blockMax","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","validation","onChange","onBlur","onFocus","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","isDirty","useRef","forkedRef","useForkRef","focused","setFocused","useState","autoScrolling","setAutoScrolling","validationState","setValidationState","useControlled","validationStates","standBy","validationMessage","setValidationMessage","setValue","isStateInvalid","isInvalid","isEmptyValue","hasLabel","hasDescription","hasCounter","errorMessages","useMemo","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","inputValidity","validateInput","current","validationTypes","none","computeValidationState","computeValidationMessage","isOverflow","currentValue","isNil","length","limitValue","undefined","substring","onContainerBlurHandler","event","onChangeHandler","limitedValue","onFocusHandler","isScrolledDown","el","offsetHeight","scrollTop","scrollHeight","scrollDown","clientHeight","addScrollListener","scrollHandler","handleEvent","addEventListener","useEffect","canShowError","hasBuiltInValidations","errorMessageId","setId","HvFormElement","root","invalid","children","labelContainer","_jsx","HvLabel","htmlFor","HvInfoMessage","HvCharCounter","characterCounter","separator","currentCharQuantity","HvBaseInput","baseInput","input","inputResizable","multiline","HvWarningText","error","disableBorder"],"mappings":"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"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport validationStates, {\n  isInvalid,\n} from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"@core/types/forms\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"@core/components/BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"@core/components/BaseInput\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TextArea.styles\";\n\nexport { staticClasses as textAreaClasses };\n\nexport type HvTextAreaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTextAreaProps\n  extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"rows\" | \"classes\" | \"onFocus\" | \"placeholder\"\n  > {\n  /** The placeholder value of the text area. */\n  placeholder?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel?: string;\n  /**\n   * An Object containing the various texts associated with the input.\n   */\n  validationMessages?: HvValidationMessages;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxCharQuantity?: number;\n  /**\n   * The minimum allowed length of the characters, if this value is null no check\n   * will be perform.\n   */\n  minCharQuantity?: number;\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus?: boolean;\n  /**\n   * The number of rows of the text area\n   */\n  rows?: number;\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable?: boolean;\n  /**\n   * Auto-scroll: automatically scroll to the end on value changes.\n   * Will stop if the user scrolls up and resume if scrolled to the bottom.\n   */\n  autoScroll?: boolean;\n  /**\n   * If true it isn't possible to pass the `maxCharQuantity`\n   */\n  blockMax?: boolean;\n  /**\n   * If `true` the character counter isn't shown even if maxCharQuantity is set.\n   */\n  hideCounter?: boolean;\n  /**\n   * Props passed to the char count.\n   */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /**\n   * Called back when the value is changed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /**\n   * Called back when the value is changed.\n   */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvTextAreaClasses;\n}\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nexport const HvTextArea = forwardRef<any, HvTextAreaProps>((props, ref) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    name,\n    label,\n    description,\n    placeholder,\n    status,\n    statusMessage,\n    validationMessages,\n    maxCharQuantity,\n    minCharQuantity,\n    value: valueProp,\n    inputRef: inputRefProp,\n    rows = 1,\n    defaultValue = \"\",\n    middleCountLabel = \"/\",\n    countCharProps = {},\n    inputProps = {},\n    required = false,\n    readOnly = false,\n    disabled = false,\n    autoFocus = false,\n    resizable = false,\n    autoScroll = false,\n    hideCounter = false,\n    blockMax = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    validation,\n    onChange,\n    onBlur,\n    onFocus,\n    ...others\n  } = useDefaultProps(\"HvTextArea\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvtextarea\");\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef<boolean>(false);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const forkedRef = useForkRef(ref, inputRefProp, inputRef);\n\n  const [focused, setFocused] = useState<boolean>(false);\n\n  const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  const hasCounter = maxCharQuantity != null && !hideCounter;\n\n  // ValidationMessages reference tends to change, as users will not memorize/useState for it;\n  // Dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages]\n  );\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationTypes.none,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    inputRef,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    value,\n  ]);\n\n  const isOverflow = (currentValue) =>\n    isNil(maxCharQuantity) ? false : currentValue.length > maxCharQuantity;\n\n  /**\n   * Limit the string to the maxCharQuantity length.\n   *\n   * @param value - string to evaluate\n   * @returns {string|*} - string according the limit\n   */\n  const limitValue = (currentValue) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    return !isOverflow(currentValue)\n      ? currentValue\n      : currentValue.substring(0, maxCharQuantity);\n  };\n\n  /**\n   * Validates the text area updating the state and modifying the warning text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   *\n   * @returns {undefined}\n   */\n  const onContainerBlurHandler = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the length of the string while is being inputted, also executes the user onChange\n   * allowing the customization of the input if required.\n   *\n   * @param {String} value - The value provided by the HvInput\n   */\n  const onChangeHandler = (event, currentValue) => {\n    isDirty.current = true;\n\n    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n    // Set the input value (only when value is uncontrolled)\n    setValue(limitedValue);\n\n    onChange?.(event, limitedValue);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler = (event) => {\n    setFocused(true);\n\n    // Reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const isScrolledDown = useCallback(() => {\n    const el = inputRef.current;\n    return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;\n  }, [inputRef]);\n\n  const scrollDown = useCallback(() => {\n    const el = inputRef.current;\n    if (el != null) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [inputRef]);\n\n  const addScrollListener = useCallback(() => {\n    const scrollHandler = {\n      handleEvent: () => {\n        setAutoScrolling(isScrolledDown());\n      },\n    };\n    inputRef.current?.addEventListener(\"scroll\", scrollHandler);\n  }, [inputRef, isScrolledDown]);\n\n  useEffect(() => {\n    if (autoScroll) {\n      addScrollListener();\n    }\n  }, [autoScroll, addScrollListener]);\n\n  useEffect(() => {\n    if (autoScrolling) {\n      scrollDown();\n    }\n  }, [valueProp, autoScrolling, scrollDown]);\n\n  // Run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationTypes.none,\n          minCharQuantity,\n          // If blockMax is true maxCharQuantity will never produce an error\n          // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n          maxCharQuantity != null && (blockMax !== true || value != null)\n            ? maxCharQuantity\n            : null,\n          validation,\n          inputProps\n        )));\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.resizable]: resizable,\n          [classes.disabled]: disabled,\n          [classes.invalid]: isStateInvalid,\n        },\n        className\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\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={maxCharQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvBaseInput\n        classes={{\n          root: classes.baseInput,\n          input: classes.input,\n          inputResizable: classes.inputResizable,\n        }}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        invalid={isStateInvalid}\n        resizable={resizable}\n        multiline\n        rows={rows}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : (description && setId(elementId, \"description\")) || undefined,\n          \"aria-controls\": maxCharQuantity\n            ? setId(elementId, \"charCounter\")\n            : undefined,\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        {...others}\n      />\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvTextArea","forwardRef","props","ref","id","className","classes","classesProp","name","label","description","placeholder","status","statusMessage","validationMessages","maxCharQuantity","minCharQuantity","value","valueProp","inputRef","inputRefProp","rows","defaultValue","middleCountLabel","countCharProps","inputProps","required","readOnly","disabled","autoFocus","resizable","autoScroll","hideCounter","blockMax","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","validation","onChange","onBlur","onFocus","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","isDirty","useRef","forkedRef","useForkRef","focused","setFocused","useState","autoScrolling","setAutoScrolling","validationState","setValidationState","useControlled","validationStates","standBy","validationMessage","setValidationMessage","setValue","isStateInvalid","isInvalid","isEmptyValue","hasLabel","hasDescription","hasCounter","errorMessages","useMemo","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","inputValidity","validateInput","current","validationTypes","none","computeValidationState","computeValidationMessage","isOverflow","currentValue","isNil","length","limitValue","undefined","substring","onContainerBlurHandler","event","onChangeHandler","limitedValue","onFocusHandler","isScrolledDown","el","offsetHeight","scrollTop","scrollHeight","scrollDown","clientHeight","addScrollListener","scrollHandler","handleEvent","addEventListener","useEffect","canShowError","hasBuiltInValidations","errorMessageId","setId","jsxs","HvFormElement","root","invalid","labelContainer","jsx","HvLabel","HvInfoMessage","HvCharCounter","characterCounter","HvBaseInput","baseInput","input","inputResizable","HvWarningText","error"],"mappings":"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"}

package/dist/cjs/components/TimeAgo/TimeAgo.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const isEmpty = require("lodash/isEmpty");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const TimeAgo_styles = require("./TimeAgo.styles.cjs");
 const useTimeAgo = require("./useTimeAgo.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const isEmpty__default = /* @__PURE__ */ _interopDefault(isEmpty);
@@ -33,15 +33,8 @@ const HvTimeAgo = React.forwardRef((props, ref) => {
     showSeconds
   });
   if (justText && timestamp)
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: timeAgo
-    });
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-    ref,
-    className: cx(classes.root, className),
-    ...others,
-    children: !timestamp ? emptyElement : timeAgo
-  });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: timeAgo });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cx(classes.root, className), ...others, children: !timestamp ? emptyElement : timeAgo });
 });
 exports.timeAgoClasses = TimeAgo_styles.staticClasses;
 exports.HvTimeAgo = HvTimeAgo;

package/dist/cjs/components/TimeAgo/TimeAgo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeAgo.cjs","sources":["../../../../src/components/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport isEmpty from \"lodash/isEmpty\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\n\nimport { staticClasses, useClasses } from \"./TimeAgo.styles\";\nimport useTimeAgo from \"./useTimeAgo\";\n\nexport { staticClasses as timeAgoClasses };\n\nexport type HvTimeAgoClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimeAgoProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /**\n       * The timestamp to format, in seconds or milliseconds.\n       * Defaults to `emptyElement` if value is null or 0\n       */\n      timestamp?: number;\n      /**\n       * The locale to be used. Should be on of the dayjs supported locales and explicitly imported\n       * @see https://day.js.org/docs/en/i18n/i18n\n       */\n      locale?: string;\n      /**\n       * The element to render when the timestamp is null or 0\n       * Defaults to `—` (Em Dash)\n       */\n      emptyElement?: React.ReactNode;\n      /** Disables periodic date refreshes */\n      disableRefresh?: boolean;\n      /** Whether to show seconds in the rendered time */\n      showSeconds?: boolean;\n      /**\n       * Whether the component should render just the string\n       * Consider using `useTimeAgo` instead\n       */\n      justText?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTimeAgoClasses;\n    }\n  >;\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nexport const HvTimeAgo: <C extends React.ElementType = \"p\">(\n  props: HvTimeAgoProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTimeAgoProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      classes: classesProp,\n      className,\n      timestamp,\n      locale: localeProp = \"en\",\n      component: Component = HvTypography,\n      emptyElement = \"—\",\n      disableRefresh = false,\n      showSeconds = false,\n      justText = false,\n      ...others\n    } = useDefaultProps(\"HvTimeAgo\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const locale = isEmpty(localeProp) ? \"en\" : localeProp;\n    const timeAgo = useTimeAgo(timestamp, {\n      locale,\n      disableRefresh,\n      showSeconds,\n    });\n\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    if (justText && timestamp) return <>{timeAgo}</>;\n\n    return (\n      <Component ref={ref} className={cx(classes.root, className)} {...others}>\n        {!timestamp ? emptyElement : timeAgo}\n      </Component>\n    );\n  }\n);\n"],"names":["HvTimeAgo","forwardRef","props","ref","classes","classesProp","className","timestamp","locale","localeProp","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","useDefaultProps","cx","useClasses","isEmpty","timeAgo","useTimeAgo","_Fragment","children","root"],"mappings":";;;;;;;;;;;AAoDO,MAAMA,YAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQC,aAAa;AAAA,IACrBC,WAAWC,YAAYC,WAAAA;AAAAA,IACvBC,eAAe;AAAA,IACfC,iBAAiB;AAAA,IACjBC,cAAc;AAAA,IACdC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAahB,KAAK;AAEhC,QAAA;AAAA,IAAEE;AAAAA,IAASe;AAAAA,EAAAA,IAAOC,eAAAA,WAAWf,WAAW;AAC9C,QAAMG,SAASa,iBAAAA,QAAQZ,UAAU,IAAI,OAAOA;AACtCa,QAAAA,UAAUC,mBAAWhB,WAAW;AAAA,IACpCC;AAAAA,IACAM;AAAAA,IACAC;AAAAA,EAAAA,CACD;AAGD,MAAIC,YAAYT;AAAW,0CAAOiB,WAAAA,UAAA;AAAA,MAAAC,UAAGH;AAAAA,IAAAA,CAAU;AAE/C,wCACGX,WAAS;AAAA,IAACR;AAAAA,IAAUG,WAAWa,GAAGf,QAAQsB,MAAMpB,SAAS;AAAA,IAAE,GAAKW;AAAAA,IAAMQ,UACpE,CAAClB,YAAYM,eAAeS;AAAAA,EAAAA,CACpB;AAEf,CACF;;;"}
+{"version":3,"file":"TimeAgo.cjs","sources":["../../../../src/components/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport isEmpty from \"lodash/isEmpty\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\n\nimport { staticClasses, useClasses } from \"./TimeAgo.styles\";\nimport useTimeAgo from \"./useTimeAgo\";\n\nexport { staticClasses as timeAgoClasses };\n\nexport type HvTimeAgoClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimeAgoProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /**\n       * The timestamp to format, in seconds or milliseconds.\n       * Defaults to `emptyElement` if value is null or 0\n       */\n      timestamp?: number;\n      /**\n       * The locale to be used. Should be on of the dayjs supported locales and explicitly imported\n       * @see https://day.js.org/docs/en/i18n/i18n\n       */\n      locale?: string;\n      /**\n       * The element to render when the timestamp is null or 0\n       * Defaults to `—` (Em Dash)\n       */\n      emptyElement?: React.ReactNode;\n      /** Disables periodic date refreshes */\n      disableRefresh?: boolean;\n      /** Whether to show seconds in the rendered time */\n      showSeconds?: boolean;\n      /**\n       * Whether the component should render just the string\n       * Consider using `useTimeAgo` instead\n       */\n      justText?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTimeAgoClasses;\n    }\n  >;\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nexport const HvTimeAgo: <C extends React.ElementType = \"p\">(\n  props: HvTimeAgoProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTimeAgoProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      classes: classesProp,\n      className,\n      timestamp,\n      locale: localeProp = \"en\",\n      component: Component = HvTypography,\n      emptyElement = \"—\",\n      disableRefresh = false,\n      showSeconds = false,\n      justText = false,\n      ...others\n    } = useDefaultProps(\"HvTimeAgo\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const locale = isEmpty(localeProp) ? \"en\" : localeProp;\n    const timeAgo = useTimeAgo(timestamp, {\n      locale,\n      disableRefresh,\n      showSeconds,\n    });\n\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    if (justText && timestamp) return <>{timeAgo}</>;\n\n    return (\n      <Component ref={ref} className={cx(classes.root, className)} {...others}>\n        {!timestamp ? emptyElement : timeAgo}\n      </Component>\n    );\n  }\n);\n"],"names":["HvTimeAgo","forwardRef","props","ref","classes","classesProp","className","timestamp","locale","localeProp","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","useDefaultProps","cx","useClasses","isEmpty","timeAgo","useTimeAgo","jsx","root"],"mappings":";;;;;;;;;;;AAoDO,MAAMA,YAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQC,aAAa;AAAA,IACrBC,WAAWC,YAAYC,WAAAA;AAAAA,IACvBC,eAAe;AAAA,IACfC,iBAAiB;AAAA,IACjBC,cAAc;AAAA,IACdC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAahB,KAAK;AAEhC,QAAA;AAAA,IAAEE;AAAAA,IAASe;AAAAA,EAAAA,IAAOC,eAAAA,WAAWf,WAAW;AAC9C,QAAMG,SAASa,iBAAAA,QAAQZ,UAAU,IAAI,OAAOA;AACtCa,QAAAA,UAAUC,mBAAWhB,WAAW;AAAA,IACpCC;AAAAA,IACAM;AAAAA,IACAC;AAAAA,EAAAA,CACD;AAGD,MAAIC,YAAYT;AAAW,iEAAUe,UAAQ,QAAA,CAAA;AAE7C,SACGE,2BAAAA,IAAA,WAAA,EAAU,KAAU,WAAWL,GAAGf,QAAQqB,MAAMnB,SAAS,GAAOW,GAAAA,QAC9D,UAACV,CAAAA,YAAYM,eAAeS,QAC/B,CAAA;AAEJ,CACF;;;"}

package/dist/cjs/components/TimePicker/Placeholder.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const datepicker = require("@react-aria/datepicker");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const getDateValue = (date) => {
   if (!date)
     return "";
@@ -22,17 +22,13 @@ const PlaceholderSegment = ({
   const {
     segmentProps
   } = datepicker.useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ref,
-    ...segmentProps,
-    children: (() => {
-      if (segment.type === "literal")
-        return segment.text;
-      if (segment.isPlaceholder)
-        return placeholder ?? segment.text;
-      return segment.text.padStart(2, "0");
-    })()
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...segmentProps, children: (() => {
+    if (segment.type === "literal")
+      return segment.text;
+    if (segment.isPlaceholder)
+      return placeholder ?? segment.text;
+    return segment.text.padStart(2, "0");
+  })() });
 };
 const Placeholder = React.forwardRef((props, ref) => {
   const {
@@ -46,25 +42,13 @@ const Placeholder = React.forwardRef((props, ref) => {
     value,
     segments
   } = state;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ref,
-      onKeyDown: (event) => {
-        event.stopPropagation();
-        onKeyDown == null ? void 0 : onKeyDown(event);
-      },
-      ...others,
-      children: [name && /* @__PURE__ */ jsxRuntime.jsx("input", {
-        type: "hidden",
-        name,
-        value: getDateValue(value)
-      }), segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(PlaceholderSegment, {
-        segment,
-        state,
-        placeholder: placeholders[segment.type]
-      }, i))]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onKeyDown: (event) => {
+    event.stopPropagation();
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  }, ...others, children: [
+    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: getDateValue(value) }),
+    segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(PlaceholderSegment, { segment, state, placeholder: placeholders[segment.type] }, i))
+  ] }) });
 });
 exports.Placeholder = Placeholder;
 //# sourceMappingURL=Placeholder.cjs.map

package/dist/cjs/components/TimePicker/Placeholder.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.cjs","sources":["../../../../src/components/TimePicker/Placeholder.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\n\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport { useDateSegment } from \"@react-aria/datepicker\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\n/** Convert `Date` into `hh:mm:ss` format */\nconst getDateValue = (date) => {\n  if (!date) return \"\";\n  const { hour, minute, second } = date;\n\n  return [hour, minute, second]\n    .map((el) => String(el).padStart(2, \"0\"))\n    .join(\":\");\n};\n\nconst PlaceholderSegment = ({\n  segment,\n  state,\n  placeholder,\n}: {\n  segment: DateSegment;\n  state: DateFieldState;\n  placeholder: string;\n}) => {\n  const ref = useRef(null);\n  const { segmentProps } = useDateSegment(segment, state, ref);\n\n  return (\n    <div ref={ref} {...segmentProps}>\n      {(() => {\n        if (segment.type === \"literal\") return segment.text;\n        if (segment.isPlaceholder) return placeholder ?? segment.text;\n        return segment.text.padStart(2, \"0\");\n      })()}\n    </div>\n  );\n};\n\ninterface PlaceholderProps extends HvBaseProps<HTMLDivElement> {\n  name?: string;\n  state: DateFieldState;\n  placeholders: { hour?: string; minute?: string; second?: string };\n}\n\nexport const Placeholder = forwardRef<HTMLDivElement, PlaceholderProps>(\n  (props, ref) => {\n    const { name, state, placeholders, onKeyDown, ...others } = props;\n    const { value, segments } = state;\n\n    return (\n      <>\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={ref}\n          onKeyDown={(event) => {\n            // stop ArrowDown from opening dropdown\n            event.stopPropagation();\n            onKeyDown?.(event);\n          }}\n          {...others}\n        >\n          {name && (\n            <input type=\"hidden\" name={name} value={getDateValue(value)} />\n          )}\n          {segments.map((segment, i) => (\n            <PlaceholderSegment\n              key={i}\n              segment={segment}\n              state={state}\n              placeholder={placeholders[segment.type]}\n            />\n          ))}\n        </div>\n      </>\n    );\n  }\n);\n"],"names":["getDateValue","date","hour","minute","second","map","el","String","padStart","join","PlaceholderSegment","segment","state","placeholder","ref","useRef","segmentProps","useDateSegment","children","type","text","isPlaceholder","Placeholder","forwardRef","props","name","placeholders","onKeyDown","others","value","segments","_Fragment","event","stopPropagation","_jsx","i"],"mappings":";;;;;AAQA,MAAMA,eAAgBC,CAAS,SAAA;AAC7B,MAAI,CAACA;AAAa,WAAA;AACZ,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,IAAQC;AAAAA,EAAWH,IAAAA;AAEjC,SAAO,CAACC,MAAMC,QAAQC,MAAM,EACzBC,IAAKC,CAAOC,OAAAA,OAAOD,EAAE,EAAEE,SAAS,GAAG,GAAG,CAAC,EACvCC,KAAK,GAAG;AACb;AAEA,MAAMC,qBAAqBA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAKF,MAAM;AACEC,QAAAA,MAAMC,aAAO,IAAI;AACjB,QAAA;AAAA,IAAEC;AAAAA,EAAiBC,IAAAA,0BAAeN,SAASC,OAAOE,GAAG;AAE3D,wCACE,OAAA;AAAA,IAAKA;AAAAA,IAAS,GAAKE;AAAAA,IAAYE,WAC3B,MAAM;AACN,UAAIP,QAAQQ,SAAS;AAAW,eAAOR,QAAQS;AAC/C,UAAIT,QAAQU;AAAe,eAAOR,eAAeF,QAAQS;AACzD,aAAOT,QAAQS,KAAKZ,SAAS,GAAG,GAAG;AAAA,IAAA,GAClC;AAAA,EAAA,CACA;AAET;AAQO,MAAMc,cAAcC,MAAAA,WACzB,CAACC,OAAOV,QAAQ;AACR,QAAA;AAAA,IAAEW;AAAAA,IAAMb;AAAAA,IAAOc;AAAAA,IAAcC;AAAAA,IAAW,GAAGC;AAAAA,EAAWJ,IAAAA;AACtD,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,EAAalB,IAAAA;AAE5B,wCACEmB,WAAAA,UAAA;AAAA,IAAAb,0CAEE,OAAA;AAAA,MACEJ;AAAAA,MACAa,WAAYK,CAAU,UAAA;AAEpBA,cAAMC,gBAAgB;AACtBN,+CAAYK;AAAAA,MACd;AAAA,MAAE,GACEJ;AAAAA,MAAMV,UAAA,CAETO,QACCS,2BAAAA,IAAA,SAAA;AAAA,QAAOf,MAAK;AAAA,QAASM;AAAAA,QAAYI,OAAO7B,aAAa6B,KAAK;AAAA,MAAA,CAAI,GAE/DC,SAASzB,IAAI,CAACM,SAASwB,qCACrBzB,oBAAkB;AAAA,QAEjBC;AAAAA,QACAC;AAAAA,QACAC,aAAaa,aAAaf,QAAQQ,IAAI;AAAA,MAAA,GAHjCgB,CAIN,CACF,CAAC;AAAA,IAAA,CACC;AAAA,EAAA,CACL;AAEN,CACF;;"}
+{"version":3,"file":"Placeholder.cjs","sources":["../../../../src/components/TimePicker/Placeholder.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\n\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport { useDateSegment } from \"@react-aria/datepicker\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\n/** Convert `Date` into `hh:mm:ss` format */\nconst getDateValue = (date) => {\n  if (!date) return \"\";\n  const { hour, minute, second } = date;\n\n  return [hour, minute, second]\n    .map((el) => String(el).padStart(2, \"0\"))\n    .join(\":\");\n};\n\nconst PlaceholderSegment = ({\n  segment,\n  state,\n  placeholder,\n}: {\n  segment: DateSegment;\n  state: DateFieldState;\n  placeholder: string;\n}) => {\n  const ref = useRef(null);\n  const { segmentProps } = useDateSegment(segment, state, ref);\n\n  return (\n    <div ref={ref} {...segmentProps}>\n      {(() => {\n        if (segment.type === \"literal\") return segment.text;\n        if (segment.isPlaceholder) return placeholder ?? segment.text;\n        return segment.text.padStart(2, \"0\");\n      })()}\n    </div>\n  );\n};\n\ninterface PlaceholderProps extends HvBaseProps<HTMLDivElement> {\n  name?: string;\n  state: DateFieldState;\n  placeholders: { hour?: string; minute?: string; second?: string };\n}\n\nexport const Placeholder = forwardRef<HTMLDivElement, PlaceholderProps>(\n  (props, ref) => {\n    const { name, state, placeholders, onKeyDown, ...others } = props;\n    const { value, segments } = state;\n\n    return (\n      <>\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={ref}\n          onKeyDown={(event) => {\n            // stop ArrowDown from opening dropdown\n            event.stopPropagation();\n            onKeyDown?.(event);\n          }}\n          {...others}\n        >\n          {name && (\n            <input type=\"hidden\" name={name} value={getDateValue(value)} />\n          )}\n          {segments.map((segment, i) => (\n            <PlaceholderSegment\n              key={i}\n              segment={segment}\n              state={state}\n              placeholder={placeholders[segment.type]}\n            />\n          ))}\n        </div>\n      </>\n    );\n  }\n);\n"],"names":["getDateValue","date","hour","minute","second","map","el","String","padStart","join","PlaceholderSegment","segment","state","placeholder","ref","useRef","segmentProps","useDateSegment","jsx","type","text","isPlaceholder","Placeholder","forwardRef","props","name","placeholders","onKeyDown","others","value","segments","Fragment","jsxs","event","stopPropagation","i"],"mappings":";;;;;AAQA,MAAMA,eAAgBC,CAAS,SAAA;AAC7B,MAAI,CAACA;AAAa,WAAA;AACZ,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,IAAQC;AAAAA,EAAWH,IAAAA;AAEjC,SAAO,CAACC,MAAMC,QAAQC,MAAM,EACzBC,IAAKC,CAAOC,OAAAA,OAAOD,EAAE,EAAEE,SAAS,GAAG,GAAG,CAAC,EACvCC,KAAK,GAAG;AACb;AAEA,MAAMC,qBAAqBA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAKF,MAAM;AACEC,QAAAA,MAAMC,aAAO,IAAI;AACjB,QAAA;AAAA,IAAEC;AAAAA,EAAiBC,IAAAA,0BAAeN,SAASC,OAAOE,GAAG;AAE3D,SACGI,2BAAAA,IAAA,OAAA,EAAI,KAAcF,GAAAA,cACf,WAAM,MAAA;AACN,QAAIL,QAAQQ,SAAS;AAAW,aAAOR,QAAQS;AAC/C,QAAIT,QAAQU;AAAe,aAAOR,eAAeF,QAAQS;AACzD,WAAOT,QAAQS,KAAKZ,SAAS,GAAG,GAAG;AAAA,OAEvC,CAAA;AAEJ;AAQO,MAAMc,cAAcC,MAAAA,WACzB,CAACC,OAAOV,QAAQ;AACR,QAAA;AAAA,IAAEW;AAAAA,IAAMb;AAAAA,IAAOc;AAAAA,IAAcC;AAAAA,IAAW,GAAGC;AAAAA,EAAWJ,IAAAA;AACtD,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,EAAalB,IAAAA;AAE5B,SAGIM,2BAAA,IAAAa,qBAAA,EAAA,UAAAC,2BAAAA,KAAC,OACC,EAAA,KACA,WAAYC,CAAU,UAAA;AAEpBA,UAAMC,gBAAgB;AACtBP,2CAAYM;AAAAA,EAAK,GAEfL,GAAAA,QAEHH,UAAAA;AAAAA,IACC,QAAAP,2BAAA,IAAC,WAAM,MAAK,UAAS,MAAY,OAAOlB,aAAa6B,KAAK,GAC3D;AAAA,IACAC,SAASzB,IAAI,CAACM,SAASwB,MACrBjB,2BAAAA,IAAA,oBAAA,EAEC,SACA,OACA,aAAaQ,aAAaf,QAAQQ,IAAI,EAAA,GAHjCgB,EAKR;AAAA,EAAA,EACH,CAAA,EACF,CAAA;AAEJ,CACF;;"}