@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/Calendar/SingleCalendar/CalendarCell.js

@@ -1,86 +1,62 @@
-import { jsx } from "react/jsx-runtime";
-import { useRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { isDateRangeProp, isSameDay, isSameMonth, dateInProvidedValueRange, checkIfDateIsDisabled } from "../utils.js";
-import { useClasses } from "./CalendarCell.styles.js";
-import { staticClasses } from "./CalendarCell.styles.js";
-import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const HvCalendarCell = (props) => {
-  const {
-    classes: classesProp,
-    onChange,
-    calendarValue,
-    firstDayOfCurrentMonth,
-    value,
-    isDateSelectionMode,
-    today,
-    locale,
-    minimumDate,
-    maximumDate,
-    rangeMode = false,
-    ...others
-  } = useDefaultProps("HvCalendarCell", props);
-  const { classes, cx } = useClasses(classesProp);
-  const buttonEl = useRef(null);
-  const startDate = isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;
-  const endDate = isDateRangeProp(calendarValue) ? calendarValue.endDate : void 0;
-  const isCellToday = isSameDay(value, today);
-  const isCellSelected = isSameDay(calendarValue, value);
-  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);
-  const isCellAfterStartingDate = rangeMode && value && startDate ? value >= startDate : false;
-  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;
-  const isDateInSelectionRange = calendarValue && rangeMode ? dateInProvidedValueRange(value, calendarValue) : false;
-  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);
-  const startBookend = isSameDay(startDate, value);
-  const endBookend = isSameDay(endDate, value);
-  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;
-  const handleClick = (event) => {
-    if (value) {
-      onChange?.(event, value);
-      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());
-    }
-  };
-  const renderDate = () => /* @__PURE__ */ jsx(
-    HvButtonBase,
-    {
-      ref: buttonEl,
-      className: classes.cellContainer,
-      onClick: handleClick,
-      disabled: isDateDisabled || !inMonth,
-      "data-in-month": inMonth,
-      ...others,
-      children: /* @__PURE__ */ jsx(
-        HvTypography,
-        {
-          component: "span",
-          variant: isCellToday ? "label" : "body",
-          className: cx(classes.calendarDate, {
-            [classes.calendarDateSelected]: inMonth && isCellSelected,
-            [classes.calendarDateNotInMonth]: !inMonth,
-            [classes.calendarDateInSelectionRange]: inMonth && rangeMode && isDateInSelectionRange,
-            [classes.calendarDateDisabled]: isDateDisabled,
-            [classes.startBookend]: inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode),
-            [classes.endBookend]: inMonth && endBookend && rangeMode
-          }),
-          children: value?.getDate()
-        }
-      )
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(classes.dateWrapper, {
-        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,
-        [classes.cellsOutsideRange]: rangeMode && !isSelecting
-      }),
-      "data-calendar-cell": "calendarCell",
-      children: renderDate()
-    }
-  );
-};
-export {
-  HvCalendarCell,
-  staticClasses as calendarCellClasses
+import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
+import { checkIfDateIsDisabled, dateInProvidedValueRange, isDateRangeProp, isSameDay, isSameMonth } from "../utils.js";
+import { useClasses } from "./CalendarCell.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Calendar/SingleCalendar/CalendarCell.tsx
+var HvCalendarCell = (props) => {
+	const { classes: classesProp, onChange, calendarValue, firstDayOfCurrentMonth, value, isDateSelectionMode, today, locale, minimumDate, maximumDate, rangeMode = false, ...others } = useDefaultProps("HvCalendarCell", props);
+	const { classes, cx } = useClasses(classesProp);
+	const buttonEl = useRef(null);
+	const startDate = isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;
+	const endDate = isDateRangeProp(calendarValue) ? calendarValue.endDate : void 0;
+	const isCellToday = isSameDay(value, today);
+	const isCellSelected = isSameDay(calendarValue, value);
+	const inMonth = isSameMonth(value, firstDayOfCurrentMonth);
+	const isCellAfterStartingDate = rangeMode && value && startDate ? value >= startDate : false;
+	const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;
+	const isDateInSelectionRange = calendarValue && rangeMode ? dateInProvidedValueRange(value, calendarValue) : false;
+	const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);
+	const startBookend = isSameDay(startDate, value);
+	const endBookend = isSameDay(endDate, value);
+	const isSelecting = isDateSelectionMode && isCellAfterStartingDate;
+	const handleClick = (event) => {
+		if (value) {
+			onChange?.(event, value);
+			if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());
+		}
+	};
+	const renderDate = () => /* @__PURE__ */ jsx(HvButtonBase, {
+		ref: buttonEl,
+		className: classes.cellContainer,
+		onClick: handleClick,
+		disabled: isDateDisabled || !inMonth,
+		"data-in-month": inMonth,
+		...others,
+		children: /* @__PURE__ */ jsx(HvTypography, {
+			component: "span",
+			variant: isCellToday ? "label" : "body",
+			className: cx(classes.calendarDate, {
+				[classes.calendarDateSelected]: inMonth && isCellSelected,
+				[classes.calendarDateNotInMonth]: !inMonth,
+				[classes.calendarDateInSelectionRange]: inMonth && rangeMode && isDateInSelectionRange,
+				[classes.calendarDateDisabled]: isDateDisabled,
+				[classes.startBookend]: inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode),
+				[classes.endBookend]: inMonth && endBookend && rangeMode
+			}),
+			children: value?.getDate()
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.dateWrapper, {
+			[classes.cellsInRange]: inMonth && rangeMode && isSelecting,
+			[classes.cellsOutsideRange]: rangeMode && !isSelecting
+		}),
+		"data-calendar-cell": "calendarCell",
+		children: renderDate()
+	});
 };
