@hitachivantara/uikit-react-core 5.27.6 → 5.27.7

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const date = require("@internationalized/date");
@@ -11,7 +12,6 @@ const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const setId = require("../../utils/setId.cjs");
 const Placeholder = require("./Placeholder.cjs");
 const TimePicker_styles = require("./TimePicker.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Unit = require("./Unit/Unit.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
@@ -120,97 +120,37 @@ const HvTimePicker = (props) => {
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const isStateInvalid = validationState === "invalid";
   const errorMessageId = isStateInvalid ? canShowError ? setId.setId(id, "error") : ariaErrorMessage : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-    name,
-    required,
-    disabled,
-    status: validationState,
-    className: cx(classes.root, className),
-    ...others,
-    children: [(label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.labelContainer,
-      children: [label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-        label,
-        className: classes.label,
-        ...labelProps
-      }), description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
-        className: classes.description,
-        ...descriptionProps,
-        children: description
-      })]
-    }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
-      role: "combobox",
-      variableWidth: true,
-      disabled,
-      readOnly,
-      placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(Placeholder.Placeholder, {
-        ref,
-        name,
-        state,
-        placeholders,
-        className: cx(classes.placeholder, {
-          [classes.placeholderDisabled]: disabled
-        }),
-        ...fieldProps
-      }),
-      classes: {
-        header: cx(classes.dropdownHeader, {
-          [classes.dropdownHeaderInvalid]: isStateInvalid
-        }),
-        panel: classes.dropdownPanel,
-        headerOpen: classes.dropdownHeaderOpen
-      },
-      placement: "right",
-      adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Time, {
-        color: disabled ? "secondary_60" : void 0,
-        className: classes.icon
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { name, required, disabled, status: validationState, className: cx(classes.root, className), ...others, children: [
+    (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { label, className: classes.label, ...labelProps }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { className: classes.description, ...descriptionProps, children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, { role: "combobox", variableWidth: true, disabled, readOnly, placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(Placeholder.Placeholder, { ref, name, state, placeholders, className: cx(classes.placeholder, {
+      [classes.placeholderDisabled]: disabled
+    }), ...fieldProps }), classes: {
+      header: cx(classes.dropdownHeader, {
+        [classes.dropdownHeaderInvalid]: isStateInvalid
       }),
-      expanded: open,
-      onToggle: (evt, newOpen) => {
-        if (disableExpand)
-          return;
-        setOpen(newOpen);
-        onToggle == null ? void 0 : onToggle(evt, newOpen);
-      },
-      onContainerCreation: (containerRef) => {
-        var _a;
-        (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
-      },
-      "aria-haspopup": "dialog",
-      "aria-label": ariaLabel,
-      "aria-labelledby": fieldProps["aria-labelledby"],
-      "aria-describedby": fieldProps["aria-describedby"],
-      "aria-invalid": isStateInvalid ? true : void 0,
-      "aria-errormessage": errorMessageId,
-      disablePortal,
-      popperProps: {
-        modifiers: [{
-          name: "preventOverflow",
-          enabled: escapeWithReference
-        }]
-      },
-      ...dropdownProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ref,
-        className: classes.timePopperContainer,
-        children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(Unit.Unit, {
-          state,
-          segment,
-          placeholder: placeholders[segment.type],
-          onAdd: () => state.increment(segment.type),
-          onSub: () => state.decrement(segment.type),
-          onChange: (evt, val) => {
-            state.setSegment(segment.type, Number(val));
-          }
-        }, i))
-      })
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-      id: setId.setId(id, "error"),
-      disableBorder: true,
-      className: classes.error,
-      children: validationMessage
-    })]
-  });
+      panel: classes.dropdownPanel,
+      headerOpen: classes.dropdownHeaderOpen
+    }, placement: "right", adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Time, { color: disabled ? "secondary_60" : void 0, className: classes.icon }), expanded: open, onToggle: (evt, newOpen) => {
+      if (disableExpand)
+        return;
+      setOpen(newOpen);
+      onToggle == null ? void 0 : onToggle(evt, newOpen);
+    }, onContainerCreation: (containerRef) => {
+      var _a;
+      (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
+    }, "aria-haspopup": "dialog", "aria-label": ariaLabel, "aria-labelledby": fieldProps["aria-labelledby"], "aria-describedby": fieldProps["aria-describedby"], "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, disablePortal, popperProps: {
+      modifiers: [{
+        name: "preventOverflow",
+        enabled: escapeWithReference
+      }]
+    }, ...dropdownProps, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes.timePopperContainer, children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(Unit.Unit, { state, segment, placeholder: placeholders[segment.type], onAdd: () => state.increment(segment.type), onSub: () => state.decrement(segment.type), onChange: (evt, val) => {
+      state.setSegment(segment.type, Number(val));
+    } }, i)) }) }),
+    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(id, "error"), disableBorder: true, className: classes.error, children: validationMessage })
+  ] });
 };
 exports.timePickerClasses = TimePicker_styles.staticClasses;
 exports.HvTimePicker = HvTimePicker;

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

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

package/dist/cjs/components/TimePicker/Unit/Unit.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Unit_styles = require("./Unit.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ToggleButton = require("../../ToggleButton/ToggleButton.cjs");
 const Input = require("../../Input/Input.cjs");
 const Unit = ({
@@ -23,48 +23,28 @@ const Unit = ({
     text
   } = segment;
   const placeholder = placeholderProp ?? segment.placeholder;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: classes.root,
-    children: [type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {
-      onClick: onAdd
-    }), type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.separator,
-      children: text
-    }), type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.HvToggleButton, {
-      className: classes.periodToggle,
-      onClick: onAdd,
-      children: text
-    }), ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      id,
-      disableClear: true,
-      style: {
-        ...uikitStyles.theme.typography.title3
-      },
-      classes: {
-        input: classes.input,
-        root: classes.inputContainer,
-        inputBorderContainer: classes.inputBorderContainer,
-        inputRoot: classes.inputRoot
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Enter") {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-      },
-      required: true,
-      status: state.validationState,
-      value: text.padStart(2, "0"),
-      onChange,
-      placeholder,
-      inputProps: {
-        autoComplete: "off",
-        type: "number"
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { onClick: onAdd }),
+    type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator, children: text }),
+    type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.HvToggleButton, { className: classes.periodToggle, onClick: onAdd, children: text }),
+    ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { id, disableClear: true, style: {
+      ...uikitStyles.theme.typography.title3
+    }, classes: {
+      input: classes.input,
+      root: classes.inputContainer,
+      inputBorderContainer: classes.inputBorderContainer,
+      inputRoot: classes.inputRoot
+    }, onKeyDown: (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
       }
-    }), type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {
-      onClick: onSub
-    })]
-  });
+    }, required: true, status: state.validationState, value: text.padStart(2, "0"), onChange, placeholder, inputProps: {
+      autoComplete: "off",
+      type: "number"
+    } }),
+    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { onClick: onSub })
+  ] });
 };
 exports.Unit = Unit;
 //# sourceMappingURL=Unit.cjs.map