@hitachivantara/uikit-react-core 5.109.1 → 5.110.0

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const CalendarHeader = require("../CalendarHeader/CalendarHeader.cjs");
@@ -13,25 +14,26 @@ const ComposedNavigation = require("../CalendarNavigation/ComposedNavigation/Com
 const MonthSelector = require("../CalendarNavigation/MonthSelector/MonthSelector.cjs");
 const Panel = require("../../Panel/Panel.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvSingleCalendar = ({
-  classes: classesProp,
-  className,
-  id,
-  locale = utils.DEFAULT_LOCALE,
-  value,
-  visibleMonth,
-  visibleYear,
-  minimumDate,
-  maximumDate,
-  onChange,
-  onInputChange,
-  onVisibleDateChange,
-  showEndDate,
-  showDayOfWeek,
-  invalidDateLabel,
-  children,
-  ...others
-}) => {
+const HvSingleCalendar = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    locale = utils.DEFAULT_LOCALE,
+    value,
+    visibleMonth,
+    visibleYear,
+    minimumDate,
+    maximumDate,
+    onChange,
+    onInputChange,
+    onVisibleDateChange,
+    showEndDate,
+    showDayOfWeek,
+    invalidDateLabel,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSingleCalendar", props);
   const { classes, cx } = SingleCalendar_styles.useClasses(classesProp);
   const today = /* @__PURE__ */ new Date();
   const localValue = value ?? today;
@@ -124,15 +126,20 @@ const HvSingleCalendar = ({
           visibleMonth: visibleMonth || today.getMonth() + 1
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cx(classes.calendarGrid, classes.weekdays),
+          "aria-controls": CalendarHeader.HvCalendarHeader?.[0]?.id,
+          children: listWeekdayNames.map(renderWeekLabel)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: classes.calendarGrid,
           "aria-controls": CalendarHeader.HvCalendarHeader?.[0]?.id,
-          children: [
-            listWeekdayNames.map(renderWeekLabel),
-            calModel.dates.map(renderCalendarDate)
-          ]
+          children: calModel.dates.map(renderCalendarDate)
         }
       )
     ] }),

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.styles.cjs

@@ -29,7 +29,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSingleCal
     "& $cellsInRange:hover": {
       backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       "& $calendarDate": {
-        borderRight: `1px solid ${uikitStyles.theme.colors.text}`
+        borderRight: `2px solid ${uikitStyles.theme.colors.text}`
       }
     },
     "& $cellsInRange:hover ~ $cellsInRange": {
@@ -63,7 +63,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSingleCal
     backgroundColor: uikitStyles.theme.colors.bgPageSecondary
   },
   cellsOutsideRange: {},
-  cellContainer: {}
+  cellContainer: {},
+  weekdays: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Calendar/utils.cjs

@@ -17,7 +17,11 @@ const isSameDay = (date1, date2) => {
   return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
 };
 const getDateISO = (date) => {
-  return new Date(date).toISOString().slice(0, 10);
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
 };
 const getPreviousMonth = (month, year) => {
   const prevMonth = month > 1 ? month - 1 : 12;

package/dist/cjs/StatusIcon/StatusIcon.styles.cjs

@@ -38,10 +38,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvStatusIco
         }
       ])
     ),
-    ":where([data-variant=default][data-type=full])": {
+    ":where([data-variant=default])": {
       color: uikitStyles.theme.colors.text,
-      backgroundColor: uikitStyles.theme.colors.bgPage,
-      outline: `1px solid ${uikitStyles.theme.colors.borderSubtle}`
+      ":where([data-type=full])": {
+        backgroundColor: uikitStyles.theme.colors.bgPage,
+        outline: `1px solid ${uikitStyles.theme.colors.borderSubtle}`
+      }
     }
   },
   icon: {

package/dist/cjs/themes/pentahoPlus.cjs

@@ -871,6 +871,159 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
           padding: uikitStyles.theme.spacing("xs", "sm")
         }
       }
