@okta/odyssey-react-mui 1.20.0 → 1.21.0

package/src/labs/DataComponents/constants.tsx

@@ -10,11 +10,19 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export const availableStackLayouts = ["list", "grid"];
-export const availableTableLayouts = ["table"];
-export const availableLayouts = [
+import { MRT_DensityState } from "material-react-table";
+
+export type DataViewLayout = "list" | "grid" | "table";
+
+export const availableStackLayouts: DataViewLayout[] = ["list", "grid"];
+export const availableTableLayouts: DataViewLayout[] = ["table"];
+export const availableLayouts: DataViewLayout[] = [
   ...availableTableLayouts,
   ...availableStackLayouts,
 ];
 
-export const densityValues = ["comfortable", "spacious", "compact"] as const;
+export const densityValues: MRT_DensityState[] = [
+  "comfortable",
+  "spacious",
+  "compact",
+];

package/src/labs/DataComponents/tableConstants.tsx

@@ -44,25 +44,6 @@ export const dataTableImmutableSettings = {
 };
 
 export const displayColumnDefOptions = {
-  "mrt-row-actions": {
-    header: "",
-    grow: true,
-    muiTableBodyCellProps: {
-      align: "right" as const,
-      sx: {
-        overflow: "visible",
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-    muiTableHeadCellProps: {
-      align: "right" as const,
-      sx: {
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-  },
   "mrt-row-drag": {
     header: "",
     muiTableBodyCellProps: {

package/src/labs/DataComponents/useFilterConversion.ts

@@ -58,32 +58,28 @@ export const useFilterConversion = ({
   );
 
   const dataTableFilters = useMemo(() => {
-    const providedFilters = filters || columns;
-    if (!providedFilters) {
-      return [];
-    }
+    // Filters may be manually set via the `filters` variable;
+    // If not, they may be inferred from `columns`
+    const providedFilters = filters || columns || [];
+
     return providedFilters.reduce<DataFilter[]>((accumulator, item) => {
       if (typeof item === "string") {
         const foundColumn = columns?.find(
           (column) => column.accessorKey === item,
         );
-        if (foundColumn) {
-          const filter = convertColumnToFilter(foundColumn);
-          if (filter) {
-            return accumulator.concat(filter);
-          }
-        }
-      } else if ("accessorKey" in item) {
-        // Checks if it's a column
+        const filter = foundColumn && convertColumnToFilter(foundColumn);
+        return filter ? accumulator.concat(filter) : accumulator;
+      }
+
+      if ("accessorKey" in item) {
         const filter = convertColumnToFilter(item);
-        if (filter) {
-          return accumulator.concat(filter);
-        }
-      } else if ("label" in item) {
-        // Checks if it's a DataFilter
+        return filter ? accumulator.concat(filter) : accumulator;
+      }
+
+      if ("label" in item) {
         return accumulator.concat(item);
       }
-      // If none of the conditions match, item is ignored (not mapping to undefined)
+
       return accumulator;
     }, []);
   }, [columns, filters]);

package/src/labs/DateField.tsx

@@ -10,35 +10,60 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ChangeEventHandler, ChangeEvent, memo, useCallback } from "react";
+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 = {
-  defaultValue?: MuiDateFieldProps<DateTime>["defaultValue"];
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  value?: MuiDateFieldProps<DateTime>["value"];
+  onChange?: (value: string) => void;
 } & Pick<
-  TextFieldProps,
-  | "endAdornment"
-  | "errorMessage"
-  | "hasInitialFocus"
-  | "hint"
-  | "id"
-  | "isDisabled"
-  | "isOptional"
-  | "isReadOnly"
-  | "label"
-  | "onBlur"
-  | "onFocus"
->;
+  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,
@@ -47,17 +72,127 @@ const DateField = ({
   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, id, labelElementId }: RenderFieldComponentProps) => (
+    ({
+      ariaDescribedBy,
+      errorMessageElementId,
+      id,
+      labelElementId,
+    }: RenderFieldComponentProps) => (
       <MuiDateField
         /* eslint-disable-next-line jsx-a11y/no-autofocus */
         autoFocus={hasInitialFocus}
@@ -66,41 +201,55 @@ const DateField = ({
         id={id}
         inputProps={{
           "aria-describedby": ariaDescribedBy,
+          "aria-errormessage": errorMessageElementId,
           "aria-labelledby": labelElementId,
-          onChange: (event) =>
-            onChange?.(event as ChangeEvent<HTMLInputElement>),
         }}
         InputProps={{
-          error: Boolean(errorMessage),
+          error: Boolean(displayedErrorMessage || errorMessage),
           endAdornment: (
-            <InputAdornment position="end">{endAdornment}</InputAdornment>
+            <>
+              {hasVisibleAdornment && (
+                <InputAdornment position="end">{endAdornment}</InputAdornment>
+              )}
+            </>
           ),
         }}
+        inputRef={localInputRef}
+        minDate={minDate}
+        maxDate={maxDate}
         name={id}
-        onBlur={onBlur}
+        onBlur={checkFieldValidityAndSetError}
+        onChange={validateAndCallOnChange}
         onFocus={onFocus}
         readOnly={isReadOnly}
+        timezone={timezone}
         value={value}
         variant="standard"
       />
     ),
     [
+      checkFieldValidityAndSetError,
       defaultValue,
+      displayedErrorMessage,
       endAdornment,
       errorMessage,
       hasInitialFocus,
+      hasVisibleAdornment,
       isDisabled,
-      onChange,
+      localInputRef,
+      minDate,
+      maxDate,
       onFocus,
-      onBlur,
       isReadOnly,
+      timezone,
+      validateAndCallOnChange,
       value,
     ],
   );
 
   return (
     <Field
-      errorMessage={errorMessage}
+      errorMessage={displayedErrorMessage || errorMessage}
       fieldType="single"
       hasVisibleLabel
       hint={hint}