@okta/odyssey-react-mui 1.22.0 → 1.24.0

package/src/ContrastModeProvider.tsx

@@ -0,0 +1,131 @@
+/*!
+ * Copyright (c) 2023-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.
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useLayoutEffect,
+  useState,
+  useMemo,
+  ReactNode,
+} from "react";
+import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";
+import * as Tokens from "@okta/odyssey-design-tokens";
+
+declare module "@mui/material/styles" {
+  interface Theme {
+    odysseyContrastMode: ContrastMode;
+  }
+  interface ThemeOptions {
+    odysseyContrastMode?: ContrastMode;
+  }
+}
+
+export type ContrastMode = "lowContrast" | "highContrast";
+
+export type ContrastModeContextType = {
+  contrastMode: ContrastMode;
+  parentBackgroundColor: string;
+};
+
+const ContrastModeContext = createContext<ContrastModeContextType>({
+  contrastMode: "highContrast",
+  parentBackgroundColor: "",
+});
+
+export const useContrastContext = () => useContext(ContrastModeContext);
+
+const hexToRgb = (hex: string): string => {
+  const bigint = parseInt(hex.slice(1), 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return `rgb(${r}, ${g}, ${b})`;
+};
+
+export const useParentBackgroundColor = (ref: React.RefObject<HTMLElement>) => {
+  const [backgroundColor, setBackgroundColor] = useState("");
+
+  const hueNeutral50Rgb = useMemo(() => hexToRgb(Tokens.HueNeutral50), []);
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      let element: HTMLElement | null = ref.current;
+      while (element) {
+        const bgColor = window.getComputedStyle(element).backgroundColor;
+
+        if (bgColor !== "rgba(0, 0, 0, 0)" && bgColor !== "transparent") {
+          if (bgColor === hueNeutral50Rgb) {
+            setBackgroundColor(Tokens.HueNeutral50);
+          } else {
+            setBackgroundColor(bgColor);
+          }
+          break;
+        }
+        element = element.parentElement;
+      }
+    }
+  }, [ref, hueNeutral50Rgb]);
+
+  return backgroundColor;
+};
+
+type ContrastModeProviderProps = {
+  children: ReactNode;
+  contrastMode?: ContrastMode;
+};
+
+export const ContrastModeProvider = ({
+  children,
+  contrastMode: explicitContrastMode,
+}: ContrastModeProviderProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const parentBackgroundColor = useParentBackgroundColor(ref);
+  const [contrastMode, setContrastMode] =
+    useState<ContrastMode>("highContrast");
+
+  useLayoutEffect(() => {
+    if (explicitContrastMode) {
+      setContrastMode(explicitContrastMode);
+    } else {
+      const isLowContrast = parentBackgroundColor === Tokens.HueNeutral50;
+      setContrastMode(isLowContrast ? "lowContrast" : "highContrast");
+    }
+  }, [parentBackgroundColor, explicitContrastMode]);
+
+  const contextValue = useMemo<ContrastModeContextType>(
+    () => ({
+      contrastMode,
+      parentBackgroundColor,
+    }),
+    [contrastMode, parentBackgroundColor],
+  );
+
+  const existingTheme = useTheme();
+  const theme = useMemo(
+    () =>
+      createTheme({
+        ...existingTheme,
+        odysseyContrastMode: contrastMode,
+      }),
+    [existingTheme, contrastMode],
+  );
+
+  return (
+    <div ref={ref}>
+      <ContrastModeContext.Provider value={contextValue}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      </ContrastModeContext.Provider>
+    </div>
+  );
+};

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,7 +79,7 @@ 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
@@ -101,6 +107,7 @@ export const useScrollIndication = ({
     tableInnerContainer,
     setIsTableContainerScrolledToStart,
     setIsTableContainerScrolledToEnd,
+    odysseyDesignTokens.BorderWidthMain,
   ]);
 
   useEffect(() => {

package/src/FieldHint.tsx

@@ -11,11 +11,32 @@
  */
 
 import { memo } from "react";
