@hitachivantara/uikit-react-core 5.30.1 → 5.32.0

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","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","root","labelContainer","characterCounter","tagsList","error","singleLine","map","t","otherProps","gutters","listItemGutters","listItemRoot","tagSelected","chipRoot","tabIndex","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","ref","inputExtension","suggestionsContainer","list","suggestionList","parentElement"],"mappings":"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"}
+{"version":3,"file":"TagsInput.js","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  useForkRef,\n} 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 = forwardRef<HTMLUListElement, HvTagsInputProps>(\n  (props, ref) => {\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 forkedContainerRef = useForkRef(ref, containerRef);\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={forkedContainerRef}\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({\n                      [classes.tagSelected]: i === tagCursorPos,\n                    })}\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);\n"],"names":["HvTagsInput","forwardRef","props","ref","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","forkedContainerRef","useForkRef","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","root","labelContainer","characterCounter","tagsList","error","singleLine","map","t","otherProps","gutters","listItemGutters","listItemRoot","tagSelected","chipRoot","tabIndex","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","inputExtension","suggestionsContainer","list","suggestionList","parentElement"],"mappings":"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"}

package/dist/esm/components/TimePicker/TimePicker.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useRef, useState, useMemo } from "react";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { forwardRef, useRef, useState, useMemo } from "react";
 import { Time as Time$1 } from "@internationalized/date";
+import { useForkRef } from "@mui/material";
 import { useTimeField } from "@react-aria/datepicker";
 import { useTimeFieldState } from "@react-stately/datepicker";
 import { Time } from "@hitachivantara/uikit-react-icons";
 import { useControlled } from "../../hooks/useControlled.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { setId } from "../../utils/setId.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { Placeholder } from "./Placeholder.js";
 import { useClasses } from "./TimePicker.styles.js";
 import { staticClasses } from "./TimePicker.styles.js";
@@ -32,7 +33,7 @@ const getFormat = (timeFormat) => {
     return 24;
   return timeFormat === "12" ? 12 : 24;
 };
-const HvTimePicker = (props) => {
+const HvTimePicker = forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -64,15 +65,20 @@ const HvTimePicker = (props) => {
     // misc properties:
     disablePortal = true,
     escapeWithReference = true,
-    dropdownProps,
+    dropdownProps = {},
     ...others
   } = useDefaultProps("HvTimePicker", props);
   const id = useUniqueId(idProp, "hvtimepicker");
-  const ref = useRef(null);
   const {
     classes,
     cx
   } = useClasses(classesProp);
+  const timeFieldRef = useRef(null);
+  const {
+    ref: refProp,
+    ...otherDropdownProps
+  } = dropdownProps;
+  const dropdownForkedRef = useForkRef(ref, refProp);
   const stateProps = {
     value: toTime(valueProp),
     defaultValue: toTime(defaultValueProp),
@@ -107,7 +113,7 @@ const HvTimePicker = (props) => {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
-  }, state, ref);
+  }, state, timeFieldRef);
   const [open, setOpen] = useState(false);
   const [validationMessage] = useControlled(statusMessage, "Required");
   const [validationState] = useControlled(status, "standBy");
@@ -124,7 +130,7 @@ const HvTimePicker = (props) => {
       label && /* @__PURE__ */ jsx(HvLabel, { label, className: classes.label, ...labelProps }),
       description && /* @__PURE__ */ jsx(HvInfoMessage, { className: classes.description, ...descriptionProps, children: description })
     ] }),
