@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/TimePicker/TimePicker.js

@@ -1,220 +1,170 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useMemo, useState } from "react";
-import { useTimeField } from "react-aria/useTimeField";
-import { useTimeFieldState } from "react-stately/useTimeFieldState";
-import { Time } from "@internationalized/date";
-import useForkRef from "@mui/utils/useForkRef";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { DEFAULT_LOCALE } from "../Calendar/utils.js";
-import { HvLabelContainer } from "../FormElement/LabelContainer.js";
-import { useControlled } from "../hooks/useControlled.js";
+import { setId } from "../utils/setId.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvIcon } from "../icons.js";
-import { setId } from "../utils/setId.js";
+import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { Placeholder } from "./Placeholder.js";
 import { useClasses } from "./TimePicker.styles.js";
-import { staticClasses } from "./TimePicker.styles.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { Unit } from "./Unit/Unit.js";
-import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const toTime = (value) => {
-  if (!value) return value;
-  const { hours, minutes, seconds } = value;
-  return new Time(hours, minutes, seconds);
-};
-const HvTimePicker = forwardRef(
-  function HvTimePicker2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      id: idProp,
-      name,
-      required,
-      disabled,
-      readOnly,
-      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 = DEFAULT_LOCALE,
-      onToggle,
-      onChange,
-      // misc properties:
-      disablePortal = true,
-      escapeWithReference = true,
-      dropdownProps = {},
-      ...others
-    } = useDefaultProps("HvTimePicker", props);
-    const id = useUniqueId(idProp);
-    const { classes, cx } = useClasses(classesProp);
-    const timeFieldRef = useRef(null);
-    const { ref: refProp, ...otherDropdownProps } = dropdownProps;
-    const dropdownForkedRef = useForkRef(ref, refProp);
-    const valueState = useMemo(() => toTime(valueProp), [valueProp]);
-    const stateProps = {
-      value: valueState,
-      defaultValue: toTime(defaultValueProp),
-      label,
-      locale,
-      isRequired: required,
-      isReadOnly: readOnly,
-      isDisabled: disabled,
-      granularity: showSeconds === false ? "minute" : "second",
-      hourCycle: timeFormat === "12" ? 12 : 24,
-      onChange: (value) => {
-        if (!value) return;
-        const { hour: hours, minute: minutes, second: seconds } = value;
-        onChange?.({ hours, minutes, seconds });
-      }
-    };
-    const state = useTimeFieldState(stateProps);
-    const { labelProps, fieldProps, descriptionProps } = useTimeField(
-      {
-        ...stateProps,
-        id,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": ariaDescribedBy
-      },
-      state,
-      timeFieldRef
-    );
-    const popperProps = useMemo(() => {
-      return {
-        modifiers: [{ name: "preventOverflow", enabled: escapeWithReference }]
-      };
-    }, [escapeWithReference]);
-    const [open, setOpen] = useState(false);
-    const [validationMessage] = useControlled(statusMessage, "Required");
-    const [validationState] = useControlled(status, "standBy");
-    const placeholders = 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(id, "error") : ariaErrorMessage : void 0;
-    return /* @__PURE__ */ jsxs(
-      HvFormElement,
-      {
-        name,
-        required,
-        disabled,
-        status: validationState,
-        className: cx(classes.root, className),
-        ...others,
-        children: [
-          /* @__PURE__ */ jsx(
-            HvLabelContainer,
-            {
-              label,
-              description,
-              classes: {
-                root: classes.labelContainer,
-                label: classes.label,
-                description: classes.description
-              },
-              labelProps,
-              descriptionProps
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            HvBaseDropdown,
-            {
-              ref: dropdownForkedRef,
-              role: "combobox",
-              variableWidth: true,
-              disabled,
-              readOnly,
-              placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsx(
-                Placeholder,
-                {
-                  ref: timeFieldRef,
-                  name,
-                  state,
-                  placeholders,
-                  className: cx(classes.placeholder, {
-                    [classes.placeholderDisabled]: disabled
-                  }),
-                  ...fieldProps
-                }
-              ),
-              classes: {
-                header: cx(classes.dropdownHeader, {
-                  [classes.dropdownHeaderInvalid]: isStateInvalid
-                }),
-                panel: classes.dropdownPanel,
-                headerOpen: classes.dropdownHeaderOpen
-              },
-              placement: "right",
-              adornment: /* @__PURE__ */ jsx(HvIcon, { name: "Time", 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,
-              ...otherDropdownProps,
-              children: /* @__PURE__ */ jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
-                Unit,
-                {
-                  state,
-                  segment,
-                  placeholder: placeholders[segment.type],
-                  onAdd: () => state.increment(segment.type),
-                  onSub: () => state.decrement(segment.type),
-                  onChange: (evt, val) => {
-                    state.setSegment(segment.type, Number(val));
-                  }
-                },
-                segment.type === "literal" ? `literal-${i}` : segment.type
-              )) })
-            }
-          ),
-          canShowError && /* @__PURE__ */ jsx(
-            HvWarningText,
-            {
-              id: setId(id, "error"),
-              disableBorder: true,
-              className: classes.error,
-              children: validationMessage
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  HvTimePicker,
-  staticClasses as timePickerClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useForkRef from "@mui/utils/useForkRef";
+import { useTimeField } from "react-aria/useTimeField";
+import { useTimeFieldState } from "react-stately/useTimeFieldState";
+import { Time } from "@internationalized/date";
+//#region src/TimePicker/TimePicker.tsx
+var toTime = (value) => {
+	if (!value) return value;
+	const { hours, minutes, seconds } = value;
+	return new Time(hours, minutes, seconds);
 };
+/**
+* A Time Picker allows the user to choose a specific time or a time range.
+*/
+var HvTimePicker = forwardRef(function HvTimePicker(props, ref) {
+	const { classes: classesProp, className, id: idProp, name, required, disabled, readOnly, 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, disablePortal = true, escapeWithReference = true, dropdownProps = {}, ...others } = useDefaultProps("HvTimePicker", props);
+	const id = useUniqueId(idProp);
+	const { classes, cx } = useClasses(classesProp);
+	const timeFieldRef = useRef(null);
+	const { ref: refProp, ...otherDropdownProps } = dropdownProps;
+	const dropdownForkedRef = useForkRef(ref, refProp);
+	const stateProps = {
+		value: useMemo(() => toTime(valueProp), [valueProp]),
+		defaultValue: toTime(defaultValueProp),
+		label,
+		locale,
+		isRequired: required,
+		isReadOnly: readOnly,
+		isDisabled: disabled,
+		granularity: showSeconds === false ? "minute" : "second",
+		hourCycle: timeFormat === "12" ? 12 : 24,
+		onChange: (value) => {
+			if (!value) return;
+			const { hour: hours, minute: minutes, second: seconds } = value;
+			onChange?.({
+				hours,
+				minutes,
+				seconds
+			});
+		}
+	};
+	const state = useTimeFieldState(stateProps);
+	const { labelProps, fieldProps, descriptionProps } = useTimeField({
+		...stateProps,
+		id,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy
+	}, state, timeFieldRef);
+	const popperProps = useMemo(() => {
+		return { modifiers: [{
+			name: "preventOverflow",
+			enabled: escapeWithReference
+		}] };
+	}, [escapeWithReference]);
+	const [open, setOpen] = useState(false);
+	const [validationMessage] = useControlled(statusMessage, "Required");
+	const [validationState] = useControlled(status, "standBy");
+	const placeholders = 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(id, "error") : ariaErrorMessage : void 0;
+	return /* @__PURE__ */ jsxs(HvFormElement, {
+		name,
+		required,
+		disabled,
+		status: validationState,
+		className: cx(classes.root, className),
+		...others,
+		children: [
+			/* @__PURE__ */ jsx(HvLabelContainer, {
+				label,
+				description,
+				classes: {
+					root: classes.labelContainer,
+					label: classes.label,
+					description: classes.description
+				},
+				labelProps,
+				descriptionProps
+			}),
+			/* @__PURE__ */ jsx(HvBaseDropdown, {
+				ref: dropdownForkedRef,
+				role: "combobox",
+				variableWidth: true,
+				disabled,
+				readOnly,
+				placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsx(Placeholder, {
+					ref: timeFieldRef,
+					name,
+					state,
+					placeholders,
+					className: cx(classes.placeholder, { [classes.placeholderDisabled]: disabled }),
+					...fieldProps
+				}),
+				classes: {
+					header: cx(classes.dropdownHeader, { [classes.dropdownHeaderInvalid]: isStateInvalid }),
+					panel: classes.dropdownPanel,
+					headerOpen: classes.dropdownHeaderOpen
+				},
+				placement: "right",
+				adornment: /* @__PURE__ */ jsx(HvIcon, {
+					name: "Time",
+					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,
+				...otherDropdownProps,
+				children: /* @__PURE__ */ jsx("div", {
+					ref: timeFieldRef,
+					className: classes.timePopperContainer,
+					children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(Unit, {
+						state,
+						segment,
+						placeholder: placeholders[segment.type],
+						onAdd: () => state.increment(segment.type),
+						onSub: () => state.decrement(segment.type),
+						onChange: (evt, val) => {
+							state.setSegment(segment.type, Number(val));
+						}
+					}, segment.type === "literal" ? `literal-${i}` : segment.type))
+				})
+			}),
+			canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+				id: setId(id, "error"),
+				disableBorder: true,
+				className: classes.error,
+				children: validationMessage
+			})
+		]
+	});
+});
+//#endregion
+export { HvTimePicker };

package/dist/TimePicker/TimePicker.styles.js

@@ -1,41 +1,32 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses, staticClasses } = createClasses("HvTimePicker", {
-  root: {
-    position: "relative"
-  },
-  labelContainer: {},
-  label: {},
-  description: {},
-  placeholder: {
-    display: "flex",
-    gap: 1
-  },
-  placeholderDisabled: {
-    color: theme.colors.textDisabled
-  },
-  dropdownHeader: {},
-  dropdownHeaderOpen: {},
-  dropdownHeaderInvalid: {
-    "&,:hover": {
-      borderColor: theme.form.errorColor
-    }
-  },
-  dropdownPanel: {},
-  icon: {},
-  timePopperContainer: {
-    zIndex: 10,
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: theme.spacing("xs", 0),
-    userSelect: "none",
-    minWidth: "175px"
-  },
-  error: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/TimePicker/TimePicker.styles.ts
+var { useClasses, staticClasses } = createClasses("HvTimePicker", {
+	root: { position: "relative" },
+	labelContainer: {},
+	label: {},
+	description: {},
+	placeholder: {
+		display: "flex",
+		gap: 1
+	},
+	placeholderDisabled: { color: theme.colors.textDisabled },
+	dropdownHeader: {},
+	dropdownHeaderOpen: {},
+	dropdownHeaderInvalid: { "&,:hover": { borderColor: theme.form.errorColor } },
+	dropdownPanel: {},
+	icon: {},
+	timePopperContainer: {
+		zIndex: 10,
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: theme.spacing("xs", 0),
+		userSelect: "none",
+		minWidth: "175px"
+	},
+	error: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/TimePicker/Unit/Unit.js

@@ -1,53 +1,67 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { theme } from "@hitachivantara/uikit-styles";
 import { HvIcon } from "../../icons.js";
-import { useClasses } from "./Unit.styles.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvBaseInput } from "../../BaseInput/BaseInput.js";
-const Unit = ({
-  id,
-  state,
-  segment,
-  placeholder: placeholderProp,
-  onChange,
-  onAdd,
-  onSub
-}) => {
-  const { classes } = useClasses();
-  const { type, text } = segment;
-  const placeholder = placeholderProp ?? segment.placeholder;
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    type !== "literal" && /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: true, onClick: onAdd }),
-    type === "literal" && /* @__PURE__ */ jsx("div", { className: classes.separator, children: text }),
-    type === "dayPeriod" && /* @__PURE__ */ jsx(HvButton, { icon: true, className: classes.periodToggle, onClick: onAdd, children: text }),
-    ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsx(
-      HvBaseInput,
-      {
-        id,
-        style: {
-          ...theme.typography.title3
-        },
-        classes: {
-          input: classes.input,
-          root: classes.inputRoot
-        },
-        onKeyDown: (event) => {
-          if ("key" in event && event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        },
-        required: true,
-        invalid: state.isInvalid,
-        value: text.padStart(2, "0"),
-        onChange,
-        placeholder,
-        inputProps: { autoComplete: "off", type: "number" }
-      }
-    ),
-    type !== "literal" && /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", onClick: onSub })
-  ] });
-};
-export {
-  Unit
+import { useClasses } from "./Unit.styles.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/TimePicker/Unit/Unit.tsx
+var Unit = ({ id, state, segment, placeholder: placeholderProp, onChange, onAdd, onSub }) => {
+	const { classes } = useClasses();
+	const { type, text } = segment;
+	const placeholder = placeholderProp ?? segment.placeholder;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.root,
+		children: [
+			type !== "literal" && /* @__PURE__ */ jsx(HvIcon, {
+				name: "CaretDown",
+				size: "xs",
+				rotate: true,
+				onClick: onAdd
+			}),
+			type === "literal" && /* @__PURE__ */ jsx("div", {
+				className: classes.separator,
+				children: text
+			}),
+			type === "dayPeriod" && /* @__PURE__ */ jsx(HvButton, {
+				icon: true,
+				className: classes.periodToggle,
+				onClick: onAdd,
+				children: text
+			}),
+			[
+				"hour",
+				"minute",
+				"second"
+			].includes(type) && /* @__PURE__ */ jsx(HvBaseInput, {
+				id,
+				style: { ...theme.typography.title3 },
+				classes: {
+					input: classes.input,
+					root: classes.inputRoot
+				},
+				onKeyDown: (event) => {
+					if ("key" in event && event.key === "Enter") {
+						event.preventDefault();
+						event.stopPropagation();
+					}
+				},
+				required: true,
+				invalid: state.isInvalid,
+				value: text.padStart(2, "0"),
+				onChange,
+				placeholder,
+				inputProps: {
+					autoComplete: "off",
+					type: "number"
+				}
+			}),
+			type !== "literal" && /* @__PURE__ */ jsx(HvIcon, {
+				name: "CaretDown",
+				size: "xs",
+				onClick: onSub
+			})
+		]
+	});
 };
+//#endregion
+export { Unit };

package/dist/TimePicker/Unit/Unit.styles.js

@@ -1,48 +1,43 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvTimePickerUnit", {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    textAlign: "center",
-    ...theme.typography.title3
-  },
-  separator: {
-    width: 8
-  },
-  periodToggle: {
-    height: 40,
-    width: 40
-  },
-  element: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: 40,
-    width: 40
-  },
-  input: {
-    ...theme.typography.title3,
-    fontWeight: 600,
-    textAlign: "center",
-    padding: 0,
-    margin: 0,
-    "&::placeholder": {
-      fontSize: 16,
-      fontWeight: 600
-    }
-  },
-  inputRoot: {
-    width: 40,
-    height: 40
-  },
-  subtractIcon: {
-    marginTop: theme.space.xs
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/TimePicker/Unit/Unit.styles.ts
+var { staticClasses, useClasses } = createClasses("HvTimePickerUnit", {
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		textAlign: "center",
+		...theme.typography.title3
+	},
+	separator: { width: 8 },
+	periodToggle: {
+		height: 40,
+		width: 40
+	},
+	element: {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		height: 40,
+		width: 40
+	},
+	input: {
+		...theme.typography.title3,
+		fontWeight: 600,
+		textAlign: "center",
+		padding: 0,
+		margin: 0,
+		"&::placeholder": {
+			fontSize: 16,
+			fontWeight: 600
+		}
+	},
+	inputRoot: {
+		width: 40,
+		height: 40
+	},
+	subtractIcon: { marginTop: theme.space.xs }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };