@okta/odyssey-react-mui 1.1.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.1.1",
+  "version": "1.4.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,9 +51,9 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.1.1",
+    "@okta/odyssey-design-tokens": "1.4.0",
     "date-fns": "^2.30.0",
-    "i18next": "^22.4.15",
+    "i18next": "^23.5.1",
     "material-react-table": "^1.14.0",
     "react-i18next": "^12.2.2",
     "ts-node": "^10.9.1",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "3cf42aaed1fa433ee7a0e4b10112f98544f28f56"
+  "gitHead": "612e08d4ea3bd4c8acb732df7036bce16f4eda0b"
 }

package/scripts/properties-to-ts.js

@@ -11,7 +11,7 @@
  */
 
 // Part of this has been copied over from @okta/ui-build-tools' own internal node script
-// https://github.com/okta/ui-build-tools/blob/master/packages/clis/i18n/properties-to-json.js
+// https://github.com/okta/ui-build-tools/blob/main/packages/clis/i18n/properties-to-json.js
 
 const { resolve, join, basename, extname } = require("node:path");
 const {

package/src/Autocomplete.tsx

@@ -25,6 +25,10 @@ export type AutocompleteProps<
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 > = {
+  /**
+   * The error message for the Select
+   */
+  errorMessage?: string;
   /**
    * Enables multiple choice selection
    */
@@ -38,6 +42,10 @@ export type AutocompleteProps<
    * The hint text for the Autocomplete input
    */
   hint?: string;
+  /**
+   * The id attribute of the Select
+   */
+  id?: string;
   /**
    * Allows the input of custom values
    */
@@ -83,7 +91,20 @@ export type AutocompleteProps<
    */
   label: string;
   /**
-   * Callback fired when the value of the autocomplete input changes
+   * The name of the `input` element. Defaults to the `id` if not set.
+   */
+  name?: string;
+  /**
+   * Callback fired when the autocomplete loses focus.
+   */
+  onBlur?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onBlur"];
+  /**
+   * Callback fired when a selection is made.
    */
   onChange?: MuiAutocompleteProps<
     OptionType,
@@ -92,7 +113,7 @@ export type AutocompleteProps<
     IsCustomValueAllowed
   >["onChange"];
   /**
-   * Callback fired when the input value of the autocomplete input changes
+   * Callback fired when the textbox receives typed characters.
    */
   onInputChange?: MuiAutocompleteProps<
     OptionType,
@@ -100,6 +121,15 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["onInputChange"];
+  /**
+   * Callback fired when the autocomplete gains focus.
+   */
+  onFocus?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onFocus"];
   /**
    * The options for the Autocomplete input
    */
@@ -125,7 +155,9 @@ const Autocomplete = <
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
+  errorMessage,
   hasMultipleChoices,
+  id: idOverride,
   isCustomValueAllowed,
   isDisabled,
   isLoading,
@@ -133,8 +165,11 @@ const Autocomplete = <
   isReadOnly,
   hint,
   label,
+  name: nameOverride,
+  onBlur,
   onChange,
   onInputChange,
+  onFocus,
   options,
   value,
   testId,
@@ -142,6 +177,7 @@ const Autocomplete = <
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
+        errorMessage={errorMessage}
         fieldType="single"
         hasVisibleLabel
         id={InputLabelProps.htmlFor}
@@ -154,12 +190,13 @@ const Autocomplete = <
             {...InputProps}
             aria-describedby={ariaDescribedBy}
             id={id}
+            name={nameOverride ?? id}
             required={!isOptional}
           />
         )}
       />
     ),
-    [hint, isOptional, label]
+    [errorMessage, hint, isOptional, label, nameOverride]
   );
 
   return (
@@ -170,10 +207,14 @@ const Autocomplete = <
       disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
+      filterSelectedOptions={true}
+      id={idOverride}
       loading={isLoading}
       multiple={hasMultipleChoices}
+      onBlur={onBlur}
       onChange={onChange}
       onInputChange={onInputChange}
+      onFocus={onFocus}
       options={options}
       readOnly={isReadOnly}
       renderInput={renderInput}
@@ -182,6 +223,9 @@ const Autocomplete = <
   );
 };
 
+// Need the `typeof Autocomplete` because generics don't get passed through
 const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;
+// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`
+MemoizedAutocomplete.displayName = "Autocomplete";
 
 export { MemoizedAutocomplete as Autocomplete };

