@okta/odyssey-react-mui 1.20.0 → 1.21.0

package/src/labs/DatePicker.tsx

@@ -11,8 +11,7 @@
  */
 
 import {
-  ChangeEvent,
-  ChangeEventHandler,
+  FocusEventHandler,
   memo,
   useCallback,
   useEffect,
@@ -31,7 +30,6 @@ import {
 } from "@mui/x-date-pickers";
 import { DateTime } from "luxon";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
-import { InputAdornment } from "@mui/material";
 import styled from "@emotion/styled";
 
 import { Button } from "../Button";
@@ -49,21 +47,34 @@ import {
   DesignTokens,
 } from "../OdysseyDesignTokensContext";
 import { OdysseyThemeProvider } from "../OdysseyThemeProvider";
-import { useDatePickerTranslations } from "./useDatePickerTranslations";
+import { TimeZonePicker, TimeZonePickerProps } from "./TimeZonePicker";
 
-const DatePickerContainer = styled.div({
-  display: "flex",
+import {
+  useOdysseyDateFields,
+  OdysseyDateFieldProps,
+  TimeZoneOption,
+} from "./useOdysseyDateFields";
 
+const DatePickerContainer = styled.div({
   ".MuiFormControl-root": {
     marginBlockEnd: 0,
   },
 });
 
-const DatePickerWidthContainer = styled.div({
+const DatePickerWidthContainer = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
   ".MuiInput-root": {
-    width: `${176 / 14}rem`,
+    width: "100%",
+    maxWidth: odysseyDesignTokens.TypographyLineLengthMax,
   },
-});
+}));
+
+const TimeZonePickerContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  marginBlockStart: odysseyDesignTokens.Spacing3,
+}));
 
 const ActionContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(
   ({ odysseyDesignTokens }) => ({
@@ -102,8 +113,6 @@ const ActionBar = ({ actions, onAccept, onCancel }: PickersActionBarProps) => {
 const MemoizedActionBar = memo(ActionBar);
 MemoizedActionBar.displayName = "ActionBar";
 
-const formatDateToDateTime = (date: Date) => DateTime.fromJSDate(date);
-
 const formatDayOfWeek = (date: DateTime) => date.toFormat("EEE");
 
 type RenderDateFieldProps = {
@@ -113,34 +122,40 @@ type RenderDateFieldProps = {
 
 export type DatePickerProps = {
   /**
-   * Disable specific date(s).
-   *
-   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * The label for the `input` element.
    */
-  isDateEnabled?: (date: Date) => boolean;
+  label: string;
   /**
-   * Disable specific month(s).
+   * Callback fired when the a date field loses focus
    */
-  isMonthEnabled?: (date: Date) => boolean;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
   /**
-   * Disable specific year(s).
+   * Callback fired when the a date is selected with the calendar.
    */
-  isYearEnabled?: (date: Date) => boolean;
+  onCalendarDateChange?: ({
+    value,
+    timeZone,
+  }: {
+    value: string | undefined;
+    timeZone: string;
+  }) => void;
   /**
-   * The label for the `input` element.
+   * Callback fired when the date/text input changes.
    */
-  label: string;
+  onInputChange?: (value: string) => void;
   /**
-   * Callback fired when the a date is selected with the calendar.
+   * If provided, a `TimeZonePicker` will be rendered below the DatePicker. These options will populate as the Autocomplete options
    */
-  onCalendarDateChange?: (value: Date) => void;
+  timeZoneOptions?: TimeZoneOption[];
   /**
-   * Callback fired when the date/text input changes.
+   * label for `TimeZonePicker`
    */
-  onInputChange?: ChangeEventHandler<HTMLInputElement>;
-  value?: Date;
-} & Pick<FieldComponentProps, "errorMessage" | "hint" | "isDisabled"> &
-  Pick<MuiDatePickerProps<Date>, "defaultValue" | "minDate" | "maxDate">;
+  timeZonePickerLabel?: TimeZonePickerProps["label"];
+} & OdysseyDateFieldProps &
+  Pick<
+    FieldComponentProps,
+    "errorMessage" | "hint" | "isDisabled" | "isReadOnly"
+  >;
 
 const DatePicker = ({
   defaultValue: defaultValueProp,
@@ -148,109 +163,138 @@ const DatePicker = ({
   hint,
   isDateEnabled = () => true,
   isDisabled,
+  isReadOnly,
   isMonthEnabled = () => true,
   isYearEnabled = () => true,
   label,
-  minDate,
-  maxDate,
+  minDate: minDateProp,
+  maxDate: maxDateProp,
+  onBlur,
   onCalendarDateChange,
   onInputChange: onInputChangeProp,
+  timeZone,
+  timeZonePickerLabel,
+  timeZoneOptions,
   value: valueProp,
 }: DatePickerProps) => {
+  const { i18n, t } = useTranslation();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const {
+    defaultedLanguageCode,
+    formatDateTimeToUtcIsoDateString,
+    inputValues,
+    internalTimeZone,
+    isValidTimeZone,
+    localeText,
+    minDate,
+    maxDate,
+    setInternalTimeZone,
+    shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
+  } = useOdysseyDateFields({
+    defaultValue: defaultValueProp,
+    errorMessage,
+    isDateEnabled,
+    isMonthEnabled,
+    isYearEnabled,
+    minDate: minDateProp,
+    maxDate: maxDateProp,
+    timeZone,
+    value: valueProp,
+  });
   const [isOpen, setIsOpen] = useState(false);
   const [popperElement, setPopperElement] = useState<HTMLInputElement | null>();
 
-  const { i18n, t } = useTranslation();
   const { language } = i18n;
-
-  const invalidLocales = ["ok_PL", "ok_SK"];
-  // In the Applitools env the language code is `en-us@posix`. Need to check for that
-  const isInvalidLocale =
-    invalidLocales.includes(language) || language.includes("@");
-
   const containerRef = useRef<HTMLInputElement>(null);
 
-  const localeText = useDatePickerTranslations();
-
   useEffect(() => {
     setPopperElement(containerRef.current);
   }, []);
 
-  const formatDateTimeToJsDateOnCalendarSelection = useCallback<
+  const formatDateTimeToJsDateStringOnCalendarSelection = useCallback<
     NonNullable<MuiDatePickerProps<DateTime>["onChange"]>
   >(
     (value) => {
       if (value) {
-        const jsDateFromDateTime = new Date(value?.toJSDate());
-        onCalendarDateChange?.(jsDateFromDateTime);
+        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);
+
+        if (dateStringFromDateTime) {
+          onCalendarDateChange?.({
+            value: dateStringFromDateTime,
+            timeZone: internalTimeZone,
+          });
+        }
       }
     },
-    [onCalendarDateChange],
+    [formatDateTimeToUtcIsoDateString, internalTimeZone, onCalendarDateChange],
   );
 
-  const onInputChange = useCallback<
-    (event: ChangeEvent<HTMLInputElement>) => void
-  >((event) => onInputChangeProp?.(event), [onInputChangeProp]);
+  const onInputChange = useCallback<(value: string) => void>(
+    (value) => {
+      onInputChangeProp?.(value);
+    },
+    [onInputChangeProp],
+  );
 
   const toggleCalendarVisibility = useCallback(
     () => setIsOpen(!isOpen),
     [isOpen],
   );
 
-  const shouldDisableDate = useCallback(
-    (date: DateTime) => !isDateEnabled(new Date(date?.toJSDate())) || false,
-    [isDateEnabled],
-  );
-
-  const shouldDisableMonth = useCallback(
-    (date: DateTime) => !isMonthEnabled(new Date(date?.toJSDate())) || false,
-    [isMonthEnabled],
-  );
-
-  const shouldDisableYear = useCallback(
-    (date: DateTime) => !isYearEnabled(new Date(date?.toJSDate())) || false,
-    [isYearEnabled],
-  );
+  const resetIsOpen = useCallback(() => {
+    setIsOpen(false);
+  }, []);
 
   const renderDateField = useCallback(
-    ({ defaultValue, value }: RenderDateFieldProps) => (
-      <DateField
-        defaultValue={defaultValue}
-        endAdornment={
-          <InputAdornment position="end">
+    ({ defaultValue, inputRef, value }: RenderDateFieldProps) => {
+      return (
+        <DateField
+          defaultValue={defaultValue}
+          endAdornment={
             <Button
               ariaLabel={t("picker.labels.date.choose")}
               label=""
+              onClick={toggleCalendarVisibility}
               size="small"
               startIcon={<CalendarIcon />}
               variant="floating"
-              onClick={toggleCalendarVisibility}
             />
-          </InputAdornment>
-        }
-        errorMessage={errorMessage}
-        hint={hint}
-        isDisabled={isDisabled}
-        label={label}
-        onChange={onInputChange}
-        value={value}
-      />
-    ),
+          }
+          errorMessage={errorMessage}
+          hint={hint}
+          inputRef={inputRef}
+          isDisabled={isDisabled}
+          isReadOnly={isReadOnly}
+          label={label}
+          onBlur={onBlur}
+          minDate={minDate}
+          maxDate={maxDate}
+          onChange={onInputChange}
+          timezone={internalTimeZone}
+          value={value}
+        />
+      );
+    },
     [
       errorMessage,
       hint,
+      internalTimeZone,
       isDisabled,
+      isReadOnly,
       label,
+      onBlur,
       onInputChange,
+      minDate,
+      maxDate,
       t,
       toggleCalendarVisibility,
     ],
   );
 
-  const resetIsOpen = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
   const slots = useMemo<DatePickerSlots<DateTime>>(
     () => ({
       actionBar: MemoizedActionBar,
@@ -282,9 +326,14 @@ const DatePicker = ({
     [popperElement],
   );
 
-  const defaultedLanguageCode = isInvalidLocale
-    ? "en-US"
-    : language.replaceAll("_", "-");
+  const onTimeZoneChange = useCallback(
+    (timeZone: string | undefined) => {
+      if (timeZone && isValidTimeZone(timeZone)) {
+        setInternalTimeZone(timeZone);
+      }
+    },
+    [isValidTimeZone, setInternalTimeZone],
+  );
 
   return (
     <OdysseyThemeProvider themeOverride={datePickerTheme}>
@@ -294,32 +343,45 @@ const DatePicker = ({
         localeText={localeText}
       >
         <DatePickerContainer>
-          <DatePickerWidthContainer ref={containerRef}>
+          <DatePickerWidthContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            ref={containerRef}
+          >
             <MuiDatePicker
               dayOfWeekFormatter={formatDayOfWeek}
-              defaultValue={
-                defaultValueProp
-                  ? formatDateToDateTime(defaultValueProp)
-                  : undefined
-              }
+              defaultValue={inputValues?.defaultValue}
               disabled={isDisabled}
               fixedWeekNumber={6}
+              inputRef={inputRef}
               key={language}
               label={label}
-              minDate={minDate ? formatDateToDateTime(minDate) : undefined}
-              maxDate={maxDate ? formatDateToDateTime(maxDate) : undefined}
-              onChange={formatDateTimeToJsDateOnCalendarSelection}
+              minDate={minDate}
+              maxDate={maxDate}
+              onChange={formatDateTimeToJsDateStringOnCalendarSelection}
               onClose={resetIsOpen}
               open={isOpen}
+              readOnly={isReadOnly}
               shouldDisableDate={shouldDisableDate}
               shouldDisableMonth={shouldDisableMonth}
               shouldDisableYear={shouldDisableYear}
               slots={slots}
               slotProps={slotProps}
-              value={valueProp ? formatDateToDateTime(valueProp) : undefined}
+              timezone={internalTimeZone}
+              value={inputValues?.value}
             />
           </DatePickerWidthContainer>
         </DatePickerContainer>
+        {timeZoneOptions && timeZonePickerLabel && (
+          <TimeZonePickerContainer odysseyDesignTokens={odysseyDesignTokens}>
+            <TimeZonePicker
+              label={timeZonePickerLabel}
+              onTimeZoneChange={onTimeZoneChange}
+              isReadOnly={isReadOnly}
+              timeZoneOptions={timeZoneOptions}
+              value={internalTimeZone}
+            />
+          </TimeZonePickerContainer>
+        )}
       </LocalizationProvider>
     </OdysseyThemeProvider>
   );

package/src/labs/TimeZonePicker.tsx

@@ -0,0 +1,55 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback } from "react";
+
+import { Autocomplete, AutocompleteProps } from "../Autocomplete";
+import { TimeZoneOption } from "./useOdysseyDateFields";
+
+export type TimeZonePickerProps = {
+  label: string;
+  onTimeZoneChange?: (timeZone: string | undefined) => void;
+  timeZoneOptions: TimeZoneOption[];
+  value?: string;
+} & Pick<AutocompleteProps<TimeZoneOption, false, false>, "isReadOnly">;
+
+const TimeZonePicker = ({
+  label,
+  isReadOnly,
+  onTimeZoneChange,
+  timeZoneOptions,
+  value,
+}: TimeZonePickerProps) => {
+  const onChange = useCallback<
+    NonNullable<AutocompleteProps<TimeZoneOption, false, false>["onChange"]>
+  >(
+    (_, option) => {
+      onTimeZoneChange?.(option?.value);
+    },
+    [onTimeZoneChange],
+  );
+
+  return (
+    <Autocomplete<TimeZoneOption, false, false>
+      isReadOnly={isReadOnly}
+      label={label}
+      onChange={onChange}
+      options={timeZoneOptions}
+      value={timeZoneOptions.find((option) => option.value === value)}
+    />
+  );
+};
+
+const MemoizedTimeZonePicker = memo(TimeZonePicker);
+MemoizedTimeZonePicker.displayName = "TimeZonePicker";
+
+export { MemoizedTimeZonePicker as TimeZonePicker };