@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/Calendar/CalendarHeader/CalendarHeader.js

@@ -1,123 +1,96 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useContext, useState, useEffect } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvTypography } from "../../Typography/Typography.js";
 import { isKey } from "../../utils/keyboardUtils.js";
-import { DEFAULT_LOCALE, isRange, getLocaleDateFormat, isDate, getFormattedDate, getStringFromDate, parseDateString, isSameDay } from "../utils.js";
-import { useClasses } from "./CalendarHeader.styles.js";
-import { staticClasses } from "./CalendarHeader.styles.js";
 import { HvFormElementDescriptorsContext } from "../../FormElement/context.js";
-import { HvTypography } from "../../Typography/Typography.js";
 import { HvInput } from "../../Input/Input.js";
-const HvCalendarHeader = (props) => {
-  const {
-    id,
-    value: valueProp,
-    locale = DEFAULT_LOCALE,
-    classes: classesProp,
-    onChange,
-    showEndDate,
-    showDayOfWeek = false,
-    onFocus,
-    invalidDateLabel = "Invalid Date"
-  } = useDefaultProps("HvCalendarHeader", props);
-  const { classes, cx } = useClasses(classesProp);
-  const { label } = useContext(HvFormElementDescriptorsContext);
-  const localValue = isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
-  const [dateValue, setDateValue] = useState(localValue);
-  const [editedValue, setEditedValue] = useState(null);
-  const [displayValue, setDisplayValue] = useState("");
-  const [weekdayDisplay, setWeekdayDisplay] = useState("");
-  const inputValue = editedValue ?? displayValue;
-  const localeFormat = getLocaleDateFormat(locale);
-  const [isValidValue, setIsValidValue] = useState(
-    inputValue.length === 0 || inputValue && isDate(new Date(inputValue))
-  );
-  useEffect(() => {
-    const valid = !localValue || isDate(new Date(localValue));
-    setIsValidValue(valid);
-    if (valid) {
-      if (!localValue) {
-        setDisplayValue("");
-        setEditedValue(null);
-        setWeekdayDisplay("");
-        return;
-      }
-      const weekday = new Intl.DateTimeFormat(locale, {
-        weekday: "short"
-      }).format(isDate(localValue) ? localValue : 0);
-      setDisplayValue(getFormattedDate(localValue, locale));
-      setEditedValue(null);
-      setWeekdayDisplay(weekday);
-    }
-  }, [localValue, locale]);
-  const handleNewDate = (event, date) => {
-    const localeParsedDate = parseDateString(date, locale);
-    const isValidInput = isDate(localeParsedDate);
-    const dateParsed = isValidInput ? localeParsedDate : new Date(date);
-    if (!isSameDay(dateParsed, dateValue)) {
-      setDateValue(dateParsed);
-      onChange?.(event, dateParsed);
-    }
-    setIsValidValue(isValidInput);
-    if (isValidInput) {
-      setEditedValue(null);
-    }
-  };
-  const onBlurHandler = (event) => {
-    if (editedValue == null) return;
-    if (editedValue === "") {
-      setIsValidValue(true);
-      setEditedValue(null);
-      return;
-    }
-    handleNewDate(event, editedValue);
-  };
-  const keyDownHandler = (event) => {
-    if (!isKey(event, "Enter") || editedValue == null || editedValue === "")
-      return;
-    event.preventDefault();
-    handleNewDate(event, editedValue);
-  };
-  const onFocusHandler = (event) => {
-    if (!localValue) return;
-    const formattedDate = isValidValue && isDate(localValue) ? getStringFromDate(localValue, locale) : editedValue;
-    setEditedValue(formattedDate);
-    onFocus?.(event, formattedDate);
-  };
-  const onChangeHandler = (event, val) => {
-    setEditedValue(val);
-  };
-  const isInvalid = !isValidValue && inputValue !== "";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      className: cx(classes.root, {
-        [classes.invalid]: isInvalid
-      }),
-      children: [
-        showDayOfWeek && /* @__PURE__ */ jsx(HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
-        /* @__PURE__ */ jsx(
-          HvInput,
-          {
-            type: "text",
-            placeholder: localeFormat,
-            value: inputValue,
-            "aria-labelledby": label?.[0]?.id,
-            onBlur: onBlurHandler,
-            onFocus: onFocusHandler,
-            onChange: onChangeHandler,
-            onKeyDown: keyDownHandler,
-            status: isInvalid ? "invalid" : "valid",
-            statusMessage: invalidDateLabel
-          }
-        )
-      ]
-    }
-  );
+import { getFormattedDate, getLocaleDateFormat, getStringFromDate, isDate, isRange, isSameDay, parseDateString } from "../utils.js";
+import { useClasses } from "./CalendarHeader.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useContext, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Calendar/CalendarHeader/CalendarHeader.tsx
+var HvCalendarHeader = (props) => {
+	const { id, value: valueProp, locale = "en", classes: classesProp, onChange, showEndDate, showDayOfWeek = false, onFocus, invalidDateLabel = "Invalid Date" } = useDefaultProps("HvCalendarHeader", props);
+	const { classes, cx } = useClasses(classesProp);
+	const { label } = useContext(HvFormElementDescriptorsContext);
+	const localValue = isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
+	const [dateValue, setDateValue] = useState(localValue);
+	const [editedValue, setEditedValue] = useState(null);
+	const [displayValue, setDisplayValue] = useState("");
+	const [weekdayDisplay, setWeekdayDisplay] = useState("");
+	const inputValue = editedValue ?? displayValue;
+	const localeFormat = getLocaleDateFormat(locale);
+	const [isValidValue, setIsValidValue] = useState(inputValue.length === 0 || inputValue && isDate(new Date(inputValue)));
+	useEffect(() => {
+		const valid = !localValue || isDate(new Date(localValue));
+		setIsValidValue(valid);
+		if (valid) {
+			if (!localValue) {
+				setDisplayValue("");
+				setEditedValue(null);
+				setWeekdayDisplay("");
+				return;
+			}
+			const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" }).format(isDate(localValue) ? localValue : 0);
+			setDisplayValue(getFormattedDate(localValue, locale));
+			setEditedValue(null);
+			setWeekdayDisplay(weekday);
+		}
+	}, [localValue, locale]);
+	const handleNewDate = (event, date) => {
+		const localeParsedDate = parseDateString(date, locale);
+		const isValidInput = isDate(localeParsedDate);
+		const dateParsed = isValidInput ? localeParsedDate : new Date(date);
+		if (!isSameDay(dateParsed, dateValue)) {
+			setDateValue(dateParsed);
+			onChange?.(event, dateParsed);
+		}
+		setIsValidValue(isValidInput);
+		if (isValidInput) setEditedValue(null);
+	};
+	const onBlurHandler = (event) => {
+		if (editedValue == null) return;
+		if (editedValue === "") {
+			setIsValidValue(true);
+			setEditedValue(null);
+			return;
+		}
+		handleNewDate(event, editedValue);
+	};
+	const keyDownHandler = (event) => {
+		if (!isKey(event, "Enter") || editedValue == null || editedValue === "") return;
+		event.preventDefault();
+		handleNewDate(event, editedValue);
+	};
+	const onFocusHandler = (event) => {
+		if (!localValue) return;
+		const formattedDate = isValidValue && isDate(localValue) ? getStringFromDate(localValue, locale) : editedValue;
+		setEditedValue(formattedDate);
+		onFocus?.(event, formattedDate);
+	};
+	const onChangeHandler = (event, val) => {
+		setEditedValue(val);
+	};
+	const isInvalid = !isValidValue && inputValue !== "";
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cx(classes.root, { [classes.invalid]: isInvalid }),
+		children: [showDayOfWeek && /* @__PURE__ */ jsx(HvTypography, {
+			className: classes.headerDayOfWeek,
+			children: weekdayDisplay || "\xA0"
+		}), /* @__PURE__ */ jsx(HvInput, {
+			type: "text",
+			placeholder: localeFormat,
+			value: inputValue,
+			"aria-labelledby": label?.[0]?.id,
+			onBlur: onBlurHandler,
+			onFocus: onFocusHandler,
+			onChange: onChangeHandler,
+			onKeyDown: keyDownHandler,
+			status: isInvalid ? "invalid" : "valid",
+			statusMessage: invalidDateLabel
+		})]
+	});
 };
 HvCalendarHeader.formElementType = "HvCalendarHeader";
