@okta/odyssey-react-mui 1.9.21 → 1.9.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.21",
+  "version": "1.9.23",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.9.21",
+    "@okta/odyssey-design-tokens": "1.9.23",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "75ee575800d7d9f4921553d752990feca9622bec"
+  "gitHead": "e9db91adb36ede5900bf343338ca6c9e38ca3708"
 }

package/src/Autocomplete.tsx

@@ -162,6 +162,7 @@ export type AutocompleteProps<
 } & Pick<
   FieldComponentProps,
   | "errorMessage"
+  | "errorMessageList"
   | "hint"
   | "HintLinkComponent"
   | "id"
@@ -178,6 +179,7 @@ const Autocomplete = <
 >({
   defaultValue,
   errorMessage,
+  errorMessageList,
   hasMultipleChoices,
   id: idOverride,
   inputValue,
@@ -244,6 +246,7 @@ const Autocomplete = <
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
         errorMessage={errorMessage}
+        errorMessageList={errorMessageList}
         fieldType="single"
         hasVisibleLabel
         id={InputLabelProps.htmlFor}
@@ -273,7 +276,15 @@ const Autocomplete = <
         )}
       />
     ),
-    [errorMessage, hint, HintLinkComponent, isOptional, label, nameOverride]
+    [
+      errorMessage,
+      errorMessageList,
+      hint,
+      HintLinkComponent,
+      isOptional,
+      label,
+      nameOverride,
+    ]
   );
   const onChange = useCallback<
     NonNullable<

package/src/CheckboxGroup.tsx

