@hitachivantara/uikit-react-core 5.39.1 → 5.39.2

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

@@ -22,11 +22,7 @@ const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const toTime = (value) => {
   if (!value)
     return void 0;
-  const {
-    hours,
-    minutes,
-    seconds
-  } = value;
+  const { hours, minutes, seconds } = value;
   return new date.Time(hours, minutes, seconds);
 };
 const getFormat = (timeFormat) => {
@@ -34,129 +30,205 @@ const getFormat = (timeFormat) => {
     return 24;
   return timeFormat === "12" ? 12 : 24;
 };
-const HvTimePicker = React.forwardRef((props, ref) => {
-  const {
-    classes: classesProp,
-    className,
-    id: idProp,
-    name,
-    required = false,
-    disabled = false,
-    readOnly = false,
-    label,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    description,
-    "aria-describedby": ariaDescribedBy,
-    status,
-    statusMessage,
-    "aria-errormessage": ariaErrorMessage,
-    placeholder,
-    hoursPlaceholder = "hh",
-    minutesPlaceholder = "mm",
-    secondsPlaceholder = "ss",
-    value: valueProp,
-    defaultValue: defaultValueProp,
-    timeFormat,
-    showSeconds,
-    disableExpand,
-    locale = "en",
-    onToggle,
-    onChange,
-    // misc properties:
-    disablePortal = true,
-    escapeWithReference = true,
-    dropdownProps = {},
-    ...others
-  } = useDefaultProps.useDefaultProps("HvTimePicker", props);
-  const id = useUniqueId.useUniqueId(idProp, "hvtimepicker");
-  const {
-    classes,
-    cx
-  } = TimePicker_styles.useClasses(classesProp);
-  const timeFieldRef = React.useRef(null);
-  const {
-    ref: refProp,
-    ...otherDropdownProps
-  } = dropdownProps;
-  const dropdownForkedRef = material.useForkRef(ref, refProp);
-  const stateProps = {
-    value: toTime(valueProp),
-    defaultValue: toTime(defaultValueProp),
-    label,
-    locale,
-    isRequired: required,
-    isReadOnly: readOnly,
-    isDisabled: disabled,
-    granularity: "second",
-    hourCycle: getFormat(timeFormat),
-    onChange: (value) => {
-      const {
-        hour: hours,
-        minute: minutes,
-        second: seconds
-      } = value;
-      onChange?.({
-        hours,
-        minutes,
-        seconds
-      });
-    }
-  };
-  const state = datepicker.useTimeFieldState(stateProps);
-  const {
-    labelProps,
-    fieldProps,
-    descriptionProps
-  } = datepicker$1.useTimeField({
-    ...stateProps,
-    id,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy
-  }, state, timeFieldRef);
-  const [open, setOpen] = React.useState(false);
-  const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
-  const [validationState] = useControlled.useControlled(status, "standBy");
-  const placeholders = React.useMemo(() => ({
-    hour: hoursPlaceholder,
-    minute: minutesPlaceholder,
-    second: secondsPlaceholder
-  }), [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]);
-  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, { ref: dropdownForkedRef, role: "combobox", variableWidth: true, disabled, readOnly, placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(Placeholder.Placeholder, { ref: timeFieldRef, name, state, placeholders, className: cx(classes.placeholder, {
-      [classes.placeholderDisabled]: disabled
-    }), ...fieldProps }), classes: {
-      header: cx(classes.dropdownHeader, {
-        [classes.dropdownHeaderInvalid]: isStateInvalid
+const HvTimePicker = React.forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      id: idProp,
+      name,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      label,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      status,
+      statusMessage,
+      "aria-errormessage": ariaErrorMessage,
+      placeholder,
+      hoursPlaceholder = "hh",
+      minutesPlaceholder = "mm",
+      secondsPlaceholder = "ss",
+      value: valueProp,
+      defaultValue: defaultValueProp,
+      timeFormat,
+      showSeconds,
+      disableExpand,
+      locale = "en",
+      onToggle,
+      onChange,
+      // misc properties:
+      disablePortal = true,
+      escapeWithReference = true,
+      dropdownProps = {},
+      ...others
+    } = useDefaultProps.useDefaultProps("HvTimePicker", props);
+    const id = useUniqueId.useUniqueId(idProp, "hvtimepicker");
+    const { classes, cx } = TimePicker_styles.useClasses(classesProp);
+    const timeFieldRef = React.useRef(null);
+    const { ref: refProp, ...otherDropdownProps } = dropdownProps;
+    const dropdownForkedRef = material.useForkRef(ref, refProp);
+    const stateProps = {
+      value: toTime(valueProp),
+      defaultValue: toTime(defaultValueProp),
+      label,
+      locale,
+      isRequired: required,
+      isReadOnly: readOnly,
+      isDisabled: disabled,
+      granularity: "second",
+      hourCycle: getFormat(timeFormat),
+      onChange: (value) => {
+        const { hour: hours, minute: minutes, second: seconds } = value;
+        onChange?.({ hours, minutes, seconds });
+      }
+    };
+    const state = datepicker.useTimeFieldState(stateProps);
+    const { labelProps, fieldProps, descriptionProps } = datepicker$1.useTimeField(
+      {
+        ...stateProps,
+        id,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
+      },
+      state,
+      timeFieldRef
+    );
+    const [open, setOpen] = React.useState(false);
+    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+    const [validationState] = useControlled.useControlled(status, "standBy");
+    const placeholders = React.useMemo(
+      () => ({
+        hour: hoursPlaceholder,
+        minute: minutesPlaceholder,
+        second: secondsPlaceholder
       }),
-      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?.(evt, newOpen);
-    }, onContainerCreation: (containerRef) => {
-      containerRef?.getElementsByTagName("input")[0]?.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
-      }]
-    }, ...otherDropdownProps, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timeFieldRef, 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 })
-  ] });
-});
+      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]
+    );
+    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,
+            {
+              ref: dropdownForkedRef,
+              role: "combobox",
+              variableWidth: true,
+              disabled,
+              readOnly,
+              placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(
+                Placeholder.Placeholder,
+                {
+                  ref: timeFieldRef,
+                  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
+                }
+              ),
+              expanded: open,
+              onToggle: (evt, newOpen) => {
+                if (disableExpand)
+                  return;
+                setOpen(newOpen);
+                onToggle?.(evt, newOpen);
+              },
+              onContainerCreation: (containerRef) => {
+                containerRef?.getElementsByTagName("input")[0]?.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 }
+                ]
+              },
+              ...otherDropdownProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timeFieldRef, 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;
 //# sourceMappingURL=TimePicker.cjs.map

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

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

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  useClasses,
-  staticClasses
-} = classes.createClasses("HvTimePicker", {
+const { useClasses, staticClasses } = classes.createClasses("HvTimePicker", {
   root: {
     position: "relative"
   },

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.styles.cjs","sources":["../../../../src/components/TimePicker/TimePicker.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTimePicker\", {\n  root: {\n    position: \"relative\",\n  },\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    marginBottom: 6,\n    display: \"block\",\n  },\n  description: {},\n\n  placeholder: {\n    display: \"flex\",\n    gap: 1,\n  },\n  placeholderDisabled: {\n    color: theme.colors.secondary_60,\n  },\n\n  dropdownHeader: {},\n  dropdownHeaderOpen: {},\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  dropdownPanel: {},\n\n  icon: {},\n\n  timePopperContainer: {\n    backgroundColor: theme.colors.atmo1,\n    zIndex: 10,\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: theme.spacing(\"xs\", 0),\n    userSelect: \"none\",\n    minWidth: \"175px\",\n  },\n\n  error: {},\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","labelContainer","display","alignItems","label","marginBottom","description","placeholder","gap","placeholderDisabled","color","theme","colors","secondary_60","dropdownHeader","dropdownHeaderOpen","dropdownHeaderInvalid","border","negative","dropdownPanel","icon","timePopperContainer","backgroundColor","atmo1","zIndex","flexDirection","justifyContent","padding","spacing","userSelect","minWidth","error"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EAEAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,cAAc;AAAA,IACdH,SAAS;AAAA,EACX;AAAA,EACAI,aAAa,CAAC;AAAA,EAEdC,aAAa;AAAA,IACXL,SAAS;AAAA,IACTM,KAAK;AAAA,EACP;AAAA,EACAC,qBAAqB;AAAA,IACnBC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EAEAC,gBAAgB,CAAC;AAAA,EACjBC,oBAAoB,CAAC;AAAA,EACrBC,uBAAuB;AAAA,IACrBC,QAAS,aAAYN,YAAMC,MAAAA,OAAOM,QAAS;AAAA,IAC3C,WAAW;AAAA,MACTD,QAAS,aAAYN,YAAMC,MAAAA,OAAOM,QAAS;AAAA,IAC7C;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAEhBC,MAAM,CAAC;AAAA,EAEPC,qBAAqB;AAAA,IACnBC,iBAAiBX,YAAAA,MAAMC,OAAOW;AAAAA,IAC9BC,QAAQ;AAAA,IACRtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBvB,YAAY;AAAA,IACZwB,SAAShB,YAAAA,MAAMiB,QAAQ,MAAM,CAAC;AAAA,IAC9BC,YAAY;AAAA,IACZC,UAAU;AAAA,EACZ;AAAA,EAEAC,OAAO,CAAC;AACV,CAAC;;;"}
+{"version":3,"file":"TimePicker.styles.cjs","sources":["../../../../src/components/TimePicker/TimePicker.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTimePicker\", {\n  root: {\n    position: \"relative\",\n  },\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    marginBottom: 6,\n    display: \"block\",\n  },\n  description: {},\n\n  placeholder: {\n    display: \"flex\",\n    gap: 1,\n  },\n  placeholderDisabled: {\n    color: theme.colors.secondary_60,\n  },\n\n  dropdownHeader: {},\n  dropdownHeaderOpen: {},\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  dropdownPanel: {},\n\n  icon: {},\n\n  timePopperContainer: {\n    backgroundColor: theme.colors.atmo1,\n    zIndex: 10,\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: theme.spacing(\"xs\", 0),\n    userSelect: \"none\",\n    minWidth: \"175px\",\n  },\n\n  error: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,YAAY,kBAAkBA,QAAAA,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EAEA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,cAAc;AAAA,IACd,SAAS;AAAA,EACX;AAAA,EACA,aAAa,CAAC;AAAA,EAEd,aAAa;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AAAA,EACA,qBAAqB;AAAA,IACnB,OAAOC,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EAEA,gBAAgB,CAAC;AAAA,EACjB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB;AAAA,IACrB,QAAQ,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,IAC1C,WAAW;AAAA,MACT,QAAQ,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,IAC5C;AAAA,EACF;AAAA,EACA,eAAe,CAAC;AAAA,EAEhB,MAAM,CAAC;AAAA,EAEP,qBAAqB;AAAA,IACnB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAASA,YAAA,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EAEA,OAAO,CAAC;AACV,CAAC;;;"}

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

@@ -15,34 +15,41 @@ const Unit = ({
   onAdd,
   onSub
 }) => {
-  const {
-    classes
-  } = Unit_styles.useClasses();
-  const {
-    type,
-    text
-  } = segment;
+  const { classes } = Unit_styles.useClasses();
+  const { type, 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();
+    ["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" }
       }
-    }, 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 })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Unit.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\n\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\n\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvToggleButton } from \"@core/components/ToggleButton\";\n\nimport { useClasses } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { classes } = useClasses();\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <div className={classes.root}>\n      {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n      {type === \"literal\" && <div className={classes.separator}>{text}</div>}\n      {type === \"dayPeriod\" && (\n        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>\n          {text}\n        </HvToggleButton>\n      )}\n      {[\"hour\", \"minute\", \"second\"].includes(type) && (\n        <HvInput\n          id={id}\n          disableClear\n          style={{\n            ...theme.typography.title3,\n          }}\n          classes={{\n            input: classes.input,\n            root: classes.inputContainer,\n            inputBorderContainer: classes.inputBorderContainer,\n            inputRoot: classes.inputRoot,\n          }}\n          onKeyDown={(event) => {\n            if ((event as KeyboardEvent).key === \"Enter\") {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }}\n          required\n          status={state.validationState}\n          value={text.padStart(2, \"0\")}\n          onChange={onChange}\n          placeholder={placeholder}\n          inputProps={{ autoComplete: \"off\", type: \"number\" }}\n        />\n      )}\n      {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n    </div>\n  );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","classes","useClasses","type","text","jsxs","root","jsx","AddTimeIcon","separator","HvToggleButton","periodToggle","includes","HvInput","theme","typography","title3","input","inputContainer","inputBorderContainer","inputRoot","event","key","preventDefault","stopPropagation","validationState","padStart","autoComplete","SubtractTimeIcon"],"mappings":";;;;;;;;AA4BO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,MAAYC,YAAW,WAAA;AACzB,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,EAAST,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,SACGS,2BAAAA,KAAA,OAAA,EAAI,WAAWJ,QAAQK,MACrBH,UAAAA;AAAAA,IAAAA,SAAS,aAAaI,2BAAA,IAACC,gBAAY,UAAA,EAAA,SAAST,OAAS;AAAA,IACrDI,SAAS,aAAaI,2BAAA,IAAC,SAAI,WAAWN,QAAQQ,WAAYL,UAAK,MAAA;AAAA,IAC/DD,SAAS,eACPI,+BAAAG,aAAAA,gBAAA,EAAe,WAAWT,QAAQU,cAAc,SAASZ,OACvDK,UACH,KAAA,CAAA;AAAA,IAED,CAAC,QAAQ,UAAU,QAAQ,EAAEQ,SAAST,IAAI,KACxCI,2BAAA,IAAAM,MAAA,SAAA,EACC,IACA,cAAY,MACZ,OAAO;AAAA,MACL,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,OAEtB,SAAS;AAAA,MACPC,OAAOhB,QAAQgB;AAAAA,MACfX,MAAML,QAAQiB;AAAAA,MACdC,sBAAsBlB,QAAQkB;AAAAA,MAC9BC,WAAWnB,QAAQmB;AAAAA,IAAAA,GAErB,WAAYC,CAAU,UAAA;AACfA,UAAAA,MAAwBC,QAAQ,SAAS;AAC5CD,cAAME,eAAe;AACrBF,cAAMG,gBAAgB;AAAA,MACxB;AAAA,IAEF,GAAA,UAAQ,MACR,QAAQ9B,MAAM+B,iBACd,OAAOrB,KAAKsB,SAAS,GAAG,GAAG,GAC3B,UACA,aACA,YAAY;AAAA,MAAEC,cAAc;AAAA,MAAOxB,MAAM;AAAA,IAAA,GAE5C;AAAA,IACAA,SAAS,aAAcI,2BAAA,IAAAqB,gBAAA,YAAA,EAAiB,SAAS5B,OAAS;AAAA,EAC7D,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"Unit.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\n\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\n\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvToggleButton } from \"@core/components/ToggleButton\";\n\nimport { useClasses } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { classes } = useClasses();\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <div className={classes.root}>\n      {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n      {type === \"literal\" && <div className={classes.separator}>{text}</div>}\n      {type === \"dayPeriod\" && (\n        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>\n          {text}\n        </HvToggleButton>\n      )}\n      {[\"hour\", \"minute\", \"second\"].includes(type) && (\n        <HvInput\n          id={id}\n          disableClear\n          style={{\n            ...theme.typography.title3,\n          }}\n          classes={{\n            input: classes.input,\n            root: classes.inputContainer,\n            inputBorderContainer: classes.inputBorderContainer,\n            inputRoot: classes.inputRoot,\n          }}\n          onKeyDown={(event) => {\n            if ((event as KeyboardEvent).key === \"Enter\") {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }}\n          required\n          status={state.validationState}\n          value={text.padStart(2, \"0\")}\n          onChange={onChange}\n          placeholder={placeholder}\n          inputProps={{ autoComplete: \"off\", type: \"number\" }}\n        />\n      )}\n      {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n    </div>\n  );\n};\n"],"names":["useClasses","jsxs","jsx","AddTimeIcon","HvToggleButton","HvInput","theme","SubtractTimeIcon"],"mappings":";;;;;;;;AA4BO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACT,QAAA,EAAE,YAAYA,YAAAA;AACd,QAAA,EAAE,MAAM,KAAS,IAAA;AACjB,QAAA,cAAc,mBAAmB,QAAQ;AAE/C,SACGC,2BAAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA,SAAS,aAAaC,2BAAA,IAACC,gBAAY,UAAA,EAAA,SAAS,OAAO;AAAA,IACnD,SAAS,aAAaD,2BAAA,IAAC,SAAI,WAAW,QAAQ,WAAY,UAAK,MAAA;AAAA,IAC/D,SAAS,eACPA,+BAAAE,aAAAA,gBAAA,EAAe,WAAW,QAAQ,cAAc,SAAS,OACvD,UACH,KAAA,CAAA;AAAA,IAED,CAAC,QAAQ,UAAU,QAAQ,EAAE,SAAS,IAAI,KACzCF,2BAAA;AAAA,MAACG,MAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,OAAO;AAAA,UACL,GAAGC,YAAAA,MAAM,WAAW;AAAA,QACtB;AAAA,QACA,SAAS;AAAA,UACP,OAAO,QAAQ;AAAA,UACf,MAAM,QAAQ;AAAA,UACd,sBAAsB,QAAQ;AAAA,UAC9B,WAAW,QAAQ;AAAA,QACrB;AAAA,QACA,WAAW,CAAC,UAAU;AACf,cAAA,MAAwB,QAAQ,SAAS;AAC5C,kBAAM,eAAe;AACrB,kBAAM,gBAAgB;AAAA,UACxB;AAAA,QACF;AAAA,QACA,UAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,OAAO,KAAK,SAAS,GAAG,GAAG;AAAA,QAC3B;AAAA,QACA;AAAA,QACA,YAAY,EAAE,cAAc,OAAO,MAAM,SAAS;AAAA,MAAA;AAAA,IACpD;AAAA,IAED,SAAS,aAAcJ,2BAAA,IAAAK,gBAAA,YAAA,EAAiB,SAAS,OAAO;AAAA,EAC3D,EAAA,CAAA;AAEJ;;"}

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

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvTimePickerUnit", {
+const { staticClasses, useClasses } = classes.createClasses("HvTimePickerUnit", {
   root: {
     display: "flex",
     flexDirection: "column",

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

@@ -1 +1 @@
-{"version":3,"file":"Unit.styles.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTimePickerUnit\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.title3,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.title3,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","title3","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,YAAAA,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,YAAAA,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF,CAAC;;;"}
+{"version":3,"file":"Unit.styles.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTimePickerUnit\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.title3,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.title3,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAGC,YAAAA,MAAM,WAAW;AAAA,EACtB;AAAA,EAEA,WAAW;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EAEA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EAEA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EAEA,OAAO;AAAA,IACL,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChB,UAAU;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EAEA,cAAc;AAAA,IACZ,WAAWA,YAAAA,MAAM,MAAM;AAAA,EACzB;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,sBAAsB;AAAA,IACpB,KAAK;AAAA,EACP;AACF,CAAC;;;"}

package/dist/cjs/components/ToggleButton/ToggleButton.cjs

@@ -15,12 +15,25 @@ const HvToggleButton = React.forwardRef((props, ref) => {
     children,
     ...others
   } = useDefaultProps.useDefaultProps("HvToggleButton", props);
-  const [isSelected, setIsSelected] = useControlled.useControlled(selected, Boolean(defaultSelected));
+  const [isSelected, setIsSelected] = useControlled.useControlled(
+    selected,
+    Boolean(defaultSelected)
+  );
   const onClickHandler = (event) => {
     setIsSelected(!isSelected);
     onClick?.(event, !isSelected);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { ref, icon: true, "aria-pressed": isSelected, onClick: onClickHandler, ...others, children: children || (!isSelected ? notSelectedIcon : selectedIcon) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.HvButton,
+    {
+      ref,
+      icon: true,
+      "aria-pressed": isSelected,
+      onClick: onClickHandler,
+      ...others,
+      children: children || (!isSelected ? notSelectedIcon : selectedIcon)
+    }
+  );
 });
 exports.HvToggleButton = HvToggleButton;
 //# sourceMappingURL=ToggleButton.cjs.map