-export {
-  HvCalendarHeader,
-  staticClasses as calendarHeaderClasses
-};
+//#endregion
+export { HvCalendarHeader };

package/dist/Calendar/CalendarHeader/CalendarHeader.styles.js

@@ -1,18 +1,13 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvCalendarHeader", {
-  root: {
-    paddingBottom: theme.space.sm,
-    "&$invalid": {
-      paddingBottom: 0
-    }
-  },
-  invalid: {},
-  headerDayOfWeek: {
-    color: theme.colors.textSubtle
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Calendar/CalendarHeader/CalendarHeader.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvCalendarHeader", {
+	root: {
+		paddingBottom: theme.space.sm,
+		"&$invalid": { paddingBottom: 0 }
+	},
+	invalid: {},
+	headerDayOfWeek: { color: theme.colors.textSubtle }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js

@@ -1,53 +1,39 @@
-import { jsxs, jsx } from "react/jsx-runtime";
 import { getMonthNamesList } from "../../utils.js";
-import { useClasses } from "./ComposedNavigation.styles.js";
-import { staticClasses } from "./ComposedNavigation.styles.js";
 import { Navigation } from "../Navigation/Navigation.js";
-const HvComposedNavigation = ({
-  classes: classesProp,
-  id,
-  locale,
-  onChange,
-  onViewModeChange,
-  visibleYear,
-  visibleMonth,
-  ...others
-}) => {
-  const { classes } = useClasses(classesProp);
-  const listMonthNamesLong = getMonthNamesList(locale, "long");
-  const monthName = listMonthNamesLong[visibleMonth - 1];
-  return /* @__PURE__ */ jsxs("div", { className: classes.navigationContainer, ...others, children: [
-    /* @__PURE__ */ jsx("div", { className: classes.navigationMonth, children: /* @__PURE__ */ jsx(
-      Navigation,
-      {
-        navigationText: monthName,
-        onNavigatePrevious: (event) => {
-          onChange?.(event, "previous_month");
-        },
-        onNavigateNext: (event) => {
-          onChange?.(event, "next_month");
-        },
-        onTextClick: () => {
-          onViewModeChange("monthly");
-        },
-        className: classes.navigationMonth
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      Navigation,
-      {
-        navigationText: visibleYear.toString(),
-        onNavigatePrevious: (event) => {
-          onChange?.(event, "previous_year");
-        },
-        onNavigateNext: (event) => {
-          onChange?.(event, "next_year");
-        }
-      }
-    )
-  ] });
-};
-export {
-  HvComposedNavigation,
-  staticClasses as composedNavigationClasses
+import { useClasses } from "./ComposedNavigation.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.tsx
+var HvComposedNavigation = ({ classes: classesProp, id, locale, onChange, onViewModeChange, visibleYear, visibleMonth, ...others }) => {
+	const { classes } = useClasses(classesProp);
+	const monthName = getMonthNamesList(locale, "long")[visibleMonth - 1];
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.navigationContainer,
+		...others,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: classes.navigationMonth,
+			children: /* @__PURE__ */ jsx(Navigation, {
+				navigationText: monthName,
+				onNavigatePrevious: (event) => {
+					onChange?.(event, "previous_month");
+				},
+				onNavigateNext: (event) => {
+					onChange?.(event, "next_month");
+				},
+				onTextClick: () => {
+					onViewModeChange("monthly");
+				},
+				className: classes.navigationMonth
+			})
+		}), /* @__PURE__ */ jsx(Navigation, {
+			navigationText: visibleYear.toString(),
+			onNavigatePrevious: (event) => {
+				onChange?.(event, "previous_year");
+			},
+			onNavigateNext: (event) => {
+				onChange?.(event, "next_year");
+			}
+		})]
+	});
 };
