@okta/odyssey-react-mui 1.15.9 → 1.21.0

package/src/labs/DateField.tsx

@@ -0,0 +1,268 @@
+/*!
+ * 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 {
+  DateField as MuiDateField,
+  DateFieldProps as MuiDateFieldProps,
+  DateValidationError,
+} 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 DateFieldProps = {
+  onChange?: (value: string) => void;
+} & Pick<
+  MuiDateFieldProps<DateTime>,
+  "defaultValue" | "inputRef" | "minDate" | "maxDate" | "timezone" | "value"
+> &
+  Pick<
+    TextFieldProps,
+    | "endAdornment"
+    | "errorMessage"
+    | "hasInitialFocus"
+    | "hint"
+    | "id"
+    | "isDisabled"
+    | "isOptional"
+    | "isReadOnly"
+    | "label"
+    | "onBlur"
+    | "onFocus"
+  >;
+
+const useOdysseyDateError = () => {
+  const { t } = useTranslation();
+
+  return new Map<DateValidationError, string>([
+    ["invalidDate", t("picker.error.invalid")],
+    ["maxDate", t("picker.error.maxdate")],
+    ["minDate", t("picker.error.mindate")],
+  ]);
+};
+
+const formatDateTimeToUtcIsoDateString = (value: DateTime) =>
+  value.toUTC().toISO();
+
+const DateField = ({
+  defaultValue,
+  endAdornment,
+  errorMessage,
+  hasInitialFocus,
+  hint,
+  id: idOverride,
+  inputRef,
+  isDisabled = false,
+  isOptional = false,
+  isReadOnly,
+  label,
+  minDate,
+  maxDate,
+  onBlur,
+  onChange,
+  onFocus,
+  timezone,
+  value,
+}: DateFieldProps) => {
+  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<MuiDateFieldProps<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) => (
+      <MuiDateField
+        /* 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}
+      id={idOverride}
+      isDisabled={isDisabled}
+      isOptional={isOptional}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
+  );
+};
+
+const MemoizedDateField = memo(DateField);
+MemoizedDateField.displayName = "DateField";
+
+export { MemoizedDateField as DateField };

package/src/labs/DatePicker.tsx

@@ -10,49 +10,384 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputBase } from "@mui/material";
 import {
+  FocusEventHandler,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} 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 { useCallback } from "react";
+import { DateTime } from "luxon";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import styled from "@emotion/styled";
+
+import { Button } from "../Button";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+} from "../icons.generated";
+import { DateField, DateFieldProps } from "./DateField";
+import { datePickerTheme } from "./datePickerTheme";
+import { FieldComponentProps } from "../FieldComponentProps";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { OdysseyThemeProvider } from "../OdysseyThemeProvider";
+import { TimeZonePicker, TimeZonePickerProps } from "./TimeZonePicker";
+
+import {
+  useOdysseyDateFields,
+  OdysseyDateFieldProps,
+  TimeZoneOption,
+} from "./useOdysseyDateFields";
+
+const DatePickerContainer = styled.div({
+  ".MuiFormControl-root": {
+    marginBlockEnd: 0,
+  },
+});
+
+const DatePickerWidthContainer = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  ".MuiInput-root": {
+    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 }) => ({
+    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<TInputDate, TDate> = {
-  label: MuiDatePickerProps<TInputDate, TDate>["label"];
+export type DatePickerProps = {
   /**
-   * If `true`, the `input` element is not required.
+   * The label for the `input` element.
    */
-  isOptional?: boolean;
-  onChange: MuiDatePickerProps<TInputDate, TDate>["onChange"];
-  value: MuiDatePickerProps<TInputDate, TDate>["value"];
-};
+  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 &
+  Pick<
+    FieldComponentProps,
+    "errorMessage" | "hint" | "isDisabled" | "isReadOnly"
+  >;
 
