@hitachivantara/uikit-react-core 5.58.0 → 5.58.2

package/dist/esm/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"../Input\";\nimport { HvFormElement, HvFormStatus, HvLabel, HvWarningText } from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n  calculateStepValue,\n  convertStatusToArray,\n  createKnobStyles,\n  createMark,\n  createTrackStyles,\n  ensureValuesConsistency,\n  generateDefaultKnobProperties,\n  isSingleSlider,\n  knobsPositionsToKnobsValues,\n  knobsPositionToScaledValue,\n  knobsValuesToKnobsPositions,\n  scaledValueToKnobsPositionValue,\n  statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n  /**\n   * The slider name.\n   */\n  name?: string;\n  /**\n   * The label of the slider.\n   *\n   * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Indicates that the slider is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the slider is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user slider is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * What message to render when the value is required.\n   */\n  requiredMessage?: string;\n  /**\n   * If `true` the input that controls the slider is hidden.\n   */\n  hideInput?: boolean;\n  /**\n   * Attributes applied to the slider element.\n   */\n  sliderProps?: SliderProps;\n  /**\n   * The status of the slider 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 | HvFormStatus[];\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The values array to apply to the component\n   */\n  values?: number[];\n  /**\n   * The default values array to apply to the component\n   */\n  defaultValues?: (number | undefined)[];\n  /**\n   * The object used to set the knob properties,\n   * for every item in the array a new knob will be created.\n   */\n  knobProperties?: HvKnobProperty[];\n  /**\n   * The object used to set the mark properties individually.\n   */\n  markProperties?: HvMarkProperty[];\n  /**\n   * The function executed before a change will occur in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onBeforeChange?: (value: number[]) => void;\n  /**\n   * The function executed while a change is occurring in the slider.\n   */\n  onChange?: (value: number[]) => void;\n  /**\n   * The function executed after a change ocurred in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onAfterChange?: (value: number[]) => void;\n  /**\n   * The function executed after a blur ocurred in the slider.\n   */\n  onBlur?: (\n    event: React.FocusEvent,\n    knobsValues: number[],\n    status?: HvFormStatus | HvFormStatus[]\n  ) => void;\n  /**\n   * The separation in points between marks.\n   * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n   */\n  markStep?: number;\n  /**\n   * How many subdivisions there are in the slider.\n   */\n  divisionQuantity?: number;\n  /**\n   * The value of the first point in the slider from left to right.\n   */\n  minPointValue?: number;\n  /**\n   * The value of the last point in the slider from left to right.\n   */\n  maxPointValue?: number;\n  /**\n   * The nax number of decimals if no format function is applied\n   */\n  markDigits?: number;\n  /**\n   * A formatting function used to add format to the marks in the track,\n   * the function receives the mark text\n   */\n  formatMark?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * A formatting function used to add format to the tooltip in the track,\n   * the function receives the mark text\n   */\n  formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n   */\n  noOverlap?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: HvInputProps[];\n  /**\n   * Attributes applied to the knob element.\n   */\n  knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n  /**\n   * The classes object to be applied into the root object.\n   */\n  classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = forwardRef<SliderRef, HvSliderProps>((props, ref) => {\n  const {\n    id,\n    className,\n    name,\n    label,\n    status,\n    statusMessage,\n    disabled,\n    classes: classesProp,\n    sliderProps,\n    knobProps,\n    inputProps,\n    requiredMessage = \"The value is required\",\n    noOverlap = true,\n    hideInput = false,\n    required = false,\n    readOnly = false,\n    markProperties = [],\n    defaultValues = [undefined],\n    values: valuesProp = [],\n    knobProperties: knobPropertiesProp,\n    \"aria-errormessage\": ariaErrorMessage,\n    maxPointValue = 100,\n    minPointValue = 0,\n    divisionQuantity = 100,\n    markStep = 20,\n    markDigits = 0,\n    formatMark,\n    onChange,\n    onBlur,\n    onBeforeChange,\n    onAfterChange,\n    formatTooltip,\n    ...others\n  } = useDefaultProps(\"HvSlider\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const elementId = useUniqueId(id, \"hvSlider\");\n\n  const sliderInputId = setId(elementId, \"input\");\n\n  const stepValue = useMemo(\n    () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n    [divisionQuantity, maxPointValue, minPointValue]\n  );\n\n  const inverseStepValue = 1 / stepValue;\n\n  const marks = useMemo(\n    () =>\n      createMark(\n        markProperties,\n        markStep,\n        divisionQuantity,\n        minPointValue,\n        stepValue,\n        markDigits,\n        !!disabled,\n        formatMark\n      ),\n    [\n      disabled,\n      divisionQuantity,\n      formatMark,\n      markDigits,\n      markProperties,\n      markStep,\n      minPointValue,\n      stepValue,\n    ]\n  );\n\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isSingle: boolean = useMemo(\n    () => isSingleSlider(valuesProp, defaultValues),\n    [defaultValues, valuesProp]\n  );\n\n  const value: number[] | undefined = useMemo(\n    () =>\n      valuesProp?.length > 0\n        ? knobsValuesToKnobsPositions(\n            valuesProp,\n            inverseStepValue,\n            minPointValue\n          )\n        : undefined,\n    [inverseStepValue, minPointValue, valuesProp]\n  );\n\n  const defaultKnobsPositions: number[] = useMemo(\n    () =>\n      knobsValuesToKnobsPositions(\n        defaultValues,\n        inverseStepValue,\n        minPointValue\n      ),\n    [defaultValues, inverseStepValue, minPointValue]\n  );\n\n  const [knobsPositions, setKnobsPositions] = useControlled(\n    value,\n    defaultKnobsPositions\n  );\n\n  // Validation related state\n  const { arrayStatus, arrayDefaultStatus } = useMemo(\n    () => convertStatusToArray(knobsPositions.length, status),\n    [knobsPositions.length, status]\n  );\n\n  const [validationStatus, setValidationState] = useControlled(\n    arrayStatus,\n    arrayDefaultStatus\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n  const knobProperties = generateDefaultKnobProperties(\n    knobsPositions.length,\n    disabled,\n    knobPropertiesProp\n  );\n\n  const rangesCount = knobProperties.length - 1;\n\n  const trackStyles = createTrackStyles(knobProperties);\n\n  const knobStyles = createKnobStyles(knobProperties);\n\n  const performValidation = useCallback(() => {\n    let invalid = false;\n\n    const newValidationState = knobsPositions.map((position) => {\n      if (position == null || Number.isNaN(position)) {\n        invalid = true;\n        return validationStates.invalid;\n      }\n      return validationStates.valid;\n    });\n\n    setValidationState([...newValidationState]);\n\n    if (invalid) {\n      setValidationMessage(requiredMessage);\n      return;\n    }\n\n    setValidationMessage(\"\");\n  }, [\n    knobsPositions,\n    requiredMessage,\n    setValidationMessage,\n    setValidationState,\n  ]);\n\n  useEffect(() => {\n    const stepVl = calculateStepValue(\n      maxPointValue,\n      minPointValue,\n      divisionQuantity\n    );\n\n    const inverseStepVl = 1 / stepVl;\n\n    if (valuesProp?.length > 0) {\n      setKnobsPositions(\n        knobsValuesToKnobsPositions(\n          valuesProp.length > 0 ? valuesProp : defaultValues,\n          inverseStepVl,\n          minPointValue\n        )\n      );\n    }\n  }, [\n    defaultValues,\n    divisionQuantity,\n    maxPointValue,\n    minPointValue,\n    setKnobsPositions,\n    valuesProp,\n  ]);\n\n  useEffect(() => {\n    if (!isDirty.current) {\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  }, [knobsPositions, requiredMessage, performValidation]);\n\n  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n      setIsDraggingTrack(true);\n    }\n  };\n\n  const onMouseUpHandler = () => {\n    setIsDraggingTrack(false);\n  };\n\n  /**\n   * Generates an object which posses the current value and position of the knobs.\n   *\n   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n   * @returns {Object} - An object with the positions and values of the knobs.\n   * @memberof HvSlider\n   */\n  const generateKnobsPositionAndValues = (\n    knobsCurrentPosition: number[]\n  ): { knobsPosition: number[]; knobsValues: number[] } => {\n    const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n    const knobsValues: number[] = [];\n\n    let duplicatedValue: number | null = null;\n\n    const findDuplicated: number[] = newKnobsPosition.filter(\n      (item, index) => newKnobsPosition.indexOf(item) !== index\n    );\n\n    if (noOverlap && findDuplicated.length > 0) {\n      [duplicatedValue] = findDuplicated;\n    }\n\n    newKnobsPosition.forEach((position, index, array) => {\n      const newArray: number[] = array;\n      let newPosition: number = position;\n\n      if (noOverlap && newPosition === duplicatedValue) {\n        const previousValue = knobsPositions[index];\n        if (previousValue !== newPosition) {\n          newPosition += newPosition > previousValue ? -1 : 1;\n          newArray[index] = newPosition;\n        }\n      }\n\n      knobsValues[index] = knobsPositionToScaledValue(\n        newPosition,\n        minPointValue,\n        stepValue\n      );\n    }, this);\n\n    return {\n      knobsPosition: newKnobsPosition,\n      knobsValues,\n    };\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n    performValidation();\n\n    onBlur?.(event, knobs.knobsValues, status);\n  };\n\n  /**\n   * Function executed while the knobs changes.\n   *\n   * executes the callback provided by the user with the values and position of the knobs,\n   * also lock the value of the knob in case one is fixed.\n   */\n  const onChangeHandler = (knobsPosition: number[]) => {\n    isDirty.current = true;\n\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    knobProperties.forEach((knobProperty, index) => {\n      if (knobProperty.fixed) {\n        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n          defaultValues[index],\n          minPointValue,\n          inverseStepValue\n        );\n      }\n    });\n\n    if (disabled || readOnly) return;\n\n    onChange?.(knobs.knobsValues);\n\n    setKnobsPositions(knobs.knobsPosition);\n  };\n\n  const onInputChangeHandler = (inputValues: number[], index: number) => {\n    let newKnobPositions = knobsValuesToKnobsPositions(\n      inputValues,\n      inverseStepValue,\n      minPointValue\n    );\n\n    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n    onChangeHandler(newKnobPositions);\n  };\n\n  /**\n   * Function executed before a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onBeforeChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onBeforeChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function executed after a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onAfterChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onAfterChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function used to create a custom knob for the slider.\n   *\n   * TODO: This should be isolated because is creating a sub component,\n   * but there were some problems regarding the underlying component losing\n   * references of the handlers disabling the focus.\n   */\n  const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n    const { value: knobValue, dragging, index } = params;\n    const { style = {}, ...restProps } = knobNode.props;\n    const scaledKnobValue = knobsPositionToScaledValue(\n      knobValue,\n      minPointValue,\n      stepValue\n    ).toFixed(markDigits);\n    if (dragging) {\n      style.backgroundColor = knobProperties[index]?.dragColor;\n    } else {\n      style.backgroundColor = knobProperties[index]?.color;\n    }\n\n    const isEmpty =\n      Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n    const handleId = setId(elementId, \"knob\");\n    const indexedHandleId = setId(handleId, index);\n\n    return (\n      <div\n        key={index}\n        className={cx({\n          [classes.handleContainer]: !!(!disabled && !isEmpty),\n          [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n          [classes.handleHiddenContainer]: isEmpty || readOnly,\n        })}\n      >\n        <Tooltip\n          prefixCls=\"rc-slider-tooltip\"\n          overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n          visible={dragging}\n          placement=\"top\"\n          overlayClassName={classes.sliderTooltip}\n          getTooltipContainer={() =>\n            document.getElementById(indexedHandleId || \"\") as HTMLElement\n          }\n        >\n          <div\n            id={indexedHandleId}\n            style={style}\n            className={classes.handle}\n            {...restProps}\n            aria-label={`${label}-knob-${index}`}\n            aria-valuenow={knobsPositionToScaledValue(\n              knobValue,\n              minPointValue,\n              stepValue\n            )}\n            aria-valuemin={minPointValue}\n            aria-valuemax={maxPointValue}\n            {...knobProps?.[index]}\n          />\n        </Tooltip>\n      </div>\n    );\n  };\n\n  return (\n    <HvFormElement\n      className={cx(\n        classes.root,\n        {\n          [classes.trackStandBy]:\n            !readOnly && !disabled && !isSingle && !isDraggingTrack,\n          [classes.trackDragging]:\n            !readOnly && !disabled && !isSingle && isDraggingTrack,\n          [classes.rootDisabled]: !!disabled,\n        },\n        className\n      )}\n      id={id}\n      name={name}\n      status={statusArrayToFormStatus(validationStatus)}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onMouseDown={onMouseDownHandler}\n      onMouseUp={onMouseUpHandler}\n      onBlur={onBlurHandler}\n      {...others}\n    >\n      {(hasLabel || !hideInput) && (\n        <div\n          className={cx(classes.labelContainer, {\n            [classes.labelIncluded]: hasLabel,\n            [classes.onlyInput]: !hasLabel,\n          })}\n        >\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={sliderInputId}\n              label={label}\n            />\n          )}\n\n          {!hideInput && (\n            <HvSliderInput\n              id={sliderInputId}\n              label={label}\n              values={knobsPositionsToKnobsValues(\n                knobsPositions,\n                stepValue,\n                minPointValue\n              )}\n              onChange={onInputChangeHandler}\n              status={validationStatus}\n              disabled={disabled}\n              readOnly={readOnly}\n              markDigits={markDigits}\n              inputProps={inputProps}\n            />\n          )}\n        </div>\n      )}\n\n      <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n        <Slider\n          ref={ref}\n          range={!isSingle}\n          handleRender={createKnob}\n          className={cx(classes.sliderRoot, {\n            [classes.rootRange]: !isSingle,\n          })}\n          min={0}\n          max={divisionQuantity}\n          step={1}\n          marks={marks}\n          dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n          onChange={(singleValue) =>\n            onChangeHandler(Array<number>().concat(singleValue))\n          }\n          onBeforeChange={(singleValue) =>\n            onBeforeChangeHandler(Array<number>().concat(singleValue))\n          }\n          onAfterChange={(singleValue) =>\n            onAfterChangeHandler(Array<number>().concat(singleValue))\n          }\n          value={\n            knobsPositions.length === 0\n              ? undefined\n              : isSingle\n              ? knobsPositions[0]\n              : [...knobsPositions]\n          }\n          allowCross={false}\n          disabled={disabled}\n          count={rangesCount}\n          railStyle={sliderStyles.rail}\n          handleStyle={knobStyles.knobInner}\n          trackStyle={trackStyles}\n          draggableTrack={!readOnly && !isSingle}\n          {...sliderProps}\n        />\n      </div>\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":["validationStates"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"../Input\";\nimport { HvFormElement, HvFormStatus, HvLabel, HvWarningText } from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n  calculateStepValue,\n  convertStatusToArray,\n  createKnobStyles,\n  createMark,\n  createTrackStyles,\n  ensureValuesConsistency,\n  generateDefaultKnobProperties,\n  isSingleSlider,\n  knobsPositionsToKnobsValues,\n  knobsPositionToScaledValue,\n  knobsValuesToKnobsPositions,\n  scaledValueToKnobsPositionValue,\n  statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n  /**\n   * The slider name.\n   */\n  name?: string;\n  /**\n   * The label of the slider.\n   *\n   * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Indicates that the slider is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the slider is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user slider is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * What message to render when the value is required.\n   */\n  requiredMessage?: string;\n  /**\n   * If `true` the input that controls the slider is hidden.\n   */\n  hideInput?: boolean;\n  /**\n   * Attributes applied to the slider element.\n   */\n  sliderProps?: SliderProps;\n  /**\n   * The status of the slider 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 | HvFormStatus[];\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The values array to apply to the component\n   */\n  values?: number[];\n  /**\n   * The default values array to apply to the component\n   */\n  defaultValues?: (number | undefined)[];\n  /**\n   * The object used to set the knob properties,\n   * for every item in the array a new knob will be created.\n   */\n  knobProperties?: HvKnobProperty[];\n  /**\n   * The object used to set the mark properties individually.\n   */\n  markProperties?: HvMarkProperty[];\n  /**\n   * The function executed before a change will occur in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onBeforeChange?: (value: number[]) => void;\n  /**\n   * The function executed while a change is occurring in the slider.\n   */\n  onChange?: (value: number[]) => void;\n  /**\n   * The function executed after a change ocurred in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onAfterChange?: (value: number[]) => void;\n  /**\n   * The function executed after a blur ocurred in the slider.\n   */\n  onBlur?: (\n    event: React.FocusEvent,\n    knobsValues: number[],\n    status?: HvFormStatus | HvFormStatus[]\n  ) => void;\n  /**\n   * The separation in points between marks.\n   * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n   */\n  markStep?: number;\n  /**\n   * How many subdivisions there are in the slider.\n   */\n  divisionQuantity?: number;\n  /**\n   * The value of the first point in the slider from left to right.\n   */\n  minPointValue?: number;\n  /**\n   * The value of the last point in the slider from left to right.\n   */\n  maxPointValue?: number;\n  /**\n   * The nax number of decimals if no format function is applied\n   */\n  markDigits?: number;\n  /**\n   * A formatting function used to add format to the marks in the track,\n   * the function receives the mark text\n   */\n  formatMark?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * A formatting function used to add format to the tooltip in the track,\n   * the function receives the mark text\n   */\n  formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n   */\n  noOverlap?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: HvInputProps[];\n  /**\n   * Attributes applied to the knob element.\n   */\n  knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n  /**\n   * The classes object to be applied into the root object.\n   */\n  classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = forwardRef<SliderRef, HvSliderProps>((props, ref) => {\n  const {\n    id,\n    className,\n    name,\n    label,\n    status,\n    statusMessage,\n    disabled,\n    classes: classesProp,\n    sliderProps,\n    knobProps,\n    inputProps,\n    requiredMessage = \"The value is required\",\n    noOverlap = true,\n    hideInput = false,\n    required = false,\n    readOnly = false,\n    markProperties = [],\n    defaultValues = [undefined],\n    values: valuesProp = [],\n    knobProperties: knobPropertiesProp,\n    \"aria-errormessage\": ariaErrorMessage,\n    maxPointValue = 100,\n    minPointValue = 0,\n    divisionQuantity = 100,\n    markStep = 20,\n    markDigits = 0,\n    formatMark,\n    onChange,\n    onBlur,\n    onBeforeChange,\n    onAfterChange,\n    formatTooltip,\n    ...others\n  } = useDefaultProps(\"HvSlider\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const elementId = useUniqueId(id);\n\n  const sliderInputId = setId(elementId, \"input\");\n\n  const stepValue = useMemo(\n    () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n    [divisionQuantity, maxPointValue, minPointValue]\n  );\n\n  const inverseStepValue = 1 / stepValue;\n\n  const marks = useMemo(\n    () =>\n      createMark(\n        markProperties,\n        markStep,\n        divisionQuantity,\n        minPointValue,\n        stepValue,\n        markDigits,\n        !!disabled,\n        formatMark\n      ),\n    [\n      disabled,\n      divisionQuantity,\n      formatMark,\n      markDigits,\n      markProperties,\n      markStep,\n      minPointValue,\n      stepValue,\n    ]\n  );\n\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isSingle: boolean = useMemo(\n    () => isSingleSlider(valuesProp, defaultValues),\n    [defaultValues, valuesProp]\n  );\n\n  const value: number[] | undefined = useMemo(\n    () =>\n      valuesProp?.length > 0\n        ? knobsValuesToKnobsPositions(\n            valuesProp,\n            inverseStepValue,\n            minPointValue\n          )\n        : undefined,\n    [inverseStepValue, minPointValue, valuesProp]\n  );\n\n  const defaultKnobsPositions: number[] = useMemo(\n    () =>\n      knobsValuesToKnobsPositions(\n        defaultValues,\n        inverseStepValue,\n        minPointValue\n      ),\n    [defaultValues, inverseStepValue, minPointValue]\n  );\n\n  const [knobsPositions, setKnobsPositions] = useControlled(\n    value,\n    defaultKnobsPositions\n  );\n\n  // Validation related state\n  const { arrayStatus, arrayDefaultStatus } = useMemo(\n    () => convertStatusToArray(knobsPositions.length, status),\n    [knobsPositions.length, status]\n  );\n\n  const [validationStatus, setValidationState] = useControlled(\n    arrayStatus,\n    arrayDefaultStatus\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n  const knobProperties = generateDefaultKnobProperties(\n    knobsPositions.length,\n    disabled,\n    knobPropertiesProp\n  );\n\n  const rangesCount = knobProperties.length - 1;\n\n  const trackStyles = createTrackStyles(knobProperties);\n\n  const knobStyles = createKnobStyles(knobProperties);\n\n  const performValidation = useCallback(() => {\n    let invalid = false;\n\n    const newValidationState = knobsPositions.map((position) => {\n      if (position == null || Number.isNaN(position)) {\n        invalid = true;\n        return validationStates.invalid;\n      }\n      return validationStates.valid;\n    });\n\n    setValidationState([...newValidationState]);\n\n    if (invalid) {\n      setValidationMessage(requiredMessage);\n      return;\n    }\n\n    setValidationMessage(\"\");\n  }, [\n    knobsPositions,\n    requiredMessage,\n    setValidationMessage,\n    setValidationState,\n  ]);\n\n  useEffect(() => {\n    const stepVl = calculateStepValue(\n      maxPointValue,\n      minPointValue,\n      divisionQuantity\n    );\n\n    const inverseStepVl = 1 / stepVl;\n\n    if (valuesProp?.length > 0) {\n      setKnobsPositions(\n        knobsValuesToKnobsPositions(\n          valuesProp.length > 0 ? valuesProp : defaultValues,\n          inverseStepVl,\n          minPointValue\n        )\n      );\n    }\n  }, [\n    defaultValues,\n    divisionQuantity,\n    maxPointValue,\n    minPointValue,\n    setKnobsPositions,\n    valuesProp,\n  ]);\n\n  useEffect(() => {\n    if (!isDirty.current) {\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  }, [knobsPositions, requiredMessage, performValidation]);\n\n  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n      setIsDraggingTrack(true);\n    }\n  };\n\n  const onMouseUpHandler = () => {\n    setIsDraggingTrack(false);\n  };\n\n  /**\n   * Generates an object which posses the current value and position of the knobs.\n   *\n   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n   * @returns {Object} - An object with the positions and values of the knobs.\n   * @memberof HvSlider\n   */\n  const generateKnobsPositionAndValues = (\n    knobsCurrentPosition: number[]\n  ): { knobsPosition: number[]; knobsValues: number[] } => {\n    const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n    const knobsValues: number[] = [];\n\n    let duplicatedValue: number | null = null;\n\n    const findDuplicated: number[] = newKnobsPosition.filter(\n      (item, index) => newKnobsPosition.indexOf(item) !== index\n    );\n\n    if (noOverlap && findDuplicated.length > 0) {\n      [duplicatedValue] = findDuplicated;\n    }\n\n    newKnobsPosition.forEach((position, index, array) => {\n      const newArray: number[] = array;\n      let newPosition: number = position;\n\n      if (noOverlap && newPosition === duplicatedValue) {\n        const previousValue = knobsPositions[index];\n        if (previousValue !== newPosition) {\n          newPosition += newPosition > previousValue ? -1 : 1;\n          newArray[index] = newPosition;\n        }\n      }\n\n      knobsValues[index] = knobsPositionToScaledValue(\n        newPosition,\n        minPointValue,\n        stepValue\n      );\n    }, this);\n\n    return {\n      knobsPosition: newKnobsPosition,\n      knobsValues,\n    };\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n    performValidation();\n\n    onBlur?.(event, knobs.knobsValues, status);\n  };\n\n  /**\n   * Function executed while the knobs changes.\n   *\n   * executes the callback provided by the user with the values and position of the knobs,\n   * also lock the value of the knob in case one is fixed.\n   */\n  const onChangeHandler = (knobsPosition: number[]) => {\n    isDirty.current = true;\n\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    knobProperties.forEach((knobProperty, index) => {\n      if (knobProperty.fixed) {\n        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n          defaultValues[index],\n          minPointValue,\n          inverseStepValue\n        );\n      }\n    });\n\n    if (disabled || readOnly) return;\n\n    onChange?.(knobs.knobsValues);\n\n    setKnobsPositions(knobs.knobsPosition);\n  };\n\n  const onInputChangeHandler = (inputValues: number[], index: number) => {\n    let newKnobPositions = knobsValuesToKnobsPositions(\n      inputValues,\n      inverseStepValue,\n      minPointValue\n    );\n\n    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n    onChangeHandler(newKnobPositions);\n  };\n\n  /**\n   * Function executed before a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onBeforeChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onBeforeChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function executed after a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onAfterChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onAfterChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function used to create a custom knob for the slider.\n   *\n   * TODO: This should be isolated because is creating a sub component,\n   * but there were some problems regarding the underlying component losing\n   * references of the handlers disabling the focus.\n   */\n  const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n    const { value: knobValue, dragging, index } = params;\n    const { style = {}, ...restProps } = knobNode.props;\n    const scaledKnobValue = knobsPositionToScaledValue(\n      knobValue,\n      minPointValue,\n      stepValue\n    ).toFixed(markDigits);\n    if (dragging) {\n      style.backgroundColor = knobProperties[index]?.dragColor;\n    } else {\n      style.backgroundColor = knobProperties[index]?.color;\n    }\n\n    const isEmpty =\n      Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n    const handleId = setId(elementId, \"knob\");\n    const indexedHandleId = setId(handleId, index);\n\n    return (\n      <div\n        key={index}\n        className={cx({\n          [classes.handleContainer]: !!(!disabled && !isEmpty),\n          [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n          [classes.handleHiddenContainer]: isEmpty || readOnly,\n        })}\n      >\n        <Tooltip\n          prefixCls=\"rc-slider-tooltip\"\n          overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n          visible={dragging}\n          placement=\"top\"\n          overlayClassName={classes.sliderTooltip}\n          getTooltipContainer={() =>\n            document.getElementById(indexedHandleId || \"\") as HTMLElement\n          }\n        >\n          <div\n            id={indexedHandleId}\n            style={style}\n            className={classes.handle}\n            {...restProps}\n            aria-label={`${label}-knob-${index}`}\n            aria-valuenow={knobsPositionToScaledValue(\n              knobValue,\n              minPointValue,\n              stepValue\n            )}\n            aria-valuemin={minPointValue}\n            aria-valuemax={maxPointValue}\n            {...knobProps?.[index]}\n          />\n        </Tooltip>\n      </div>\n    );\n  };\n\n  return (\n    <HvFormElement\n      className={cx(\n        classes.root,\n        {\n          [classes.trackStandBy]:\n            !readOnly && !disabled && !isSingle && !isDraggingTrack,\n          [classes.trackDragging]:\n            !readOnly && !disabled && !isSingle && isDraggingTrack,\n          [classes.rootDisabled]: !!disabled,\n        },\n        className\n      )}\n      id={id}\n      name={name}\n      status={statusArrayToFormStatus(validationStatus)}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onMouseDown={onMouseDownHandler}\n      onMouseUp={onMouseUpHandler}\n      onBlur={onBlurHandler}\n      {...others}\n    >\n      {(hasLabel || !hideInput) && (\n        <div\n          className={cx(classes.labelContainer, {\n            [classes.labelIncluded]: hasLabel,\n            [classes.onlyInput]: !hasLabel,\n          })}\n        >\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={sliderInputId}\n              label={label}\n            />\n          )}\n\n          {!hideInput && (\n            <HvSliderInput\n              id={sliderInputId}\n              label={label}\n              values={knobsPositionsToKnobsValues(\n                knobsPositions,\n                stepValue,\n                minPointValue\n              )}\n              onChange={onInputChangeHandler}\n              status={validationStatus}\n              disabled={disabled}\n              readOnly={readOnly}\n              markDigits={markDigits}\n              inputProps={inputProps}\n            />\n          )}\n        </div>\n      )}\n\n      <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n        <Slider\n          ref={ref}\n          range={!isSingle}\n          handleRender={createKnob}\n          className={cx(classes.sliderRoot, {\n            [classes.rootRange]: !isSingle,\n          })}\n          min={0}\n          max={divisionQuantity}\n          step={1}\n          marks={marks}\n          dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n          onChange={(singleValue) =>\n            onChangeHandler(Array<number>().concat(singleValue))\n          }\n          onBeforeChange={(singleValue) =>\n            onBeforeChangeHandler(Array<number>().concat(singleValue))\n          }\n          onAfterChange={(singleValue) =>\n            onAfterChangeHandler(Array<number>().concat(singleValue))\n          }\n          value={\n            knobsPositions.length === 0\n              ? undefined\n              : isSingle\n              ? knobsPositions[0]\n              : [...knobsPositions]\n          }\n          allowCross={false}\n          disabled={disabled}\n          count={rangesCount}\n          railStyle={sliderStyles.rail}\n          handleStyle={knobStyles.knobInner}\n          trackStyle={trackStyles}\n          draggableTrack={!readOnly && !isSingle}\n          {...sliderProps}\n        />\n      </div>\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":["validationStates"],"mappings":"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"}