@@ -35,13 +35,18 @@ export type CheckboxGroupProps = {
   label: string;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "HintLinkComponent" | "isDisabled"
+  | "errorMessage"
+  | "errorMessageList"
+  | "hint"
+  | "HintLinkComponent"
+  | "isDisabled"
 > &
   AllowedProps;
 
 const CheckboxGroup = ({
   children,
   errorMessage,
+  errorMessageList,
   hint,
   HintLinkComponent,
   isDisabled,
@@ -68,6 +73,7 @@ const CheckboxGroup = ({
   return (
     <Field
       errorMessage={errorMessage}
+      errorMessageList={errorMessageList}
       fieldType="group"
       hasVisibleLabel={true}
       hint={hint}

package/src/ErrorMessageList.tsx

@@ -0,0 +1,51 @@
+/*!
+ * 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 { List as MuiList, ListItem as MuiListItem } from "@mui/material";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
+import { memo, useMemo } from "react";
+
+export type ErrorMessageListProps = {
+  errorMessages: string[];
+};
+
+const listItemStyles = {
+  display: "list-item",
+  paddingInlineStart: 0,
+};
+
+const ErrorMessageList = ({ errorMessages }: ErrorMessageListProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const listStyles = useMemo(
+    () => ({
+      listStyle: "disc",
+      paddingInlineStart: odysseyDesignTokens.Spacing4,
+    }),
+    [odysseyDesignTokens]
+  );
+
+  return (
+    <MuiList disablePadding dense sx={listStyles}>
+      {errorMessages.map((errorMessage) => (
+        <MuiListItem disablePadding dense sx={listItemStyles}>
+          {errorMessage}
+        </MuiListItem>
+      ))}
+    </MuiList>
+  );
+};
+
+const MemoizedErrorMessageList = memo(ErrorMessageList);
+MemoizedErrorMessageList.displayName = "ErrorMessageList";
+
+export { MemoizedErrorMessageList as ErrorMessageList };

package/src/Field.tsx

@@ -29,6 +29,14 @@ import { useUniqueId } from "./useUniqueId";
 export const fieldTypeValues = ["single", "group"] as const;
 
 export type FieldProps = {
+  /**
+   * If `error` is not undefined, the `input` will indicate an error.
+   */
+  errorMessage?: string;
+  /**
+   * If `error` is not undefined, the `input` will indicate an error.
+   */
+  errorMessageList?: string[];
   /**
    * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).
    */
@@ -73,6 +81,7 @@ export type FieldProps = {
 
 const Field = ({
   errorMessage,
+  errorMessageList,
   fieldType,
   hasVisibleLabel,
   hint,
@@ -88,6 +97,7 @@ const Field = ({
   Pick<
     FieldComponentProps,
     | "errorMessage"
+    | "errorMessageList"
     | "hint"
     | "HintLinkComponent"
     | "id"
@@ -99,7 +109,8 @@ const Field = ({
 
   const id = useUniqueId(idOverride);
   const hintId = hint ? `${id}-hint` : undefined;
-  const errorMessageElementId = errorMessage ? `${id}-error` : undefined;
+  const errorMessageElementId =
+    errorMessage || errorMessageList ? `${id}-error` : undefined;
   const labelElementId = `${id}-label`;
 
   const ariaDescribedBy = useMemo(
@@ -118,7 +129,10 @@ const Field = ({
     <MuiFormControl
       component={fieldType === "group" ? "fieldset" : "div"}
       disabled={isDisabled}
-      error={Boolean(errorMessage)}
+      error={
+        Boolean(errorMessage) ||
+        (Array.isArray(errorMessageList) && errorMessageList.length > 0)
+      }
       role={isRadioGroup ? "radiogroup" : undefined}
       fullWidth={isFullWidth}
     >
@@ -152,8 +166,12 @@ const Field = ({
         labelElementId,
       })}
 
-      {errorMessage && (
-        <FieldError id={errorMessageElementId} text={errorMessage} />
+      {(errorMessage || errorMessageList) && (
+        <FieldError
+          id={errorMessageElementId}
+          message={errorMessage}
+          messageList={errorMessageList}
+        />
       )}
     </MuiFormControl>
   );

package/src/FieldComponentProps.ts

@@ -19,6 +19,10 @@ export type FieldComponentProps = {
    * If `error` is not undefined, the `input` will indicate an error.
    */
   errorMessage?: string;
+  /**
+   * If `error` is not undefined, the `input` will indicate multiple errors.
+   */
+  errorMessageList?: string[];
   /**
    * The helper text content.
    */

package/src/FieldError.tsx

@@ -14,16 +14,25 @@ import { memo } from "react";
 
 import { FormHelperText } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
+import { ErrorMessageList } from "./ErrorMessageList";
 import { useTranslation } from "react-i18next";
 
 import type { AllowedProps } from "./AllowedProps";
+import { Box } from "./Box";
 
 export type FieldErrorProps = {
   id?: string;
-  text: string;
+  message?: string;
+  messageList?: string[];
 } & AllowedProps;
 
-const FieldError = ({ id, testId, text, translate }: FieldErrorProps) => {
+const FieldError = ({
+  id,
+  message,
+  messageList,
+  testId,
+  translate,
+}: FieldErrorProps) => {
   const { t } = useTranslation();
 
   return (
@@ -31,7 +40,10 @@ const FieldError = ({ id, testId, text, translate }: FieldErrorProps) => {
       <ScreenReaderText translate={translate}>{`${t(
         "fielderror.screenreader.text"
       )}:`}</ScreenReaderText>
-      {text}
+      <Box>
+        {message}
+        {messageList && <ErrorMessageList errorMessages={messageList} />}
+      </Box>
     </FormHelperText>
   );
 };

package/src/NativeSelect.tsx

@@ -82,6 +82,7 @@ export type NativeSelectProps<
 } & Pick<
   FieldComponentProps,
   | "errorMessage"
+  | "errorMessageList"
   | "hint"
   | "HintLinkComponent"
   | "id"
@@ -99,6 +100,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
     {
       defaultValue,
       errorMessage,
+      errorMessageList,
       hasMultipleChoices: hasMultipleChoicesProp,
       hint,
       HintLinkComponent,
@@ -185,6 +187,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
     return (
       <Field
         errorMessage={errorMessage}
+        errorMessageList={errorMessageList}
         fieldType="single"
         hasVisibleLabel
         hint={hint}

package/src/PasswordField.tsx

@@ -86,6 +86,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       autoCompleteType,
       defaultValue,
       errorMessage,
+      errorMessageList,
       hasInitialFocus,
       hint,
       id: idOverride,
@@ -220,6 +221,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
     return (
       <Field
         errorMessage={errorMessage}
+        errorMessageList={errorMessageList}
         fieldType="single"
         hasVisibleLabel
         hint={hint}

package/src/RadioGroup.tsx

@@ -45,7 +45,13 @@ export type RadioGroupProps = {
   value?: RadioProps["value"];
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "HintLinkComponent" | "id" | "isDisabled" | "name"
+  | "errorMessage"
+  | "errorMessageList"
+  | "hint"
+  | "HintLinkComponent"
+  | "id"
+  | "isDisabled"
+  | "name"
 > &
   AllowedProps;
 
@@ -53,6 +59,7 @@ const RadioGroup = ({
   children,
   defaultValue,
   errorMessage,
+  errorMessageList,
   hint,
   HintLinkComponent,
   id: idOverride,
@@ -101,6 +108,7 @@ const RadioGroup = ({
   return (
     <Field
       errorMessage={errorMessage}
+      errorMessageList={errorMessageList}
       fieldType="group"
       hasVisibleLabel={false}
       hint={hint}

package/src/Select.tsx

@@ -98,6 +98,7 @@ export type SelectProps<
 } & Pick<
   FieldComponentProps,
   | "errorMessage"
+  | "errorMessageList"
   | "hint"
   | "HintLinkComponent"
   | "id"
@@ -130,6 +131,7 @@ const Select = <
 >({
   defaultValue,
   errorMessage,
+  errorMessageList,
   hasMultipleChoices: hasMultipleChoicesProp,
   hint,
   HintLinkComponent,
@@ -318,6 +320,7 @@ const Select = <
   return (
     <Field
       errorMessage={errorMessage}
+      errorMessageList={errorMessageList}
       fieldType="single"
       hasVisibleLabel
       hint={hint}

package/src/TextField.tsx

@@ -107,6 +107,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       hasInitialFocus,
       endAdornment,
       errorMessage,
+      errorMessageList,
       hint,
       HintLinkComponent,
       id: idOverride,
@@ -231,6 +232,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     return (
       <Field
         errorMessage={errorMessage}
+        errorMessageList={errorMessageList}
         fieldType="single"
         hasVisibleLabel
         hint={hint}

package/src/labs/VirtualizedAutocomplete.tsx

@@ -168,7 +168,7 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "hint" | "id" | "isOptional" | "name"
+  "errorMessage" | "errorMessageList" | "hint" | "id" | "isOptional" | "name"
 > &
   AllowedProps;
 
@@ -179,6 +179,7 @@ const VirtualizedAutocomplete = <
 >({
   defaultValue,
   errorMessage,
+  errorMessageList,
   hasMultipleChoices,
   id: idOverride,
   inputValue,
@@ -243,6 +244,7 @@ const VirtualizedAutocomplete = <
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
         errorMessage={errorMessage}
+        errorMessageList={errorMessageList}
         fieldType="single"
         hasVisibleLabel
         id={InputLabelProps.htmlFor}