package/src/Breadcrumbs.tsx

@@ -0,0 +1,199 @@
+/*!
+ * 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 {
+  ButtonBase,
+  Menu,
+  MenuItem,
+  Breadcrumbs as MuiBreadcrumbs,
+} from "@mui/material";
+import {
+  MouseEventHandler,
+  ReactElement,
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated";
+import { Typography } from "./Typography";
+import { useTranslation } from "react-i18next";
+
+export type BreadcrumbType = "listItem" | "menuItem" | "currentPage";
+
+export type BreadcrumbProps = {
+  children?: string;
+  href: string;
+  iconName?: "user" | "group";
+};
+
+export type BreadcrumbsProps = {
+  children: ReactElement<typeof Breadcrumb>[];
+  homeHref?: string;
+  maxVisibleItems?: number;
+};
+
+export type BreadcrumbContextType = {
+  breadcrumbType: BreadcrumbType;
+};
+
+export const BreadcrumbContext = createContext<BreadcrumbContextType>({
+  breadcrumbType: "listItem",
+});
+
+export const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {
+  const { breadcrumbType } = useContext(BreadcrumbContext);
+
+  const breadcrumbContent = (
+    <>
+      {iconName === "group" ? (
+        <GroupIcon />
+      ) : iconName === "user" ? (
+        <UserIcon />
+      ) : null}
+      {children}
+    </>
+  );
+
+  if (breadcrumbType === "menuItem") {
+    return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;
+  }
+
+  if (breadcrumbType === "currentPage") {
+    return <Typography>{breadcrumbContent}</Typography>;
+  }
+
+  // breadcrumbType === "listItem" is the default
+  // Provided here without a conditional to get TS to be quiet
+  // about potential undefined returns
+  return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;
+};
+
+const breadcrumbProviderValue: Record<
+  BreadcrumbType,
+  { breadcrumbType: BreadcrumbType }
+> = {
+  currentPage: {
+    breadcrumbType: "currentPage",
+  },
+  listItem: {
+    breadcrumbType: "listItem",
+  },
+  menuItem: {
+    breadcrumbType: "menuItem",
+  },
+};
+
+const BreadcrumbList = ({
+  children,
+  homeHref,
+  maxVisibleItems: maxVisibleItemsOverride,
+}: BreadcrumbsProps) => {
+  const maxVisibleItems = maxVisibleItemsOverride ?? children.length;
+
+  const { t } = useTranslation();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const breadcrumbSections = useMemo(() => {
+    if (children.length <= maxVisibleItems) {
+      return {
+        beforeMenu: [],
+        insideMenu: [],
+        remainingBreadcrumbs: children,
+      };
+    } else {
+      const menuStart = Math.floor(maxVisibleItems / 2);
+      const menuLength = children.length - maxVisibleItems;
+
+      return {
+        beforeMenu: children.slice(0, menuStart),
+        insideMenu: children.slice(menuStart, menuStart + menuLength),
+        remainingBreadcrumbs: children.slice(menuStart + menuLength),
+      };
+    }
+  }, [children, maxVisibleItems]);
+
+  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => setAnchorEl(event.currentTarget),
+    []
+  );
+  const onCloseMenu = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+
+  return (
+    <MuiBreadcrumbs
+      maxItems={children.length + 1}
+      aria-label={t("breadcrumbs.label.text")}
+    >
+      {homeHref && (
+        <ButtonBase href={homeHref} aria-label={t("breadcrumbs.home.text")}>
+          <HomeIcon />
+        </ButtonBase>
+      )}
+
+      {breadcrumbSections.beforeMenu.map((breadcrumb) => (
+        <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>
+          {breadcrumb}
+        </BreadcrumbContext.Provider>
+      ))}
+
+      {breadcrumbSections.insideMenu && (
+        <>
+          <ButtonBase onClick={onMenuButtonClick}>…</ButtonBase>
+          <Menu
+            open={Boolean(anchorEl)}
+            onClose={onCloseMenu}
+            anchorEl={anchorEl}
+            anchorOrigin={{ horizontal: "left", vertical: "bottom" }}
+            MenuListProps={{
+              sx: {
+                minWidth: 180,
+              },
+            }}
+          >
+            <BreadcrumbContext.Provider
+              value={breadcrumbProviderValue.menuItem}
+            >
+              {breadcrumbSections.insideMenu}
+            </BreadcrumbContext.Provider>
+          </Menu>
+        </>
+      )}
+
+      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {
+        if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {
+          return (
+            <BreadcrumbContext.Provider
+              value={breadcrumbProviderValue.currentPage}
+            >
+              {breadcrumb}
+            </BreadcrumbContext.Provider>
+          );
+        }
+        return (
+          <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>
+            {breadcrumb}
+          </BreadcrumbContext.Provider>
+        );
+      })}
+    </MuiBreadcrumbs>
+  );
+};
+
+const MemoizedBreadcrumbList = memo(BreadcrumbList);
+MemoizedBreadcrumbList.displayName = "BreadcrumbList";
+
+export { MemoizedBreadcrumbList as BreadcrumbList };

package/src/Link.tsx

@@ -14,7 +14,7 @@ import { memo, ReactElement } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
 import type { SeleniumProps } from "./SeleniumProps";
 
-import { Link as MuiLink } from "@mui/material";
+import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
 
 export const linkVariantValues = ["default", "monochrome"] as const;
 
@@ -31,6 +31,10 @@ export type LinkProps = {
    * An optional Icon component at the start of the Link
    */
   icon?: ReactElement;
