@okta/odyssey-react-mui 1.11.1 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.11.1",
+  "version": "1.12.1",
   "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.11.1",
+    "@okta/odyssey-design-tokens": "1.12.1",
     "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": "3318d342f74b82e7b957bf881007fe0f78556635"
+  "gitHead": "87b8df23a19fe7c326cfce67504c61876e046301"
 }

package/src/Autocomplete.tsx

@@ -161,6 +161,7 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
+  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -177,6 +178,7 @@ const Autocomplete = <
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
+  ariaDescribedBy,
   defaultValue,
   errorMessage,
   errorMessageList,
@@ -245,6 +247,7 @@ const Autocomplete = <
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
+        ariaDescribedBy={ariaDescribedBy}
         errorMessage={errorMessage}
         errorMessageList={errorMessageList}
         fieldType="single"
@@ -278,6 +281,7 @@ const Autocomplete = <
       />
     ),
     [
+      ariaDescribedBy,
       errorMessage,
       errorMessageList,
       hint,

package/src/CheckboxGroup.tsx

@@ -35,6 +35,7 @@ export type CheckboxGroupProps = {
   label: string;
 } & Pick<
   FieldComponentProps,
+  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -45,6 +46,7 @@ export type CheckboxGroupProps = {
   AllowedProps;
 
 const CheckboxGroup = ({
+  ariaDescribedBy,
   children,
   errorMessage,
   errorMessageList,
@@ -75,6 +77,7 @@ const CheckboxGroup = ({
 
   return (
     <Field
+      ariaDescribedBy={ariaDescribedBy}
       errorMessage={errorMessage}
       errorMessageList={errorMessageList}
       fieldType="group"

package/src/CircularProgress.tsx

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { memo } from "react";
 import { CircularProgress as MuiCircularProgress } from "@mui/material";
 
 import type { AllowedProps } from "./AllowedProps";
@@ -26,7 +27,7 @@ export type CircularProgressProps = {
   value?: number;
 } & AllowedProps;
 
-export const CircularProgress = ({
+const CircularProgress = ({
   ariaLabel,
   testId,
   value,
@@ -38,3 +39,8 @@ export const CircularProgress = ({
     aria-label={ariaLabel}
   />
 );
+
+const MemoizedCircularProgress = memo(CircularProgress);
+MemoizedCircularProgress.displayName = "CircularProgress";
+
+export { MemoizedCircularProgress as CircularProgress };

package/src/Field.tsx

@@ -80,6 +80,7 @@ export type FieldProps = {
 };
 
 const Field = ({
+  ariaDescribedBy,
   errorMessage,
   errorMessageList,
   fieldType,
@@ -96,6 +97,7 @@ const Field = ({
 }: FieldProps &
   Pick<
     FieldComponentProps,
+    | "ariaDescribedBy"
     | "errorMessage"
     | "errorMessageList"
     | "hint"
@@ -113,9 +115,11 @@ const Field = ({
     errorMessage || errorMessageList ? `${id}-error` : undefined;
   const labelElementId = `${id}-label`;
 
-  const ariaDescribedBy = useMemo(
-    () => [hintId, errorMessageElementId].join(" ").trim() || undefined,
-    [errorMessageElementId, hintId]
+  const localAriaDescribedBy = useMemo(
+    () =>
+      [hintId, errorMessageElementId, ariaDescribedBy].join(" ").trim() ||
+      undefined,
+    [ariaDescribedBy, errorMessageElementId, hintId]
   );
 
   const { isDisabled: isFieldsetDisabled } = useFieldset();
@@ -160,7 +164,7 @@ const Field = ({
       )}
 
       {renderFieldComponent({
-        ariaDescribedBy,
+        ariaDescribedBy: localAriaDescribedBy,
         errorMessageElementId,
         id,
         labelElementId,

package/src/FieldComponentProps.ts

@@ -15,6 +15,10 @@ import { ReactElement } from "react";
 import { HintLink } from "./HintLink";
 
 export type FieldComponentProps = {
+  /**
+   * The ID of the element that describes the Field
+   */
+  ariaDescribedBy?: string;
   /**
    * If `error` is not undefined, the `input` will indicate an error.
    */

package/src/NativeSelect.tsx

@@ -93,6 +93,7 @@ export type NativeSelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
+  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -110,6 +111,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
     HasMultipleChoices extends boolean
   >(
     {
+      ariaDescribedBy,
       autoCompleteType,
       defaultValue,
       errorMessage,
@@ -217,6 +219,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
 
     return (
       <Field
+        ariaDescribedBy={ariaDescribedBy}
         errorMessage={errorMessage}
         errorMessageList={errorMessageList}
         fieldType="single"

package/src/PasswordField.tsx

@@ -82,6 +82,7 @@ export type PasswordFieldProps = {
 const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (
     {
+      ariaDescribedBy,
       autoCompleteType,
       defaultValue,
       errorMessage,
@@ -220,6 +221,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
 
     return (
       <Field
+        ariaDescribedBy={ariaDescribedBy}
         errorMessage={errorMessage}
         errorMessageList={errorMessageList}
         fieldType="single"

package/src/RadioGroup.tsx

@@ -45,6 +45,7 @@ export type RadioGroupProps = {
   value?: RadioProps["value"];
 } & Pick<
   FieldComponentProps,
+  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -56,6 +57,7 @@ export type RadioGroupProps = {
   AllowedProps;
 
 const RadioGroup = ({
+  ariaDescribedBy,
   children,
   defaultValue,
   errorMessage,
@@ -107,6 +109,7 @@ const RadioGroup = ({
 
   return (
     <Field
+      ariaDescribedBy={ariaDescribedBy}
       errorMessage={errorMessage}
       errorMessageList={errorMessageList}
       fieldType="group"

package/src/SearchField.tsx

@@ -78,12 +78,16 @@ export type SearchFieldProps = {
    * The value of the `input` element, to use when controlled.
    */
   value?: string;
-} & Pick<FieldComponentProps, "id" | "isDisabled" | "name" | "isFullWidth"> &
+} & Pick<
+  FieldComponentProps,
+  "ariaDescribedBy" | "id" | "isDisabled" | "name" | "isFullWidth"
+> &
   AllowedProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
     {
+      ariaDescribedBy,
       autoCompleteType,
       defaultValue,
       hasInitialFocus,
@@ -186,6 +190,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
 
     return (
       <Field
+        ariaDescribedBy={ariaDescribedBy}
         fieldType="single"
         hasVisibleLabel={false}
         id={idOverride}

package/src/Select.tsx

@@ -97,6 +97,7 @@ export type SelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
+  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -129,6 +130,7 @@ const Select = <
   Value extends SelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 >({
+  ariaDescribedBy,
   defaultValue,
   errorMessage,
   errorMessageList,
@@ -318,6 +320,7 @@ const Select = <
 
   return (
     <Field
+      ariaDescribedBy={ariaDescribedBy}
       errorMessage={errorMessage}
       errorMessageList={errorMessageList}
       fieldType="single"

package/src/TextField.tsx

@@ -106,6 +106,7 @@ export type TextFieldProps = {
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
+      ariaDescribedBy,
       autoCompleteType,
       defaultValue,
       hasInitialFocus,
@@ -237,6 +238,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     return (
       <Field
+        ariaDescribedBy={ariaDescribedBy}
         errorMessage={errorMessage}
         errorMessageList={errorMessageList}
         fieldType="single"

package/src/labs/VirtualizedAutocomplete.tsx

@@ -168,7 +168,13 @@ export type AutocompleteProps<
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
 } & Pick<
   FieldComponentProps,
-  "errorMessage" | "errorMessageList" | "hint" | "id" | "isOptional" | "name"
+  | "ariaDescribedBy"
+  | "errorMessage"
+  | "errorMessageList"
+  | "hint"
+  | "id"
+  | "isOptional"
+  | "name"
 > &
   AllowedProps;
 
@@ -177,6 +183,7 @@ const VirtualizedAutocomplete = <
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
+  ariaDescribedBy,
   defaultValue,
   errorMessage,
   errorMessageList,
@@ -243,6 +250,7 @@ const VirtualizedAutocomplete = <
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
+        ariaDescribedBy={ariaDescribedBy}
         errorMessage={errorMessage}
         errorMessageList={errorMessageList}
         fieldType="single"
@@ -275,6 +283,7 @@ const VirtualizedAutocomplete = <
       />
     ),
     [
+      ariaDescribedBy,
       errorMessage,
       errorMessageList,
       hint,