@okta/odyssey-react-mui 1.15.9 → 1.20.0

package/src/DataTable/index.tsx

@@ -16,8 +16,8 @@ export {
   type DataTableProps,
   type DataTableGetDataType,
   type DataTableOnReorderRowsType,
+  type DataTableRenderDetailPanelType,
 } from "./DataTable";
-export { DataTableEmptyState } from "./DataTableEmptyState";
 export { densityValues } from "./constants";
 export type {
   MRT_ColumnFiltersState as DataTableFiltersState,

package/src/Dialog.tsx

@@ -21,12 +21,13 @@ import {
 import { Button } from "./Button";
 import { CloseIcon } from "./icons.generated";
 import {
+  cloneElement,
   memo,
-  ReactNode,
   useState,
   useEffect,
   useRef,
   ReactElement,
+  ReactNode,
 } from "react";
 
 import type { HtmlProps } from "./HtmlProps";
@@ -36,32 +37,48 @@ export type DialogProps = {
    * @deprecated `aria-label` for close button comes from translation file
    */
   ariaLabel?: string;
+
   /**
-   * An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.
+   * An optional Button object to be situated in the Dialog footer as the primary call to action.
    */
   primaryCallToActionComponent?: ReactElement<typeof Button>;
   /**
-   * An optional Button object to be situated in the Dialog footer, alongside the `callToActionPrimaryComponent`.
+   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.
+   */
+  callToActionFirstComponent?: ReactElement<typeof Button>;
+  /**
+   * An optional Button object to be situated in the Dialog footer as the secondary call to action, alongside the `primaryCallToActionComponent`.
    */
   secondaryCallToActionComponent?: ReactElement<typeof Button>;
   /**
-   * An optional Button object to be situated in the Dialog footer, alongside the other two `callToAction` components.
+   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.
+   */
+  callToActionSecondComponent?: ReactElement<typeof Button>;
+  /**
+   * An optional Button object to be situated in the Dialog footer as the tertiary call to action, alongside the other `callToAction` components.
    */
   tertiaryCallToActionComponent?: ReactElement<typeof Button>;
+  /**
+   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.
+   */
+  callToActionLastComponent?: ReactElement<typeof Button>;
   /**
    * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.
    */
   children: ReactNode;
+
   /**
    * When set to `true`, the Dialog will be visible.
    */
   isOpen: boolean;
+
   /**
-   * Callback that controls what happens when the Dialog is dismissed
+   * Callback that controls what happens when the Dialog is dismissed.
    */
   onClose: () => void;
+
   /**
-   * The title of the Dialog
+   * The title of the Dialog.
    */
   title: string;
 } & Pick<HtmlProps, "testId" | "translate">;
@@ -70,6 +87,9 @@ const Dialog = ({
   primaryCallToActionComponent,
   secondaryCallToActionComponent,
   tertiaryCallToActionComponent,
+  callToActionFirstComponent,
+  callToActionSecondComponent,
+  callToActionLastComponent,
   children,
   isOpen,
   onClose,
@@ -111,6 +131,13 @@ const Dialog = ({
       children
     );
 
+  // Prioritize new action button format (|| used as a fallback)
+  const actionButtons = [
+    tertiaryCallToActionComponent || callToActionLastComponent,
+    secondaryCallToActionComponent || callToActionSecondComponent,
+    primaryCallToActionComponent || callToActionFirstComponent,
+  ].filter(Boolean);
+
   return (
     <MuiDialog data-se={testId} open={isOpen} onClose={onClose}>
       <DialogTitle translate={translate}>
@@ -125,7 +152,7 @@ const Dialog = ({
       </DialogTitle>
       <DialogContent
         {...(isContentScrollable && {
-          //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard
+          // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard
           tabIndex: 0,
         })}
         dividers={isContentScrollable}
@@ -134,13 +161,11 @@ const Dialog = ({
         {content}
       </DialogContent>
 
-      {(primaryCallToActionComponent ||
-        secondaryCallToActionComponent ||
-        tertiaryCallToActionComponent) && (
+      {actionButtons.length > 0 && (
         <DialogActions>
-          {tertiaryCallToActionComponent}
-          {secondaryCallToActionComponent}
-          {primaryCallToActionComponent}
+          {actionButtons.map((actionButton, index) =>
+            actionButton ? cloneElement(actionButton, { key: index }) : null,
+          )}
         </DialogActions>
       )}
     </MuiDialog>

package/src/{labs/Drawer.tsx → Drawer.tsx}

@@ -12,25 +12,26 @@
 
 import {
   memo,
+  ReactElement,
   ReactNode,
-  useState,
   useEffect,
   useMemo,
   useRef,
-  ReactElement,
+  useState,
 } from "react";
+
+import { Drawer as MuiDrawer } from "@mui/material";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
-import { Drawer as MuiDrawer } from "@mui/material";
 
-import type { HtmlProps } from "../HtmlProps";
-import { Button } from "../Button";
-import { CloseIcon } from "../icons.generated";
-import { Heading5 } from "../Typography";
+import { Button } from "./Button";
+import { CloseIcon } from "./icons.generated";
 import {
-  useOdysseyDesignTokens,
   DesignTokens,
-} from "../OdysseyDesignTokensContext";
+  useOdysseyDesignTokens,
+} from "./OdysseyDesignTokensContext";
+import { Heading5 } from "./Typography";
+import type { HtmlProps } from "./HtmlProps";
 
 export const variantValues = ["temporary", "persistent"] as const;
 

package/src/{DataTable/DataTableEmptyState.tsx → EmptyState.tsx}

@@ -11,13 +11,13 @@
  */
 
 import { ReactNode, memo } from "react";
-import { Heading4, Paragraph } from "../Typography";
-import { Box } from "../Box";
+import { Heading4, Paragraph } from "./Typography";
+import { Box } from "./Box";
 import styled from "@emotion/styled";
 import {
   useOdysseyDesignTokens,
   DesignTokens,
-} from "../OdysseyDesignTokensContext";
+} from "./OdysseyDesignTokensContext";
 
 const EmptyContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
@@ -28,37 +28,52 @@ const EmptyContainer = styled("div", {
   padding: odysseyDesignTokens.Spacing5,
   textAlign: "center",
   width: "100%",
+  alignItems: "center",
 }));
 
-export type DataTableEmptyStateProps = {
+export type EmptyStateProps = {
+  /**
+   * Main heading of the empty state
+   */
   heading: string;
-  text: string;
-  primaryButton?: ReactNode;
-  secondaryButton?: ReactNode;
+  /**
+   * A descriptive text explaining more context as to why we don't have data.
+   */
+  description: string;
+  /**
+   * Primary call to action
+   */
+  PrimaryCallToActionComponent?: ReactNode;
+  /**
+   * Secondary call to action
+   */
+  SecondaryCallToActionComponent?: ReactNode;
 };
 
-const DataTableEmptyState = ({
+const EmptyState = ({
   heading,
-  text,
-  primaryButton,
-  secondaryButton,
-}: DataTableEmptyStateProps) => {
+  description,
+  PrimaryCallToActionComponent,
+  SecondaryCallToActionComponent,
+}: EmptyStateProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+
   return (
     <EmptyContainer odysseyDesignTokens={odysseyDesignTokens}>
       <Heading4>{heading}</Heading4>
-      <Paragraph>{text}</Paragraph>
-      {(primaryButton || secondaryButton) && (
+      <Paragraph>{description}</Paragraph>
+      {(PrimaryCallToActionComponent || SecondaryCallToActionComponent) && (
         <Box sx={{ marginBlockStart: 5 }}>
-          {secondaryButton}
-          {primaryButton}
+          {SecondaryCallToActionComponent}
+          {PrimaryCallToActionComponent}
         </Box>
       )}
     </EmptyContainer>
   );
 };
 
-const MemoizedDataTableEmptyState = memo(DataTableEmptyState);
-MemoizedDataTableEmptyState.displayName = "DataTableEmptyState";
+const MemoizedEmptyState = memo(EmptyState);
+MemoizedEmptyState.displayName = "EmptyState";
 
-export { MemoizedDataTableEmptyState as DataTableEmptyState };
+export { MemoizedEmptyState as EmptyState };
+export { MemoizedEmptyState as DataTableEmptyState };

package/src/ErrorMessageList.tsx

@@ -37,7 +37,12 @@ const ErrorMessageList = ({ errorMessages }: ErrorMessageListProps) => {
   return (
     <MuiList disablePadding dense sx={listStyles}>
       {errorMessages.map((errorMessage) => (
-        <MuiListItem disablePadding dense sx={listItemStyles}>
+        <MuiListItem
+          key={errorMessage}
+          disablePadding
+          dense
+          sx={listItemStyles}
+        >
           {errorMessage}
         </MuiListItem>
       ))}

package/src/FieldError.tsx

@@ -11,14 +11,13 @@
  */
 
 import { memo } from "react";
-
 import { FormHelperText } from "@mui/material";
-import { ScreenReaderText } from "./ScreenReaderText";
-import { ErrorMessageList } from "./ErrorMessageList";
 import { useTranslation } from "react-i18next";
 
-import type { HtmlProps } from "./HtmlProps";
 import { Box } from "./Box";
+import { ErrorMessageList } from "./ErrorMessageList";
+import type { HtmlProps } from "./HtmlProps";
+import { ScreenReaderText } from "./ScreenReaderText";
 
 export type FieldErrorProps = {
   id?: string;
@@ -36,7 +35,13 @@ const FieldError = ({
   const { t } = useTranslation();
 
   return (
-    <FormHelperText data-se={testId} error id={id} translate={translate}>
+    <FormHelperText
+      component="div"
+      data-se={testId}
+      error
+      id={id}
+      translate={translate}
+    >
       <ScreenReaderText translate={translate}>{`${t(
         "fielderror.screenreader.text",
       )}:`}</ScreenReaderText>

package/src/HtmlProps.ts

@@ -51,6 +51,7 @@ export type HtmlProps = {
    * 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"];
+  ariaHidden?: HTMLAttributes<HTMLElement>["aria-hidden"];
   /**
    * The `aria-label` attribute defines a string value that labels an interactive element.
    */

package/src/MenuItem.tsx

@@ -89,6 +89,7 @@ const MenuItem = ({
       onClick={onClick}
       selected={isSelected}
       value={value}
+      tabIndex={0}
     >
       {children}
     </MuiMenuItem>

package/src/OdysseyCacheProvider.tsx

@@ -23,16 +23,20 @@ import { CacheProvider } from "@emotion/react";
 
 export type OdysseyCacheProviderProps = {
   children: ReactNode;
-  nonce?: string;
   /**
    * Emotion caches styles into the style element.
    * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.
    */
   emotionRoot?: HTMLStyleElement;
+  hasShadowDom?: boolean;
+  nonce?: string;
   /**
    * Emotion renders into this HTML element.
    * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.
    */
+  /**
+   * @deprecated Will be removed in a future Odyssey version. Use `hasShadowDomElement` instead.
+   */
   shadowDomElement?: HTMLDivElement | HTMLElement;
   stylisPlugins?: StylisPlugin[];
 };
@@ -40,21 +44,25 @@ export type OdysseyCacheProviderProps = {
 const OdysseyCacheProvider = ({
   children,
   emotionRoot,
+  hasShadowDom: hasShadowDomProp,
   nonce,
+  shadowDomElement,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
+  const hasShadowDom = hasShadowDomProp || shadowDomElement;
+
   const emotionCache = useMemo(() => {
     return createCache({
       ...(emotionRoot && { container: emotionRoot }),
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
       prepend: true,
-      speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
+      speedy: hasShadowDom ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
       ...(stylisPlugins && { stylisPlugins }),
     });
-  }, [emotionRoot, nonce, stylisPlugins, uniqueAlphabeticalId]);
+  }, [emotionRoot, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 };

package/src/OdysseyProvider.tsx

@@ -49,7 +49,7 @@ const OdysseyProvider = <SupportedLanguages extends string>({
   <OdysseyCacheProvider
     nonce={nonce}
     emotionRoot={emotionRoot}
-    shadowDomElement={shadowDomElement}
+    hasShadowDom={Boolean(shadowDomElement)}
     stylisPlugins={stylisPlugins}
   >
     <OdysseyThemeProvider

package/src/OdysseyTranslationProvider.tsx

@@ -45,30 +45,14 @@ export type OdysseyTranslationProviderProps<
   translationOverrides?: TranslationOverrides<SupportedLanguages>;
 };
 
-const formatLanguageCodeToHyphenated = <SupportedLanguages extends string>(
-  languageCode: OdysseyTranslationProviderProps<SupportedLanguages>["languageCode"],
-) => languageCode?.replaceAll("_", "-");
-
 export const OdysseyTranslationProvider = <SupportedLanguages extends string>({
   children,
   languageCode,
   translationOverrides,
 }: OdysseyTranslationProviderProps<SupportedLanguages>) => {
   useEffect(() => {
-    const normalizedLanguageCode =
-      formatLanguageCodeToHyphenated<SupportedLanguages>(languageCode);
-
-    const changeHtmlElementLanguageAttribute = () => {
-      window.document.documentElement.setAttribute(
-        "lang",
-        normalizedLanguageCode || "en",
-      );
-    };
     // Defaults to the browser's language if available otherwise `en` will be used
-    i18n.changeLanguage(
-      languageCode || window.navigator.language,
-      changeHtmlElementLanguageAttribute,
-    );
+    i18n.changeLanguage(languageCode || window.navigator.language);
   }, [languageCode]);
 
   useEffect(() => {