@okta/odyssey-react-mui 1.9.23 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.23",
+  "version": "1.10.3",
   "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.23",
+    "@okta/odyssey-design-tokens": "1.10.3",
     "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": "e9db91adb36ede5900bf343338ca6c9e38ca3708"
+  "gitHead": "a6212214c614cc9e2b6199d805e253d4fad586a4"
 }

package/src/TextField.tsx

@@ -41,7 +41,7 @@ export type TextFieldProps = {
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
-   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
    */
   autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
   /**
@@ -60,6 +60,11 @@ export type TextFieldProps = {
    * The ref forwarded to the TextField to expose focus()
    */
   inputFocusRef?: React.RefObject<FocusHandle>;
+  /**
+   * Hints at the type of data that might be entered by the user while editing the element or its contents
+   * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
+   */
+  inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
   /**
    * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    */
@@ -112,6 +117,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       HintLinkComponent,
       id: idOverride,
       inputFocusRef,
+      inputMode,
       isDisabled = false,
       isFullWidth = false,
       isMultiline = false,
@@ -170,10 +176,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
         <InputBase
           {...inputValues}
-          inputProps={{
-            "aria-errormessage": errorMessageElementId,
-            "aria-labelledby": labelElementId,
-          }}
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
@@ -187,6 +189,11 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             )
           }
           id={id}
+          inputProps={{
+            "aria-errormessage": errorMessageElementId,
+            "aria-labelledby": labelElementId,
+            inputmode: inputMode,
+          }}
           inputRef={inputRef}
           multiline={isMultiline}
           name={nameOverride ?? id}
@@ -213,6 +220,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         inputValues,
         hasInitialFocus,
         endAdornment,
+        inputMode,
         isMultiline,
         nameOverride,
         onBlur,

package/src/labs/VirtualizedAutocomplete.tsx

@@ -273,7 +273,7 @@ const VirtualizedAutocomplete = <
         )}
       />
     ),
-    [errorMessage, hint, isOptional, label, nameOverride]
+    [errorMessage, errorMessageList, hint, isOptional, label, nameOverride]
   );
   const onChange = useCallback<
     NonNullable<