@hitachivantara/uikit-react-core 6.0.0-next.8 → 6.1.0

package/dist/Calendar/SingleCalendar/SingleCalendar.js

@@ -1,9 +1,10 @@
 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 { 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";
@@ -11,25 +12,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;
@@ -121,15 +123,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/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/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/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/index.d.ts

@@ -8633,7 +8633,7 @@ declare const useClasses_38: (classesProp?: Partial<Record<"root" | "invalid" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_39: (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_39: (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;
@@ -8651,6 +8651,7 @@ declare const useClasses_39: (classesProp?: Partial<Record<"root" | "focusSelect
         cellsInRange: string;
         cellsOutsideRange: string;
         cellContainer: string;
+        weekdays: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;

package/dist/providers/ThemeProvider.js

@@ -25,13 +25,24 @@ const HvThemeProvider = ({
   const value = useMemo(
     () => ({
       colorModes: ["light", "dark"],
-      activeTheme: theme,
+      // activeTheme: theme as HvTheme,
       selectedMode: colorMode,
       changeMode(newMode = colorMode) {
         setColorModeValue(newMode);
       },
       rootId,
       // TODO: remove once backwards-compatibility is not needed anymore
+      activeTheme: {
+        ...theme,
+        colors: {
+          ...theme.colors,
+          modes: {
+            ...theme.colors,
+            light: { ...theme.colors.light, type: "light" },
+            dark: { ...theme.colors.dark, type: "dark" }
+          }
+        }
+      },
       themes: [theme],
       selectedTheme: theme.name,
       changeTheme(theme2, mode) {

package/dist/themes/pentaho.js

@@ -871,6 +871,159 @@ const pentaho = mergeTheme(pentaho$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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.0.0-next.8",
+  "version": "6.1.0",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -33,9 +33,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^6.0.0-next.6",
-    "@hitachivantara/uikit-react-utils": "^6.0.0-next.6",
-    "@hitachivantara/uikit-styles": "^6.0.0-next.5",
+    "@hitachivantara/uikit-react-shared": "^6.0.1",
+    "@hitachivantara/uikit-react-utils": "^6.1.0",
+    "@hitachivantara/uikit-styles": "^6.0.1",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "24e6e06e007de4c6262eab9c62a279bdf62627e0",
+  "gitHead": "6a6e77422bfbe5d7d59b447c972ccc0e3cce35d4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",