package/dist/esm/Switch/Switch.js

@@ -37,7 +37,7 @@ const HvSwitch = forwardRef(
       ...others
     } = useDefaultProps("HvSwitch", props);
     const { classes, cx } = useClasses(classesProp);
-    const elementId = useUniqueId(id, "hvswitch");
+    const elementId = useUniqueId(id);
     const [isChecked, setIsChecked] = useControlled(
       checked,
       Boolean(defaultChecked)

package/dist/esm/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\n\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  HvFormStatus,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvSwitchClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the switch.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** @ignore */\n  ref?: MuiSwitchProps[\"ref\"];\n  /** @ignore */\n  component?: MuiSwitchProps[\"component\"];\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n\n      checked,\n      defaultChecked = false,\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      inputProps,\n\n      ...others\n    } = useDefaultProps(\"HvSwitch\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvswitch\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent, newChecked: boolean) => {\n        setIsChecked(() => {\n          // this will only run if uncontrolled\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, required, setIsChecked, setValidationState, value]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId: string | undefined;\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(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        )}\n        <div\n          className={cx(classes.switchContainer, {\n            [classes.invalidSwitch]: isStateInvalid,\n          })}\n        >\n          <HvBaseSwitch\n            ref={ref}\n            id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            onChange={onLocalChange}\n            value={value}\n            checked={isChecked}\n            inputProps={{\n              \"aria-invalid\": isStateInvalid ? true : undefined,\n              \"aria-errormessage\": errorMessageId,\n              \"aria-label\": ariaLabel,\n              \"aria-labelledby\": ariaLabelledBy,\n              \"aria-describedby\": ariaDescribedBy,\n              ...inputProps,\n            }}\n            {...others}\n          />\n        </div>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            className={classes.error}\n            disableBorder\n            disableAdornment\n            hideText\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\n\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  HvFormStatus,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvSwitchClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the switch.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** @ignore */\n  ref?: MuiSwitchProps[\"ref\"];\n  /** @ignore */\n  component?: MuiSwitchProps[\"component\"];\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n\n      checked,\n      defaultChecked = false,\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      inputProps,\n\n      ...others\n    } = useDefaultProps(\"HvSwitch\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent, newChecked: boolean) => {\n        setIsChecked(() => {\n          // this will only run if uncontrolled\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, required, setIsChecked, setValidationState, value]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId: string | undefined;\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(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        )}\n        <div\n          className={cx(classes.switchContainer, {\n            [classes.invalidSwitch]: isStateInvalid,\n          })}\n        >\n          <HvBaseSwitch\n            ref={ref}\n            id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            onChange={onLocalChange}\n            value={value}\n            checked={isChecked}\n            inputProps={{\n              \"aria-invalid\": isStateInvalid ? true : undefined,\n              \"aria-errormessage\": errorMessageId,\n              \"aria-label\": ariaLabel,\n              \"aria-labelledby\": ariaLabelledBy,\n              \"aria-describedby\": ariaDescribedBy,\n              ...inputProps,\n            }}\n            {...others}\n          />\n        </div>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            className={classes.error}\n            disableBorder\n            disableAdornment\n            hideText\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/TableSection/TableSection.js

@@ -14,7 +14,7 @@ const HvTableSection = forwardRef(
       ...others
     } = useDefaultProps("HvTableSection", props);
     const { classes } = useClasses(classesProp);
-    const elementId = useUniqueId(id, "hvTableSection");
+    const elementId = useUniqueId(id);
     return /* @__PURE__ */ jsx(HvSection, { id: elementId, ref, classes, ...others, children });
   }
 );

