@okta/odyssey-react-mui 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.1.1",
+  "version": "1.2.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.2.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": "6dc7afd2fce73ec25b0566b0c59aeedf0738b925"
 }

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}

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,

package/src/Select.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactNode, forwardRef, memo, useCallback, useState } from "react";
+import { ReactNode, memo, useCallback, useMemo, useState } from "react";
 import {
   Box,
   Chip,
@@ -100,173 +100,168 @@ export type SelectProps = {
  *   - { text: string, type: "heading" } — Used to display a group heading with the text
  */
 
-const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  (
-    {
-      errorMessage,
-      hint,
-      id: idOverride,
-      isDisabled = false,
-      isMultiSelect = false,
-      isOptional = false,
-      label,
-      name: nameOverride,
-      onBlur,
-      onChange: onChangeProp,
-      onFocus,
-      value,
-      testId,
-      options,
-    },
-    ref
-  ) => {
-    // If there's no value set, we set it to a blank string (if it's a single-select)
-    // or an empty array (if it's a multi-select)
-    if (typeof value === "undefined") {
-      value = isMultiSelect ? [] : "";
-    }
-
-    const [selectedValue, setSelectedValue] = useState<string | string[]>(
-      value
-    );
-
-    const onChange = useCallback(
-      (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {
-        const {
-          target: { value },
-        } = event;
+const Select = ({
+  errorMessage,
+  hint,
+  id: idOverride,
+  isDisabled = false,
+  isMultiSelect = false,
+  isOptional = false,
+  label,
+  name: nameOverride,
+  onBlur,
+  onChange: onChangeProp,
+  onFocus,
+  value,
+  testId,
+  options,
+}: SelectProps) => {
+  // If there's no value set, we set it to a blank string (if it's a single-select)
+  // or an empty array (if it's a multi-select)
+  if (typeof value === "undefined") {
+    value = isMultiSelect ? [] : "";
+  }
 
-        // Set the field value, with some additional logic to handle array values
-        // for multi-selects
-        if (isMultiSelect) {
-          setSelectedValue(
-            typeof value === "string" ? value.split(",") : value
-          );
-        } else {
-          setSelectedValue(value);
-        }
+  const [selectedValue, setSelectedValue] = useState<string | string[]>(value);
 
-        // Trigger the onChange event, if one has been passed
-        if (onChangeProp) {
-          onChangeProp(event, child);
-        }
-      },
-      [isMultiSelect, onChangeProp, setSelectedValue]
-    );
+  const onChange = useCallback(
+    (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {
+      const {
+        target: { value },
+      } = event;
 
-    // Normalize the options array to accommodate the various
-    // data types that might be passed
-    const normalizedOptions = options.map((option) => {
-      if (typeof option === "object") {
-        return {
-          text: option.text,
-          value: option.value || option.text,
-          type: option.type === "heading" ? "heading" : "option",
-        };
+      // Set the field value, with some additional logic to handle array values
+      // for multi-selects
+      if (isMultiSelect) {
+        setSelectedValue(typeof value === "string" ? value.split(",") : value);
+      } else {
+        setSelectedValue(value);
       }
 
-      return { text: option, value: option, type: "option" };
-    });
-
-    const renderValue = useCallback(
-      (selected: string | string[]) => {
-        // If the selected value isn't an array, then we don't need to display
-        // chips and should fall back to the default render behavior
-        if (typeof selected === "string") {
-          return undefined;
-        }
-
-        // Convert the selected options array into <Chip>s
-        const renderedChips = selected
-          .map((item: string) => {
-            const selectedOption = normalizedOptions.find(
-              (option) => option.value === item
-            );
+      // Trigger the onChange event, if one has been passed
+      if (onChangeProp) {
+        onChangeProp(event, child);
+      }
+    },
+    [isMultiSelect, onChangeProp, setSelectedValue]
+  );
 
-            if (!selectedOption) {
-              return null;
+  // Normalize the options array to accommodate the various
+  // data types that might be passed
+  const normalizedOptions = useMemo(
+    () =>
+      options.map((option) =>
+        typeof option === "object"
+          ? {
+              text: option.text,
+              value: option.value || option.text,
+              type: option.type === "heading" ? "heading" : "option",
             }
+          : { text: option, value: option, type: "option" }
+      ),
+    [options]
+  );
 
-            return <Chip key={item} label={selectedOption.text} />;
-          })
-          .filter(Boolean);
+  const renderValue = useCallback(
+    (selected: string | string[]) => {
+      // If the selected value isn't an array, then we don't need to display
+      // chips and should fall back to the default render behavior
+      if (typeof selected === "string") {
+        return undefined;
+      }
 
-        if (renderedChips.length === 0) {
-          return null;
-        }
+      // Convert the selected options array into <Chip>s
+      const renderedChips = selected
+        .map((item: string) => {
+          const selectedOption = normalizedOptions.find(
+            (option) => option.value === item
+          );
 
-        // We need the <Box> to surround the <Chip>s for
-        // proper styling
-        return <Box>{renderedChips}</Box>;
-      },
-      [normalizedOptions]
-    );
+          if (!selectedOption) {
+            return null;
+          }
 
-    // Convert the options into the ReactNode children
-    // that will populate the <Select>
-    const children = normalizedOptions.map((option) => {
-      if (option.type === "heading") {
-        return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
+          return <Chip key={item} label={selectedOption.text} />;
+        })
+        .filter(Boolean);
+
+      if (renderedChips.length === 0) {
+        return null;
       }
 
-      return (
-        <MenuItem key={option.value} value={option.value}>
-          {isMultiSelect && (
-            <MuiCheckbox checked={selectedValue.includes(option.value)} />
-          )}
-          {option.text}
-        </MenuItem>
-      );
-    });
+      // We need the <Box> to surround the <Chip>s for
+      // proper styling
+      return <Box>{renderedChips}</Box>;
+    },
+    [normalizedOptions]
+  );
 
-    const renderFieldComponent = useCallback(
-      () => (
-        <MuiSelect
-          children={children}
-          data-se={testId}
-          id={idOverride}
-          multiple={isMultiSelect}
-          name={nameOverride ?? idOverride}
-          onBlur={onBlur}
-          onChange={onChange}
-          onFocus={onFocus}
-          ref={ref}
-          renderValue={isMultiSelect ? renderValue : undefined}
-          value={selectedValue}
-          labelId={label}
-        />
-      ),
-      [
-        children,
-        idOverride,
-        isMultiSelect,
-        label,
-        nameOverride,
-        onBlur,
-        onChange,
-        onFocus,
-        ref,
-        renderValue,
-        selectedValue,
-        testId,
-      ]
-    );
+  // Convert the options into the ReactNode children
+  // that will populate the <Select>
+  const children = useMemo(
+    () =>
+      normalizedOptions.map((option) => {
+        if (option.type === "heading") {
+          return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
+        }
 
-    return (
-      <Field
-        errorMessage={errorMessage}
-        fieldType="single"
-        hasVisibleLabel
-        hint={hint}
-        id={idOverride}
-        isDisabled={isDisabled}
-        isOptional={isOptional}
-        label={label}
-        renderFieldComponent={renderFieldComponent}
+        return (
+          <MenuItem key={option.value} value={option.value}>
+            {isMultiSelect && (
+              <MuiCheckbox checked={selectedValue.includes(option.value)} />
+            )}
+            {option.text}
+          </MenuItem>
+        );
+      }),
+    [isMultiSelect, normalizedOptions, selectedValue]
+  );
+
+  const renderFieldComponent = useCallback(
+    ({ ariaDescribedBy, id }) => (
+      <MuiSelect
+        aria-describedby={ariaDescribedBy}
+        children={children}
+        data-se={testId}
+        id={id}
+        labelId={label}
+        multiple={isMultiSelect}
+        name={nameOverride ?? id}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        renderValue={isMultiSelect ? renderValue : undefined}
+        value={selectedValue}
       />
-    );
-  }
-);
+    ),
+    [
+      children,
+      isMultiSelect,
+      label,
+      nameOverride,
+      onBlur,
+      onChange,
+      onFocus,
+      renderValue,
+      selectedValue,
+      testId,
+    ]
+  );
+
+  return (
+    <Field
+      errorMessage={errorMessage}
+      fieldType="single"
+      hasVisibleLabel
+      hint={hint}
+      id={idOverride}
+      isDisabled={isDisabled}
+      isOptional={isOptional}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
+  );
+};
 
 const MemoizedSelect = memo(Select);
 MemoizedSelect.displayName = "Select";