Develop -> Master

.bacon.yml

@@ -0,0 +1,8 @@
+test_suites:
+  - name: semgrep
+    script_path: /root/okta/odyssey/scripts
+    sort_order: "1"
+    timeout: "10"
+    script_name: semgrep
+    criteria: MERGE
+    queue_name: small

packages/odyssey-react-mui/README.md

@@ -18,7 +18,7 @@ This project follows semantic versioning conventions:
 Install the package and peer dependencies:
 
 ```sh
-yarn add @okta/odyssey-react-mui @emotion/react
+yarn add @okta/odyssey-react-mui
 ```
 
 Include fonts:

packages/odyssey-react-mui/package.json

@@ -62,6 +62,8 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.12.3",
@@ -78,8 +80,6 @@
   "devDependencies": {
     "@babel/cli": "^7.22.9",
     "@babel/core": "^7.22.9",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@okta/browserslist-config-odyssey": "workspace:*",
     "@okta/odyssey-babel-preset": "workspace:*",
     "@okta/odyssey-icons": "workspace:*",
@@ -114,8 +114,6 @@
     "yargs": "^17.7.2"
   },
   "peerDependencies": {
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   }

packages/odyssey-react-mui/src/Autocomplete.tsx

@@ -157,6 +157,7 @@ const Autocomplete = <
     <MuiAutocomplete
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
+      disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       loading={isLoading}

packages/odyssey-react-mui/src/Box.tsx