+  /**
+   * The click event handler for the Link
+   */
+  onClick?: MuiLinkProps["onClick"];
   /**
    * The HTML `rel` attribute for the Link
    */
@@ -58,6 +62,7 @@ const Link = ({
   target,
   testId,
   variant,
+  onClick,
 }: LinkProps) => (
   <MuiLink
     data-se={testId}
@@ -65,6 +70,7 @@ const Link = ({
     rel={rel}
     target={target}
     variant={variant}
+    onClick={onClick}
   >
     {icon && <span className="Link-icon">{icon}</span>}
 

package/src/MenuButton.tsx

@@ -50,9 +50,8 @@ export type MenuButtonProps = {
    * The <MenuItem> components within the Menu.
    */
   children: Array<
-    ReactElement<
-      typeof MenuItem | typeof Divider | typeof ListSubheader | NullElement
-    >
+    | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
+    | NullElement
   >;
   /**
    * The end Icon on the trigggering Button

package/src/OdysseyCacheProvider.tsx

@@ -24,12 +24,18 @@ import { useUniqueAlphabeticalId } from "./useUniqueAlphabeticalId";
 
 export type OdysseyCacheProviderProps = {
   children: ReactNode;
+  /**
+   * 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>`.
+   */
+  emotionRootElement?: HTMLStyleElement;
   nonce?: string;
   stylisPlugins?: StylisPlugin[];
 };
 
 const OdysseyCacheProvider = ({
   children,
+  emotionRootElement,
   nonce,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
@@ -38,11 +44,13 @@ const OdysseyCacheProvider = ({
   const emotionCache = useMemo(
     () =>
       createCache({
+        container: emotionRootElement,
         key: uniqueAlphabeticalId,
         nonce: nonce || window.cspNonce,
+        prepend: Boolean(emotionRootElement),
         stylisPlugins,
       }),
-    [nonce, stylisPlugins, uniqueAlphabeticalId]
+    [emotionRootElement, nonce, stylisPlugins, uniqueAlphabeticalId]
   );
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;

package/src/OdysseyProvider.tsx

@@ -35,16 +35,23 @@ export type OdysseyProviderProps = OdysseyCacheProviderProps &
 const OdysseyProvider = ({
   children,
   designTokensOverride,
+  emotionRootElement,
+  shadowRootElement,
   languageCode,
   nonce,
   stylisPlugins,
   themeOverride,
   translationOverrides,
 }: OdysseyProviderProps) => (
-  <OdysseyCacheProvider nonce={nonce} stylisPlugins={stylisPlugins}>
+  <OdysseyCacheProvider
+    emotionRootElement={emotionRootElement}
+    nonce={nonce}
+    stylisPlugins={stylisPlugins}
+  >
     <OdysseyThemeProvider
-      themeOverride={themeOverride}
       designTokensOverride={designTokensOverride}
+      shadowRootElement={shadowRootElement}
+      themeOverride={themeOverride}
     >
       <ScopedCssBaseline>
         <OdysseyTranslationProvider

package/src/OdysseyThemeProvider.tsx

@@ -25,12 +25,14 @@ import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
 export type OdysseyThemeProviderProps = {
   children: ReactNode;
   designTokensOverride?: DesignTokensOverride;
+  shadowRootElement?: HTMLDivElement;
   themeOverride?: ThemeOptions;
 };
 
 const OdysseyThemeProvider = ({
   children,
   designTokensOverride,
+  shadowRootElement,
   themeOverride,
 }: OdysseyThemeProviderProps) => {
   const odysseyTokens = useMemo(
@@ -38,8 +40,12 @@ const OdysseyThemeProvider = ({
     [designTokensOverride]
   );
   const odysseyTheme = useMemo(
-    () => createOdysseyMuiTheme(odysseyTokens),
-    [odysseyTokens]
+    () =>
+      createOdysseyMuiTheme({
+        odysseyTokens,
+        shadowRootElement,
+      }),
+    [odysseyTokens, shadowRootElement]
   );
 
   const customOdysseyTheme = useMemo(

package/src/OdysseyTranslationProvider.test.tsx

@@ -12,14 +12,14 @@
 
 import { render, screen } from "@testing-library/react";
 import { OdysseyTranslationProvider } from "./OdysseyTranslationProvider";
-import i18n from "./OdysseyI18n";
+import { odysseyTranslate } from "./i18n";
 import { TextField } from "./TextField";
 
 describe("OdysseyTranslationProvider", () => {
   it("defaults to 'en' translation bundle", () => {
     render(
       <OdysseyTranslationProvider>
-        <span>{i18n.t("fieldlabel.optional.text")}</span>
+        <span>{odysseyTranslate("fieldlabel.optional.text")}</span>
       </OdysseyTranslationProvider>
     );
 

package/src/OdysseyTranslationProvider.tsx

@@ -14,7 +14,7 @@ import { ReactNode, useEffect } from "react";
 
 import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
 
-import i18n, { defaultNS, resources } from "./OdysseyI18n";
+import { i18n, defaultNS, resources } from "./i18n";
 import { I18nextProvider } from "react-i18next";
 
 export type TranslationOverrides = {

package/src/PasswordField.tsx

@@ -23,6 +23,7 @@ import {
 import { ShowIcon, HideIcon } from "./icons.generated";
 import { Field } from "./Field";
 import type { SeleniumProps } from "./SeleniumProps";
+import { useTranslation } from "react-i18next";
 
 export type PasswordFieldProps = {
   /**
@@ -39,6 +40,10 @@ export type PasswordFieldProps = {
    * If `true`, the component will receive focus automatically.
    */
   hasInitialFocus?: boolean;
+  /**
+   * If `true`, the show/hide icon is not shown to the user
+   */
+  hasShowPassword?: boolean;
   /**
    * The helper text content.
    */
@@ -99,6 +104,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       id: idOverride,
       isDisabled = false,
       isOptional = false,
+      hasShowPassword = true,
       isReadOnly,
       label,
       name: nameOverride,
@@ -111,6 +117,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
     },
     ref
   ) => {
+    const { t } = useTranslation();
     const [inputType, setInputType] = useState("password");
 
     const togglePasswordVisibility = useCallback(() => {
@@ -128,16 +135,23 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoFocus={hasInitialFocus}
           data-se={testId}
           endAdornment={
-            <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                onClick={togglePasswordVisibility}
-              >
-                {inputType === "password" ? <ShowIcon /> : <HideIcon />}
-              </IconButton>
-            </InputAdornment>
+            hasShowPassword && (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label={
+                    inputType === "password"
+                      ? t("passwordfield.icon.label.show")
+                      : t("passwordfield.icon.label.hide")
+                  }
+                  onClick={togglePasswordVisibility}
+                >
+                  {inputType === "password" ? <ShowIcon /> : <HideIcon />}
+                </IconButton>
+              </InputAdornment>
+            )
           }
           id={id}
+          inputProps={{ role: "textbox" }}
           name={nameOverride ?? id}
           onChange={onChange}
           onFocus={onFocus}
@@ -153,6 +167,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       [
         autoCompleteType,
         hasInitialFocus,
+        t,
         togglePasswordVisibility,
         inputType,
         nameOverride,
@@ -162,6 +177,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         placeholder,
         isOptional,
         isReadOnly,
+        hasShowPassword,
         ref,
         testId,
         value,