@okta/odyssey-react-mui 1.13.11 → 1.14.2

package/src/HtmlProps.ts

@@ -10,7 +10,67 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { HTMLAttributes } from "react";
+
 export type HtmlProps = {
+  /**
+   * Used in [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+   */
+  ariaBusy?: HTMLAttributes<HTMLElement>["aria-busy"];
+  /**
+   * The `aria-checked` attribute indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+   *
+   * NOTE: Where possible use an HTML `<input>` element with `type="checkbox"` and `type="radio"` as these have built in semantics and do not require ARIA attributes.
+   */
+  ariaChecked?: HTMLAttributes<HTMLElement>["aria-checked"];
+  /**
+   * The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
+   *
+   * Value: A space-separated list of one or more ID values referencing the elements being controlled by the current element
+   */
+  ariaControls?: HTMLAttributes<HTMLElement>["aria-controls"];
+  /**
+   * The global `aria-describedby` attribute identifies the element (or elements) that describes the element on which the attribute is set.
+   *
+   * Value: The id or space-separated list of element ids that describe the current element.
+   *
+   * Note: The `aria-describedby` attribute is not designed to reference descriptions from external resources. It must reference elements in the same DOM document.
+   */
+  ariaDescribedBy?: HTMLAttributes<HTMLElement>["aria-describedby"];
+  /**
+   * The `aria-errormessage` attribute on an object identifies the element that provides an error message for that object.
+   *
+   * Value: The value of the id of the element containing the error message for the current element
+   */
+  ariaErrorMessage?: HTMLAttributes<HTMLElement>["aria-errormessage"];
+  /**
+   * The `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.
+   */
+  ariaExpanded?: HTMLAttributes<HTMLElement>["aria-expanded"];
+  /**
+   * The `aria-haspopup` attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.
+   */
+  ariaHasPopup?: HTMLAttributes<HTMLElement>["aria-haspopup"];
+  /**
+   * The `aria-label` attribute defines a string value that labels an interactive element.
+   */
+  ariaLabel?: HTMLAttributes<HTMLElement>["aria-label"];
+  /**
+   * The `aria-labelledby` attribute identifies the element (or elements) that labels the element it is applied to.
+   *
+   * Value: Space separated list of one or more ID values referencing the elements that label the current element.
+   */
+  ariaLabelledBy?: HTMLAttributes<HTMLElement>["aria-labelledby"];
+  /**
+   * The `aria-pressed` attribute indicates the current "pressed" state of a toggle button.
+   */
+  ariaPressed?: HTMLAttributes<HTMLElement>["aria-pressed"];
+  /**
+   * The `tabindex` global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable
+   *
+   * Note: Manipulating the natural tab order is generally advised against
+   */
+  tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
   /**
    * This prop puts a `data` attribute on an HTML element in this component with the value provided.
    *

package/src/Link.tsx

@@ -20,10 +20,6 @@ import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
 export const linkVariantValues = ["default", "monochrome"] as const;
 
 export type LinkProps = {
-  /**
-   * The ARIA label for the Link
-   */
-  ariaLabel?: string;
   /**
    * The content within the Link
    */
@@ -61,7 +57,7 @@ export type LinkProps = {
    * The visual presentation of the Link (default or monochrome)
    */
   variant?: (typeof linkVariantValues)[number];
-} & HtmlProps;
+} & Pick<HtmlProps, "ariaLabel" | "testId" | "translate">;
 
 const Link = ({
   ariaLabel,
@@ -86,7 +82,7 @@ const Link = ({
         },
       };
     },
-    []
+    [],
   );
 
   return (

package/src/MenuButton.tsx

@@ -34,18 +34,6 @@ import type { HtmlProps } from "./HtmlProps";
 export const menuAlignmentValues = ["left", "right"] as const;
 
 export type MenuButtonProps = {
-  /**
-   * The ARIA label for the Button
-   */
-  ariaLabel?: string;
-  /**
-   * The ID of the element that labels the Button
-   */
-  ariaLabelledBy?: string;
-  /**
-   * The ID of the element that describes the Button
-   */
-  ariaDescribedBy?: string;
   /**
    * The label on the triggering Button
    */
@@ -93,25 +81,22 @@ export type MenuButtonProps = {
    * The tooltip text for the Button if it's icon-only
    */
   tooltipText?: string;
-} & (
-  | {
-      ariaLabel?: string;
-      ariaLabelledBy?: string;
-      buttonLabel: string;
-    }
-  | {
-      ariaLabel: string;
-      ariaLabelledBy?: string;
-      buttonLabel?: undefined | "";
-    }
-  | {
-      ariaLabel?: string;
-      ariaLabelledBy: string;
-      buttonLabel?: undefined | "";
-    }
-) &
+} & Pick<
+  HtmlProps,
+  "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "testId" | "translate"
+> &
   Pick<FieldComponentProps, "isDisabled"> &
-  HtmlProps;
+  (
+    | { buttonLabel: string }
+    | (Required<Pick<HtmlProps, "ariaLabelledBy">> &
+        Partial<Pick<HtmlProps, "ariaLabel">> & {
+          buttonLabel?: undefined | "";
+        })
+    | (Required<Pick<HtmlProps, "ariaLabel">> &
+        Partial<Pick<HtmlProps, "ariaLabelledBy">> & {
+          buttonLabel?: undefined | "";
+        })
+  );
 
 const MenuButton = ({
   ariaLabel,
@@ -147,7 +132,7 @@ const MenuButton = ({
 
   const menuListProps = useMemo(
     () => ({ "aria-labelledby": `${uniqueId}-button` }),
-    [uniqueId]
+    [uniqueId],
   );
 
   const providerValue = useMemo<MenuContextType>(
@@ -156,7 +141,7 @@ const MenuButton = ({
       openMenu,
       shouldCloseOnSelect,
     }),
-    [closeMenu, openMenu, shouldCloseOnSelect]
+    [closeMenu, openMenu, shouldCloseOnSelect],
   );
 
   const endIcon = endIconProp ? (
@@ -172,8 +157,8 @@ const MenuButton = ({
       ({
         horizontal: menuAlignment,
         vertical: "bottom",
-      } as PopoverOrigin),
-    [menuAlignment]
+      }) as PopoverOrigin,
+    [menuAlignment],
   );
 
   const transformOrigin = useMemo(
@@ -181,8 +166,8 @@ const MenuButton = ({
       ({
         horizontal: menuAlignment,
         vertical: "top",
-      } as PopoverOrigin),
-    [menuAlignment]
+      }) as PopoverOrigin,
+    [menuAlignment],
   );
 
   return (

package/src/MenuItem.tsx

@@ -51,7 +51,7 @@ export type MenuItemProps = {
    * - "destructive": A variant indicating a destructive action.
    */
   variant?: "default" | "destructive";
-} & HtmlProps;
+} & Pick<HtmlProps, "testId">;
 
 const MenuItem = ({
   children,
@@ -72,7 +72,7 @@ const MenuItem = ({
         closeMenu();
       }
     },
-    [onClickProp, closeMenu, shouldCloseOnSelect]
+    [onClickProp, closeMenu, shouldCloseOnSelect],
   );
 
   return (

package/src/MuiPropsChild.tsx

@@ -25,7 +25,7 @@ const MuiPropsChild = forwardRef<HTMLElement, MuiPropsChildProps>(
         ...muiProps,
         ref,
       }),
-      [muiProps, ref]
+      [muiProps, ref],
     );
 
     return (
@@ -33,7 +33,7 @@ const MuiPropsChild = forwardRef<HTMLElement, MuiPropsChildProps>(
         {children}
       </MuiPropsContext.Provider>
     );
-  }
+  },
 );
 
 const MemoizedMuiPropsChild = memo(MuiPropsChild);

package/src/NativeSelect.tsx

@@ -25,7 +25,10 @@ import {
   SelectProps as MuiSelectProps,
 } from "@mui/material";
 import { Field } from "./Field";
-import { FieldComponentProps } from "./FieldComponentProps";
+import {
+  FieldComponentProps,
+  FieldComponentRenderProps,
+} from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
 
@@ -40,7 +43,7 @@ export type NativeSelectValueType<HasMultipleChoices> =
 
 export type NativeSelectProps<
   Value extends NativeSelectValueType<HasMultipleChoices>,
-  HasMultipleChoices extends boolean
+  HasMultipleChoices extends boolean,
 > = {
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
@@ -92,7 +95,6 @@ export type NativeSelectProps<
   value?: Value;
 } & Pick<
   FieldComponentProps,
-  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -102,12 +104,17 @@ export type NativeSelectProps<
   | "isFullWidth"
   | "isOptional"
 > &
-  HtmlProps;
+  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
+
+type NativeSelectRenderProps = Partial<
+  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
+> &
+  Pick<FieldComponentRenderProps, "labelElementId">;
 
 const NativeSelect = forwardRef(
   <
     Value extends NativeSelectValueType<HasMultipleChoices>,
-    HasMultipleChoices extends boolean
+    HasMultipleChoices extends boolean,
   >(
     {
       ariaDescribedBy,
@@ -133,13 +140,13 @@ const NativeSelect = forwardRef(
       value,
       children,
     }: NativeSelectProps<Value, HasMultipleChoices>,
-    ref?: React.Ref<ReactElement>
+    ref?: React.Ref<ReactElement>,
   ) => {
     const controlledStateRef = useRef(
       getControlState({
         controlledValue: value,
         uncontrolledValue: defaultValue,
-      })
+      }),
     );
     const localInputRef = useRef<HTMLSelectElement>(null);
 
@@ -152,7 +159,7 @@ const NativeSelect = forwardRef(
           },
         };
       },
-      []
+      [],
     );
 
     const inputValues = useInputValues({
@@ -167,7 +174,7 @@ const NativeSelect = forwardRef(
       (event, child) => {
         onChangeProp?.(event, child);
       },
-      [onChangeProp]
+      [onChangeProp],
     );
 
     const hasMultipleChoices = useMemo(
@@ -175,10 +182,14 @@ const NativeSelect = forwardRef(
         hasMultipleChoicesProp === undefined
           ? isMultiSelect
           : hasMultipleChoicesProp,
-      [hasMultipleChoicesProp, isMultiSelect]
+      [hasMultipleChoicesProp, isMultiSelect],
     );
     const renderFieldComponent = useCallback(
-      ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (
+      ({
+        ariaDescribedBy,
+        errorMessageElementId,
+        labelElementId,
+      }: NativeSelectRenderProps) => (
         <MuiSelect
           {...inputValues}
           aria-describedby={ariaDescribedBy}
@@ -213,7 +224,7 @@ const NativeSelect = forwardRef(
         ref,
         testId,
         translate,
-      ]
+      ],
     );
 
     return (
@@ -233,7 +244,7 @@ const NativeSelect = forwardRef(
         renderFieldComponent={renderFieldComponent}
       />
     );
-  }
+  },
 );
 
 const MemoizedNativeSelect = memo(NativeSelect);

package/src/OdysseyCacheProvider.test.tsx

@@ -21,8 +21,8 @@ describe("OdysseyCacheProvider", () => {
       render(
         <OdysseyCacheProvider>
           <div />
-        </OdysseyCacheProvider>
-      )
+        </OdysseyCacheProvider>,
+      ),
     ).not.toThrow();
   });
 
@@ -30,7 +30,7 @@ describe("OdysseyCacheProvider", () => {
     render(
       <OdysseyCacheProvider>
         <Button label="text" variant="primary" />
-      </OdysseyCacheProvider>
+      </OdysseyCacheProvider>,
     );
 
     expect(screen.queryByRole("button")).toHaveTextContent("text");

package/src/OdysseyProvider.tsx

@@ -28,7 +28,7 @@ import {
 import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
 
 export type OdysseyProviderProps<
-  SupportedLanguages extends string = DefaultSupportedLanguages
+  SupportedLanguages extends string = DefaultSupportedLanguages,
 > = OdysseyCacheProviderProps &
   OdysseyThemeProviderProps &
   OdysseyTranslationProviderProps<SupportedLanguages> & {
@@ -54,10 +54,8 @@ const OdysseyProvider = <SupportedLanguages extends string>({
   >
     <OdysseyThemeProvider
       designTokensOverride={designTokensOverride}
-      emotionRoot={emotionRoot}
       shadowDomElement={shadowDomElement}
       themeOverride={themeOverride}
-      withCache={false}
     >
       <ScopedCssBaseline>
         <OdysseyTranslationProvider<SupportedLanguages>

package/src/OdysseyThemeProvider.tsx

@@ -21,30 +21,28 @@ import { deepmerge } from "@mui/utils";
 import { createOdysseyMuiTheme, DesignTokensOverride } from "./theme";
 import * as Tokens from "@okta/odyssey-design-tokens";
 import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
-import { CacheProvider } from "@emotion/react";
-import createCache from "@emotion/cache";
-import { useUniqueAlphabeticalId } from "./useUniqueAlphabeticalId";
 
 export type OdysseyThemeProviderProps = {
   children: ReactNode;
   designTokensOverride?: DesignTokensOverride;
-  emotionRoot?: HTMLStyleElement;
   shadowDomElement?: HTMLDivElement | HTMLElement | undefined;
   themeOverride?: ThemeOptions;
-  withCache?: boolean;
 };
 
+/**
+ * This function doesn't include the Emotion Cache or Translations. You should probably be using `OdysseyProvider`.
+ *
+ * Some teams have a need to wrap separately (SIW), but most teams will never need to use this explicitly.
+ */
 const OdysseyThemeProvider = ({
   children,
   designTokensOverride,
-  emotionRoot,
   shadowDomElement,
   themeOverride,
-  withCache = true,
 }: OdysseyThemeProviderProps) => {
   const odysseyTokens = useMemo(
     () => ({ ...Tokens, ...designTokensOverride }),
-    [designTokensOverride]
+    [designTokensOverride],
   );
   const odysseyTheme = useMemo(
     () =>
@@ -52,39 +50,14 @@ const OdysseyThemeProvider = ({
         odysseyTokens,
         shadowDomElement,
       }),
-    [odysseyTokens, shadowDomElement]
+    [odysseyTokens, shadowDomElement],
   );
 
   const customOdysseyTheme = useMemo(
     () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),
-    [odysseyTheme, themeOverride]
-  );
-
-  const uniqueAlphabeticalId = useUniqueAlphabeticalId();
-
-  const cache = useMemo(
-    () =>
-      createCache({
-        ...(emotionRoot && { container: emotionRoot }),
-        key: uniqueAlphabeticalId,
-        prepend: true,
-        nonce: window.cspNonce,
-        speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
-      }),
-    [emotionRoot, uniqueAlphabeticalId]
+    [odysseyTheme, themeOverride],
   );
 
-  if (withCache) {
-    return (
-      <CacheProvider value={cache}>
-        <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
-          <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
-            {children}
-          </OdysseyDesignTokensContext.Provider>
-        </MuiThemeProvider>
-      </CacheProvider>
-    );
-  }
   return (
     <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
       <OdysseyDesignTokensContext.Provider value={odysseyTokens}>

package/src/OdysseyTranslationProvider.test.tsx

@@ -20,7 +20,7 @@ describe("OdysseyTranslationProvider", () => {
     render(
       <OdysseyTranslationProvider>
         <span>{odysseyTranslate("fieldlabel.optional.text")}</span>
-      </OdysseyTranslationProvider>
+      </OdysseyTranslationProvider>,
     );
 
     expect(screen.getByText("Optional"));
@@ -30,7 +30,7 @@ describe("OdysseyTranslationProvider", () => {
     render(
       <OdysseyTranslationProvider languageCode="test">
         <span>{odysseyTranslate("fieldlabel.optional.text")}</span>
-      </OdysseyTranslationProvider>
+      </OdysseyTranslationProvider>,
     );
 
     expect(screen.getByText("Optional"));
@@ -50,11 +50,11 @@ describe("OdysseyTranslationProvider", () => {
         translationOverrides={translationOverrides}
       >
         <TextField label="" isOptional />
-      </OdysseyTranslationProvider>
+      </OdysseyTranslationProvider>,
     );
 
     expect(
-      screen.getByText("\u063A\u064A\u0631 \u0645\u0637\u0644\u0648\u0628")
+      screen.getByText("\u063A\u064A\u0631 \u0645\u0637\u0644\u0648\u0628"),
     );
   });
 
@@ -68,7 +68,7 @@ describe("OdysseyTranslationProvider", () => {
     render(
       <OdysseyTranslationProvider translationOverrides={translationOverrides}>
         <TextField label="" isOptional />
-      </OdysseyTranslationProvider>
+      </OdysseyTranslationProvider>,
     );
 
     expect(screen.getByText("Non Required"));
@@ -87,7 +87,7 @@ describe("OdysseyTranslationProvider", () => {
         translationOverrides={translationOverrides}
       >
         <TextField label="" isOptional />
-      </OdysseyTranslationProvider>
+      </OdysseyTranslationProvider>,
     );
 
     expect(screen.getByText("Optionnel"));

package/src/OdysseyTranslationProvider.tsx

@@ -22,12 +22,12 @@ export type OdysseyI18nResourceKeys = (typeof resources)["en"];
 export const odysseyI18nResourceKeysList = getTypedObjectKeys(resources["en"]);
 
 export type TranslationOverrides<
-  SupportedLanguages extends string = DefaultSupportedLanguages
+  SupportedLanguages extends string = DefaultSupportedLanguages,
 > = Record<SupportedLanguages, Partial<OdysseyI18nResourceKeys>>;
 
 const mergeBundleOverrides = <SupportedLanguages extends string>(
   languageCode: SupportedLanguages,
-  translationOverrides: TranslationOverrides<SupportedLanguages>
+  translationOverrides: TranslationOverrides<SupportedLanguages>,
 ) => {
   const translationStrings = resources[languageCode] || {};
   const translationStringOverrides = translationOverrides[languageCode];
@@ -38,7 +38,7 @@ const mergeBundleOverrides = <SupportedLanguages extends string>(
 };
 
 export type OdysseyTranslationProviderProps<
-  SupportedLanguages extends string = DefaultSupportedLanguages
+  SupportedLanguages extends string = DefaultSupportedLanguages,
 > = {
   children: ReactNode;
   languageCode?: SupportedLanguages | DefaultSupportedLanguages;
@@ -46,7 +46,7 @@ export type OdysseyTranslationProviderProps<
 };
 
 const formatLanguageCodeToHyphenated = <SupportedLanguages extends string>(
-  languageCode: OdysseyTranslationProviderProps<SupportedLanguages>["languageCode"]
+  languageCode: OdysseyTranslationProviderProps<SupportedLanguages>["languageCode"],
 ) => languageCode?.replaceAll("_", "-");
 
 export const OdysseyTranslationProvider = <SupportedLanguages extends string>({
@@ -61,13 +61,13 @@ export const OdysseyTranslationProvider = <SupportedLanguages extends string>({
     const changeHtmlElementLanguageAttribute = () => {
       window.document.documentElement.setAttribute(
         "lang",
-        normalizedLanguageCode || "en"
+        normalizedLanguageCode || "en",
       );
     };
     // Defaults to the browser's language if available otherwise `en` will be used
     i18n.changeLanguage(
       languageCode || window.navigator.language,
-      changeHtmlElementLanguageAttribute
+      changeHtmlElementLanguageAttribute,
     );
   }, [languageCode]);
 
@@ -76,7 +76,7 @@ export const OdysseyTranslationProvider = <SupportedLanguages extends string>({
       getTypedObjectKeys(translationOverrides).forEach((language) => {
         const bundle = mergeBundleOverrides<SupportedLanguages>(
           language,
-          translationOverrides
+          translationOverrides,
         );
         i18n.addResourceBundle(language, defaultNS, bundle);
       });

package/src/PasswordField.tsx

@@ -24,7 +24,10 @@ import {
 
 import { ShowIcon, HideIcon } from "./icons.generated";
 import { Field } from "./Field";
-import { FieldComponentProps } from "./FieldComponentProps";
+import {
+  FieldComponentProps,
+  FieldComponentRenderProps,
+} from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { useTranslation } from "react-i18next";
 import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
@@ -77,7 +80,12 @@ export type PasswordFieldProps = {
    */
   value?: string;
 } & FieldComponentProps &
-  HtmlProps;
+  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
+
+type FieldRenderProps = Partial<
+  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
+> &
+  Pick<FieldComponentRenderProps, "id" | "labelElementId">;
 
 const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (
@@ -106,14 +114,14 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       translate,
       value,
     },
-    ref
+    ref,
   ) => {
     const { t } = useTranslation();
     const [inputType, setInputType] = useState("password");
 
     const togglePasswordVisibility = useCallback(() => {
       setInputType((inputType) =>
-        inputType === "password" ? "text" : "password"
+        inputType === "password" ? "text" : "password",
       );
     }, []);
 
@@ -121,7 +129,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       getControlState({
         controlledValue: value,
         uncontrolledValue: defaultValue,
-      })
+      }),
     );
     const inputValues = useInputValues({
       defaultValue,
@@ -139,7 +147,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           },
         };
       },
-      []
+      [],
     );
 
     const onChange = useCallback<
@@ -148,11 +156,16 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       (event) => {
         onChangeProp?.(event);
       },
-      [onChangeProp]
+      [onChangeProp],
     );
 
     const renderFieldComponent = useCallback(
-      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
+      ({
+        ariaDescribedBy,
+        errorMessageElementId,
+        id,
+        labelElementId,
+      }: FieldRenderProps) => (
         <InputBase
           {...inputValues}
           aria-describedby={ariaDescribedBy}
@@ -216,7 +229,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         ref,
         testId,
         translate,
-      ]
+      ],
     );
 
     return (
@@ -235,7 +248,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         renderFieldComponent={renderFieldComponent}
       />
     );
-  }
+  },
 );
 
 const MemoizedPasswordField = memo(PasswordField);