-
+import styled from "@emotion/styled";
 import { FormHelperText } from "@mui/material";
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
+
+const HintLinkContainer = styled.span<{ odysseyDesignTokens: DesignTokens }>(
+  ({ odysseyDesignTokens }) => ({
+    a: {
+      color: odysseyDesignTokens.TypographyColorBody,
+      textDecoration: "underline",
+
+      "&:visited": {
+        color: odysseyDesignTokens.TypographyColorBody,
+      },
+
+      "&:hover": {
+        color: odysseyDesignTokens.TypographyColorSubordinate,
+      },
+    },
+  }),
+);
 
 export type FieldHintProps = {
   LinkComponent?: FieldComponentProps["HintLinkComponent"];
@@ -30,13 +51,16 @@ const FieldHint = ({
   text,
   translate,
 }: FieldHintProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
   return (
     <FormHelperText data-se={testId} id={id} translate={translate}>
       {text}
       {LinkComponent && (
-        <>
-          <span>&nbsp;{LinkComponent}</span>
-        </>
+        <HintLinkContainer odysseyDesignTokens={odysseyDesignTokens}>
+          {" "}
+          {LinkComponent}
+        </HintLinkContainer>
       )}
     </FormHelperText>
   );

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/Link.tsx

@@ -41,7 +41,9 @@ export type LinkProps = {
    */
   onClick?: MuiLinkProps["onClick"];
   /**
-   * The HTML `rel` attribute for the Link
+   * The rel attribute defines the relationship between a linked resource and the current document
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
    */
   rel?: string;
   /**

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/OdysseyProvider.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactNode } from "react";
+import { memo, ReactNode, useMemo } from "react";
 import { ScopedCssBaseline } from "@mui/material";
 
 import {
@@ -26,6 +26,15 @@ import {
   OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
 import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
+import {
+  ContrastMode,
+  ContrastModeProvider,
+  useContrastContext,
+} from "./ContrastModeProvider";
+
+const scopedCssBaselineStyles = {
+  height: "inherit",
+};
 
 export type OdysseyProviderProps<
   SupportedLanguages extends string = DefaultSupportedLanguages,
@@ -33,9 +42,10 @@ export type OdysseyProviderProps<
   OdysseyThemeProviderProps &
   OdysseyTranslationProviderProps<SupportedLanguages> & {
     children: ReactNode;
+    contrastMode?: ContrastMode;
   };
 
-const OdysseyProvider = <SupportedLanguages extends string>({
+const OdysseyProviderInner = <SupportedLanguages extends string>({
   children,
   designTokensOverride,
   emotionRoot,
@@ -47,31 +57,53 @@ const OdysseyProvider = <SupportedLanguages extends string>({
   stylisPlugins,
   themeOverride,
   translationOverrides,
-}: OdysseyProviderProps<SupportedLanguages>) => (
-  <OdysseyCacheProvider
-    emotionRoot={emotionRoot}
-    emotionRootElement={emotionRootElement}
-    hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}
-    nonce={nonce}
-    stylisPlugins={stylisPlugins}
-  >
-    <OdysseyThemeProvider
-      designTokensOverride={designTokensOverride}
-      shadowRootElement={shadowRootElement || shadowDomElement}
-      themeOverride={themeOverride}
+}: OdysseyProviderProps<SupportedLanguages>) => {
+  const { contrastMode } = useContrastContext();
+
+  const memoizedThemeProps = useMemo(
+    () => ({
+      ...themeOverride,
+      odysseyContrastMode: contrastMode,
+    }),
+    [themeOverride, contrastMode],
+  );
+
+  return (
+    <OdysseyCacheProvider
+      emotionRoot={emotionRoot}
+      emotionRootElement={emotionRootElement}
+      hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}
+      nonce={nonce}
+      stylisPlugins={stylisPlugins}
     >
-      <ScopedCssBaseline>
-        <OdysseyTranslationProvider<SupportedLanguages>
-          languageCode={languageCode}
-          translationOverrides={translationOverrides}
-        >
-          {children}
-        </OdysseyTranslationProvider>
-      </ScopedCssBaseline>
-    </OdysseyThemeProvider>
-  </OdysseyCacheProvider>
+      <OdysseyThemeProvider
+        designTokensOverride={designTokensOverride}
+        shadowDomElement={shadowDomElement}
+        shadowRootElement={shadowRootElement}
+        themeOverride={memoizedThemeProps}
+      >
+        <ScopedCssBaseline sx={scopedCssBaselineStyles}>
+          <OdysseyTranslationProvider<SupportedLanguages>
+            languageCode={languageCode}
+            translationOverrides={translationOverrides}
+          >
+            {children}
+          </OdysseyTranslationProvider>
+        </ScopedCssBaseline>
+      </OdysseyThemeProvider>
+    </OdysseyCacheProvider>
+  );
+};
+
+const OdysseyProvider = <SupportedLanguages extends string>({
+  contrastMode,
+  ...providerProps
+}: OdysseyProviderProps<SupportedLanguages>) => (
+  <ContrastModeProvider contrastMode={contrastMode}>
+    <OdysseyProviderInner {...providerProps} />
+  </ContrastModeProvider>
 );
 
-const MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;
+const MemoizedOdysseyProvider = memo(OdysseyProvider) as typeof OdysseyProvider;
 
-export { MemoizedThemeProvider as OdysseyProvider };
+export { MemoizedOdysseyProvider as OdysseyProvider };

package/src/Radio.tsx

@@ -60,14 +60,14 @@ const Radio = ({
   hint,
   inputRef,
   isChecked,
-  isDisabled = false,
+  isDisabled,
   isInvalid,
   label: labelProp,
   name,
   testId,
   translate,
   value,
-  isReadOnly = false,
+  isReadOnly,
   onChange: onChangeProp,
   onBlur: onBlurProp,
   onClick,

package/src/Select.tsx

@@ -49,6 +49,44 @@ import {
   useOdysseyDesignTokens,
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
+import { TestSelector } from "./test-selectors";
+
+export const SelectTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
+    list: {
+      accessibleText: {
+        label: "label",
+      },
+      children: {
+        listItem: {
+          accessibleText: {
+            label: "label",
+          },
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name",
+            },
+            role: "option",
+          },
+        },
+      },
+      isControlledElement: true,
+    },
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "combobox",
+  },
+} as const satisfies TestSelector;
 
 export type SelectOption = {
   text: string;

package/src/Stack.tsx

@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2023-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.
+ */
+
+import { memo } from "react";
+import { Stack as MuiStack, StackProps as MuiStackProps } from "@mui/material";
+
+export const stackSpacingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;
+export const stackDirectionValues = [
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse",
+] as const;
+
+export type OdysseyStackProps = {
+  children?: MuiStackProps["children"];
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: MuiStackProps["component"];
+  /**
+   * Defines the flex-direction style property. It is applied for all screen sizes.
+   */
+  direction?: (typeof stackDirectionValues)[number];
+  /**
+   * Defines the space between immediate children.
+   */
+  spacing?: (typeof stackSpacingValues)[number];
+  sx?: MuiStackProps["sx"];
+};
+
+const Stack = ({
+  children,
+  direction = "column",
+  spacing = 2,
+}: OdysseyStackProps) => {
+  return (
+    <MuiStack direction={direction} spacing={spacing}>
+      {children}
+    </MuiStack>
+  );
+};
+
+const MemoizedStack = memo(Stack);
+MemoizedStack.displayName = "Stack";
+
+export { MemoizedStack as Stack };

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

@@ -23,19 +23,19 @@ import { SwitchProps as MuiSwitchProps, FormLabel } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 
-import { Box } from "../Box";
-import { FieldComponentProps } from "../FieldComponentProps";
-import { FieldHint } from "../FieldHint";
-import { CheckedFieldProps } from "../FormCheckedProps";
-import type { HtmlProps } from "../HtmlProps";
-import { CheckIcon } from "../icons.generated";
-import { ComponentControlledState, getControlState } from "../inputUtils";
+import { Box } from "./Box";
+import { FieldComponentProps } from "./FieldComponentProps";
+import { FieldHint } from "./FieldHint";
+import { CheckedFieldProps } from "./FormCheckedProps";
+import type { HtmlProps } from "./HtmlProps";
+import { CheckIcon } from "./icons.generated";
+import { ComponentControlledState, getControlState } from "./inputUtils";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "../OdysseyDesignTokensContext";
-import { stripRem, toRem } from "../remUtils";
-import { useUniqueId } from "../useUniqueId";
+} from "./OdysseyDesignTokensContext";
+import { stripRem, toRem } from "./remUtils";
+import { useUniqueId } from "./useUniqueId";
 
 const { CONTROLLED } = ComponentControlledState;
 

package/src/Tabs.tsx

@@ -30,30 +30,28 @@ import { Badge, BadgeProps } from "./Badge";
 import { Box } from "./Box";
 import { HtmlProps } from "./HtmlProps";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 
-export const TabsTestSelectors = {
-  feature: {
+export const TabsTestSelector = {
+  children: {
     tabItem: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "tab",
       },
     },
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${ariaLabel}",
+      label: "name",
     },
     role: "tablist",
-    templateVariableNames: ["ariaLabel"],
   },
-} as const satisfies FeatureTestSelector;
+} as const satisfies TestSelector;
 
 export type TabItemProps = {
   /**