@@ -11,7 +11,7 @@
  */
 
 import { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
-import { ReactNode, forwardRef } from "react";
+import { ReactNode, forwardRef, memo } from "react";
 
 export type BoxProps = {
   children?: ReactNode;
@@ -20,7 +20,7 @@ export type BoxProps = {
   sx?: MuiBoxProps["sx"];
 };
 
-export const Box = forwardRef<HTMLElement, BoxProps>(
+const Box = forwardRef<HTMLElement, BoxProps>(
   ({ children, component, id, sx }, ref) => (
     <MuiBox
       ref={ref}
@@ -32,4 +32,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
   )
 );
 
-Box.displayName = "Box";
+const MemoizedBox = memo(Box);
+MemoizedBox.displayName = "Box";
+
+export { MemoizedBox as Box };

packages/odyssey-react-mui/src/MenuButton.tsx

@@ -12,7 +12,7 @@
 
 import { Button, buttonVariantValues, MenuItem, useUniqueId } from "./";
 import { Divider, ListSubheader, Menu } from "@mui/material";
-import { ChevronDownIcon } from "./icons.generated";
+import { ChevronDownIcon, MoreIcon } from "./icons.generated";
 import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
 
 import { MenuContext, MenuContextType } from "./MenuContext";
@@ -55,6 +55,10 @@ export type MenuButtonProps = {
    * The id of the Button
    */
   id?: string;
+  /**
+   * If the MenuButton is an overflow menu or standard menu.
+   */
+  isOverflow?: boolean;
   /**
    * The tooltip text for the Button if it's icon-only
    */
@@ -84,8 +88,9 @@ const MenuButton = ({
   buttonLabel = "",
   buttonVariant = "secondary",
   children,
-  endIcon = <ChevronDownIcon />,
+  endIcon: endIconProp,
   id: idOverride,
+  isOverflow,
   tooltipText,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -115,6 +120,14 @@ const MenuButton = ({
     [closeMenu, openMenu]
   );
 
+  const endIcon = endIconProp ? (
+    endIconProp
+  ) : isOverflow ? (
+    <MoreIcon />
+  ) : (
+    <ChevronDownIcon />
+  );
+
   return (
     <div>
       <Button

packages/odyssey-react-mui/src/MenuItem.tsx

@@ -33,9 +33,9 @@ export type MenuItemProps = {
    */
   isSelected?: boolean;
   /**
-   * If `true`, the menu item will be visually marked as destructive.
+   * If `true`, the menu item will be visually marked as disabled.
    */
-  isDestructive?: boolean;
+  isDisabled?: boolean;
   /**
    * Callback fired when the menu item is clicked.
    */
@@ -56,6 +56,7 @@ const MenuItem = ({
   children,
   hasInitialFocus,
   isSelected,
+  isDisabled,
   onClick: onClickProp,
   value,
   variant = "default",
@@ -75,6 +76,7 @@ const MenuItem = ({
       /* eslint-disable-next-line jsx-a11y/no-autofocus */
       autoFocus={hasInitialFocus}
       selected={isSelected}
+      disabled={isDisabled}
       value={value}
       onClick={onClick}
       className={

packages/odyssey-react-mui/src/OdysseyProvider.tsx

@@ -11,6 +11,7 @@
  */
 
 import { memo, ReactNode } from "react";
+import { ScopedCssBaseline } from "@mui/material";
 
 import {
   OdysseyCacheProvider,
@@ -45,12 +46,14 @@ const OdysseyProvider = ({
       themeOverride={themeOverride}
       designTokensOverride={designTokensOverride}
     >
-      <OdysseyTranslationProvider
-        languageCode={languageCode}
-        translationOverrides={translationOverrides}
-      >
-        {children}
-      </OdysseyTranslationProvider>
+      <ScopedCssBaseline>
+        <OdysseyTranslationProvider
+          languageCode={languageCode}
+          translationOverrides={translationOverrides}
+        >
+          {children}
+        </OdysseyTranslationProvider>
+      </ScopedCssBaseline>
     </OdysseyThemeProvider>
   </OdysseyCacheProvider>
 );

packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx

@@ -16,7 +16,7 @@ import {
 } from "@mui/material/styles";
 import { memo, ReactNode, useMemo } from "react";
 
-import { ScopedCssBaseline, ThemeOptions } from "@mui/material";
+import { ThemeOptions } from "@mui/material";
 import { deepmerge } from "@mui/utils";
 import { createOdysseyMuiTheme, DesignTokensOverride } from "./theme";
 import * as Tokens from "@okta/odyssey-design-tokens";
@@ -49,11 +49,9 @@ const OdysseyThemeProvider = ({
 
   return (
     <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
-      <ScopedCssBaseline>
-        <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
-          {children}
-        </OdysseyDesignTokensContext.Provider>
-      </ScopedCssBaseline>
+      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
+        {children}
+      </OdysseyDesignTokensContext.Provider>
     </MuiThemeProvider>
   );
 };

packages/odyssey-react-mui/src/PasswordField.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -21,7 +21,6 @@ import {
 } from "react";
 
 import { ShowIcon, HideIcon } from "./icons.generated";
-import { Button } from "./Button";
 import { Field } from "./Field";
 
 export type PasswordFieldProps = {
@@ -122,13 +121,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoFocus={hasInitialFocus}
           endAdornment={
             <InputAdornment position="end">
-              <Button
-                ariaLabel="toggle password visibility"
-                endIcon={inputType === "password" ? <ShowIcon /> : <HideIcon />}
+              <IconButton
+                aria-label="toggle password visibility"
                 onClick={togglePasswordVisibility}
-                size="small"
-                variant="floating"
-              />
+              >
+                {inputType === "password" ? <ShowIcon /> : <HideIcon />}
+              </IconButton>
             </InputAdornment>
           }
           id={id}

packages/odyssey-react-mui/src/SearchField.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -23,7 +23,6 @@ import {
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
-import { Button } from "./Button";
 
 export type SearchFieldProps = {
   /**
@@ -123,15 +122,14 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           endAdornment={
             uncontrolledValue && (
               <InputAdornment position="end">
-                <Button
-                  ariaLabel="Clear"
-                  isDisabled={isDisabled}
-                  label=""
+                <IconButton
+                  aria-label="Clear"
+                  disabled={isDisabled}
                   onClick={onClear}
                   size="small"
-                  startIcon={<CloseCircleFilledIcon />}
-                  variant="floating"
-                />
+                >
+                  <CloseCircleFilledIcon />
+                </IconButton>
               </InputAdornment>
             )
           }

packages/odyssey-react-mui/src/Select.tsx

@@ -14,13 +14,13 @@ import { ReactNode, forwardRef, memo, useCallback, useState } from "react";
 import {
   Box,
   Chip,
+  Checkbox as MuiCheckbox,
   ListSubheader,
   MenuItem,
   Select as MuiSelect,
   SelectChangeEvent,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
-import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
 
 export type SelectOption = {
@@ -205,7 +205,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       return (
         <MenuItem key={option.value} value={option.value}>
           {isMultiSelect && (
-            <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />
+            <MuiCheckbox checked={selectedValue.includes(option.value)} />
           )}
           {option.text}
         </MenuItem>