@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/src/theme/components.tsx

@@ -47,10 +47,11 @@ import {
   InformationCircleFilledIcon,
   SubtractIcon,
   WarningFilledIcon,
-} from "../icons.generated";
-import { DesignTokens } from "./theme";
+} from "../icons.generated/index.js";
+import { DesignTokens } from "./theme.js";
 import { CSSProperties } from "react";
-import { ContrastMode } from "../useContrastMode";
+import { ContrastMode } from "../useContrastMode.js";
+import { CSSObject } from "@emotion/react";
 
 //Widths used in `Drawer` component
 const drawerSizes = {
@@ -58,7 +59,7 @@ const drawerSizes = {
   temporary: "28.571rem", //~400px
 };
 
-export const components = ({
+export const getComponents = ({
   contrastMode,
   odysseyTokens,
   shadowDomElement,
@@ -82,6 +83,14 @@ export const components = ({
           borderRadius: 0,
           boxShadow: "none",
 
+          "&.MuiPaper-root.MuiAccordion-root[data-ods-variant='borderless']": {
+            border: "none",
+
+            "&::before": {
+              display: "none",
+            },
+          },
+
           "&.Mui-disabled": {
             backgroundColor: odysseyTokens.HueNeutralWhite,
             color: odysseyTokens.TypographyColorDisabled,
@@ -425,7 +434,7 @@ export const components = ({
             display: "none",
           }),
         }),
-        listbox: {
+        listbox: ({ theme }) => ({
           borderWidth: odysseyTokens.BorderWidthMain,
           borderStyle: odysseyTokens.BorderStyleMain,
           borderColor: odysseyTokens.HueNeutral200,
@@ -447,6 +456,15 @@ export const components = ({
               backgroundColor: odysseyTokens.HueNeutral100,
             },
 
+            [`&.${autocompleteClasses.focusVisible}`]: {
+              backgroundColor: "transparent",
+              boxShadow: theme.mixins.insetFocusRing,
+
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+              },
+            },
+
             [`&[aria-selected="true"]`]: {
               backgroundColor: "transparent",
               color: odysseyTokens.TypographyColorAction,
@@ -466,7 +484,7 @@ export const components = ({
             marginBlockStart: 0,
             marginBlockEnd: 0,
           },
-        },
+        }),
         loading: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
@@ -1666,10 +1684,6 @@ export const components = ({
           paddingBlockStart: odysseyTokens.Spacing5,
           paddingBlockEnd: odysseyTokens.Spacing5,
           paddingInline: odysseyTokens.Spacing6,
-
-          "& > .${ buttonClasses.root }": {
-            margin: "0 !important",
-          },
         },
       },
     },
@@ -1949,6 +1963,10 @@ export const components = ({
           ["&[data-ods-type='search']"]: {
             borderColor: odysseyTokens.HueNeutral400,
 
+            ...(contrastMode === "highContrast" && {
+              border: "none",
+            }),
+
             [`& .${inputBaseClasses.input}::placeholder`]: {
               color: odysseyTokens.TypographyColorSupport,
               opacity: 1,
@@ -2061,11 +2079,12 @@ export const components = ({
           justifyContent: "space-between",
           overflow: "unset",
           whiteSpace: "unset",
-          // @ts-expect-error: Incorrect typing in MUI
-          ...(ownerState.formControl && {
-            position: "initial",
-            transform: "none",
-          }),
+          ...(ownerState.formControl
+            ? {
+                position: "initial",
+                transform: "none",
+              }
+            : {}),
           ...(ownerState.variant === "outlined" && {
             pointerEvents: "initial",
             transform: "none",
@@ -2076,7 +2095,7 @@ export const components = ({
           }),
           [`& > .${typographyClasses.root}`]: {
             lineHeight: "unset",
-          },
+          } satisfies CSSObject,
         }),
       },
     },
@@ -2184,7 +2203,7 @@ export const components = ({
       styleOverrides: {
         list: {
           paddingBlock: odysseyTokens.Spacing2,
-          paddingInline: odysseyTokens.Spacing2,
+          paddingInline: `${odysseyTokens.Spacing2} !important`,
           borderRadius: odysseyTokens.BorderRadiusMain,
         },
         root: {
@@ -2198,7 +2217,7 @@ export const components = ({
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
+        root: ({ ownerState, theme }) => ({
           gap: odysseyTokens.Spacing2,
           minHeight: "unset",
           maxWidth: `calc(55ch - ${odysseyTokens.Spacing4})`,
@@ -2244,6 +2263,7 @@ export const components = ({
           [`&.${menuItemClasses.selected}`]: {
             backgroundColor: "transparent",
             color: odysseyTokens.TypographyColorAction,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
 
             "&:hover": {
               backgroundColor: odysseyTokens.PalettePrimaryLighter,
@@ -2252,6 +2272,33 @@ export const components = ({
                 backgroundColor: odysseyTokens.PalettePrimaryLighter,
               },
             },
+
+            [`&.${menuItemClasses.focusVisible}`]: {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              color: odysseyTokens.TypographyColorAction,
+
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+
+                "@media (hover: none)": {
+                  backgroundColor: odysseyTokens.PalettePrimaryLighter,
+                },
+              },
+            },
+          },
+
+          [`&.${menuItemClasses.focusVisible}`]: {
+            backgroundColor: "transparent",
+            boxShadow: theme.mixins.insetFocusRing,
+
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+
+              // Reset on touch devices, it doesn't add specificity
+              "@media (hover: none)": {
+                backgroundColor: "transparent",
+              },
+            },
           },
 
           "&[data-empty='true']": {
@@ -2490,18 +2537,20 @@ export const components = ({
       },
       styleOverrides: {
         root: ({ ownerState }) => ({
-          ...(ownerState?.inputProps?.readOnly && {
-            "&.MuiInputBase-root": {
-              backgroundColor: odysseyTokens.HueNeutral50,
-              borderColor: odysseyTokens.HueNeutral200,
-              "&:hover": {
-                backgroundColor: odysseyTokens.HueNeutral50,
-              },
-              "&.Mui-focused": {
-                borderColor: odysseyTokens.PalettePrimaryMain,
-              },
-            },
-          }),
+          ...(ownerState?.inputProps?.readOnly
+            ? {
+                "&.MuiInputBase-root": {
+                  backgroundColor: odysseyTokens.HueNeutral50,
+                  borderColor: odysseyTokens.HueNeutral200,
+                  "&:hover": {
+                    backgroundColor: odysseyTokens.HueNeutral50,
+                  },
+                  "&.Mui-focused": {
+                    borderColor: odysseyTokens.PalettePrimaryMain,
+                  },
+                },
+              }
+            : {}),
           "& .MuiSelect-icon": {
             right: "unset",
             insetInlineEnd: odysseyTokens.Spacing3,
@@ -2532,14 +2581,16 @@ export const components = ({
             display: "none",
           },
 
-          ...(ownerState?.inputProps?.readOnly && {
-            color: odysseyTokens.HueNeutral700,
-            cursor: "default",
-            "&:focus": {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.PalettePrimaryMain,
-            },
-          }),
+          ...(ownerState?.inputProps?.readOnly
+            ? {
+                color: odysseyTokens.HueNeutral700,
+                cursor: "default",
+                "&:focus": {
+                  backgroundColor: "transparent",
+                  borderColor: odysseyTokens.PalettePrimaryMain,
+                },
+              }
+            : {}),
         }),
       },
     },

package/src/theme/createOdysseyMuiTheme.ts

@@ -13,17 +13,17 @@
 import { createTheme } from "@mui/material/styles";
 import * as Tokens from "@okta/odyssey-design-tokens";
 
-import { components } from "./components";
-import { mixins } from "./mixins";
-import { palette } from "./palette";
-import { shape } from "./shape";
-import { spacing } from "./spacing";
-import { typography } from "./typography";
-import "./components.types";
-import "./mixins.types";
-import "./palette.types";
-import "./typography.types";
-import { type ContrastMode, defaultContrast } from "../useContrastMode";
+import { getComponents } from "./components.js";
+import { mixins } from "./mixins.js";
+import { palette } from "./palette.js";
+import { shape } from "./shape.js";
+import { spacing } from "./spacing.js";
+import { typography } from "./typography.js";
+import "./components.types.js";
+import "./mixins.types.js";
+import "./palette.types.js";
+import "./typography.types.js";
+import { type ContrastMode, defaultContrast } from "../useContrastMode.js";
 
 export type DesignTokens = typeof Tokens;
 export type DesignTokensOverride = Partial<typeof Tokens>;
@@ -41,7 +41,7 @@ export const createOdysseyMuiTheme = ({
   shadowRootElement?: HTMLElement;
 }) =>
   createTheme({
-    components: components({
+    components: getComponents({
       contrastMode,
       odysseyTokens,
       shadowRootElement: shadowRootElement || shadowDomElement,

package/src/theme/index.ts

@@ -10,4 +10,4 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export * from "./theme";
+export * from "./theme.js";

package/src/theme/mixins.ts

@@ -12,7 +12,7 @@
 
 import type { ThemeOptions } from "@mui/material";
 
-import { DesignTokens } from "./theme";
+import { DesignTokens } from "./theme.js";
 
 export const mixins = ({
   odysseyTokens,
@@ -24,5 +24,6 @@ export const mixins = ({
     borderRadius: odysseyTokens.BorderRadiusMain,
     borderStyle: odysseyTokens.BorderStyleMain,
     borderWidth: odysseyTokens.BorderWidthMain,
+    insetFocusRing: `inset 0 0 0 2px ${odysseyTokens.PalettePrimaryMain}`,
   };
 };

package/src/theme/mixins.types.ts

@@ -16,6 +16,7 @@ declare module "@mui/material/styles" {
     borderStyle?: string;
     borderWidth?: string;
     maxWidth?: string;
+    insetFocusRing?: string;
   }
 
   interface MixinsOptions {
@@ -23,6 +24,7 @@ declare module "@mui/material/styles" {
     borderStyle?: string;
     borderWidth?: string;
     maxWidth?: string;
+    insetFocusRing?: string;
   }
 }
 

package/src/theme/palette.ts

@@ -12,7 +12,7 @@
 
 import type { ThemeOptions } from "@mui/material";
 
-import { DesignTokens } from "./theme";
+import { DesignTokens } from "./theme.js";
 
 export const palette = ({
   odysseyTokens,

package/src/theme/shape.ts

@@ -12,7 +12,7 @@
 
 import type { ThemeOptions } from "@mui/material";
 
-import { DesignTokens } from "./theme";
+import { DesignTokens } from "./theme.js";
 
 export const shape = ({
   odysseyTokens,

package/src/theme/spacing.ts

@@ -12,7 +12,7 @@
 
 import type { ThemeOptions } from "@mui/material";
 
-import type { DesignTokens } from "./theme";
+import type { DesignTokens } from "./theme.js";
 
 export const spacing = ({
   odysseyTokens,

package/src/theme/theme.ts

@@ -10,4 +10,4 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export * from "./createOdysseyMuiTheme";
+export * from "./createOdysseyMuiTheme.js";

package/src/theme/typography.ts

@@ -12,7 +12,7 @@
 
 import type { ThemeOptions } from "@mui/material";
 
-import { DesignTokens } from "./theme";
+import { DesignTokens } from "./theme.js";
 
 export const typography = ({
   odysseyTokens,

package/src/theme/useContrastMode.test.tsx

@@ -10,34 +10,35 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { render, waitFor, act } from "@testing-library/react";
+import * as Tokens from "@okta/odyssey-design-tokens";
+import { act, render, renderHook, waitFor } from "@testing-library/react";
+import { MockInstance } from "vitest";
+
+import { hexToRgb } from "../hexToRgb.js";
 import {
   ContrastModeContext,
   defaultParentBackgroundColor,
   getBackgroundColor,
   getElementComputedBackgroundColor,
-  hexToRgb,
   hueNeutral50Rgb,
   isTransparentColor,
   normalizeBackgroundColor,
   normalizeRgbaToRgb,
   useContrastMode,
   useContrastModeContext,
-} from "../useContrastMode";
-import * as Tokens from "@okta/odyssey-design-tokens";
-import { renderHook } from "@testing-library/react";
+} from "../useContrastMode.js";
 
 describe("useContrastMode and related functions", () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     document.documentElement.style.setProperty("backgroundColor", null);
   });
 
   describe("useContrastMode hook", () => {
-    let getComputedStyleSpy: jest.SpyInstance;
+    let getComputedStyleSpy: MockInstance<typeof window.getComputedStyle>;
 
     beforeEach(() => {
-      getComputedStyleSpy = jest
+      getComputedStyleSpy = vi
         .spyOn(window, "getComputedStyle")
         .mockImplementation(
           () =>
@@ -57,6 +58,7 @@ describe("useContrastMode and related functions", () => {
           </ContrastModeContext.Provider>
         ),
       });
+
       expect(result.current.parentBackgroundColor).toBe(
         defaultParentBackgroundColor,
       );
@@ -124,25 +126,18 @@ describe("useContrastMode and related functions", () => {
     });
 
     it("should clean up observers and event listeners on unmount", () => {
-      const disconnect = jest.fn();
-      const observe = jest.fn();
-      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
-      const removeEventListenerSpy = jest.spyOn(
-        document,
-        "removeEventListener",
-      );
-
-      const mockMutationObserver = jest.fn<
-        MutationObserver,
-        [MutationCallback]
-      >(() => ({
-        disconnect,
-        observe,
-        takeRecords: jest.fn(),
-      }));
-
-      const originalMutationObserver = global.MutationObserver;
-      global.MutationObserver = mockMutationObserver;
+      const observeSpy = vi
+        .spyOn(MutationObserver.prototype, "observe")
+        .mockImplementation(vi.fn());
+      const disconnectSpy = vi
+        .spyOn(MutationObserver.prototype, "disconnect")
+        .mockImplementation(vi.fn());
+      const takeRecordsSpy = vi
+        .spyOn(MutationObserver.prototype, "takeRecords")
+        .mockImplementation(vi.fn());
+
+      const addEventListenerSpy = vi.spyOn(document, "addEventListener");
+      const removeEventListenerSpy = vi.spyOn(document, "removeEventListener");
 
       const TestComponent = () => {
         const { contrastContainerRef } = useContrastMode({});
@@ -157,23 +152,26 @@ describe("useContrastMode and related functions", () => {
 
       unmount();
 
-      expect(disconnect).toHaveBeenCalled();
+      expect(disconnectSpy).toHaveBeenCalled();
       expect(removeEventListenerSpy).toHaveBeenCalledWith(
         "transitionend",
         expect.any(Function),
       );
 
-      global.MutationObserver = originalMutationObserver;
       addEventListenerSpy.mockRestore();
       removeEventListenerSpy.mockRestore();
+
+      disconnectSpy.mockRestore();
+      observeSpy.mockRestore();
+      takeRecordsSpy.mockRestore();
     });
   });
 
   describe("getBackgroundColor", () => {
-    let getComputedStyleSpy: jest.SpyInstance;
+    let getComputedStyleSpy: MockInstance<typeof window.getComputedStyle>;
 
     beforeEach(() => {
-      getComputedStyleSpy = jest
+      getComputedStyleSpy = vi
         .spyOn(window, "getComputedStyle")
         .mockImplementation(
           () =>
@@ -191,7 +189,7 @@ describe("useContrastMode and related functions", () => {
     });
 
     it("returns the background color of the element if it is not transparent", () => {
-      const getComputedStyleSpy = jest
+      const getComputedStyleSpy = vi
         .spyOn(window, "getComputedStyle")
         .mockImplementation(
           (element: Element) =>
@@ -211,7 +209,7 @@ describe("useContrastMode and related functions", () => {
     });
 
     it("returns defaultParentBackgroundColor if no non-transparent background is found", () => {
-      const getComputedStyleSpy = jest
+      const getComputedStyleSpy = vi
         .spyOn(window, "getComputedStyle")
         .mockImplementation(
           () =>
@@ -230,7 +228,7 @@ describe("useContrastMode and related functions", () => {
       parent.appendChild(child);
       parent.style.setProperty("background-color", "rgb(0, 255, 0)");
 
-      const getComputedStyleSpy = jest
+      const getComputedStyleSpy = vi
         .spyOn(window, "getComputedStyle")
         .mockImplementation(
           (el: Element) =>
@@ -246,7 +244,7 @@ describe("useContrastMode and related functions", () => {
     });
 
     it("returns HueNeutral50 token for its RGB equivalent", () => {
-      const getComputedStyleSpy = jest
+      const getComputedStyleSpy = vi
         .spyOn(window, "getComputedStyle")
         .mockImplementation(
           () => ({ backgroundColor: hueNeutral50Rgb }) as CSSStyleDeclaration,
@@ -267,7 +265,7 @@ describe("useContrastMode and related functions", () => {
       parent.appendChild(child);
       grandparent.style.setProperty("backgroundColor", "rgb(0, 0, 255)");
 
-      const getComputedStyleSpy = jest
+      const getComputedStyleSpy = vi
         .spyOn(window, "getComputedStyle")
         .mockImplementation(
           (el: Element) =>
@@ -284,36 +282,35 @@ describe("useContrastMode and related functions", () => {
   });
 
   describe("MutationObserver functionality", () => {
-    let originalAddEventListener: typeof document.addEventListener;
-    let originalRemoveEventListener: typeof document.removeEventListener;
+    let addEventListenerSpy: MockInstance<typeof document.addEventListener>;
+    let removeEventListenerSpy: MockInstance<
+      typeof document.removeEventListener
+    >;
 
     beforeEach(() => {
-      originalAddEventListener = document.addEventListener;
-      originalRemoveEventListener = document.removeEventListener;
-      document.addEventListener = jest.fn();
-      document.removeEventListener = jest.fn();
+      addEventListenerSpy = vi
+        .spyOn(document, "addEventListener")
+        .mockImplementation(vi.fn());
+      removeEventListenerSpy = vi
+        .spyOn(document, "removeEventListener")
+        .mockImplementation(vi.fn());
     });
 
     afterEach(() => {
-      document.addEventListener = originalAddEventListener;
-      document.removeEventListener = originalRemoveEventListener;
+      addEventListenerSpy.mockRestore();
+      removeEventListenerSpy.mockRestore();
     });
 
     it("should clean up observers and event listeners on unmount", () => {
-      const disconnect = jest.fn();
-      const observe = jest.fn();
-
-      const mockMutationObserver = jest.fn<
-        MutationObserver,
-        [MutationCallback]
-      >(() => ({
-        disconnect,
-        observe,
-        takeRecords: jest.fn(),
-      }));
-
-      const originalMutationObserver = global.MutationObserver;
-      global.MutationObserver = mockMutationObserver;
+      const observeSpy = vi
+        .spyOn(MutationObserver.prototype, "observe")
+        .mockImplementation(vi.fn());
+      const disconnectSpy = vi
+        .spyOn(MutationObserver.prototype, "disconnect")
+        .mockImplementation(vi.fn());
+      const takeRecordsSpy = vi
+        .spyOn(MutationObserver.prototype, "takeRecords")
+        .mockImplementation(vi.fn());
 
       const TestComponent = () => {
         const { contrastContainerRef } = useContrastMode({});
@@ -328,13 +325,15 @@ describe("useContrastMode and related functions", () => {
 
       unmount();
 
-      expect(disconnect).toHaveBeenCalled();
-      expect(document.removeEventListener).toHaveBeenCalledWith(
+      expect(disconnectSpy).toHaveBeenCalled();
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
         "transitionend",
         expect.any(Function),
       );
 
-      global.MutationObserver = originalMutationObserver;
+      disconnectSpy.mockRestore();
+      observeSpy.mockRestore();
+      takeRecordsSpy.mockRestore();
     });
   });
 
@@ -359,7 +358,7 @@ describe("useContrastMode and related functions", () => {
     const child = document.createElement("div");
     parent.appendChild(child);
 
-    const getComputedStyleSpy = jest
+    const getComputedStyleSpy = vi
       .spyOn(window, "getComputedStyle")
       .mockImplementation(
         (el: Element) =>
@@ -378,19 +377,21 @@ describe("useContrastMode and related functions", () => {
   describe("Color utility functions", () => {
     describe("hexToRgb", () => {
       it("converts black hex to rgb", () => {
-        expect(hexToRgb("#000000")).toBe("rgb(0, 0, 0)");
+        expect(hexToRgb("#000000").asFormattedString).toBe("rgb(0, 0, 0)");
       });
 
       it("converts white hex to rgb", () => {
-        expect(hexToRgb("#ffffff")).toBe("rgb(255, 255, 255)");
+        expect(hexToRgb("#ffffff").asFormattedString).toBe(
+          "rgb(255, 255, 255)",
+        );
       });
 
       it("converts mixed color hex to rgb", () => {
-        expect(hexToRgb("#ff0088")).toBe("rgb(255, 0, 136)");
+        expect(hexToRgb("#ff0088").asFormattedString).toBe("rgb(255, 0, 136)");
       });
 
       it("correctly converts HueNeutral50 token to rgb", () => {
-        const result = hexToRgb(Tokens.HueNeutral50);
+        const result = hexToRgb(Tokens.HueNeutral50).asFormattedString;
         expect(result).toBe(hueNeutral50Rgb);
       });
     });
@@ -462,10 +463,10 @@ describe("useContrastMode and related functions", () => {
     });
 
     describe("getElementComputedBackgroundColor", () => {
-      let getComputedStyleSpy: jest.SpyInstance;
+      let getComputedStyleSpy: MockInstance<typeof window.getComputedStyle>;
 
       beforeEach(() => {
-        getComputedStyleSpy = jest.spyOn(window, "getComputedStyle");
+        getComputedStyleSpy = vi.spyOn(window, "getComputedStyle");
       });
 
       afterEach(() => {