@okta/odyssey-react-mui 1.12.9 → 1.12.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.12.9",
+  "version": "1.12.11",
   "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.11",
     "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": "ebf671d9cd017cca109a7d341f500f54c3e47e41"
 }

package/src/Accordion.tsx

@@ -11,7 +11,7 @@
  */
 
 import { ReactNode, memo } from "react";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import {
   Accordion as MuiAccordion,
   AccordionDetails as MuiAccordionDetails,
@@ -65,7 +65,7 @@ export type AccordionProps = {
       isExpanded?: never;
     }
 ) &
-  AllowedProps;
+  HtmlProps;
 
 const Accordion = ({
   children,

package/src/Autocomplete.tsx

@@ -21,7 +21,7 @@ import { memo, useCallback, useMemo, useRef } from "react";
 
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import {
   ComponentControlledState,
   useInputValues,
@@ -171,7 +171,7 @@ export type AutocompleteProps<
   | "isOptional"
   | "name"
 > &
-  AllowedProps;
+  HtmlProps;
 
 const Autocomplete = <
   OptionType,

package/src/Badge.tsx

@@ -17,7 +17,7 @@ import {
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { Box } from "./Box";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type BadgeContentMax = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
 
@@ -27,7 +27,7 @@ export type BadgeProps = {
   badgeContent: number;
   badgeContentMax?: BadgeContentMax;
   type?: (typeof badgeTypeValues)[number];
-} & AllowedProps;
+} & HtmlProps;
 
 const badgeTypeColors = (odysseyTokens: DesignTokens) => ({
   default: {

package/src/Banner.tsx

@@ -16,7 +16,7 @@ import { ScreenReaderText } from "./ScreenReaderText";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export const bannerRoleValues = ["status", "alert"] as const;
 export const bannerSeverityValues: AlertColor[] = [
@@ -56,7 +56,7 @@ export type BannerProps = {
    * The text content of the alert
    */
   text: string;
-} & AllowedProps;
+} & HtmlProps;
 
 const Banner = ({
   linkUrl,

package/src/Box.tsx

@@ -13,14 +13,14 @@
 import { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
 import { ReactNode, forwardRef, memo } from "react";
 
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type BoxProps = {
   children?: ReactNode;
   component?: MuiBoxProps["component"];
   id?: MuiBoxProps["id"];
   sx?: MuiBoxProps["sx"];
-} & AllowedProps;
+} & HtmlProps;
 
 const Box = forwardRef<HTMLElement, BoxProps>(
   ({ children, component, id, sx, testId, translate }, ref) => (

package/src/Breadcrumbs.tsx

@@ -29,7 +29,7 @@ import {
 import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated";
 import { Subordinate } from "./Typography";
 import { useTranslation } from "react-i18next";
-import { AllowedProps } from "./AllowedProps";
+import { HtmlProps } from "./HtmlProps";
 
 export type BreadcrumbType = "listItem" | "menuItem" | "currentPage";
 
@@ -43,7 +43,7 @@ export type BreadcrumbsProps = {
   children: ReactElement<typeof Breadcrumb>[];
   homeHref?: string;
   maxVisibleItems?: number;
-} & AllowedProps;
+} & HtmlProps;
 
 export type BreadcrumbContextType = {
   breadcrumbType: BreadcrumbType;

package/src/Button.tsx

@@ -22,7 +22,7 @@ import {
 
 import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
@@ -113,7 +113,7 @@ export type ButtonProps = {
       startIcon?: ReactElement;
     }
 ) &
-  AllowedProps;
+  HtmlProps;
 
 const Button = ({
   ariaDescribedBy,
@@ -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/Callout.tsx

@@ -15,7 +15,7 @@ import { Alert, AlertTitle, Box } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { Link } from "./Link";
 import { Paragraph } from "./Typography";
 
@@ -78,7 +78,7 @@ export type CalloutProps = {
         linkText?: never;
       }
   ) &
-  AllowedProps;
+  HtmlProps;
 
 const Callout = ({
   children,

package/src/Checkbox.tsx

@@ -22,7 +22,7 @@ import {
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Typography } from "./Typography";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import {
   ComponentControlledState,
   FocusHandle,
@@ -83,7 +83,7 @@ export type CheckboxProps = {
   onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
   CheckedFieldProps<MuiCheckboxProps> &
-  AllowedProps;
+  HtmlProps;
 
 const Checkbox = ({
   ariaLabel,

package/src/CheckboxGroup.tsx

@@ -16,7 +16,7 @@ import { memo, ReactElement, useCallback } from "react";
 import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type CheckboxGroupProps = {
   /**
@@ -43,7 +43,7 @@ export type CheckboxGroupProps = {
   | "id"
   | "isDisabled"
 > &
-  AllowedProps;
+  HtmlProps;
 
 const CheckboxGroup = ({
   ariaDescribedBy,

package/src/CircularProgress.tsx

@@ -13,7 +13,7 @@
 import { memo } from "react";
 import { CircularProgress as MuiCircularProgress } from "@mui/material";
 
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type CircularProgressProps = {
   /**
@@ -25,7 +25,7 @@ export type CircularProgressProps = {
    * If undefined, the spinner will spin perpetually.
    */
   value?: number;
-} & AllowedProps;
+} & HtmlProps;
 
 const CircularProgress = ({
   ariaLabel,

package/src/Dialog.tsx

@@ -29,7 +29,7 @@ import {
   ReactElement,
 } from "react";
 
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type DialogProps = {
   /**
@@ -64,7 +64,7 @@ export type DialogProps = {
    * The title of the Dialog
    */
   title: string;
-} & AllowedProps;
+} & HtmlProps;
 
 const Dialog = ({
   callToActionFirstComponent,

package/src/FieldError.tsx

@@ -17,14 +17,14 @@ import { ScreenReaderText } from "./ScreenReaderText";
 import { ErrorMessageList } from "./ErrorMessageList";
 import { useTranslation } from "react-i18next";
 
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { Box } from "./Box";
 
 export type FieldErrorProps = {
   id?: string;
   message?: string;
   messageList?: string[];
-} & AllowedProps;
+} & HtmlProps;
 
 const FieldError = ({
   id,

package/src/FieldHint.tsx

@@ -15,13 +15,13 @@ import { memo } from "react";
 import { FormHelperText } from "@mui/material";
 
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type FieldHintProps = {
   LinkComponent?: FieldComponentProps["HintLinkComponent"];
   id?: string;
   text: string;
-} & AllowedProps;
+} & HtmlProps;
 
 const FieldHint = ({
   id,

package/src/FieldLabel.tsx

@@ -16,7 +16,7 @@ import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { Subordinate } from "./Typography";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type FieldLabelProps = {
   hasVisibleLabel: boolean;
@@ -24,7 +24,7 @@ export type FieldLabelProps = {
   inputId: string;
   isOptional: boolean;
   text: string;
-} & AllowedProps;
+} & HtmlProps;
 
 const FieldLabel = ({
   hasVisibleLabel,

package/src/Fieldset.tsx

@@ -18,7 +18,7 @@ import { FieldsetContext } from "./FieldsetContext";
 import { Legend, Support } from "./Typography";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 import { useUniqueId } from "./useUniqueId";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type FieldsetProps = {
   /**
@@ -49,7 +49,7 @@ export type FieldsetProps = {
    * The name associated with the group.
    */
   name?: string;
-} & AllowedProps;
+} & HtmlProps;
 
 const Fieldset = ({
   alert,

package/src/Form.tsx

@@ -17,7 +17,7 @@ import { Button } from "./Button";
 import { Callout } from "./Callout";
 import { Heading4, Support } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export const formEncodingTypeValues = [
   "application/x-www-form-urlencoded",
@@ -85,7 +85,7 @@ export type FormProps = {
    * The title of the Form
    */
   title?: string;
-} & AllowedProps;
+} & HtmlProps;
 
 const Form = ({
   alert,

package/src/{AllowedProps.ts → HtmlProps.ts}

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export type AllowedProps = {
+export type HtmlProps = {
   /**
    * This prop puts a `data` attribute on an HTML element in this component with the value provided.
    *

package/src/Link.tsx

@@ -12,7 +12,7 @@
 
 import { memo, ReactElement, useImperativeHandle, useRef } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
 
 import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
@@ -57,7 +57,7 @@ export type LinkProps = {
    * The visual presentation of the Link (default or monochrome)
    */
   variant?: (typeof linkVariantValues)[number];
-} & AllowedProps;
+} & HtmlProps;
 
 const Link = ({
   children,

package/src/MenuButton.tsx

@@ -29,7 +29,7 @@ import { ChevronDownIcon, MoreIcon } from "./icons.generated";
 import { FieldComponentProps } from "./FieldComponentProps";
 import { MenuContext, MenuContextType } from "./MenuContext";
 import { NullElement } from "./NullElement";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export const menuAlignmentValues = ["left", "right"] as const;
 
@@ -111,7 +111,7 @@ export type MenuButtonProps = {
     }
 ) &
   Pick<FieldComponentProps, "isDisabled"> &
-  AllowedProps;
+  HtmlProps;
 
 const MenuButton = ({
   ariaLabel,

package/src/MenuItem.tsx

@@ -18,7 +18,7 @@ import { menuItemClasses } from "@mui/material/MenuItem";
 import { memo, useCallback, useContext, type ReactNode } from "react";
 
 import { MenuContext } from "./MenuContext";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 
 export type MenuItemProps = {
   /**
@@ -51,7 +51,7 @@ export type MenuItemProps = {
    * - "destructive": A variant indicating a destructive action.
    */
   variant?: "default" | "destructive";
-} & AllowedProps;
+} & HtmlProps;
 
 const MenuItem = ({
   children,

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/NativeSelect.tsx

@@ -26,7 +26,7 @@ import {
 } from "@mui/material";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
 import { ForwardRefWithType } from "./@types/react-augment";
 
@@ -103,7 +103,7 @@ export type NativeSelectProps<
   | "isFullWidth"
   | "isOptional"
 > &
-  AllowedProps;
+  HtmlProps;
 
 const NativeSelect: ForwardRefWithType = forwardRef(
   <

package/src/PasswordField.tsx

@@ -25,7 +25,7 @@ import {
 import { ShowIcon, HideIcon } from "./icons.generated";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { useTranslation } from "react-i18next";
 import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
 
@@ -77,7 +77,7 @@ export type PasswordFieldProps = {
    */
   value?: string;
 } & FieldComponentProps &
-  AllowedProps;
+  HtmlProps;
 
 const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (

package/src/Radio.tsx

@@ -19,7 +19,7 @@ import {
 import { memo, useCallback, useRef, useImperativeHandle } from "react";
 
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
 
 export type RadioProps = {
@@ -52,7 +52,7 @@ export type RadioProps = {
    */
   onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "isDisabled" | "name"> &
-  AllowedProps;
+  HtmlProps;
 
 const Radio = ({
   inputRef,

package/src/RadioGroup.tsx

@@ -19,7 +19,7 @@ import { memo, ReactElement, useCallback, useRef } from "react";
 import { Radio, RadioProps } from "./Radio";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { getControlState, useInputValues } from "./inputUtils";
 
 export type RadioGroupProps = {
@@ -54,7 +54,7 @@ export type RadioGroupProps = {
   | "isDisabled"
   | "name"
 > &
-  AllowedProps;
+  HtmlProps;
 
 const RadioGroup = ({
   ariaDescribedBy,

package/src/ScreenReaderText.tsx

@@ -13,14 +13,14 @@
 import { memo, ReactNode } from "react";
 import { Box } from "@mui/material";
 import { visuallyHidden } from "@mui/utils";
-import { AllowedProps } from "./AllowedProps";
+import { HtmlProps } from "./HtmlProps";
 
 export type ScreenReaderTextProps = {
   /**
    * The visually-hidden text.
    */
   children: ReactNode;
-} & AllowedProps;
+} & HtmlProps;
 
 /**
  * MUI sx expects you pass in a CSS object, not an object with CSS.

package/src/SearchField.tsx

@@ -24,7 +24,7 @@ import {
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import { getControlState, useInputValues } from "./inputUtils";
 
 export type SearchFieldProps = {
@@ -82,7 +82,7 @@ export type SearchFieldProps = {
   FieldComponentProps,
   "ariaDescribedBy" | "id" | "isDisabled" | "name" | "isFullWidth"
 > &
-  AllowedProps;
+  HtmlProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (

package/src/Select.tsx

@@ -33,7 +33,7 @@ import { SelectProps as MuiSelectProps } from "@mui/material";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import { CheckIcon } from "./icons.generated";
-import type { AllowedProps } from "./AllowedProps";
+import type { HtmlProps } from "./HtmlProps";
 import {
   ComponentControlledState,
   FocusHandle,
@@ -109,7 +109,7 @@ export type SelectProps<
   | "isOptional"
   | "name"
 > &
-  AllowedProps;
+  HtmlProps;
 
 /**
  * Options in Odyssey <Select> are passed as an array, which can contain any combination
@@ -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>
         );
       }),