+//#endregion
+export { HvComposedNavigation };

package/dist/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js

@@ -1,19 +1,13 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses(
-  "HvComposedNavigation",
-  {
-    navigationContainer: {
-      display: "flex",
-      justifyContent: "space-between",
-      paddingBottom: theme.space.xs
-    },
-    navigationMonth: {
-      minWidth: "160px"
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvComposedNavigation", {
+	navigationContainer: {
+		display: "flex",
+		justifyContent: "space-between",
+		paddingBottom: theme.space.xs
+	},
+	navigationMonth: { minWidth: "160px" }
+});
+//#endregion
+export { useClasses };

package/dist/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js

@@ -1,46 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { HvButtonBase } from "../../../ButtonBase/ButtonBase.js";
 import { getMonthNamesList } from "../../utils.js";
 import { useClasses } from "./MonthSelector.styles.js";
-import { staticClasses } from "./MonthSelector.styles.js";
-import { HvButtonBase } from "../../../ButtonBase/ButtonBase.js";
-const HvMonthSelector = ({
-  classes: classesProp,
-  id,
-  locale,
-  onChange,
-  onViewModeChange,
-  rangeMode,
-  visibleMonth,
-  ...others
-}) => {
-  const { classes, cx } = useClasses(classesProp);
-  const listMonthNamesShort = getMonthNamesList(locale, "short");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(classes.calendarMonthlyGrid, {
-        [classes.rangeModeWidth]: rangeMode,
-        [classes.normalWidth]: !rangeMode
-      }),
-      children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx(
-        HvButtonBase,
-        {
-          className: cx(classes.calendarMonthlyCell, {
-            [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth
-          }),
-          onClick: (event) => {
-            onChange?.(event, "month", index + 1);
-            onViewModeChange("calendar");
-          },
-          ...others,
-          children: monthName
-        },
-        monthName
-      ))
-    }
-  );
-};
-export {
-  HvMonthSelector,
-  staticClasses as monthSelectorClasses
+import { jsx } from "react/jsx-runtime";
+//#region src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.tsx
+var HvMonthSelector = ({ classes: classesProp, id, locale, onChange, onViewModeChange, rangeMode, visibleMonth, ...others }) => {
+	const { classes, cx } = useClasses(classesProp);
+	const listMonthNamesShort = getMonthNamesList(locale, "short");
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.calendarMonthlyGrid, {
+			[classes.rangeModeWidth]: rangeMode,
+			[classes.normalWidth]: !rangeMode
+		}),
+		children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx(HvButtonBase, {
+			className: cx(classes.calendarMonthlyCell, { [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth }),
+			onClick: (event) => {
+				onChange?.(event, "month", index + 1);
+				onViewModeChange("calendar");
+			},
+			...others,
+			children: monthName
+		}, monthName))
+	});
 };