package/dist/esm/TableSection/TableSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSection.js","sources":["../../../src/TableSection/TableSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { staticClasses, useClasses } from \"./TableSection.styles\";\nimport { HvSection, HvSectionProps } from \"../Section\";\n\nexport { staticClasses as tableSectionClasses };\n\nexport type HvTableSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableSectionProps extends HvSectionProps {}\n\n/**\n * The `TableSection` component is a wrapper for the `Section` component that applies\n * specific stylings for tables that follow the latest DS specifications.\n */\nexport const HvTableSection = forwardRef<HTMLDivElement, HvTableSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvTableSection\", props);\n\n    const { classes } = useClasses(classesProp);\n    const elementId = useUniqueId(id, \"hvTableSection\");\n\n    return (\n      <HvSection id={elementId} ref={ref} classes={classes} {...others}>\n        {children}\n      </HvSection>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,YAAY,YAAY,IAAI,gBAAgB;AAGhD,WAAA,oBAAC,aAAU,IAAI,WAAW,KAAU,SAAmB,GAAG,QACvD,SACH,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"TableSection.js","sources":["../../../src/TableSection/TableSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { staticClasses, useClasses } from \"./TableSection.styles\";\nimport { HvSection, HvSectionProps } from \"../Section\";\n\nexport { staticClasses as tableSectionClasses };\n\nexport type HvTableSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableSectionProps extends HvSectionProps {}\n\n/**\n * The `TableSection` component is a wrapper for the `Section` component that applies\n * specific stylings for tables that follow the latest DS specifications.\n */\nexport const HvTableSection = forwardRef<HTMLDivElement, HvTableSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvTableSection\", props);\n\n    const { classes } = useClasses(classesProp);\n    const elementId = useUniqueId(id);\n\n    return (\n      <HvSection id={elementId} ref={ref} classes={classes} {...others}>\n        {children}\n      </HvSection>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,YAAY,YAAY,EAAE;AAG9B,WAAA,oBAAC,aAAU,IAAI,WAAW,KAAU,SAAmB,GAAG,QACvD,SACH,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/TagsInput/TagsInput.js

