@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/src/Callout.tsx

@@ -20,46 +20,34 @@ import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 import { Paragraph } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
 
-export const CalloutTestSelectors = {
-  feature: {
+export const CalloutTestSelector = {
+  accessibleText: {
+    text: "description",
+    title: "label",
+  },
+  children: {
     link: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${linkText}",
+          linkText: "name",
         },
         role: "link",
-        templateVariableNames: ["linkText"],
-      },
-    },
-    text: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["text"],
-        text: "${text}",
-      },
-    },
-    title: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["title"],
-        text: "${title}",
       },
     },
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${title}",
+      title: "name",
     },
-    role: "${role}",
-    templateVariableNames: ["role", "title"],
+    role: ["alert", "status"],
   },
-} as const satisfies FeatureTestSelector;
+} as const satisfies TestSelector;
 
 export const calloutRoleValues = ["status", "alert"] as const;
 export const calloutSeverityValues = [

package/src/Checkbox.tsx

@@ -61,7 +61,10 @@ export type CheckboxProps = {
    * Callback fired when the blur event happens. Provides event value.
    */
   onBlur?: MuiFormControlLabelProps["onBlur"];
-} & Pick<FieldComponentProps, "hint" | "id" | "isDisabled" | "name"> &
+} & Pick<
+  FieldComponentProps,
+  "hint" | "id" | "isDisabled" | "isReadOnly" | "name"
+> &
   CheckedFieldProps<MuiCheckboxProps> &
   Pick<HtmlProps, "ariaLabel" | "ariaLabelledBy" | "testId" | "translate">;
 