+    },
+    HvCalendarCell: {
+      classes: {
+        dateWrapper: {
+          width: 32,
+          height: 32
+        },
+        calendarDate: {
+          width: 32,
+          height: 32,
+          ...uikitStyles.theme.typography.caption1,
+          borderRadius: uikitStyles.theme.radii.full,
+          ":hover": {
+            borderRadius: uikitStyles.theme.radii.full
+          }
+        },
+        calendarDateSelected: {
+          backgroundColor: uikitStyles.theme.colors.primary,
+          color: uikitStyles.theme.colors.dimmer,
+          ":hover": {
+            border: `1px solid ${uikitStyles.theme.colors.primary}`,
+            color: uikitStyles.theme.colors.text
+          }
+        },
+        cellContainer: {
+          "&:hover": {
+            backgroundColor: uikitStyles.theme.colors.primaryDimmed,
+            borderRadius: uikitStyles.theme.radii.full
+          },
+          ":has(> span.HvCalendarCell-calendarDateInSelectionRange):has(> span.HvCalendarCell-startBookend)": {
+            backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+            borderTopLeftRadius: uikitStyles.theme.radii.full,
+            borderBottomLeftRadius: uikitStyles.theme.radii.full
+          },
+          ":has(> span.HvCalendarCell-calendarDateInSelectionRange):has(> span.HvCalendarCell-endBookend)": {
+            backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+            borderTopRightRadius: uikitStyles.theme.radii.full,
+            borderBottomRightRadius: uikitStyles.theme.radii.full
+          }
+        },
+        calendarDateInSelectionRange: {
+          borderRadius: 0
+        },
+        startBookend: {
+          backgroundColor: uikitStyles.theme.colors.primary,
+          color: uikitStyles.theme.colors.dimmer,
+          borderRadius: uikitStyles.theme.radii.full
+        },
+        endBookend: {
+          backgroundColor: uikitStyles.theme.colors.primary,
+          color: uikitStyles.theme.colors.dimmer,
+          borderRadius: uikitStyles.theme.radii.full
+        }
+      }
+    },
+    HvSingleCalendar: {
+      classes: {
+        root: {
+          " .HvNavigation-text": {
+            ...uikitStyles.theme.typography.captionLabel
+          },
+          " .HvNavigation-root": {
+            gap: 0
+          },
+          " .HvMonthSelector-calendarMonthlyGrid": {
+            gridTemplateColumns: "repeat(4, 1fr)"
+          },
+          " .HvMonthSelector-calendarMonthlyCell": {
+            borderRadius: uikitStyles.theme.radii.full,
+            width: 48,
+            height: 48
+          },
+          " .HvMonthSelector-calendarMonthlyCellSelected": {
+            backgroundColor: uikitStyles.theme.colors.primary,
+            color: uikitStyles.theme.colors.dimmer,
+            ":hover": {
+              border: `1px solid ${uikitStyles.theme.colors.primary}`,
+              color: uikitStyles.theme.colors.text,
+              backgroundColor: uikitStyles.theme.colors.primaryDimmed
+            }
+          }
+        },
+        calendarDay: {
+          width: 32,
+          height: 32,
+          ...uikitStyles.theme.typography.caption2
+        },
+        weekdays: {
+          borderBottom: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
+          marginBottom: uikitStyles.theme.space.xs,
+          justifyContent: "center"
+        },
+        calendarGrid: {
+          justifyContent: "center",
+          gridTemplateColumns: "repeat(7, 32px)",
+          "& .HvSingleCalendar-cellsInRange": {
+            "& .HvSingleCalendar-startBookend": {
+              borderLeft: "none",
+              backgroundColor: uikitStyles.theme.colors.primary,
+              color: uikitStyles.theme.colors.dimmer
+            }
+          },
+          "&:hover .HvSingleCalendar-cellsInRange": {
+            "& .HvSingleCalendar-startBookend": {
+              borderLeft: "none",
+              backgroundColor: uikitStyles.theme.colors.primary,
+              color: uikitStyles.theme.colors.dimmer
+            }
+          },
+          "& .HvSingleCalendar-cellsInRange:hover": {
+            borderTopRightRadius: uikitStyles.theme.radii.full,
+            borderBottomRightRadius: uikitStyles.theme.radii.full,
+            "& .HvSingleCalendar-calendarDate": {
+              borderRight: "none",
+              backgroundColor: uikitStyles.theme.colors.primary,
+              color: uikitStyles.theme.colors.dimmer
+            }
+          }
+        },
+        cellsInRange: {
+          ":has(span.HvSingleCalendar-startBookend)": {
+            borderTopLeftRadius: uikitStyles.theme.radii.full,
+            borderBottomLeftRadius: uikitStyles.theme.radii.full
+          }
+        },
+        cellContainer: {
+          "&:hover": {
+            ":has(span.HvSingleCalendar-startBookend)": {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0
+            },
+            ":has(span.HvSingleCalendar-endBookend)": {
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0
+            }
+          }
+        },
+        calendarDateInSelectionRange: {
+          ":hover:not( .HvSingleCalendar-endBookend):not( .HvSingleCalendar-startBookend)": {
+            borderRadius: 0
+          }
+        },
+        startBookend: {
+          borderLeft: "none",
+          borderTopLeftRadius: uikitStyles.theme.radii.full,
+          borderBottomLeftRadius: uikitStyles.theme.radii.full
+        },
+        endBookend: {
+          borderRight: "none",
+          borderTopRightRadius: uikitStyles.theme.radii.full,
+          borderBottomRightRadius: uikitStyles.theme.radii.full
+        }
+      }
     }
   }
 });

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
 import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { generateCalendarModel } from "../model.js";