-    /* @__PURE__ */ jsx(HvBaseDropdown, { role: "combobox", variableWidth: true, disabled, readOnly, placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsx(Placeholder, { ref, name, state, placeholders, className: cx(classes.placeholder, {
+    /* @__PURE__ */ jsx(HvBaseDropdown, { ref: dropdownForkedRef, role: "combobox", variableWidth: true, disabled, readOnly, placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsx(Placeholder, { ref: timeFieldRef, name, state, placeholders, className: cx(classes.placeholder, {
       [classes.placeholderDisabled]: disabled
     }), ...fieldProps }), classes: {
       header: cx(classes.dropdownHeader, {
@@ -145,12 +151,12 @@ const HvTimePicker = (props) => {
         name: "preventOverflow",
         enabled: escapeWithReference
       }]
-    }, ...dropdownProps, children: /* @__PURE__ */ jsx("div", { ref, className: classes.timePopperContainer, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(Unit, { state, segment, placeholder: placeholders[segment.type], onAdd: () => state.increment(segment.type), onSub: () => state.decrement(segment.type), onChange: (evt, val) => {
+    }, ...otherDropdownProps, children: /* @__PURE__ */ jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(Unit, { state, segment, placeholder: placeholders[segment.type], onAdd: () => state.increment(segment.type), onSub: () => state.decrement(segment.type), onChange: (evt, val) => {
       state.setSegment(segment.type, Number(val));
     } }, i)) }) }),
     canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(id, "error"), disableBorder: true, className: classes.error, children: validationMessage })
   ] });
-};
+});
 export {
   HvTimePicker,
   staticClasses as timePickerClasses

package/dist/esm/components/TimePicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\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\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = useDefaultProps(\"HvTimePicker\", props);\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps, descriptionProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage\n              className={classes.description}\n              {...descriptionProps}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-labelledby={fieldProps[\"aria-labelledby\"]}\n        aria-describedby={fieldProps[\"aria-describedby\"]}\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useDefaultProps","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","descriptionProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","root","labelContainer","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","TimeIcon","icon","evt","newOpen","containerRef","getElementsByTagName","focus","modifiers","enabled","timePopperContainer","segments","map","segment","i","type","increment","decrement","val","setSegment","Number","error"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\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\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp, \"hvtimepicker\");\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: \"second\",\n      hourCycle: getFormat(timeFormat),\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled(status, \"standBy\");\n\n    const placeholders = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","forwardRef","props","ref","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useDefaultProps","useUniqueId","cx","useClasses","timeFieldRef","useRef","refProp","otherDropdownProps","dropdownForkedRef","useForkRef","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","descriptionProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","root","labelContainer","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","TimeIcon","icon","evt","newOpen","containerRef","getElementsByTagName","focus","modifiers","enabled","timePopperContainer","segments","map","segment","i","type","increment","decrement","val","setSegment","Number","error"],"mappings":"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"}

package/dist/esm/index.js

@@ -248,6 +248,7 @@ import { staticClasses as staticClasses107 } from "./components/InlineEditor/Inl
 import { HvInlineEditor } from "./components/InlineEditor/InlineEditor.js";
 import { staticClasses as staticClasses108 } from "./components/TimeAgo/TimeAgo.styles.js";
 import { HvTimeAgo } from "./components/TimeAgo/TimeAgo.js";
+import { defaultCombinators, defaultLabels, defaultOperators } from "./components/QueryBuilder/Context.js";
 import { staticClasses as staticClasses109 } from "./components/QueryBuilder/QueryBuilder.styles.js";
 import { HvQueryBuilder } from "./components/QueryBuilder/QueryBuilder.js";
 import { staticClasses as staticClasses110 } from "./components/ColorPicker/ColorPicker.styles.js";
@@ -259,6 +260,8 @@ import { HvCarouselControls } from "./components/Carousel/CarouselControls.js";
 import { HvCarouselThumbnails } from "./components/Carousel/CarouselThumbnails.js";
 import { staticClasses as staticClasses112 } from "./components/TimePicker/TimePicker.styles.js";
 import { HvTimePicker } from "./components/TimePicker/TimePicker.js";
+import { staticClasses as staticClasses113 } from "./components/Section/Section.styles.js";
+import { HvSection } from "./components/Section/Section.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useControlled } from "./hooks/useControlled.js";
 import { useForkRef } from "./hooks/useForkRef.js";
@@ -392,6 +395,7 @@ export {
   HvRightControl,
   HvScrollToHorizontal,
   HvScrollToVertical,
+  HvSection,
   HvSelectionList,
   HvSimpleGrid,
   HvSlider,
@@ -530,6 +534,9 @@ export {
   hvNumberColumn,
   hvNumberFallback,
   hvProgressColumn,
+  defaultCombinators as hvQueryBuilderDefaultCombinators,
+  defaultLabels as hvQueryBuilderDefaultLabels,
+  defaultOperators as hvQueryBuilderDefaultOperators,
   hvStringFallback,
   hvSwitchColumn,
   hvTagColumn,
@@ -571,6 +578,7 @@ export {
   staticClasses89 as rightControlClasses,
   staticClasses106 as scrollToHorizontalClasses,
   staticClasses104 as scrollToVerticalClasses,
+  staticClasses113 as sectionClasses,
   staticClasses11 as selectionListClasses,
   setElementAttrs,
   setId,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}