@okta/odyssey-react-mui 1.23.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -58,7 +58,7 @@
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^7.2.0",
-    "@okta/odyssey-design-tokens": "^1.23.0",
+    "@okta/odyssey-design-tokens": "^1.24.0",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
@@ -73,5 +73,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "07f22a0d1e925483c09ed44a3db9c1653f3f9245"
+  "gitHead": "60a0ba720c9b7766c8f3599047f6c77b9470d33b"
 }

package/src/Autocomplete.tsx

@@ -92,6 +92,17 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["defaultValue"];
+  /**
+   * Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided). If used in free solo mode, it must accept both the type of the options and a string.
+   *
+   * `function(option: Value) => string`
+   */
+  getOptionLabel?: UseAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["getOptionLabel"];
   /**
    * Enables multiple choice selection
    */
@@ -249,6 +260,7 @@ const Autocomplete = <
   defaultValue,
   errorMessage,
   errorMessageList,
+  getOptionLabel,
   hasMultipleChoices,
   id: idOverride,
   inputValue,
@@ -571,6 +583,7 @@ const Autocomplete = <
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       filterSelectedOptions={true}
+      getOptionLabel={getOptionLabel}
       id={idOverride}
       fullWidth={isFullWidth}
       loading={isLoading}

package/src/Banner.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from "react-i18next";
 import { Alert, AlertColor, AlertTitle, AlertProps } from "@mui/material";
 
 import type { HtmlProps } from "./HtmlProps";
-import { Link } from "./Link";
+import { Link, LinkProps } from "./Link";
 import { ScreenReaderText } from "./ScreenReaderText";
 
 export const bannerRoleValues = ["status", "alert"] as const;
@@ -27,16 +27,6 @@ export const bannerSeverityValues: AlertColor[] = [
 ];
 
 export type BannerProps = {
-  /**
-   * If linkUrl is not undefined, this is the text of the link.
-   * If left blank, it defaults to "Learn more".
-   * Note that linkText does nothing if linkUrl is not defined
-   */
-  linkText?: string;
-  /**
-   * If defined, the alert will include a link to the URL
-   */
-  linkUrl?: string;
   /**
    * The function that's fired when the user clicks the close button. If undefined,
    * the close button will not be shown.
@@ -56,11 +46,30 @@ export type BannerProps = {
    * The text content of the alert
    */
   text: string;
-} & Pick<HtmlProps, "testId" | "translate">;
+} & Pick<HtmlProps, "testId" | "translate"> &
+  (
+    | {
+        linkRel?: LinkProps["rel"];
+        linkTarget?: LinkProps["target"];
+        linkText: string;
+        /**
+         * If defined, the Banner will include a link to the URL
+         */
+        linkUrl: LinkProps["href"];
+      }
+    | {
+        linkRel?: never;
+        linkTarget?: never;
+        linkText?: never;
+        linkUrl?: never;
+      }
+  );
 
 const Banner = ({
-  linkUrl,
+  linkRel,
+  linkTarget,
   linkText,
+  linkUrl,
   onClose,
   role,
   severity,
@@ -83,7 +92,13 @@ const Banner = ({
       </ScreenReaderText>
       <AlertTitle translate={translate}>{text}</AlertTitle>
       {linkUrl && (
-        <Link href={linkUrl} variant="monochrome" translate={translate}>
+        <Link
+          href={linkUrl}
+          rel={linkRel}
+          target={linkTarget}
+          translate={translate}
+          variant="monochrome"
+        >
           {linkText}
         </Link>
       )}

package/src/Callout.tsx

@@ -11,11 +11,12 @@
  */
 
 import styled from "@emotion/styled";
-import { Alert, AlertTitle, Box, Link as MuiLink } from "@mui/material";
+import { Alert, AlertTitle, Box } from "@mui/material";
 import { memo, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { HtmlProps } from "./HtmlProps";
+import { Link, LinkProps } from "./Link";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
@@ -92,18 +93,17 @@ export type CalloutProps = {
 ) &
   (
     | {
+        linkRel?: LinkProps["rel"];
+        linkTarget?: LinkProps["target"];
+        linkText: string;
         /**
-         * If linkUrl is not undefined, this is the text of the link.
-         * If left blank, it defaults to "Learn more".
-         * Note that linkText does nothing if linkUrl is not defined
-         */
-        linkUrl: string;
-        /**
-         * If defined, the Toast will include a link to the URL
+         * If defined, the Callout will include a link to the URL
          */
-        linkText: string;
+        linkUrl: LinkProps["href"];
       }
     | {
+        linkRel?: never;
+        linkTarget?: never;
         linkUrl?: never;
         linkText?: never;
       }
@@ -120,6 +120,8 @@ const ContentContainer = styled("div", {
 
 const Callout = ({
   children,
+  linkRel,
+  linkTarget,
   linkText,
   linkUrl,
   role,
@@ -153,9 +155,14 @@ const Callout = ({
         {text && <Paragraph>{text}</Paragraph>}
         {linkUrl && (
           <Box>
-            <MuiLink href={linkUrl} variant="monochrome">
+            <Link
+              href={linkUrl}
+              rel={linkRel}
+              target={linkTarget}
+              variant="monochrome"
+            >
               {linkText}
-            </MuiLink>
+            </Link>
           </Box>
         )}
       </ContentContainer>

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/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/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/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,11 @@ import {
   OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
 import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
+import {
+  ContrastMode,
+  ContrastModeProvider,
+  useContrastContext,
+} from "./ContrastModeProvider";
 
 const scopedCssBaselineStyles = {
   height: "inherit",
@@ -37,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,
@@ -51,32 +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}
     >
-      {/* 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}
-        >
-          {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/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 };