+//#endregion
+export { HvCalendarCell as default };

package/dist/Calendar/SingleCalendar/CalendarCell.styles.js

@@ -1,59 +1,42 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const hover = {
-  backgroundColor: theme.colors.bgHover,
-  cursor: "pointer"
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Calendar/SingleCalendar/CalendarCell.styles.tsx
+var hover = {
+	backgroundColor: theme.colors.bgHover,
+	cursor: "pointer"
 };
-const { staticClasses, useClasses } = createClasses("HvCalendarCell", {
-  cellContainer: {},
-  calendarDate: {
-    display: "flex",
-    justifyContent: "center",
-    flexDirection: "column",
-    textAlign: "center",
-    height: "40px",
-    width: "40px"
-  },
-  calendarDateSelected: {
-    backgroundColor: theme.colors.bgPageSecondary,
-    color: theme.colors.text,
-    "&:hover": {
-      ...hover
-    }
-  },
-  calendarDateNotInMonth: {
-    color: theme.colors.textDisabled,
-    cursor: "not-allowed"
-  },
-  calendarDateInSelectionRange: {
-    backgroundColor: theme.colors.bgPageSecondary
-  },
-  calendarDateDisabled: {
-    color: theme.colors.textDisabled,
-    cursor: "no-drop"
-  },
-  startBookend: {
-    borderLeft: `1px solid ${theme.colors.text}`
-  },
-  endBookend: {
-    borderRight: `1px solid ${theme.colors.text}`
-  },
-  dateWrapper: {
-    width: "40px",
-    height: "40px"
-  },
-  cellsInRange: {
-    "&:focus": {
-      outside: "none"
-    }
-  },
-  cellsOutsideRange: {
-    "&:focus": {
-      outside: "none"
-    }
-  }
+var { staticClasses, useClasses } = createClasses("HvCalendarCell", {
+	cellContainer: {},
+	calendarDate: {
+		display: "flex",
+		justifyContent: "center",
+		flexDirection: "column",
+		textAlign: "center",
+		height: "40px",
+		width: "40px"
+	},
+	calendarDateSelected: {
+		backgroundColor: theme.colors.bgPageSecondary,
+		color: theme.colors.text,
+		"&:hover": { ...hover }
+	},
+	calendarDateNotInMonth: {
+		color: theme.colors.textDisabled,
+		cursor: "not-allowed"
+	},
+	calendarDateInSelectionRange: { backgroundColor: theme.colors.bgPageSecondary },
+	calendarDateDisabled: {
+		color: theme.colors.textDisabled,
+		cursor: "no-drop"
+	},
+	startBookend: { borderLeft: `1px solid ${theme.colors.text}` },
+	endBookend: { borderRight: `1px solid ${theme.colors.text}` },
+	dateWrapper: {
+		width: "40px",
+		height: "40px"
+	},
+	cellsInRange: { "&:focus": { outside: "none" } },
+	cellsOutsideRange: { "&:focus": { outside: "none" } }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/Calendar/SingleCalendar/SingleCalendar.js

@@ -1,159 +1,126 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvTypography } from "../../Typography/Typography.js";
 import { isKey } from "../../utils/keyboardUtils.js";
-import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
-import { generateCalendarModel } from "../model.js";
-import { DEFAULT_LOCALE, isDate, getWeekdayNamesList, isRange } from "../utils.js";
-import { HvCalendarCell } from "./CalendarCell.js";
-import { useClasses } from "./SingleCalendar.styles.js";
-import { staticClasses } from "./SingleCalendar.styles.js";
 import { HvPanel } from "../../Panel/Panel.js";
+import { getWeekdayNamesList, isDate, isRange } from "../utils.js";
+import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { HvComposedNavigation } from "../CalendarNavigation/ComposedNavigation/ComposedNavigation.js";
 import { HvMonthSelector } from "../CalendarNavigation/MonthSelector/MonthSelector.js";
-import { HvTypography } from "../../Typography/Typography.js";
-const HvSingleCalendar = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    id,
-    locale = DEFAULT_LOCALE,
-    value,
-    visibleMonth,
-    visibleYear,
-    minimumDate,
-    maximumDate,
-    onChange,
-    onInputChange,
-    onVisibleDateChange,
-    showEndDate,
-    showDayOfWeek,
-    invalidDateLabel,
-    children,
-    ...others
-  } = useDefaultProps("HvSingleCalendar", props);
-  const { classes, cx } = useClasses(classesProp);
-  const today = /* @__PURE__ */ new Date();
-  const localValue = value ?? today;
-  const [calViewMode, setCalViewMode] = useState("calendar");
-  const rangeMode = isRange(localValue);
-  const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);
-  const calModel = rangeMode ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear) : generateCalendarModel(localValue, visibleMonth, visibleYear);
-  const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);
-  const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();
-  const listWeekdayNames = useMemo(() => getWeekdayNamesList(locale), [locale]);
-  const handleChange = (event, date) => {
-    event?.preventDefault();
-    onChange?.(event, date);
-  };
-  const handleInputChange = (event, date) => {
-    event?.preventDefault();
-    onInputChange?.(event, date);
-  };
-  const getNavChild = (event, siblings, i) => {
-    if (isKey(event, "ArrowLeft")) return siblings[i - 1];
-    if (isKey(event, "ArrowRight")) return siblings[i + 1];
-    if (isKey(event, "ArrowUp")) return siblings[i - 7];
-    if (isKey(event, "ArrowDown")) return siblings[i + 7];
-    return void 0;
-  };
-  const handleKeyDown = (event) => {
-    const el = document?.activeElement;
-    const parent = el?.parentElement?.parentElement;
-    const siblings = parent != null ? Array.from(
-      parent.getElementsByClassName(classes.cellContainer)
-    ) : [];
-    const elIndex = el ? siblings.indexOf(el) : 0;
-    if (isKey(event, "Enter")) {
-      el.focus();
-      return;
-    }
-    const child = getNavChild(event, siblings, elIndex);
-    if (child) {
-      const inMonth = child.getAttribute("data-in-month");
-      if (inMonth === "true") {
-        event?.preventDefault();
-        child?.focus();
-      }
-    }
-  };
-  const renderWeekLabel = (dayName, index) => /* @__PURE__ */ jsx(HvTypography, { variant: "label", className: classes.calendarDay, children: dayName }, index);
-  const renderCalendarDate = (currentDate) => {
-    return /* @__PURE__ */ jsx(
-      HvCalendarCell,
-      {
-        classes,
-        tabIndex: currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1,
-        onChange: handleChange,
-        onKeyDown: handleKeyDown,
-        value: currentDate,
-        today,
-        calendarValue: localValue,
-        rangeMode,
-        isDateSelectionMode,
-        locale,
-        firstDayOfCurrentMonth,
-        maximumDate,
-        minimumDate
-      },
-      currentDate.toString()
-    );
-  };
-  return /* @__PURE__ */ jsxs(HvPanel, { id, className: cx(classes.root, className), ...others, children: [
-    /* @__PURE__ */ jsx(
-      HvCalendarHeader,
-      {
-        locale,
-        value,
-        onChange: handleInputChange,
-        showEndDate: showEndDate && !isDateSelectionMode,
-        showDayOfWeek,
-        invalidDateLabel
-      }
-    ),
-    calViewMode === "calendar" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        HvComposedNavigation,
-        {
-          id,
-          locale,
-          onChange: onVisibleDateChange,
-          onViewModeChange: setCalViewMode,
-          visibleYear: visibleYear || today.getFullYear(),
-          visibleMonth: visibleMonth || today.getMonth() + 1
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cx(classes.calendarGrid, classes.weekdays),
-          "aria-controls": HvCalendarHeader?.[0]?.id,
-          children: listWeekdayNames.map(renderWeekLabel)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: classes.calendarGrid,
-          "aria-controls": HvCalendarHeader?.[0]?.id,
-          children: calModel.dates.map(renderCalendarDate)
-        }
-      )
-    ] }),
-    calViewMode === "monthly" && /* @__PURE__ */ jsx(
-      HvMonthSelector,
-      {
-        id,
-        locale,
-        onChange: onVisibleDateChange,
-        onViewModeChange: setCalViewMode,
-        visibleMonth: visibleMonth || today.getMonth() + 1,
-        rangeMode
-      }
-    )
-  ] });
-};
-export {
-  HvSingleCalendar,
-  staticClasses as singleCalendarClasses
+import { generateCalendarModel } from "../model.js";
+import HvCalendarCell from "./CalendarCell.js";
+import { useClasses } from "./SingleCalendar.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Calendar/SingleCalendar/SingleCalendar.tsx
+var HvSingleCalendar = (props) => {
+	const { classes: classesProp, className, id, locale = "en", value, visibleMonth, visibleYear, minimumDate, maximumDate, onChange, onInputChange, onVisibleDateChange, showEndDate, showDayOfWeek, invalidDateLabel, children, ...others } = useDefaultProps("HvSingleCalendar", props);
+	const { classes, cx } = useClasses(classesProp);
+	const today = /* @__PURE__ */ new Date();
+	const localValue = value ?? today;
+	const [calViewMode, setCalViewMode] = useState("calendar");
+	const rangeMode = isRange(localValue);
+	const isDateSelectionMode = rangeMode && !isDate(localValue.endDate);
+	const calModel = rangeMode ? generateCalendarModel(localValue.startDate, visibleMonth, visibleYear) : generateCalendarModel(localValue, visibleMonth, visibleYear);
+	const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);
+	const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();
+	const listWeekdayNames = useMemo(() => getWeekdayNamesList(locale), [locale]);
+	const handleChange = (event, date) => {
+		event?.preventDefault();
+		onChange?.(event, date);
+	};
+	const handleInputChange = (event, date) => {
+		event?.preventDefault();
+		onInputChange?.(event, date);
+	};
+	const getNavChild = (event, siblings, i) => {
+		if (isKey(event, "ArrowLeft")) return siblings[i - 1];
+		if (isKey(event, "ArrowRight")) return siblings[i + 1];
+		if (isKey(event, "ArrowUp")) return siblings[i - 7];
+		if (isKey(event, "ArrowDown")) return siblings[i + 7];
+	};
+	const handleKeyDown = (event) => {
+		const el = document?.activeElement;
+		const parent = el?.parentElement?.parentElement;
+		const siblings = parent != null ? Array.from(parent.getElementsByClassName(classes.cellContainer)) : [];
+		const elIndex = el ? siblings.indexOf(el) : 0;
+		if (isKey(event, "Enter")) {
+			el.focus();
+			return;
+		}
+		const child = getNavChild(event, siblings, elIndex);
+		if (child) {
+			if (child.getAttribute("data-in-month") === "true") {
+				event?.preventDefault();
+				child?.focus();
+			}
+		}
+	};
+	const renderWeekLabel = (dayName, index) => /* @__PURE__ */ jsx(HvTypography, {
+		variant: "label",
+		className: classes.calendarDay,
+		children: dayName
+	}, index);
+	/** Renders the element representing the received date. */
+	const renderCalendarDate = (currentDate) => {
+		return /* @__PURE__ */ jsx(HvCalendarCell, {
+			classes,
+			tabIndex: currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			value: currentDate,
+			today,
+			calendarValue: localValue,
+			rangeMode,
+			isDateSelectionMode,
+			locale,
+			firstDayOfCurrentMonth,
+			maximumDate,
+			minimumDate
+		}, currentDate.toString());
+	};
+	return /* @__PURE__ */ jsxs(HvPanel, {
+		id,
+		className: cx(classes.root, className),
+		...others,
+		children: [
+			/* @__PURE__ */ jsx(HvCalendarHeader, {
+				locale,
+				value,
+				onChange: handleInputChange,
+				showEndDate: showEndDate && !isDateSelectionMode,
+				showDayOfWeek,
+				invalidDateLabel
+			}),
+			calViewMode === "calendar" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(HvComposedNavigation, {
+					id,
+					locale,
+					onChange: onVisibleDateChange,
+					onViewModeChange: setCalViewMode,
+					visibleYear: visibleYear || today.getFullYear(),
+					visibleMonth: visibleMonth || today.getMonth() + 1
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cx(classes.calendarGrid, classes.weekdays),
+					"aria-controls": HvCalendarHeader?.[0]?.id,
+					children: listWeekdayNames.map(renderWeekLabel)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: classes.calendarGrid,
+					"aria-controls": HvCalendarHeader?.[0]?.id,
+					children: calModel.dates.map(renderCalendarDate)
+				})
+			] }),
+			calViewMode === "monthly" && /* @__PURE__ */ jsx(HvMonthSelector, {
+				id,
+				locale,
+				onChange: onVisibleDateChange,
+				onViewModeChange: setCalViewMode,
+				visibleMonth: visibleMonth || today.getMonth() + 1,
+				rangeMode
+			})
+		]
+	});
 };
+//#endregion
+export { HvSingleCalendar };