@@ -65,7 +65,7 @@ const HvTagsInput = forwardRef(
       ...others
     } = useDefaultProps("HvTagsInput", props);
     const { classes, cx, css } = useClasses(classesProp);
-    const elementId = useUniqueId(id, "hvTagsInput");
+    const elementId = useUniqueId(id);
     const hasLabel = textAreaLabel != null;
     const hasDescription = description != null;
     const [value, setValue] = useControlled(valueProp, defaultValue);

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { baseInputClasses } from \"../BaseInput\";\nimport { HvInput } from \"../Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../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 suggestions. */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** The validation function that will be executed when adding tags in the suggestions mode. */\n  suggestionValidation?: (value: string) => boolean;\n  /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n  suggestionsLoose?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<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      suggestionValidation,\n      suggestionsLoose = false,\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 (container == null) 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            case \"Enter\":\n              if (\n                canShowSuggestions &&\n                suggestionsLoose &&\n                (suggestionValidation?.(tagInput) || !suggestionValidation)\n              ) {\n                addTag(event, tagInput);\n\n                // set the input value (only when value is uncontrolled)\n                setTagInput(tagInput);\n\n                focusInput();\n                suggestionClearHandler();\n              }\n              break;\n            default:\n              break;\n          }\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        getSuggestions,\n        isTagSelected,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\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":["validationState","validationStates","baseInputClasses"],"mappings":"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"}
+{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { baseInputClasses } from \"../BaseInput\";\nimport { HvInput } from \"../Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../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 suggestions. */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** The validation function that will be executed when adding tags in the suggestions mode. */\n  suggestionValidation?: (value: string) => boolean;\n  /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n  suggestionsLoose?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<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      suggestionValidation,\n      suggestionsLoose = false,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled(\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 (container == null) 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            case \"Enter\":\n              if (\n                canShowSuggestions &&\n                suggestionsLoose &&\n                (suggestionValidation?.(tagInput) || !suggestionValidation)\n              ) {\n                addTag(event, tagInput);\n\n                // set the input value (only when value is uncontrolled)\n                setTagInput(tagInput);\n\n                focusInput();\n                suggestionClearHandler();\n              }\n              break;\n            default:\n              break;\n          }\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        getSuggestions,\n        isTagSelected,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\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":["validationState","validationStates","baseInputClasses"],"mappings":"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"}

package/dist/esm/TextArea/TextArea.js

@@ -55,7 +55,7 @@ const HvTextArea = forwardRef((props, ref) => {
     ...others
   } = useDefaultProps("HvTextArea", props);
   const { classes, cx } = useClasses(classesProp);
-  const elementId = useUniqueId(id, "hvtextarea");
+  const elementId = useUniqueId(id);
   const isDirty = useRef(false);
   const inputRef = useRef(null);
   const forkedRef = useForkRef(ref, inputRefProp, inputRef);

package/dist/esm/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/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/utils\";\n\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport validationStates, {\n  isInvalid,\n} from \"../Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"../types/forms\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"../BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../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  /**\n   * Limit the string to the maxCharQuantity length.\n   */\n  const limitValue = (currentValue: string) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    const isOverflow =\n      maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;\n\n    return !isOverflow\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  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event as any, 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  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (\n    event,\n    currentValue\n  ) => {\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 as any, 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: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // Reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event as any, 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":["validationState","validationStates"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/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/utils\";\n\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport validationStates, {\n  isInvalid,\n} from \"../Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"../types/forms\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"../BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../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);\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  /**\n   * Limit the string to the maxCharQuantity length.\n   */\n  const limitValue = (currentValue: string) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    const isOverflow =\n      maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;\n\n    return !isOverflow\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  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event as any, 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  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (\n    event,\n    currentValue\n  ) => {\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 as any, 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: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // Reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event as any, 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":["validationState","validationStates"],"mappings":"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"}

package/dist/esm/TimePicker/TimePicker.js

@@ -65,7 +65,7 @@ const HvTimePicker = forwardRef(
       dropdownProps = {},
       ...others
     } = useDefaultProps("HvTimePicker", props);
-    const id = useUniqueId(idProp, "hvtimepicker");
+    const id = useUniqueId(idProp);
     const { classes, cx } = useClasses(classesProp);
     const timeFieldRef = useRef(null);
     const { ref: refProp, ...otherDropdownProps } = dropdownProps;