@okta/odyssey-react-mui 1.28.1 → 1.29.0

package/src/labs/{DatePicker.tsx → DatePickers/DatePicker.tsx}

@@ -10,49 +10,33 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  FocusEventHandler,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
   type DatePickerSlots,
   DatePicker as MuiDatePicker,
   DatePickerProps as MuiDatePickerProps,
-  LocalizationProvider,
-  PickersActionBarProps,
   DatePickerSlotProps,
 } from "@mui/x-date-pickers";
 import { DateTime } from "luxon";
-import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
 import styled from "@emotion/styled";
 
-import { Button } from "../Buttons";
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  CalendarIcon,
-  ChevronDownIcon,
-} from "../icons.generated";
+import { Button } from "../../Buttons";
+import { DateFieldActionBar } from "./DateFieldActionBar";
 import { DateField, DateFieldProps } from "./DateField";
+import { DateFieldLocalizationProvider } from "./DateFieldLocalizationProvider";
 import { datePickerTheme } from "./datePickerTheme";
-import { FieldComponentProps } from "../FieldComponentProps";
+import { FieldComponentProps } from "../../FieldComponentProps";
 import {
   useOdysseyDesignTokens,
   DesignTokens,
-} from "../OdysseyDesignTokensContext";
-import { OdysseyThemeProvider } from "../OdysseyThemeProvider";
-import { TimeZonePicker, TimeZonePickerProps } from "./TimeZonePicker";
+} from "../../OdysseyDesignTokensContext";
+import { OdysseyThemeProvider } from "../../OdysseyThemeProvider";
+import { TimeZonePicker } from "../TimeZonePicker";
 
 import {
   useOdysseyDateFields,
   OdysseyDateFieldProps,
-  TimeZoneOption,
 } from "./useOdysseyDateFields";
 
 const DatePickerContainer = styled.div({
@@ -76,82 +60,12 @@ const TimeZonePickerContainer = styled("div", {
   marginBlockStart: odysseyDesignTokens.Spacing3,
 }));
 
-const ActionContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(
-  ({ odysseyDesignTokens }) => ({
-    display: "flex",
-    justifyContent: "flex-end",
-    paddingInline: odysseyDesignTokens.Spacing4,
-    paddingBlockEnd: odysseyDesignTokens.Spacing4,
-  }),
-);
-
-const ActionBar = ({ actions, onAccept, onCancel }: PickersActionBarProps) => {
-  const { t } = useTranslation();
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  // actions will be [] or ["accept", "cancel"]
-  if (actions && actions.length > 0) {
-    return (
-      <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>
-        <Button
-          label={t("picker.labels.action.cancel")}
-          onClick={onCancel}
-          variant="floating"
-        />
-        <Button
-          label={t("picker.labels.action.apply")}
-          onClick={onAccept}
-          variant="primary"
-        />
-      </ActionContainer>
-    );
-  }
-
-  return null;
-};
-
-const MemoizedActionBar = memo(ActionBar);
-MemoizedActionBar.displayName = "ActionBar";
-
-const formatDayOfWeek = (date: DateTime) => date.toFormat("EEE");
-
 type RenderDateFieldProps = {
   defaultValue: DateFieldProps["defaultValue"];
   value: DateFieldProps["value"];
 } & MuiDatePickerProps<DateTime>;
 
-export type DatePickerProps = {
-  /**
-   * The label for the `input` element.
-   */
-  label: string;
-  /**
-   * Callback fired when the a date field loses focus
-   */
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  /**
-   * Callback fired when the a date is selected with the calendar.
-   */
-  onCalendarDateChange?: ({
-    value,
-    timeZone,
-  }: {
-    value: string | undefined;
-    timeZone: string;
-  }) => void;
-  /**
-   * Callback fired when the date/text input changes.
-   */
-  onInputChange?: (value: string) => void;
-  /**
-   * If provided, a `TimeZonePicker` will be rendered below the DatePicker. These options will populate as the Autocomplete options
-   */
-  timeZoneOptions?: TimeZoneOption[];
-  /**
-   * label for `TimeZonePicker`
-   */
-  timeZonePickerLabel?: TimeZonePickerProps["label"];
-} & OdysseyDateFieldProps &
+export type DatePickerProps = OdysseyDateFieldProps &
   Pick<
     FieldComponentProps,
     | "errorMessage"
@@ -189,18 +103,25 @@ const DatePicker = ({
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   const {
+    closeCalendar,
+    commonIcons,
     defaultedLanguageCode,
     formatDateTimeToUtcIsoDateString,
+    formatDayOfWeek,
     inputValues,
     internalTimeZone,
-    isValidTimeZone,
+    isOpen,
     localeText,
     minDate,
     maxDate,
-    setInternalTimeZone,
+    onInputChange,
+    onTimeZoneChange,
+    popperElement,
+    setPopperElement,
     shouldDisableDate,
     shouldDisableMonth,
     shouldDisableYear,
+    toggleCalendarVisibility,
   } = useOdysseyDateFields({
     defaultValue: defaultValueProp,
     errorMessage,
@@ -209,18 +130,17 @@ const DatePicker = ({
     isYearEnabled,
     minDate: minDateProp,
     maxDate: maxDateProp,
+    onInputChange: onInputChangeProp,
     timeZone,
     value: valueProp,
   });
-  const [isOpen, setIsOpen] = useState(false);
-  const [popperElement, setPopperElement] = useState<HTMLInputElement | null>();
 
   const { language } = i18n;
   const containerRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     setPopperElement(containerRef.current);
-  }, []);
+  }, [setPopperElement]);
 
   const formatDateTimeToJsDateStringOnCalendarSelection = useCallback<
     NonNullable<MuiDatePickerProps<DateTime>["onChange"]>
@@ -240,22 +160,6 @@ const DatePicker = ({
     [formatDateTimeToUtcIsoDateString, internalTimeZone, onCalendarDateChange],
   );
 
-  const onInputChange = useCallback<(value: string) => void>(
-    (value) => {
-      onInputChangeProp?.(value);
-    },
-    [onInputChangeProp],
-  );
-
-  const toggleCalendarVisibility = useCallback(
-    () => setIsOpen(!isOpen),
-    [isOpen],
-  );
-
-  const resetIsOpen = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
   const renderDateField = useCallback(
     ({ defaultValue, inputRef, value }: RenderDateFieldProps) => {
       return (
@@ -267,7 +171,7 @@ const DatePicker = ({
               label=""
               onClick={toggleCalendarVisibility}
               size="small"
-              startIcon={<CalendarIcon />}
+              startIcon={<commonIcons.CalendarIcon />}
               variant="floating"
             />
           }
@@ -289,6 +193,7 @@ const DatePicker = ({
       );
     },
     [
+      commonIcons,
       errorMessage,
       hint,
       HintLinkComponent,
@@ -308,13 +213,13 @@ const DatePicker = ({
 
   const slots = useMemo<DatePickerSlots<DateTime>>(
     () => ({
-      actionBar: MemoizedActionBar,
+      actionBar: DateFieldActionBar,
       field: (muiProps) => renderDateField(muiProps),
-      leftArrowIcon: () => <ArrowLeftIcon />,
-      rightArrowIcon: () => <ArrowRightIcon />,
-      switchViewIcon: () => <ChevronDownIcon />,
+      leftArrowIcon: () => <commonIcons.ArrowLeftIcon />,
+      rightArrowIcon: () => <commonIcons.ArrowRightIcon />,
+      switchViewIcon: () => <commonIcons.ChevronDownIcon />,
     }),
-    [renderDateField],
+    [commonIcons, renderDateField],
   );
 
   const slotProps = useMemo<DatePickerSlotProps<DateTime, false>>(
@@ -337,20 +242,10 @@ const DatePicker = ({
     [popperElement],
   );
 
-  const onTimeZoneChange = useCallback(
-    (timeZone: string | undefined) => {
-      if (timeZone && isValidTimeZone(timeZone)) {
-        setInternalTimeZone(timeZone);
-      }
-    },
-    [isValidTimeZone, setInternalTimeZone],
-  );
-
   return (
     <OdysseyThemeProvider themeOverride={datePickerTheme}>
-      <LocalizationProvider
-        dateAdapter={AdapterLuxon}
-        adapterLocale={defaultedLanguageCode}
+      <DateFieldLocalizationProvider
+        defaultedLanguageCode={defaultedLanguageCode}
         localeText={localeText}
       >
         <DatePickerContainer>
@@ -369,7 +264,7 @@ const DatePicker = ({
               minDate={minDate}
               maxDate={maxDate}
               onChange={formatDateTimeToJsDateStringOnCalendarSelection}
-              onClose={resetIsOpen}
+              onClose={closeCalendar}
               open={isOpen}
               readOnly={isReadOnly}
               shouldDisableDate={shouldDisableDate}
@@ -393,7 +288,7 @@ const DatePicker = ({
             />
           </TimeZonePickerContainer>
         )}
-      </LocalizationProvider>
+      </DateFieldLocalizationProvider>
     </OdysseyThemeProvider>
   );
 };

package/src/labs/DatePickers/DateTimeField.tsx

@@ -0,0 +1,271 @@
+/*!
+ * Copyright (c) 2022-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 {
+  FocusEventHandler,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { InputAdornment } from "@mui/material";
+import {
+  DateTimeField as MuiDateTimeField,
+  DateTimeFieldProps as MuiDateTimeFieldProps,
+  DateTimeValidationError,
+} from "@mui/x-date-pickers";
+import { DateTime } from "luxon";
+import { useTranslation } from "react-i18next";
+
+import { Field, RenderFieldComponentProps } from "../../Field";
+import { TextFieldProps } from "../../TextField";
+
+export type DateTimeFieldProps = {
+  onChange?: (value: string) => void;
+} & Pick<
+  MuiDateTimeFieldProps<DateTime>,
+  "defaultValue" | "inputRef" | "minDate" | "maxDate" | "timezone" | "value"
+> &
+  Pick<
+    TextFieldProps,
+    | "endAdornment"
+    | "errorMessage"
+    | "hasInitialFocus"
+    | "hint"
+    | "HintLinkComponent"
+    | "id"
+    | "isDisabled"
+    | "isOptional"
+    | "isReadOnly"
+    | "label"
+    | "onBlur"
+    | "onFocus"
+  >;
+
+const useOdysseyDateError = () => {
+  const { t } = useTranslation();
+
+  return new Map<DateTimeValidationError, string>([
+    ["invalidDate", t("picker.error.invalid")],
+    ["maxDate", t("picker.error.maxdate")],
+    ["minDate", t("picker.error.mindate")],
+  ]);
+};
+
+const formatDateTimeToUtcIsoDateString = (value: DateTime) =>
+  value.toUTC().toISO();
+
+const DateTimeField = ({
+  defaultValue,
+  endAdornment,
+  errorMessage,
+  hasInitialFocus,
+  hint,
+  HintLinkComponent,
+  id: idOverride,
+  inputRef,
+  isDisabled = false,
+  isOptional = false,
+  isReadOnly,
+  label,
+  minDate,
+  maxDate,
+  onBlur,
+  onChange,
+  onFocus,
+  timezone,
+  value,
+}: DateTimeFieldProps) => {
+  const errorMap = useOdysseyDateError();
+  const [displayedErrorMessage, setDisplayedErrorMessage] =
+    useState(errorMessage);
+
+  const internalValidationError = useRef<string | undefined>();
+  const localInputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(
+    inputRef,
+    () => {
+      return {
+        focus: () => {
+          localInputRef.current?.focus();
+        },
+      };
+    },
+    [],
+  );
+
+  const checkMinMaxValidity = useCallback(
+    (value: DateTime) => {
+      const hasMinError = minDate && value.toUTC() < minDate.toUTC();
+      const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();
+
+      if (hasMinError || hasMaxError) {
+        if (hasMinError) {
+          setDisplayedErrorMessage(errorMap.get("minDate"));
+        }
+
+        if (hasMaxError) {
+          setDisplayedErrorMessage(errorMap.get("maxDate"));
+        }
+
+        return false;
+      }
+
+      return true;
+    },
+    [errorMap, minDate, maxDate],
+  );
+
+  useEffect(() => {
+    if (value) {
+      checkMinMaxValidity(value);
+    }
+
+    if (defaultValue) {
+      checkMinMaxValidity(defaultValue);
+    }
+  }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);
+
+  const clearErrorMessages = useCallback(() => {
+    setDisplayedErrorMessage(undefined);
+    internalValidationError.current = undefined;
+  }, [internalValidationError, setDisplayedErrorMessage]);
+
+  const validateAndCallOnChange = useCallback<
+    NonNullable<MuiDateTimeFieldProps<DateTime>["onChange"]>
+  >(
+    (value, validationContext) => {
+      clearErrorMessages();
+      const { validationError } = validationContext;
+      const hasEnteredFullYear = value?.year.toString().length === 4;
+
+      if (validationError) {
+        const odysseyValidationError = errorMap.get(validationError);
+
+        if (odysseyValidationError) {
+          internalValidationError.current = odysseyValidationError;
+
+          if (value?.isValid && hasEnteredFullYear) {
+            setDisplayedErrorMessage(odysseyValidationError);
+          }
+        }
+      }
+
+      if (value?.isValid && !validationError) {
+        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);
+
+        if (dateStringFromDateTime && checkMinMaxValidity(value)) {
+          onChange?.(dateStringFromDateTime);
+        }
+      }
+    },
+    [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],
+  );
+
+  const checkFieldValidityAndSetError = useCallback<
+    FocusEventHandler<HTMLInputElement>
+  >(
+    (event) => {
+      if (internalValidationError?.current && !displayedErrorMessage) {
+        setDisplayedErrorMessage(internalValidationError.current);
+      }
+      onBlur?.(event);
+    },
+    [displayedErrorMessage, internalValidationError, onBlur],
+  );
+
+  const hasVisibleAdornment = !isReadOnly && !isDisabled;
+
+  const renderFieldComponent = useCallback(
+    ({
+      ariaDescribedBy,
+      errorMessageElementId,
+      id,
+      labelElementId,
+    }: RenderFieldComponentProps) => (
+      <MuiDateTimeField
+        /* eslint-disable-next-line jsx-a11y/no-autofocus */
+        autoFocus={hasInitialFocus}
+        defaultValue={defaultValue}
+        disabled={isDisabled}
+        id={id}
+        inputProps={{
+          "aria-describedby": ariaDescribedBy,
+          "aria-errormessage": errorMessageElementId,
+          "aria-labelledby": labelElementId,
+        }}
+        InputProps={{
+          error: Boolean(displayedErrorMessage || errorMessage),
+          endAdornment: (
+            <>
+              {hasVisibleAdornment && (
+                <InputAdornment position="end">{endAdornment}</InputAdornment>
+              )}
+            </>
+          ),
+        }}
+        inputRef={localInputRef}
+        minDate={minDate}
+        maxDate={maxDate}
+        name={id}
+        onBlur={checkFieldValidityAndSetError}
+        onChange={validateAndCallOnChange}
+        onFocus={onFocus}
+        readOnly={isReadOnly}
+        timezone={timezone}
+        value={value}
+        variant="standard"
+      />
+    ),
+    [
+      checkFieldValidityAndSetError,
+      defaultValue,
+      displayedErrorMessage,
+      endAdornment,
+      errorMessage,
+      hasInitialFocus,
+      hasVisibleAdornment,
+      isDisabled,
+      localInputRef,
+      minDate,
+      maxDate,
+      onFocus,
+      isReadOnly,
+      timezone,
+      validateAndCallOnChange,
+      value,
+    ],
+  );
+
+  return (
+    <Field
+      errorMessage={displayedErrorMessage || errorMessage}
+      fieldType="single"
+      hasVisibleLabel
+      hint={hint}
+      HintLinkComponent={HintLinkComponent}
+      id={idOverride}
+      isDisabled={isDisabled}
+      isOptional={isOptional}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
+  );
+};
+
+const MemoizedDateTimeField = memo(DateTimeField);
+MemoizedDateTimeField.displayName = "DateTimeField";
+
+export { MemoizedDateTimeField as DateTimeField };

package/src/labs/DatePickers/DateTimePicker.test.tsx

@@ -0,0 +1,66 @@
+/*!
+ * Copyright (c) 2024-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 { render, screen } from "@testing-library/react";
+import { DateTimePicker } from "./DateTimePicker";
+
+jest.mock("react-i18next", () => ({
+  // this mock makes sure any components using the translate hook can use it without a warning being shown
+  useTranslation: () => {
+    return {
+      t: jest.fn((str) => str),
+      i18n: {
+        language: "en",
+      },
+    };
+  },
+  initReactI18next: {
+    type: "3rdParty",
+    init: () => {},
+  },
+}));
+
+describe("DateTimePicker", () => {
+  it("displays the DateTimePicker", async () => {
+    render(<DateTimePicker label="date time picker label" />);
+
+    const input = await screen.getByLabelText("date time picker label");
+    expect(input).toBeInTheDocument();
+  });
+
+  it("displays the correct date and time when a value is passed in ", async () => {
+    render(
+      <DateTimePicker
+        label="date time picker label"
+        value="2024-07-11T03:00:00.000Z"
+        timeZone="America/New_York"
+      />,
+    );
+
+    const input = await screen.getByLabelText("date time picker label");
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveDisplayValue("07/10/2024 11:00 PM");
+  });
+
+  it("displays the correct date and time when timezone is changed", async () => {
+    render(
+      <DateTimePicker
+        label="date time picker label"
+        value="2024-07-11T03:00:00.000Z"
+        timeZone="America/Los_Angeles"
+      />,
+    );
+
+    const input = screen.getByLabelText("date time picker label");
+    expect(input).toHaveDisplayValue("07/10/2024 08:00 PM");
+  });
+});