@okta/odyssey-react-mui 1.12.9 → 1.12.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.12.9",
+  "version": "1.12.10",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.12.9",
+    "@okta/odyssey-design-tokens": "1.12.10",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "13304462f9cf9ef8d67b9a3450eb9fe49175ca49"
+  "gitHead": "2a402061b4989b855a103baa728d19e33fa54a49"
 }

package/src/Button.tsx

@@ -135,8 +135,8 @@ const Button = ({
   variant,
 }: ButtonProps) => {
   const muiProps = useMuiProps();
-
   const localButtonRef = useRef<HTMLButtonElement>(null);
+
   useImperativeHandle(
     buttonRef,
     () => {
@@ -150,28 +150,32 @@ const Button = ({
   );
 
   const renderButton = useCallback(
-    (muiProps) => (
-      <MuiButton
-        {...muiProps}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        aria-describedby={ariaDescribedBy}
-        data-se={testId}
-        disabled={isDisabled}
-        endIcon={endIcon}
-        fullWidth={isFullWidth}
-        id={id}
-        onClick={onClick}
-        ref={localButtonRef}
-        size={size}
-        startIcon={startIcon}
-        translate={translate}
-        type={type}
-        variant={variant}
-      >
-        {label}
-      </MuiButton>
-    ),
+    (muiProps) => {
+      muiProps?.ref?.(localButtonRef.current);
+
+      return (
+        <MuiButton
+          {...muiProps}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+          data-se={testId}
+          disabled={isDisabled}
+          endIcon={endIcon}
+          fullWidth={isFullWidth}
+          id={id}
+          onClick={onClick}
+          ref={localButtonRef}
+          size={size}
+          startIcon={startIcon}
+          translate={translate}
+          type={type}
+          variant={variant}
+        >
+          {label}
+        </MuiButton>
+      );
+    },
     [
       ariaDescribedBy,
       ariaLabel,
@@ -191,17 +195,15 @@ const Button = ({
     ]
   );
 
-  return (
-    <>
-      {tooltipText && !isDisabled && (
-        <Tooltip ariaType="description" placement="top" text={tooltipText}>
-          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
-        </Tooltip>
-      )}
+  if (tooltipText) {
+    return (
+      <Tooltip ariaType="description" placement="top" text={tooltipText}>
+        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
+      </Tooltip>
+    );
+  }
 
-      {(isDisabled || !tooltipText) && renderButton(muiProps)}
-    </>
-  );
+  return renderButton(muiProps);
 };
 
 const MemoizedButton = memo(Button);

package/src/MuiPropsContext.ts

@@ -13,7 +13,6 @@
 import { createContext, useContext } from "react";
 
 export type MuiPropsContextType = Record<string, unknown>;
-
 export const MuiPropsContext = createContext<MuiPropsContextType>({});
 
 export const useMuiProps = () => useContext(MuiPropsContext);

package/src/Select.tsx

@@ -288,11 +288,13 @@ const Select = <
               />
             )}
             {option.text}
-            {internalSelectedValues === option?.value && (
-              <ListItemSecondaryAction>
-                <CheckIcon />
-              </ListItemSecondaryAction>
-            )}
+            {!hasMultipleChoices &&
+              (internalSelectedValues?.includes(option.value) ||
+                internalSelectedValues === option.value) && (
+                <ListItemSecondaryAction>
+                  <CheckIcon />
+                </ListItemSecondaryAction>
+              )}
           </MenuItem>
         );
       }),