-import { isDate, getWeekdayNamesList, DEFAULT_LOCALE, isRange } from "../utils.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";
@@ -12,25 +13,26 @@ import { HvComposedNavigation } from "../CalendarNavigation/ComposedNavigation/C
 import { HvMonthSelector } from "../CalendarNavigation/MonthSelector/MonthSelector.js";
 import { HvPanel } from "../../Panel/Panel.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const HvSingleCalendar = ({
-  classes: classesProp,
-  className,
-  id,
-  locale = DEFAULT_LOCALE,
-  value,
-  visibleMonth,
-  visibleYear,
-  minimumDate,
-  maximumDate,
-  onChange,
-  onInputChange,
-  onVisibleDateChange,
-  showEndDate,
-  showDayOfWeek,
-  invalidDateLabel,
-  children,
-  ...others
-}) => {
+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;
@@ -123,15 +125,20 @@ const HvSingleCalendar = ({
           visibleMonth: visibleMonth || today.getMonth() + 1
         }
       ),
-      /* @__PURE__ */ jsxs(
+      /* @__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: [
-            listWeekdayNames.map(renderWeekLabel),
-            calModel.dates.map(renderCalendarDate)
-          ]
+          children: calModel.dates.map(renderCalendarDate)
         }
       )
     ] }),

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

@@ -27,7 +27,7 @@ const { staticClasses, useClasses } = createClasses("HvSingleCalendar", {
     "& $cellsInRange:hover": {
       backgroundColor: theme.colors.bgPageSecondary,
       "& $calendarDate": {
-        borderRight: `1px solid ${theme.colors.text}`
+        borderRight: `2px solid ${theme.colors.text}`
       }
     },
     "& $cellsInRange:hover ~ $cellsInRange": {
@@ -61,7 +61,8 @@ const { staticClasses, useClasses } = createClasses("HvSingleCalendar", {
     backgroundColor: theme.colors.bgPageSecondary
   },
   cellsOutsideRange: {},
-  cellContainer: {}
+  cellContainer: {},
+  weekdays: {}
 });
 export {
   staticClasses,

package/dist/esm/Calendar/utils.js

@@ -15,7 +15,11 @@ const isSameDay = (date1, date2) => {
   return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
 };
 const getDateISO = (date) => {
-  return new Date(date).toISOString().slice(0, 10);
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
 };
 const getPreviousMonth = (month, year) => {
   const prevMonth = month > 1 ? month - 1 : 12;

package/dist/esm/StatusIcon/StatusIcon.styles.js

@@ -36,10 +36,12 @@ const { staticClasses, useClasses } = createClasses("HvStatusIcon", {
         }
       ])
     ),
-    ":where([data-variant=default][data-type=full])": {
+    ":where([data-variant=default])": {
       color: theme.colors.text,
-      backgroundColor: theme.colors.bgPage,
-      outline: `1px solid ${theme.colors.borderSubtle}`
+      ":where([data-type=full])": {
+        backgroundColor: theme.colors.bgPage,
+        outline: `1px solid ${theme.colors.borderSubtle}`
+      }
     }
   },
   icon: {

package/dist/esm/themes/pentahoPlus.js

@@ -869,6 +869,159 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
           padding: theme.spacing("xs", "sm")
         }
       }
+    },
+    HvCalendarCell: {
+      classes: {
+        dateWrapper: {
+          width: 32,
+          height: 32
+        },
+        calendarDate: {
+          width: 32,
+          height: 32,
+          ...theme.typography.caption1,
+          borderRadius: theme.radii.full,
+          ":hover": {
+            borderRadius: theme.radii.full
+          }
+        },
+        calendarDateSelected: {
+          backgroundColor: theme.colors.primary,
+          color: theme.colors.dimmer,
+          ":hover": {
+            border: `1px solid ${theme.colors.primary}`,
+            color: theme.colors.text
+          }
+        },
+        cellContainer: {
+          "&:hover": {
+            backgroundColor: theme.colors.primaryDimmed,
+            borderRadius: theme.radii.full
+          },
+          ":has(> span.HvCalendarCell-calendarDateInSelectionRange):has(> span.HvCalendarCell-startBookend)": {
+            backgroundColor: theme.colors.bgPageSecondary,
+            borderTopLeftRadius: theme.radii.full,
+            borderBottomLeftRadius: theme.radii.full
+          },
+          ":has(> span.HvCalendarCell-calendarDateInSelectionRange):has(> span.HvCalendarCell-endBookend)": {
+            backgroundColor: theme.colors.bgPageSecondary,
+            borderTopRightRadius: theme.radii.full,
+            borderBottomRightRadius: theme.radii.full
+          }
+        },
+        calendarDateInSelectionRange: {
+          borderRadius: 0
+        },
+        startBookend: {
+          backgroundColor: theme.colors.primary,
+          color: theme.colors.dimmer,
+          borderRadius: theme.radii.full
+        },
+        endBookend: {
+          backgroundColor: theme.colors.primary,
+          color: theme.colors.dimmer,
+          borderRadius: theme.radii.full
+        }
+      }
+    },
+    HvSingleCalendar: {
+      classes: {
+        root: {
+          " .HvNavigation-text": {
+            ...theme.typography.captionLabel
+          },
+          " .HvNavigation-root": {
+            gap: 0
+          },
+          " .HvMonthSelector-calendarMonthlyGrid": {
+            gridTemplateColumns: "repeat(4, 1fr)"
+          },
+          " .HvMonthSelector-calendarMonthlyCell": {
+            borderRadius: theme.radii.full,
+            width: 48,
+            height: 48
+          },
+          " .HvMonthSelector-calendarMonthlyCellSelected": {
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.dimmer,
+            ":hover": {
+              border: `1px solid ${theme.colors.primary}`,
+              color: theme.colors.text,
+              backgroundColor: theme.colors.primaryDimmed
+            }
+          }
+        },
+        calendarDay: {
+          width: 32,
+          height: 32,
+          ...theme.typography.caption2
+        },
+        weekdays: {
+          borderBottom: `1px solid ${theme.colors.borderSubtle}`,
+          marginBottom: theme.space.xs,
+          justifyContent: "center"
+        },
+        calendarGrid: {
+          justifyContent: "center",
+          gridTemplateColumns: "repeat(7, 32px)",
+          "& .HvSingleCalendar-cellsInRange": {
+            "& .HvSingleCalendar-startBookend": {
+              borderLeft: "none",
+              backgroundColor: theme.colors.primary,
+              color: theme.colors.dimmer
+            }
+          },
+          "&:hover .HvSingleCalendar-cellsInRange": {
+            "& .HvSingleCalendar-startBookend": {
+              borderLeft: "none",
+              backgroundColor: theme.colors.primary,
+              color: theme.colors.dimmer
+            }
+          },
+          "& .HvSingleCalendar-cellsInRange:hover": {
+            borderTopRightRadius: theme.radii.full,
+            borderBottomRightRadius: theme.radii.full,
+            "& .HvSingleCalendar-calendarDate": {
+              borderRight: "none",
+              backgroundColor: theme.colors.primary,
+              color: theme.colors.dimmer
+            }
+          }
+        },
+        cellsInRange: {
+          ":has(span.HvSingleCalendar-startBookend)": {
+            borderTopLeftRadius: theme.radii.full,
+            borderBottomLeftRadius: theme.radii.full
+          }
+        },
+        cellContainer: {
+          "&:hover": {
+            ":has(span.HvSingleCalendar-startBookend)": {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0
+            },
+            ":has(span.HvSingleCalendar-endBookend)": {
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0
+            }
+          }
+        },
+        calendarDateInSelectionRange: {
+          ":hover:not( .HvSingleCalendar-endBookend):not( .HvSingleCalendar-startBookend)": {
+            borderRadius: 0
+          }
+        },
+        startBookend: {
+          borderLeft: "none",
+          borderTopLeftRadius: theme.radii.full,
+          borderBottomLeftRadius: theme.radii.full
+        },
+        endBookend: {
+          borderRight: "none",
+          borderTopRightRadius: theme.radii.full,
+          borderBottomRightRadius: theme.radii.full
+        }
+      }
     }
   }
 });

package/dist/types/index.d.ts

@@ -9444,7 +9444,7 @@ declare const useClasses_4: (classesProp?: Partial<Record<"disabled" | "selected
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_40: (classesProp?: Partial<Record<"root" | "focusSelection" | "navigationContainer" | "navigationMonth" | "cellContainer" | "calendarDate" | "calendarDateSelected" | "calendarDateNotInMonth" | "calendarDateInSelectionRange" | "startBookend" | "endBookend" | "cellsInRange" | "cellsOutsideRange" | "calendarGrid" | "calendarDay" | "calendarDateInvalid", string>>, addStatic?: boolean) => {
+declare const useClasses_40: (classesProp?: Partial<Record<"root" | "focusSelection" | "navigationContainer" | "navigationMonth" | "cellContainer" | "calendarDate" | "calendarDateSelected" | "calendarDateNotInMonth" | "calendarDateInSelectionRange" | "startBookend" | "endBookend" | "cellsInRange" | "cellsOutsideRange" | "calendarGrid" | "calendarDay" | "calendarDateInvalid" | "weekdays", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         calendarGrid: string;
@@ -9462,6 +9462,7 @@ declare const useClasses_40: (classesProp?: Partial<Record<"root" | "focusSelect
         cellsInRange: string;
         cellsOutsideRange: string;
         cellContainer: string;
+        weekdays: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.109.1",
+  "version": "5.110.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "73670d30564b1022bf9c620da204eec182e8bd4b",
+  "gitHead": "54d397e44ecb236d24bb4a8b9694b71ec98997f1",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",