@@ -74,6 +77,7 @@ const Checkbox = ({
   isDefaultChecked,
   isDisabled,
   isIndeterminate,
+  isReadOnly = false,
   isRequired,
   label: labelProp,
   hint,
@@ -102,13 +106,11 @@ const Checkbox = ({
   const localInputRef = useRef<HTMLInputElement>(null);
   useImperativeHandle(
     inputRef,
-    () => {
-      return {
-        focus: () => {
-          localInputRef.current?.focus();
-        },
-      };
-    },
+    () => ({
+      focus: () => {
+        localInputRef.current?.focus();
+      },
+    }),
     [],
   );
 
@@ -136,6 +138,16 @@ const Checkbox = ({
     [onChangeProp],
   );
 
+  const onClick = useCallback<NonNullable<MuiCheckboxProps["onClick"]>>(
+    (event) => {
+      if (isReadOnly) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [isReadOnly],
+  );
+
   const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
     (event) => {
       onBlurProp?.(event);
@@ -143,9 +155,22 @@ const Checkbox = ({
     [onBlurProp],
   );
 
+  const checkboxStyles = useMemo(
+    () => ({
+      alignItems: "flex-start",
+      ...(isReadOnly && {
+        cursor: "default",
+        "& .MuiTypography-root": {
+          cursor: "default",
+        },
+      }),
+    }),
+    [isReadOnly],
+  );
+
   return (
     <FormControlLabel
-      sx={{ alignItems: "flex-start" }}
+      sx={checkboxStyles}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       className={
@@ -160,9 +185,14 @@ const Checkbox = ({
           {...inputValues}
           indeterminate={isIndeterminate}
           onChange={onChange}
+          onClick={
+            onClick as unknown as React.MouseEventHandler<HTMLButtonElement>
+          }
           required={isRequired}
           inputProps={{
             "data-se": testId,
+            "aria-readonly": isReadOnly,
+            readOnly: isReadOnly,
           }}
           disabled={isDisabled}
           inputRef={localInputRef}

package/src/CheckboxGroup.tsx

@@ -10,9 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import React, { memo, ReactNode, useCallback, useMemo } from "react";
 import { FormGroup as MuiFormGroup } from "@mui/material";
-import { memo, ReactNode, useCallback } from "react";
-
+import { CheckboxProps } from "./Checkbox";
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -41,6 +41,7 @@ export type CheckboxGroupProps = {
   | "HintLinkComponent"
   | "id"
   | "isDisabled"
+  | "isReadOnly"
 > &
   Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
 
@@ -61,11 +62,26 @@ const CheckboxGroup = ({
   HintLinkComponent,
   id: idOverride,
   isDisabled,
+  isReadOnly = false,
   isRequired = false,
   label,
   testId,
   translate,
 }: CheckboxGroupProps) => {
+  const memoizedChildren = useMemo(
+    () =>
+      React.Children.map(children, (child) => {
+        if (React.isValidElement<CheckboxProps>(child)) {
+          return React.cloneElement(child, {
+            isReadOnly,
+            isDisabled: isDisabled || child.props.isDisabled,
+          });
+        }
+        return child;
+      }),
+    [children, isReadOnly, isDisabled],
+  );
+
   const renderFieldComponent = useCallback(
     ({
       ariaDescribedBy,
@@ -81,10 +97,10 @@ const CheckboxGroup = ({
         id={id}
         translate={translate}
       >
-        {children}
+        {memoizedChildren}
       </MuiFormGroup>
     ),
-    [children, testId, translate],
+    [memoizedChildren, testId, translate],
   );
 
   return (

package/src/DataTable/DataTable.tsx

@@ -102,6 +102,14 @@ export type DataTableRenderDetailPanelType = {
 };
 
 export type DataTableProps = {
+  /**
+   * An optional action button above the table.
+   */
+  additionalActionButton?: ReactNode;
+  /**
+   * MenuItems that go in an optional action menu above the table.
+   */
+  additionalActionMenuItems?: ReactNode;
   /**
    * Menu items to include in the bulk actions menu, which appears above the table if a row or rows are selected
    */
@@ -314,6 +322,8 @@ const ScrollableTableContainer = styled("div", {
 );
 
 const DataTable = ({
+  additionalActionButton,
+  additionalActionMenuItems,
   bulkActionMenuItems,
   columns,
   currentPage = 1,
@@ -876,7 +886,9 @@ const DataTable = ({
         hasFilters ||
         hasChangeableDensity ||
         hasColumnVisibility ||
-        bulkActionMenuItems) && (
+        bulkActionMenuItems ||
+        additionalActionButton ||
+        additionalActionMenuItems) && (
         <Box sx={{ marginBottom: 5 }}>
           <DataFilters
             onChangeSearch={hasSearch ? setSearch : undefined}
@@ -898,6 +910,17 @@ const DataTable = ({
                   setColumnVisibility={setColumnVisibility}
                 />
                 {bulkActionMenuItems && bulkActionMenuButton}
+                {additionalActionButton}
+                {additionalActionMenuItems && (
+                  <MenuButton
+                    endIcon={<MoreIcon />}
+                    ariaLabel={t("table.moreactions.arialabel")}
+                    buttonVariant="secondary"
+                    menuAlignment="right"
+                  >
+                    {additionalActionMenuItems}
+                  </MenuButton>
+                )}
               </>
             }
           />

package/src/DataTable/useScrollIndication.tsx

@@ -17,6 +17,7 @@ import {
   useEffect,
   useRef,
 } from "react";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
 
 type UseScrollIndicationProps = {
   tableOuterContainer: HTMLDivElement | null;
@@ -36,6 +37,8 @@ export const useScrollIndication = ({
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
   const checkScrollIndicators = useCallback(() => {
     if (!tableOuterContainer || !tableInnerContainer) return;
 
@@ -57,7 +60,10 @@ export const useScrollIndication = ({
   ]);
 
   useEffect(() => {
-    if (resizeObserverRef.current) return; // Avoid creating multiple observers
+    // Avoid creating multiple observers or if ResizeObserver is unsupported
+    if (typeof ResizeObserver === "undefined" || resizeObserverRef.current) {
+      return;
+    }
 
     let debounceTimer: ReturnType<typeof setTimeout>;
 
@@ -73,14 +79,14 @@ export const useScrollIndication = ({
 
         setTableInnerContainerWidth(
           tableInnerContainer?.clientWidth
-            ? `${tableInnerContainer.clientWidth}px`
+            ? `${tableInnerContainer.clientWidth - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` // Account for the border on the outer container
             : "100%",
         );
       }, 100); // debounce delay
     });
 
-    if (tableOuterContainer) {
-      resizeObserverRef.current.observe(tableOuterContainer);
+    if (tableOuterContainer && tableOuterContainer.parentElement) {
+      resizeObserverRef.current.observe(tableOuterContainer.parentElement);
     }
 
     return () => {
@@ -101,6 +107,7 @@ export const useScrollIndication = ({
     tableInnerContainer,
     setIsTableContainerScrolledToStart,
     setIsTableContainerScrolledToEnd,
+    odysseyDesignTokens.BorderWidthMain,
   ]);
 
   useEffect(() => {

package/src/Field.tsx

@@ -11,12 +11,10 @@
  */
 
 import { memo, ReactElement, useMemo } from "react";
-
 import {
   FormControl as MuiFormControl,
   FormLabel as MuiFormLabel,
 } from "@mui/material";
-
 import { FieldComponentProps } from "./FieldComponentProps";
 import { FieldError } from "./FieldError";
 import { FieldHint } from "./FieldHint";
@@ -35,6 +33,7 @@ export type RenderFieldComponentProps = {
   errorMessageElementId?: string;
   id: string;
   labelElementId: string;
+  isReadOnly?: boolean;
 };
 
 export type FieldProps = {
@@ -75,6 +74,7 @@ export type FieldProps = {
     errorMessageElementId,
     id,
     labelElementId,
+    isReadOnly,
   }: RenderFieldComponentProps) => ReactElement;
 };
 
@@ -91,6 +91,7 @@ const Field = ({
   isFullWidth = false,
   isRadioGroup = false,
   isOptional = false,
+  isReadOnly = false,
   label,
   renderFieldComponent,
 }: FieldProps &
@@ -104,6 +105,7 @@ const Field = ({
     | "isDisabled"
     | "isFullWidth"
     | "isOptional"
+    | "isReadOnly"
   > &
   Pick<HtmlProps, "ariaDescribedBy">) => {
   const { t } = useTranslation();
@@ -167,6 +169,7 @@ const Field = ({
         errorMessageElementId,
         id,
         labelElementId,
+        isReadOnly,
       })}
 
       {(errorMessage || errorMessageList) && (

package/src/{labs → FileUploader}/FileUploadPreview.tsx

@@ -15,7 +15,7 @@ import styled from "@emotion/styled";
 import { IconButton } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-import { FileUploadProps } from "./FileUpload";
+import { FileUploaderProps } from "./FileUploader";
 import {
   useOdysseyDesignTokens,
   DesignTokens,
@@ -25,7 +25,7 @@ import { MuiPropsContext, MuiPropsContextType } from "../MuiPropsContext";
 import { Tooltip } from "../Tooltip";
 
 const PreviewContainer = styled.div<{
-  isDisabled: FileUploadProps["isDisabled"];
+  isDisabled: FileUploaderProps["isDisabled"];
   odysseyDesignTokens: DesignTokens;
 }>(({ isDisabled, odysseyDesignTokens }) => ({
   color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : "inherit",
@@ -117,7 +117,7 @@ const UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {
 
 type FileUploadPreviewProps = {
   fileNames: string[];
-  isDisabled: FileUploadProps["isDisabled"];
+  isDisabled: FileUploaderProps["isDisabled"];
   onFileRemove?: (name: string) => void;
 };
 

package/src/{labs/FileUpload.tsx → FileUploader/FileUploader.tsx}

@@ -108,7 +108,7 @@ const CenterAlignedSupportText = styled.div({
   textAlign: "center",
 });
 
-export type FileUploadProps = {
+export type FileUploaderProps = {
   /**
    * an array of file types the user is able to upload. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers for examples
    */
@@ -140,7 +140,7 @@ export type FileUploadProps = {
   | "isOptional"
 >;
 
-const FileUpload = ({
+const FileUploader = ({
   acceptedFileTypes,
   errorMessage,
   id,
@@ -153,7 +153,7 @@ const FileUpload = ({
   onChange,
   type,
   variant,
-}: FileUploadProps) => {
+}: FileUploaderProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -304,7 +304,8 @@ const FileUpload = ({
   );
 };
 
-const MemoizedFileUpload = memo(FileUpload);
-MemoizedFileUpload.displayName = "FileUpload";
+const MemoizedFileUploader = memo(FileUploader);
+MemoizedFileUploader.displayName = "FileUploader";
 
-export { MemoizedFileUpload as FileUpload };
+export { MemoizedFileUploader as FileUpload };
+export { MemoizedFileUploader as FileUploader };

package/src/FileUploader/index.ts

@@ -0,0 +1,13 @@
+/*!
+ * 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.
+ */
+
+export * from "./FileUploader";

package/src/OdysseyCacheProvider.test.tsx

@@ -11,6 +11,7 @@
  */
 
 import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import { Button } from "./";
 import { OdysseyCacheProvider } from "./OdysseyCacheProvider";
 

package/src/OdysseyCacheProvider.tsx

@@ -26,15 +26,19 @@ export type OdysseyCacheProviderProps = {
   /**
    * Emotion caches styles into the style element.
    * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.
+   * @deprecated Use `EmotionRootElement` instead. This was incorrectly configured as an `HTMLStyleElement`, but then we're rendering `<style>` inside `<style>`. We need this to be a `<div>` instead.
    */
   emotionRoot?: HTMLStyleElement;
+  /**
+   * Emotion adds `<style>` elements into this DOM node. Normally, Emotion puts these in `document.head`.
+   * This is useful if you want to render into a Shadow DOM or iframe.
+   */
+  emotionRootElement?: HTMLElement;
   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;
@@ -44,6 +48,7 @@ export type OdysseyCacheProviderProps = {
 const OdysseyCacheProvider = ({
   children,
   emotionRoot,
+  emotionRootElement,
   hasShadowDom: hasShadowDomProp,
   nonce,
   shadowDomElement,
@@ -55,14 +60,23 @@ const OdysseyCacheProvider = ({
 
   const emotionCache = useMemo(() => {
     return createCache({
-      ...(emotionRoot && { container: emotionRoot }),
+      ...((emotionRootElement || emotionRoot) && {
+        container: emotionRootElement || emotionRoot,
+      }),
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
       prepend: true,
       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, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);
+  }, [
+    emotionRoot,
+    emotionRootElement,
+    hasShadowDom,
+    nonce,
+    stylisPlugins,
+    uniqueAlphabeticalId,
+  ]);
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 };

package/src/OdysseyProvider.tsx

@@ -27,6 +27,10 @@ import {
 } from "./OdysseyTranslationProvider";
 import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
 
+const scopedCssBaselineStyles = {
+  height: "inherit",
+};
+
 export type OdysseyProviderProps<
   SupportedLanguages extends string = DefaultSupportedLanguages,
 > = OdysseyCacheProviderProps &
@@ -39,7 +43,9 @@ const OdysseyProvider = <SupportedLanguages extends string>({
   children,
   designTokensOverride,
   emotionRoot,
+  emotionRootElement,
   shadowDomElement,
+  shadowRootElement,
   languageCode,
   nonce,
   stylisPlugins,
@@ -47,17 +53,19 @@ const OdysseyProvider = <SupportedLanguages extends string>({
   translationOverrides,
 }: OdysseyProviderProps<SupportedLanguages>) => (
   <OdysseyCacheProvider
-    nonce={nonce}
     emotionRoot={emotionRoot}
-    hasShadowDom={Boolean(shadowDomElement)}
+    emotionRootElement={emotionRootElement}
+    hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}
+    nonce={nonce}
     stylisPlugins={stylisPlugins}
   >
     <OdysseyThemeProvider
       designTokensOverride={designTokensOverride}
-      shadowDomElement={shadowDomElement}
+      shadowRootElement={shadowRootElement || shadowDomElement}
       themeOverride={themeOverride}
     >
-      <ScopedCssBaseline>
+      {/* This component creates a div; for flexibility of layout of children, make it inherit its parent's height */}
+      <ScopedCssBaseline sx={scopedCssBaselineStyles}>
         <OdysseyTranslationProvider<SupportedLanguages>
           languageCode={languageCode}
           translationOverrides={translationOverrides}

package/src/OdysseyThemeProvider.tsx

@@ -25,7 +25,9 @@ import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
 export type OdysseyThemeProviderProps = {
   children: ReactNode;
   designTokensOverride?: DesignTokensOverride;
+  /** @deprecated Use `shadowRootElement` instead. */
   shadowDomElement?: HTMLDivElement | HTMLElement | undefined;
+  shadowRootElement?: HTMLDivElement | HTMLElement;
   themeOverride?: ThemeOptions;
 };
 
@@ -38,19 +40,21 @@ const OdysseyThemeProvider = ({
   children,
   designTokensOverride,
   shadowDomElement,
+  shadowRootElement,
   themeOverride,
 }: OdysseyThemeProviderProps) => {
   const odysseyTokens = useMemo(
     () => ({ ...Tokens, ...designTokensOverride }),
     [designTokensOverride],
   );
+
   const odysseyTheme = useMemo(
     () =>
       createOdysseyMuiTheme({
         odysseyTokens,
-        shadowDomElement,
+        shadowRootElement: shadowRootElement || shadowDomElement,
       }),
-    [odysseyTokens, shadowDomElement],
+    [odysseyTokens, shadowDomElement, shadowRootElement],
   );
 
   const customOdysseyTheme = useMemo(