-export const DatePicker = <TInputDate, TDate>({
+const DatePicker = ({
+  defaultValue: defaultValueProp,
+  errorMessage,
+  hint,
+  isDateEnabled = () => true,
+  isDisabled,
+  isReadOnly,
+  isMonthEnabled = () => true,
+  isYearEnabled = () => true,
   label,
-  isOptional = false,
-  onChange,
-  value = null,
-}: DatePickerProps<TInputDate, TDate>) => {
-  const renderInput = useCallback(
-    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
-    ({ InputProps, ...props }) => {
-      const combinedProps = {
-        ...InputProps,
-        ...props,
-      };
-
-      return <InputBase {...combinedProps} required={!isOptional} />;
+  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 { language } = i18n;
+  const containerRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setPopperElement(containerRef.current);
+  }, []);
+
+  const formatDateTimeToJsDateStringOnCalendarSelection = useCallback<
+    NonNullable<MuiDatePickerProps<DateTime>["onChange"]>
+  >(
+    (value) => {
+      if (value) {
+        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);
+
+        if (dateStringFromDateTime) {
+          onCalendarDateChange?.({
+            value: dateStringFromDateTime,
+            timeZone: internalTimeZone,
+          });
+        }
+      }
+    },
+    [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 (
+        <DateField
+          defaultValue={defaultValue}
+          endAdornment={
+            <Button
+              ariaLabel={t("picker.labels.date.choose")}
+              label=""
+              onClick={toggleCalendarVisibility}
+              size="small"
+              startIcon={<CalendarIcon />}
+              variant="floating"
+            />
+          }
+          errorMessage={errorMessage}
+          hint={hint}
+          inputRef={inputRef}
+          isDisabled={isDisabled}
+          isReadOnly={isReadOnly}
+          label={label}
+          onBlur={onBlur}
+          minDate={minDate}
+          maxDate={maxDate}
+          onChange={onInputChange}
+          timezone={internalTimeZone}
+          value={value}
+        />
+      );
     },
-    [isOptional],
+    [
+      errorMessage,
+      hint,
+      internalTimeZone,
+      isDisabled,
+      isReadOnly,
+      label,
+      onBlur,
+      onInputChange,
+      minDate,
+      maxDate,
+      t,
+      toggleCalendarVisibility,
+    ],
+  );
+
+  const slots = useMemo<DatePickerSlots<DateTime>>(
+    () => ({
+      actionBar: MemoizedActionBar,
+      field: (muiProps) => renderDateField(muiProps),
+      leftArrowIcon: () => <ArrowLeftIcon />,
+      rightArrowIcon: () => <ArrowRightIcon />,
+      switchViewIcon: () => <ChevronDownIcon />,
+    }),
+    [renderDateField],
+  );
+
+  const slotProps = useMemo<DatePickerSlotProps<DateTime, false>>(
+    () => ({
+      actionBar: ({ wrapperVariant, onAccept, onCancel }) => ({
+        actions:
+          // This is the default behavior but felt more clear to pass them in explicitly
+          wrapperVariant === "desktop" ? [] : ["accept", "cancel"],
+        onAccept,
+        onCancel,
+      }),
+      popper: {
+        anchorEl: popperElement,
+      },
+
+      toolbar: {
+        toolbarPlaceholder: "",
+      },
+    }),
+    [popperElement],
+  );
+
+  const onTimeZoneChange = useCallback(
+    (timeZone: string | undefined) => {
+      if (timeZone && isValidTimeZone(timeZone)) {
+        setInternalTimeZone(timeZone);
+      }
+    },
+    [isValidTimeZone, setInternalTimeZone],
   );
 
   return (
-    <MuiDatePicker
-      label={label}
-      onChange={onChange}
-      // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
-      renderInput={renderInput}
-      value={value}
-    />
+    <OdysseyThemeProvider themeOverride={datePickerTheme}>
+      <LocalizationProvider
+        dateAdapter={AdapterLuxon}
+        adapterLocale={defaultedLanguageCode}
+        localeText={localeText}
+      >
+        <DatePickerContainer>
+          <DatePickerWidthContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            ref={containerRef}
+          >
+            <MuiDatePicker
+              dayOfWeekFormatter={formatDayOfWeek}
+              defaultValue={inputValues?.defaultValue}
+              disabled={isDisabled}
+              fixedWeekNumber={6}
+              inputRef={inputRef}
+              key={language}
+              label={label}
+              minDate={minDate}
+              maxDate={maxDate}
+              onChange={formatDateTimeToJsDateStringOnCalendarSelection}
+              onClose={resetIsOpen}
+              open={isOpen}
+              readOnly={isReadOnly}
+              shouldDisableDate={shouldDisableDate}
+              shouldDisableMonth={shouldDisableMonth}
+              shouldDisableYear={shouldDisableYear}
+              slots={slots}
+              slotProps={slotProps}
+              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>
   );
 };
+
+const MemoizedDatePicker = memo(DatePicker);
+MemoizedDatePicker.displayName = "DatePicker";
+
+export { MemoizedDatePicker as DatePicker };

package/src/labs/{DatePicker.types.ts → DatePicker.types.d.ts}

@@ -12,13 +12,3 @@
 
 // This has to be imported separately for theme types, so it's been separated out to make that clear.
 import "@mui/x-date-pickers/themeAugmentation";
-
-import { PickersComponentNameToClassKey } from "@mui/x-date-pickers/themeAugmentation";
-
-declare module "@mui/material/styles" {
-  interface ComponentNameToClassKey extends PickersComponentNameToClassKey {
-    PrivatePickersYear:
-      | PickersComponentNameToClassKey["PrivatePickersYear"]
-      | "button";
-  }
-}