@hitachivantara/uikit-react-core 5.82.1 → 5.82.3

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  useTimeFieldState,\n  type TimeFieldStateOptions,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder, PlaceholderProps } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n  if (!value) return value;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\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\"\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 | null;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue | null;\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 visually show the seconds control */\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\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  function HvTimePicker(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: showSeconds === false ? \"minute\" : \"second\",\n      hourCycle: timeFormat === \"12\" ? 12 : 24,\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef,\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled<HvFormStatus>(status, \"standBy\");\n\n    const placeholders: PlaceholderProps[\"placeholders\"] = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["Time","HvTimePicker","TimeIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,SAAS,CAAC,UAAqC;AAC/C,MAAA,CAAC,MAAc,QAAA;AACnB,QAAM,EAAE,OAAO,SAAS,QAAY,IAAA;AACpC,SAAO,IAAIA,OAAK,OAAO,SAAS,OAAO;AACzC;AAgFO,MAAM,eAAe;AAAA,EAC1B,SAASC,cAAa,OAAO,KAAK;AAC1B,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA,IAAI;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MAEA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MAErB;AAAA,MACA,mBAAmB;AAAA,MACnB,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MAErB,OAAO;AAAA,MACP,cAAc;AAAA,MAEd;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MAET;AAAA,MACA;AAAA;AAAA,MAGA,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,gBAAgB,CAAC;AAAA,MACjB,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEnC,UAAA,KAAK,YAAY,MAAM;AAE7B,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,eAAe,OAAuB,IAAI;AAEhD,UAAM,EAAE,KAAK,SAAS,GAAG,mBAAuB,IAAA;AAC1C,UAAA,oBAAoB,WAAW,KAAK,OAAO;AAEjD,UAAM,aAAoC;AAAA,MACxC,OAAO,OAAO,SAAS;AAAA,MACvB,cAAc,OAAO,gBAAgB;AAAA,MACrC;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa,gBAAgB,QAAQ,WAAW;AAAA,MAChD,WAAW,eAAe,OAAO,KAAK;AAAA,MACtC,UAAU,CAAC,UAAU;AACnB,cAAM,EAAE,MAAM,OAAO,QAAQ,SAAS,QAAQ,YAAY;AAC1D,mBAAW,EAAE,OAAO,SAAS,QAAA,CAAS;AAAA,MAAA;AAAA,IAE1C;AACM,UAAA,QAAQ,kBAAkB,UAAU;AAC1C,UAAM,EAAE,YAAY,YAAY,iBAAqB,IAAA;AAAA,MACnD;AAAA,QACE,GAAG;AAAA,QACH;AAAA,QACA,cAAc;AAAA,QACd,mBAAmB;AAAA,QACnB,oBAAoB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AACnE,UAAM,CAAC,eAAe,IAAI,cAA4B,QAAQ,SAAS;AAEvE,UAAM,eAAiD;AAAA,MACrD,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA;AAAA,MAEV,CAAC,kBAAkB,oBAAoB,kBAAkB;AAAA,IAC3D;AAMM,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,UAAM,iBAAiB,oBAAoB;AAC3C,UAAM,iBAAiB,iBACnB,eACE,MAAM,IAAI,OAAO,IACjB,mBACF;AAGF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,SAAS,gBACT,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,SAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,WAAW,QAAQ;AAAA,gBAClB,GAAG;AAAA,cAAA;AAAA,YACN;AAAA,YAED,eACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBAClB,GAAG;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,eAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA,aACE,eAAe,CAAC,MAAM,QACpB,cAEA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,WAAW,GAAG,QAAQ,aAAa;AAAA,oBACjC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,kBAAA,CAChC;AAAA,kBACA,GAAG;AAAA,gBAAA;AAAA,cACN;AAAA,cAGJ,SAAS;AAAA,gBACP,QAAQ,GAAG,QAAQ,gBAAgB;AAAA,kBACjC,CAAC,QAAQ,qBAAqB,GAAG;AAAA,gBAAA,CAClC;AAAA,gBACD,OAAO,QAAQ;AAAA,gBACf,YAAY,QAAQ;AAAA,cACtB;AAAA,cACA,WAAU;AAAA,cACV,WACE;AAAA,gBAACC;AAAAA,gBAAA;AAAA,kBACC,OAAO,WAAW,iBAAiB;AAAA,kBACnC,WAAW,QAAQ;AAAA,gBAAA;AAAA,cACrB;AAAA,cAEF,UAAU;AAAA,cACV,UAAU,CAAC,KAAK,YAAY;AAC1B,oBAAI,cAAe;AACnB,wBAAQ,OAAO;AACf,2BAAW,KAAK,OAAO;AAAA,cACzB;AAAA,cACA,qBAAqB,CAAC,iBAAiB;AACrC,8BAAc,qBAAqB,OAAO,EAAE,CAAC,GAAG,MAAM;AAAA,cACxD;AAAA,cACA,iBAAc;AAAA,cACd,cAAY;AAAA,cACZ,mBAAiB,WAAW,iBAAiB;AAAA,cAC7C,oBAAkB,WAAW,kBAAkB;AAAA,cAC/C,gBAAc,iBAAiB,OAAO;AAAA,cACtC,qBAAmB;AAAA,cACnB;AAAA,cACA,aAAa;AAAA,gBACX,WAAW;AAAA,kBACT,EAAE,MAAM,mBAAmB,SAAS,oBAAoB;AAAA,gBAAA;AAAA,cAE5D;AAAA,cACC,GAAG;AAAA,cAEJ,UAAC,oBAAA,OAAA,EAAI,KAAK,cAAc,WAAW,QAAQ,qBACxC,UAAA,MAAM,SAAS,IAAI,CAAC,SAAS,MAC5B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC;AAAA,kBACA;AAAA,kBACA,aAAa,aAAa,QAAQ,IAAI;AAAA,kBACtC,OAAO,MAAM,MAAM,UAAU,QAAQ,IAAI;AAAA,kBACzC,OAAO,MAAM,MAAM,UAAU,QAAQ,IAAI;AAAA,kBACzC,UAAU,CAAC,KAAK,QAAQ;AACtB,0BAAM,WAAW,QAAQ,MAAM,OAAO,GAAG,CAAC;AAAA,kBAAA;AAAA,gBAC5C;AAAA,gBARK;AAAA,cAAA,CAUR,EACH,CAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEC,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,OAAO;AAAA,cACrB,eAAa;AAAA,cACb,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  useTimeFieldState,\n  type TimeFieldStateOptions,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder, PlaceholderProps } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n  if (!value) return value;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\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\"\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 | null;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue | null;\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 visually show the seconds control */\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\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  function HvTimePicker(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required,\n      disabled,\n      readOnly,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: showSeconds === false ? \"minute\" : \"second\",\n      hourCycle: timeFormat === \"12\" ? 12 : 24,\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef,\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled<HvFormStatus>(status, \"standBy\");\n\n    const placeholders: PlaceholderProps[\"placeholders\"] = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["Time","HvTimePicker","TimeIcon"],"mappings":"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"}

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 import { ds3, ds5, pentahoPlus, theme, themes } from "@hitachivantara/uikit-styles";
 import { createClasses, useCss, useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { HvFormElement } from "./FormElement/FormElement.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useComputation } from "./hooks/useComputation.js";
 import { useControlled } from "./hooks/useControlled.js";
@@ -55,31 +56,25 @@ import { staticClasses as staticClasses4 } from "./ListContainer/ListContainer.s
 import { HvListContainer } from "./ListContainer/ListContainer.js";
 import { staticClasses as staticClasses5 } from "./ListContainer/ListItem/ListItem.styles.js";
 import { HvListItem } from "./ListContainer/ListItem/ListItem.js";
-import { staticClasses as staticClasses6 } from "./Forms/CharCounter/CharCounter.styles.js";
-import { HvCharCounter } from "./Forms/CharCounter/CharCounter.js";
-import { staticClasses as staticClasses7 } from "./Forms/Adornment/Adornment.styles.js";
-import { HvAdornment } from "./Forms/Adornment/Adornment.js";
-import { staticClasses as staticClasses8 } from "./Forms/FormElement/FormElement.styles.js";
-import { HvFormElement } from "./Forms/FormElement/FormElement.js";
-import { HvFormElementContext, HvFormElementContextConsumer, HvFormElementContextProvider } from "./Forms/FormElement/context/FormElementContext.js";
-import { HvFormElementValueContext, HvFormElementValueContextConsumer, HvFormElementValueContextProvider } from "./Forms/FormElement/context/FormElementValueContext.js";
-import { HvFormElementDescriptorsContext, HvFormElementDescriptorsContextConsumer, HvFormElementDescriptorsContextProvider } from "./Forms/FormElement/context/FormElementDescriptorsContext.js";
-import { buildAriaPropsFromContext, buildFormElementPropsFromContext, findDescriptors, getIdReferenceFor, getIdReferenceListFor } from "./Forms/FormElement/utils/FormUtils.js";
-import { isInvalid, isValid } from "./Forms/FormElement/validationStates.js";
-import { staticClasses as staticClasses9 } from "./Forms/Label/Label.styles.js";
-import { HvLabel } from "./Forms/Label/Label.js";
-import { staticClasses as staticClasses10 } from "./Forms/InfoMessage/InfoMessage.styles.js";
-import { HvInfoMessage } from "./Forms/InfoMessage/InfoMessage.js";
-import { staticClasses as staticClasses11 } from "./Forms/WarningText/WarningText.styles.js";
-import { HvWarningText } from "./Forms/WarningText/WarningText.js";
+import { staticClasses as staticClasses6 } from "./FormElement/CharCounter/CharCounter.styles.js";
+import { HvCharCounter } from "./FormElement/CharCounter/CharCounter.js";
+import { staticClasses as staticClasses7 } from "./FormElement/Adornment/Adornment.styles.js";
+import { HvAdornment } from "./FormElement/Adornment/Adornment.js";
+import { staticClasses as staticClasses8 } from "./FormElement/FormElement.styles.js";
+import { staticClasses as staticClasses9 } from "./FormElement/Label/Label.styles.js";
+import { HvLabel } from "./FormElement/Label/Label.js";
+import { staticClasses as staticClasses10 } from "./FormElement/InfoMessage/InfoMessage.styles.js";
+import { HvInfoMessage } from "./FormElement/InfoMessage/InfoMessage.js";
+import { staticClasses as staticClasses11 } from "./FormElement/WarningText/WarningText.styles.js";
+import { HvWarningText } from "./FormElement/WarningText/WarningText.js";
 import { staticClasses as staticClasses12 } from "./Select/Select.styles.js";
 import { HvSelect } from "./Select/Select.js";
 import { HvOption, optionClasses } from "./Select/Option.js";
 import { HvOptionGroup, optionGroupClasses } from "./Select/OptionGroup.js";
 import { staticClasses as staticClasses13 } from "./SelectionList/SelectionList.styles.js";
 import { HvSelectionList } from "./SelectionList/SelectionList.js";
-import { staticClasses as staticClasses14 } from "./Forms/Suggestions/Suggestions.styles.js";
-import { HvSuggestions } from "./Forms/Suggestions/Suggestions.js";
+import { staticClasses as staticClasses14 } from "./FormElement/Suggestions/Suggestions.styles.js";
+import { HvSuggestions } from "./FormElement/Suggestions/Suggestions.js";
 import { staticClasses as staticClasses15 } from "./BaseInput/BaseInput.styles.js";
 import { HvBaseInput } from "./BaseInput/BaseInput.js";
 import { staticClasses as staticClasses16 } from "./BaseDropdown/BaseDropdown.styles.js";
@@ -372,15 +367,6 @@ export {
   HvFocus,
   HvFooter,
   HvFormElement,
-  HvFormElementContext,
-  HvFormElementContextConsumer,
-  HvFormElementContextProvider,
-  HvFormElementDescriptorsContext,
-  HvFormElementDescriptorsContextConsumer,
-  HvFormElementDescriptorsContextProvider,
-  HvFormElementValueContext,
-  HvFormElementValueContextConsumer,
-  HvFormElementValueContextProvider,
   HvGlobalActions,
   HvGrid,
   HvHeader,
@@ -483,8 +469,6 @@ export {
   staticClasses28 as baseRadioClasses,
   staticClasses29 as baseSwitchClasses,
   staticClasses30 as breadCrumbClasses,
-  buildAriaPropsFromContext,
-  buildFormElementPropsFromContext,
   staticClasses31 as bulkActionsClasses,
   staticClasses2 as buttonBaseClasses,
   staticClasses32 as buttonClasses,
@@ -527,7 +511,6 @@ export {
   staticClasses58 as fileClasses,
   staticClasses57 as fileUploaderPreviewClasses,
   staticClasses59 as filterGroupClasses,
-  findDescriptors,
   fixedForwardRef,
   staticClasses3 as focusClasses,
   staticClasses60 as footerClasses,
@@ -538,8 +521,6 @@ export {
   getFocusableList,
   getHeaderFooterPropsHook,
   getHeaderGroupPropsHook,
-  getIdReferenceFor,
-  getIdReferenceListFor,
   getPrevNextFocus,
   getSelectorIcons,
   getTableHeadPropsHook,
@@ -572,10 +553,8 @@ export {
   staticClasses67 as inlineEditorClasses,
   staticClasses68 as inputClasses,
   isBrowser,
-  isInvalid,
   isKey,
   isOneOfKeys,
-  isValid,
   staticClasses69 as kpiClasses,
   staticClasses9 as labelClasses,
   staticClasses45 as leftControlClasses,

package/dist/esm/index.js.map

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

package/dist/types/index.d.ts

@@ -17,8 +17,8 @@ import { ContainerProps } from '@mui/material/Container';
 import { Context } from 'react';
 import { createClasses } from '@hitachivantara/uikit-react-utils';
 import { CSSProperties } from 'react';
-import { default as default_2 } from 'react';
-import { default as default_3 } from 'embla-carousel-react';
+import { default as default_2 } from 'embla-carousel-react';
+import { default as default_3 } from 'react';
 import { defaultCacheKey } from '@hitachivantara/uikit-react-shared';
 import { defaultEmotionCache } from '@hitachivantara/uikit-react-shared';
 import { DialogActionsProps } from '@mui/material/DialogActions';
@@ -412,16 +412,6 @@ export declare interface Breakpoint {
     spacing?: HvBreakpoints;
 }
 
-export declare const buildAriaPropsFromContext: (props: InputBaseComponentProps, context: HvFormElementDescriptorsContextValue, isInvalid: boolean, inputId?: string) => default_2.AriaAttributes;
-
-export declare const buildFormElementPropsFromContext: (name?: string, disabled?: boolean, readOnly?: boolean, required?: boolean, context?: HvFormElementContextValue) => {
-    name: string | undefined;
-    disabled: boolean | undefined;
-    readOnly: boolean | undefined;
-    required: boolean | undefined;
-    status: string | undefined;
-};
-
 export declare const bulkActionsClasses: {
     root: string;
     semantic: string;
@@ -781,11 +771,6 @@ export declare const defaultGetToggleRowSelectedProps: (props: any, meta: any) =
 declare interface DefaultTreeViewPluginParameters<Multiple extends boolean | undefined> extends UseTreeViewNodesParameters, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewContextValueBuilderParameters {
 }
 
-declare interface Descriptor {
-    id?: string;
-    htmlFor?: string;
-}
-
 export declare const dialogActionClasses: {
     root: string;
     fullscreen: string;
@@ -915,31 +900,6 @@ export declare const filterGroupClasses: {
     error: string;
 };
 
-/**
- * Scans the element's children looking for the children IDs that match the different form element types.
- * This function will produce an object that has a key for each provided name
- * Inside each key there will be an array with each id of the found descriptor.
- *
- * @param {Array} children - The children inside the form element to scan.
- * @param {Object} descriptors - Initial descriptors map (used for recursion).
- *
- */
-export declare const findDescriptors: (children: default_2.ReactNode, descriptors?: {
-    input: Descriptor[];
-    label: Descriptor[];
-    description: Descriptor[];
-    controlled: Descriptor[];
-    errormessage: Descriptor[];
-    HvCalendarHeader?: Descriptor[];
-}) => {
-    input: Descriptor[];
-    label: Descriptor[];
-    description: Descriptor[];
-    controlled: Descriptor[];
-    errormessage: Descriptor[];
-    HvCalendarHeader?: Descriptor[] | undefined;
-};
-
 declare type FixComponentProps<T> = T extends any ? T : never;
 
 /** React.forwardRef with fixed type declarations */
@@ -999,10 +959,6 @@ export declare const getHeaderFooterPropsHook: (props: any, { column }: any) =>
 
 export declare const getHeaderGroupPropsHook: (props: any, { instance }: any) => any[];
 
-export declare const getIdReferenceFor: (formElementType: string, descriptors: any, filterFor?: null) => any;
-
-export declare const getIdReferenceListFor: (formElementType: string, descriptors: any, filterFor?: string | null) => any;
-
 /** Auxiliary function to find adjacent nodes to focus. */
 export declare const getPrevNextFocus: (nodeId?: string) => {
     nextFocus: any;
@@ -2398,7 +2354,7 @@ export declare interface HvCarouselProps extends HvBaseProps<HTMLDivElement, "ti
     /** Thumbnails position. */
     thumbnailsPosition?: "top" | "bottom";
     /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */
-    carouselOptions?: Parameters<typeof default_3>[0];
+    carouselOptions?: Parameters<typeof default_2>[0];
     /** Function that renders the thumbnail.  */
     renderThumbnail?: (index: number) => React.ReactNode;
     /** The callback fired when the active slide changes. */
@@ -2978,7 +2934,7 @@ export declare interface HvDialogProps extends Omit<DialogProps, "fullScreen" |
     /** Current state of the Dialog. */
     open?: boolean;
     /** Callback fired when the component requests to be closed. */
-    onClose?: (event: default_2.MouseEvent<HTMLButtonElement> | {}, reason?: "escapeKeyDown" | "backdropClick") => void;
+    onClose?: (event: default_3.MouseEvent<HTMLButtonElement> | {}, reason?: "escapeKeyDown" | "backdropClick") => void;
     /** @inheritdoc */
     maxWidth?: DialogProps["maxWidth"];
     /** @inheritdoc */
@@ -3419,19 +3375,19 @@ declare interface HvDropZoneLabels {
 /**
  * Empty states communicate that there’s no information, data or values to display in a given context.
  */
-export declare const HvEmptyState: default_2.ForwardRefExoticComponent<HvEmptyStateProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare const HvEmptyState: default_3.ForwardRefExoticComponent<HvEmptyStateProps & default_3.RefAttributes<HTMLDivElement>>;
 
 export declare type HvEmptyStateClasses = ExtractNames<typeof useClasses_68>;
 
 export declare interface HvEmptyStateProps extends HvBaseProps<HTMLDivElement, "title"> {
     /** Icon to be presented. */
-    icon: default_2.ReactNode;
+    icon: default_3.ReactNode;
     /** The title to be shown. */
-    title?: default_2.ReactNode;
+    title?: default_3.ReactNode;
     /** The message to be shown. */
-    message?: default_2.ReactNode;
+    message?: default_3.ReactNode;
     /** The action message to be shown. */
-    action?: default_2.ReactNode;
+    action?: default_3.ReactNode;
     /** A Jss Object used to override or extend the styles applied to the empty state component. */
     classes?: HvEmptyStateClasses;
 }
@@ -3761,6 +3717,12 @@ declare type HvFooterProps_2<D extends object = Record<string, unknown>> = HvTab
     column: HvColumnInstance<D>;
 };
 
+/**
+ * Provides form-related context (ie. required/disabled/readOnly) for building form components,
+ * analogous to MUI's [`FormControl`](https://mui.com/material-ui/api/form-control/) component.
+ *
+ * It is used internally to build UI Kit's form components (eg. `HvInput`, `HvDatePicker`), and can be used to build custom form components.
+ */
 export declare const HvFormElement: {
     (props: HvFormElementProps): JSX_3.Element;
     formElementType: string;
@@ -3768,40 +3730,33 @@ export declare const HvFormElement: {
 
 export declare type HvFormElementClasses = ExtractNames<typeof useClasses_8>;
 
-export declare const HvFormElementContext: default_2.Context<HvFormElementContextValue>;
-
-export declare const HvFormElementContextConsumer: default_2.Consumer<HvFormElementContextValue>;
-
-export declare const HvFormElementContextProvider: default_2.Provider<HvFormElementContextValue>;
-
-export declare interface HvFormElementContextValue {
-    elementId?: string;
-    elementDisabled?: boolean;
-    elementRequired?: boolean;
-    elementStatus?: string;
-    elementReadOnly?: boolean;
-    elementName?: string;
-}
-
-export declare const HvFormElementDescriptorsContext: default_2.Context<HvFormElementDescriptorsContextValue>;
-
-export declare const HvFormElementDescriptorsContextConsumer: default_2.Consumer<HvFormElementDescriptorsContextValue>;
-
-export declare const HvFormElementDescriptorsContextProvider: default_2.Provider<HvFormElementDescriptorsContextValue>;
-
-export declare interface HvFormElementDescriptorsContextValue {
-    input?: any;
-    label?: any;
-    descriptors?: any;
-}
-
-export declare interface HvFormElementProps extends HvBaseProps<HTMLDivElement, "onChange" | "onToggle"> {
+declare interface HvFormElementContextValue {
+    /** id to be applied to the form element root node. */
+    id?: string;
     /**
      * Name of the form element.
      *
      * Part of a name/value pair, should be the name property of the underling native input.
      */
     name?: string;
+    /**
+     * The status of the form element.
+     *
+     * Valid is correct, invalid is incorrect and standBy means no validations have run.
+     *
+     * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+     * or "invalid" after any change to the state.
+     */
+    status?: HvFormStatus;
+    /** Whether the form element is disabled. */
+    disabled?: boolean;
+    /** Indicates that user input is required on the form element. */
+    required?: boolean;
+    /** Indicates that the form element is not editable. */
+    readOnly?: boolean;
+}
+
+export declare interface HvFormElementProps extends HvFormElementContextValue, HvBaseProps<HTMLDivElement, "onChange" | "onToggle"> {
     /**
      * Current value of the form element.
      *
@@ -3817,21 +3772,6 @@ export declare interface HvFormElementProps extends HvBaseProps<HTMLDivElement,
     label?: React.ReactNode;
     /** Provide additional descriptive text for the form element. */
     description?: React.ReactNode;
-    /** Whether the form element is disabled. */
-    disabled?: boolean;
-    /** Indicates that the form element is not editable. */
-    readOnly?: boolean;
-    /** Indicates that user input is required on the form element. */
-    required?: boolean;
-    /**
-     * The status of the form element.
-     *
-     * Valid is correct, invalid is incorrect and standBy means no validations have run.
-     *
-     * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
-     * or "invalid" after any change to the state.
-     */
-    status?: HvFormStatus;
     /** The error message to show when `status` is "invalid". */
     statusMessage?: string;
     /** The callback fired when the value changes. */
@@ -3840,19 +3780,13 @@ export declare interface HvFormElementProps extends HvBaseProps<HTMLDivElement,
     classes?: HvFormElementClasses;
 }
 
-export declare const HvFormElementValueContext: default_2.Context<undefined>;
-
-export declare const HvFormElementValueContextConsumer: default_2.Consumer<undefined>;
-
-export declare const HvFormElementValueContextProvider: default_2.Provider<undefined>;
-
 export declare type HvFormStatus = "standBy" | "valid" | "invalid" | "empty";
 
 /**
  * Global Actions are actions that affect the entire page they live in.
  * They should persist while scrolling down the screen.
  */
-export declare const HvGlobalActions: default_2.ForwardRefExoticComponent<HvGlobalActionsProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare const HvGlobalActions: default_3.ForwardRefExoticComponent<HvGlobalActionsProps & default_3.RefAttributes<HTMLDivElement>>;
 
 export declare type HvGlobalActionsClasses = ExtractNames<typeof useClasses_74>;
 
@@ -3862,11 +3796,11 @@ export declare type HvGlobalActionsPosition = "sticky" | "fixed" | "relative";
 
 export declare interface HvGlobalActionsProps extends HvBaseProps<HTMLDivElement, "title"> {
     /** Text to display in the component. */
-    title?: default_2.ReactNode;
+    title?: default_3.ReactNode;
     /** Denotes if this is a global or section component. */
     variant?: HvGlobalActionsVariant;
     /** User can pass in a fully customized button or false for when the back button should not be rendered. */
-    backButton?: default_2.ReactNode;
+    backButton?: default_3.ReactNode;
     /** Heading Level to apply to Title Area. */
     headingLevel?: HvGlobalActionsHeadingLevel;
     /**
@@ -4173,7 +4107,7 @@ export declare interface HvInfoMessageProps extends HvTypographyProps<"label"> {
  * An Inline Editor allows the user to edit a record without making a major switch
  * between viewing and editing, making it an efficient method of updating a record.
  */
-export declare const HvInlineEditor: <C extends default_2.ElementType<any, keyof default_2.JSX.IntrinsicElements> = default_2.ForwardRefExoticComponent<HvInputProps & default_2.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>>(props: {
+export declare const HvInlineEditor: <C extends default_3.ElementType<any, keyof default_3.JSX.IntrinsicElements> = default_3.ForwardRefExoticComponent<HvInputProps & default_3.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>>(props: {
     /** The value of the form element. */
     value?: string | undefined;
     /** The default value of the form element. */
@@ -4183,11 +4117,11 @@ export declare const HvInlineEditor: <C extends default_2.ElementType<any, keyof
     /** Variant of the HvTypography to display */
     variant?: "display" | "title1" | "title2" | "title3" | "title4" | "label" | "body" | "captionLabel" | "caption1" | "caption2" | undefined;
     /** Called when the input is blurred. */
-    onBlur?: ((event: default_2.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void) | undefined;
+    onBlur?: ((event: default_3.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void) | undefined;
     /** Called when the input value changes. */
-    onChange?: ((event: default_2.SyntheticEvent, value: string) => void) | undefined;
+    onChange?: ((event: default_3.SyntheticEvent, value: string) => void) | undefined;
     /** Called when there's a keydown event on the input. */
-    onKeyDown?: ((event: default_2.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement> | default_2.MouseEvent, value: string) => void) | undefined;
+    onKeyDown?: ((event: default_3.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement> | default_3.MouseEvent, value: string) => void) | undefined;
     /** Props passed to the HvButton component */
     buttonProps?: HvButtonProps | undefined;
     /** Props passed to the HvTypography text component */
@@ -4212,14 +4146,14 @@ export declare const HvInlineEditor: <C extends default_2.ElementType<any, keyof
 } & {
     component?: C | undefined;
 } & {
-    children?: default_2.ReactNode;
-} & (Omit<default_2.PropsWithoutRef<default_2.ComponentProps<C>>, "value" | "classes" | "placeholder" | "disabled" | "variant" | "component" | "onBlur" | "onChange" | "onKeyDown" | "defaultValue" | "showIcon" | "buttonProps" | "typographyProps"> extends infer T ? T extends Omit<default_2.PropsWithoutRef<default_2.ComponentProps<C>>, "value" | "classes" | "placeholder" | "disabled" | "variant" | "component" | "onBlur" | "onChange" | "onKeyDown" | "defaultValue" | "showIcon" | "buttonProps" | "typographyProps"> ? T extends any ? T : never : never : never) & {
+    children?: default_3.ReactNode;
+} & (Omit<default_3.PropsWithoutRef<default_3.ComponentProps<C>>, "value" | "classes" | "placeholder" | "disabled" | "variant" | "component" | "onBlur" | "onChange" | "onKeyDown" | "defaultValue" | "showIcon" | "buttonProps" | "typographyProps"> extends infer T ? T extends Omit<default_3.PropsWithoutRef<default_3.ComponentProps<C>>, "value" | "classes" | "placeholder" | "disabled" | "variant" | "component" | "onBlur" | "onChange" | "onKeyDown" | "defaultValue" | "showIcon" | "buttonProps" | "typographyProps"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & default_2.RefAttributes<unknown>) => default_2.ReactElement<any, string | default_2.JSXElementConstructor<any>> | null;
+} & default_3.RefAttributes<unknown>) => default_3.ReactElement<any, string | default_3.JSXElementConstructor<any>> | null;
 
 export declare type HvInlineEditorClasses = ExtractNames<typeof useClasses_82>;
 
-export declare type HvInlineEditorProps<C extends default_2.ElementType = typeof HvInput> = PolymorphicComponentRef<C, {
+export declare type HvInlineEditorProps<C extends default_3.ElementType = typeof HvInput> = PolymorphicComponentRef<C, {
     /** The value of the form element. */
     value?: string;
     /** The default value of the form element. */
@@ -4229,11 +4163,11 @@ export declare type HvInlineEditorProps<C extends default_2.ElementType = typeof
     /** Variant of the HvTypography to display */
     variant?: HvTypographyVariants;
     /** Called when the input is blurred. */
-    onBlur?: (event: default_2.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void;
+    onBlur?: (event: default_3.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void;
     /** Called when the input value changes. */
-    onChange?: (event: default_2.SyntheticEvent, value: string) => void;
+    onChange?: (event: default_3.SyntheticEvent, value: string) => void;
     /** Called when there's a keydown event on the input. */
-    onKeyDown?: (event: default_2.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement> | default_2.MouseEvent, value: string) => void;
+    onKeyDown?: (event: default_3.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement> | default_3.MouseEvent, value: string) => void;
     /** Props passed to the HvButton component */
     buttonProps?: HvButtonProps;
     /** Props passed to the HvTypography text component */
@@ -4374,19 +4308,8 @@ export declare interface HvInputSuggestion {
     value?: string;
 }
 
-declare type HvInputValidity = {
-    valid?: boolean;
-    badInput?: boolean;
-    customError?: boolean;
-    patternMismatch?: boolean;
-    rangeOverflow?: boolean;
-    rangeUnderflow?: boolean;
-    stepMismatch?: boolean;
-    tooLong?: boolean;
-    tooShort?: boolean;
-    typeMismatch?: boolean;
-    valueMissing?: boolean;
-};
+declare interface HvInputValidity extends Partial<Mutable<ValidityState>> {
+}
 
 export declare interface HvKnobProperty {
     color?: string;
@@ -4811,7 +4734,7 @@ export declare interface HvOverflowTooltipProps extends HvBaseProps {
  * Pagination is the process of dividing a document into discrete pages. It relates to how users interact
  * with structured content on a website or application.
  */
-export declare const HvPagination: default_2.ForwardRefExoticComponent<HvPaginationProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare const HvPagination: default_3.ForwardRefExoticComponent<HvPaginationProps & default_3.RefAttributes<HTMLDivElement>>;
 
 export declare type HvPaginationClasses = ExtractNames<typeof useClasses_47>;
 
@@ -4843,9 +4766,9 @@ export declare interface HvPaginationProps extends HvBaseProps {
     /** An object containing all the labels for the component. */
     labels?: HvPaginationLabels;
     /** Other props to show page component. */
-    showPageProps?: default_2.HTMLAttributes<HTMLDivElement>;
+    showPageProps?: default_3.HTMLAttributes<HTMLDivElement>;
     /** Other props to pagination component. */
-    navigationProps?: default_2.HTMLAttributes<HTMLDivElement>;
+    navigationProps?: default_3.HTMLAttributes<HTMLDivElement>;
     /** Extra properties passed to the input component representing the current pages. */
     currentPageInputProps?: HvInputProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -6626,7 +6549,7 @@ export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes"
 /**
  * A tags input is a single or multiline control that allows the input of tags.
  */
-export declare const HvTagsInput: default_2.ForwardRefExoticComponent<HvTagsInputProps & default_2.RefAttributes<HTMLUListElement>>;
+export declare const HvTagsInput: default_3.ForwardRefExoticComponent<HvTagsInputProps & default_3.RefAttributes<HTMLUListElement>>;
 
 export declare type HvTagsInputClasses = ExtractNames<typeof useClasses_114>;
 
@@ -6636,15 +6559,15 @@ export declare interface HvTagsInputProps extends Omit<HvInputProps, "onChange"
     /** When uncontrolled, defines the initial input value. */
     defaultValue?: string[] | HvTagProps[];
     /** The function that will be executed onChange. */
-    onChange?: (event: default_2.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement> | default_2.MouseEvent | default_2.KeyboardEvent<HTMLUListElement> | default_2.FocusEvent<HTMLDivElement>, value: HvTagProps[]) => void;
+    onChange?: (event: default_3.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement> | default_3.MouseEvent | default_3.KeyboardEvent<HTMLUListElement> | default_3.FocusEvent<HTMLDivElement>, value: HvTagProps[]) => void;
     /** The function that will be executed when the element is focused. */
-    onFocus?: (event: default_2.FocusEvent<HTMLDivElement>, value: string) => void;
+    onFocus?: (event: default_3.FocusEvent<HTMLDivElement>, value: string) => void;
     /** The function that will be executed when the element is blurred. */
-    onBlur?: (event: default_2.FocusEvent<HTMLDivElement>, value: string) => void;
+    onBlur?: (event: default_3.FocusEvent<HTMLDivElement>, value: string) => void;
     /** The function that will be executed when a tag is deleted. */
-    onDelete?: (event: default_2.KeyboardEvent<HTMLUListElement> | default_2.MouseEvent<HTMLElement>, value: HvTagProps, index: number) => void;
+    onDelete?: (event: default_3.KeyboardEvent<HTMLUListElement> | default_3.MouseEvent<HTMLElement>, value: HvTagProps, index: number) => void;
     /** The function that will be executed when a tag is added. */
-    onAdd?: (event: default_2.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement> | default_2.MouseEvent | default_2.KeyboardEvent<HTMLUListElement> | default_2.FocusEvent<HTMLDivElement>, value: HvTagProps, index: number) => void;
+    onAdd?: (event: default_3.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement> | default_3.MouseEvent | default_3.KeyboardEvent<HTMLUListElement> | default_3.FocusEvent<HTMLDivElement>, value: HvTagProps, index: number) => void;
     /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */
     hideCounter?: boolean;
     /** Text between the current char counter and max value. */
@@ -7583,15 +7506,11 @@ declare type InputElement = HTMLInputElement | HTMLTextAreaElement;
 
 export declare const isBrowser: (browsers: string | string[]) => boolean | null;
 
-export declare const isInvalid: (compareState: HvFormStatus) => boolean;
-
 /** Check whether a keyboard `event` is pressing the `keyCode` key. */
 export declare const isKey: (event: any, keyCode: Key) => boolean;
 
 export declare const isOneOfKeys: (event: any, keys: Key[]) => boolean;
 
-export declare const isValid: (compareState: HvFormStatus) => boolean;
-
 declare type Key = keyof typeof keyboardCodes;
 
 /** Map of keys to key `code` @see https://mdn.io/event/code */
@@ -7717,6 +7636,10 @@ export declare const multiButtonClasses: {
 
 export declare const multiSelectionEventHandler: (evt: any, index: number, selectionAnchor: any, allValues: any[], selectedState: boolean[], selectionCheck: any) => any[];
 
+declare type Mutable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+
 export declare type NavigationData<T extends React.ElementType = "a"> = React.ComponentProps<T> & Record<string, any> & {
     /** The id to be applied to the root element. */
     id: string;
@@ -10641,7 +10564,7 @@ export declare const useImageLoaded: (src?: string, srcSet?: string) => string |
 
 export declare function useInstance(instance: any): void;
 
-export declare const useIsMounted: () => default_2.MutableRefObject<boolean>;
+export declare const useIsMounted: () => default_3.MutableRefObject<boolean>;
 
 export declare function useLabels<T>(defaultLabels: T, labels?: DeepPartial<T>): T;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.82.1",
+  "version": "5.82.3",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -62,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "682ed1b9811e2a937a1c3fa0423d9ed2a544cb95",
+  "gitHead": "8c8ff8da3d880c63a34299c6d4593b1865dc60f0",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",