feat: 🎸 [DateTimePicker] Added timeZone prop

Added timeZone prop, and accept IsoString as value

✅ Closes: #347

package.json

@@ -47,6 +47,7 @@
     "@types/enzyme": "^3.10.13",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^29.5.4",
+    "@types/luxon": "^3.3.2",
     "@types/mdx": "^2.0.7",
     "@types/node": "^16.18.25",
     "@types/react": "^18.2.21",
@@ -94,7 +95,7 @@
     "@mui/icons-material": ">= 5.5.1 < 6",
     "@mui/material": ">= 5.5.3 < 6",
     "@mui/x-date-pickers": ">= 6.16.0 < 7",
-    "luxon": ">= 3.4.3 < 4",
+    "luxon": "^3.4.3",
     "react": ">= 18 < 19",
     "react-dom": ">= 18 < 19",
     "react-window": ">= 1.8.0 < 1.9.0"

src/components/DateTimePicker/index.tsx

@@ -1,10 +1,12 @@
-import React, { FC, useMemo } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
 import { DateTimePicker as MuiDateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DateTime } from "luxon";
 
 import { useMosaicContext } from "../../hooks/useMosaicContext";
 import { DateTimePickerType, viewType } from "../../types/DateTimePicker";
+import { logError } from "../../utils/logger";
 
 export const DATA_CY_DEFAULT = "timePicker";
 
@@ -17,7 +19,10 @@ const DateTimePicker: FC<DateTimePickerType> = ({
   mobileView,
   timeView = "min",
   format,
+  timeZone,
 }: DateTimePickerType) => {
+  const { contextTimeZone } = useMosaicContext();
+
   const desctopMode = useMemo(() => {
     return mobileView ? "Mobile" : undefined;
   }, [mobileView]);
@@ -32,13 +37,32 @@ const DateTimePicker: FC<DateTimePickerType> = ({
     return ["year", "month", "day", "hours", "minutes"];
   }, [timeView]);
 
-  const { timeZone } = useMosaicContext();
+  const zone = useMemo(() => {
+    return timeZone ? timeZone : contextTimeZone;
+  }, [timeZone, contextTimeZone]);
+
+  const isIsoDate = useCallback((str: string) => {
+    const d = DateTime.fromISO(str);
+    return d.isValid;
+  }, []);
+
+  const verifValue = useMemo(() => {
+    if (value) {
+      const isoDate = isIsoDate(value);
+      if (isoDate) {
+        return DateTime.fromISO(value);
+      }
+      logError("DateTimePicker", "Invalid Date");
+      return undefined;
+    }
+  }, [value, isIsoDate]);
+
   return (
     <LocalizationProvider dateAdapter={AdapterLuxon}>
       <MuiDateTimePicker
-        timezone={timeZone}
+        timezone={zone}
         desktopModeMediaQuery={desctopMode}
-        value={value}
+        value={verifValue}
         onAccept={onAccept}
         data-cy={dataCy}
         label={label}

src/contexts/Mosaic.tsx

@@ -7,13 +7,13 @@ export type ILocalizeMethod = (key: string) => string;
 interface IMosaicContextOptions {
   breakpoints?: IUseViewStateOptions;
   localize?: ILocalizeMethod;
-  timeZone?: string;
+  contextTimeZone?: string;
 }
 
 export interface IMosaicContext {
   localize?: ILocalizeMethod;
   view: IViewState;
-  timeZone?: string;
+  contextTimeZone?: string;
 }
 
 export const MOSAIC_CONTEXT_DISPLAY_NAME = "MosaicContext";
@@ -26,8 +26,8 @@ export const MosaicContextProvider: FC<PropsWithChildren<IMosaicContextOptions>>
   children,
   localize,
   breakpoints,
-  timeZone,
+  contextTimeZone,
 }) => {
   const view = useViewState(breakpoints);
-  return <MosaicContext.Provider value={{ localize, view, timeZone }}>{children}</MosaicContext.Provider>;
+  return <MosaicContext.Provider value={{ localize, view, contextTimeZone }}>{children}</MosaicContext.Provider>;
 };

src/types/DateTimePicker.ts

@@ -1,11 +1,14 @@
+import { DateTime } from "luxon";
+
 import { IBase } from "./Base";
 
 export type DateTimePickerType = IBase & {
   label: string;
   value?: string;
-  onAccept?: (value: string | null) => void;
+  onAccept?: (value: DateTime | undefined | null) => void;
   ampm?: boolean;
   mobileView?: boolean;
+  timeZone?: string;
   format?: string;
   timeView?: "hrs" | "min" | "sec";
 };