+//#endregion
+export { HvMonthSelector };

package/dist/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js

@@ -1,26 +1,23 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvMonthSelector", {
-  calendarMonthlyGrid: {
-    display: "grid",
-    gridTemplateColumns: "repeat(3, 1fr)",
-    zIndex: "10",
-    alignContent: "center"
-  },
-  rangeModeWidth: {},
-  normalWidth: {},
-  calendarMonthlyCell: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "40px",
-    width: "92px"
-  },
-  calendarMonthlyCellSelected: {
-    backgroundColor: theme.colors.bgPageSecondary
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvMonthSelector", {
+	calendarMonthlyGrid: {
+		display: "grid",
+		gridTemplateColumns: "repeat(3, 1fr)",
+		zIndex: "10",
+		alignContent: "center"
+	},
+	rangeModeWidth: {},
+	normalWidth: {},
+	calendarMonthlyCell: {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		height: "40px",
+		width: "92px"
+	},
+	calendarMonthlyCellSelected: { backgroundColor: theme.colors.bgPageSecondary }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/Calendar/CalendarNavigation/Navigation/Navigation.js

@@ -1,62 +1,46 @@
-import { jsxs, jsx } from "react/jsx-runtime";
 import { HvIcon } from "../../../icons.js";
-import { useClasses } from "./Navigation.styles.js";
-import { staticClasses } from "./Navigation.styles.js";
 import { HvButton } from "../../../Button/Button.js";
-const Navigation = ({
-  id,
-  classes: classesProp,
-  onNavigatePrevious,
-  onNavigateNext,
-  onTextClick,
-  navigationText = "n/a",
-  isPreviousEnabled = true,
-  isNextEnabled = true
-}) => {
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    /* @__PURE__ */ jsx(
-      HvButton,
-      {
-        icon: true,
-        disabled: !isPreviousEnabled,
-        "aria-label": "Previous",
-        className: cx(classes.icon, {
-          [classes.disabled]: !isPreviousEnabled
-        }),
-        onClick: onNavigatePrevious,
-        children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs", rotate: true })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvButton,
-      {
-        id,
-        variant: "secondaryGhost",
-        onClick: onTextClick,
-        component: onTextClick ? "button" : "div",
-        className: cx(classes.text, {
-          [classes.textWithoutHover]: !onTextClick
-        }),
-        children: navigationText
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvButton,
-      {
-        icon: true,
-        disabled: !isNextEnabled,
-        "aria-label": "Next",
-        className: cx(classes.icon, {
-          [classes.disabled]: !isNextEnabled
-        }),
-        onClick: onNavigateNext,
-        children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs" })
-      }
-    )
-  ] });
-};
-export {
-  Navigation,
-  staticClasses as navigationClasses
+import { useClasses } from "./Navigation.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Calendar/CalendarNavigation/Navigation/Navigation.tsx
+var Navigation = ({ id, classes: classesProp, onNavigatePrevious, onNavigateNext, onTextClick, navigationText = "n/a", isPreviousEnabled = true, isNextEnabled = true }) => {
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.root,
+		children: [
+			/* @__PURE__ */ jsx(HvButton, {
+				icon: true,
+				disabled: !isPreviousEnabled,
+				"aria-label": "Previous",
+				className: cx(classes.icon, { [classes.disabled]: !isPreviousEnabled }),
+				onClick: onNavigatePrevious,
+				children: /* @__PURE__ */ jsx(HvIcon, {
+					name: "CaretRight",
+					size: "xs",
+					rotate: true
+				})
+			}),
+			/* @__PURE__ */ jsx(HvButton, {
+				id,
+				variant: "secondaryGhost",
+				onClick: onTextClick,
+				component: onTextClick ? "button" : "div",
+				className: cx(classes.text, { [classes.textWithoutHover]: !onTextClick }),
+				children: navigationText
+			}),
+			/* @__PURE__ */ jsx(HvButton, {
+				icon: true,
+				disabled: !isNextEnabled,
+				"aria-label": "Next",
+				className: cx(classes.icon, { [classes.disabled]: !isNextEnabled }),
+				onClick: onNavigateNext,
+				children: /* @__PURE__ */ jsx(HvIcon, {
+					name: "CaretRight",
+					size: "xs"
+				})
+			})
+		]
+	});
 };
+//#endregion
+export { Navigation };

package/dist/Calendar/CalendarNavigation/Navigation/Navigation.styles.js

@@ -1,26 +1,23 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvNavigation", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: theme.space.xs
-  },
-  icon: {},
-  disabled: {},
-  text: {
-    minWidth: "unset",
-    flex: 1,
-    color: theme.colors.text,
-    fontWeight: theme.typography.body.fontWeight,
-    padding: 0
-  },
-  textWithoutHover: {
-    pointerEvents: "none"
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Calendar/CalendarNavigation/Navigation/Navigation.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvNavigation", {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: theme.space.xs
+	},
+	icon: {},
+	disabled: {},
+	text: {
+		minWidth: "unset",
+		flex: 1,
+		color: theme.colors.text,
+		fontWeight: theme.typography.body.fontWeight,
+		padding: 0
+	},
+	textWithoutHover: { pointerEvents: "none" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };