@okta/odyssey-react-mui 1.9.11 → 1.9.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.11",
+  "version": "1.9.13",
   "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.9.11",
+    "@okta/odyssey-design-tokens": "1.9.13",
     "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": "0482f9184d2bb88f465ed5b9296806bc540e1fa3"
+  "gitHead": "747861bf33f9c65b901782e306c16b0ccf26a942"
 }

package/src/Accordion.tsx

@@ -11,7 +11,7 @@
  */
 
 import { ReactNode, memo } from "react";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import {
   Accordion as MuiAccordion,
   AccordionDetails as MuiAccordionDetails,
@@ -60,7 +60,7 @@ export type AccordionProps = {
       isExpanded?: never;
     }
 ) &
-  SeleniumProps;
+  AllowedProps;
 
 const Accordion = ({
   children,
@@ -70,6 +70,7 @@ const Accordion = ({
   isDisabled,
   isExpanded,
   onChange,
+  translate,
 }: AccordionProps) => {
   return (
     <MuiAccordion
@@ -81,7 +82,9 @@ const Accordion = ({
       className={hasShadow ? `hasShadow` : undefined}
     >
       <MuiAccordionSummary expandIcon={<ChevronDownIcon />}>
-        <Support component="div">{label}</Support>
+        <Support component="div" translate={translate}>
+          {label}
+        </Support>
       </MuiAccordionSummary>
       <MuiAccordionDetails>{children}</MuiAccordionDetails>
     </MuiAccordion>

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

@@ -10,11 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export type SeleniumProps = {
+export type AllowedProps = {
   /**
    * This prop puts a `data` attribute on an HTML element in this component with the value provided.
    *
    * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.
    */
   testId?: string;
+  /**
+   * This prop puts a `translate` attribute on an HTML element. It should be used to indicate whether text within the element should be translated.
+   */
+  translate?: "yes" | "no";
 };

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import {
   ComponentControlledState,
   useInputValues,
@@ -169,7 +169,7 @@ export type AutocompleteProps<
   | "isOptional"
   | "name"
 > &
-  SeleniumProps;
+  AllowedProps;
 
 const Autocomplete = <
   OptionType,
@@ -199,6 +199,7 @@ const Autocomplete = <
   value,
   getIsOptionEqualToValue,
   testId,
+  translate,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const controlledStateRef = useRef(
     getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
@@ -329,6 +330,7 @@ const Autocomplete = <
       readOnly={isReadOnly}
       renderInput={renderInput}
       isOptionEqualToValue={getIsOptionEqualToValue}
+      translate={translate}
     />
   );
 };

package/src/Badge.tsx

@@ -17,7 +17,7 @@ import {
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { Box } from "./Box";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export const badgeTypeValues = ["default", "attention", "danger"] as const;
 
@@ -25,7 +25,7 @@ export type BadgeProps = {
   badgeContent: number;
   badgeContentMax?: number;
   type?: (typeof badgeTypeValues)[number];
-} & SeleniumProps;
+} & AllowedProps;
 
 const badgeTypeColors = (odysseyTokens: DesignTokens) => ({
   default: {
@@ -45,24 +45,23 @@ const badgeTypeColors = (odysseyTokens: DesignTokens) => ({
 const Badge = ({
   badgeContent,
   badgeContentMax = 999,
+  testId,
+  translate,
   type = "default",
 }: BadgeProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
-  const threeDigitLimitedMax =
-    greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;
-  const isOverContentMax = Boolean(
-    badgeContent && badgeContent > threeDigitLimitedMax
-  );
-  const overContentMaxMessage = `${greaterThanZeroContentMax}+`;
-  const formattedContent = isOverContentMax
-    ? overContentMaxMessage
-    : badgeContent;
-  const contentIsLongerThanOneChar = formattedContent?.toString()?.length > 1;
+  const renderBadge = useMemo(() => {
+    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
+    const threeDigitLimitedMax =
+      greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;
+    const isOverContentMax = badgeContent > threeDigitLimitedMax;
+    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;
+    const formattedContent = isOverContentMax
+      ? overContentMaxMessage
+      : badgeContent.toString();
 
-  const badgeStyles = useMemo<CSSProperties>(
-    () => ({
+    const badgeStyles: CSSProperties = {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -70,27 +69,38 @@ const Badge = ({
       height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
       minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
       // 6px horizontal padding per design requirements
-      padding: `0 calc(${odysseyDesignTokens.Spacing1} * 1.5)`,
+      padding: "0 6px",
       backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,
       color: badgeTypeColors(odysseyDesignTokens)[type].font,
-      borderRadius: contentIsLongerThanOneChar
-        ? `${odysseyDesignTokens.BorderRadiusOuter}`
-        : "50%",
+      borderRadius:
+        formattedContent.length > 1
+          ? `${odysseyDesignTokens.BorderRadiusOuter}`
+          : "50%",
       fontSize: `${odysseyDesignTokens.TypographyScale0}`,
       fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,
       fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,
       lineHeight: 1,
-    }),
-    [type, contentIsLongerThanOneChar, odysseyDesignTokens]
-  );
+      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,
+      transitionProperty: `background-color, color`,
+    };
 
-  const shouldHideBadge = badgeContent <= 0 || !badgeContent;
+    const hasNotificationCount = badgeContent && badgeContent > 0;
 
-  if (shouldHideBadge) {
-    return null;
-  }
+    return hasNotificationCount ? (
+      <Box sx={badgeStyles} data-se={testId} translate={translate}>
+        {formattedContent}
+      </Box>
+    ) : null;
+  }, [
+    badgeContent,
+    badgeContentMax,
+    odysseyDesignTokens,
+    testId,
+    translate,
+    type,
+  ]);
 
-  return <Box sx={badgeStyles}>{formattedContent}</Box>;
+  return renderBadge;
 };
 
 const MemoizedBadge = memo(Badge);

package/src/Banner.tsx

@@ -16,7 +16,7 @@ import { ScreenReaderText } from "./ScreenReaderText";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 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;
-} & SeleniumProps;
+} & AllowedProps;
 
 const Banner = ({
   linkUrl,
@@ -66,6 +66,7 @@ const Banner = ({
   severity,
   text,
   testId,
+  translate,
 }: BannerProps) => {
   const { t } = useTranslation();
 
@@ -77,10 +78,12 @@ const Banner = ({
       severity={severity}
       variant="banner"
     >
-      <ScreenReaderText>{t(`severity.${severity}`)}:</ScreenReaderText>
-      <AlertTitle>{text}</AlertTitle>
+      <ScreenReaderText translate={translate}>
+        {t(`severity.${severity}`)}:
+      </ScreenReaderText>
+      <AlertTitle translate={translate}>{text}</AlertTitle>
       {linkUrl && (
-        <Link href={linkUrl} variant="monochrome">
+        <Link href={linkUrl} variant="monochrome" translate={translate}>
           {linkText}
         </Link>
       )}

package/src/Box.tsx

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

package/src/Breadcrumbs.tsx

@@ -29,6 +29,7 @@ import {
 import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated";
 import { Subordinate } from "./Typography";
 import { useTranslation } from "react-i18next";
+import { AllowedProps } from "./AllowedProps";
 
 export type BreadcrumbType = "listItem" | "menuItem" | "currentPage";
 
@@ -42,7 +43,7 @@ export type BreadcrumbsProps = {
   children: ReactElement<typeof Breadcrumb>[];
   homeHref?: string;
   maxVisibleItems?: number;
-};
+} & AllowedProps;
 
 export type BreadcrumbContextType = {
   breadcrumbType: BreadcrumbType;
@@ -101,6 +102,8 @@ const BreadcrumbList = ({
   children,
   homeHref,
   maxVisibleItems = defaultTruncationValue,
+  testId,
+  translate,
 }: BreadcrumbsProps) => {
   const { t } = useTranslation();
 
@@ -137,6 +140,8 @@ const BreadcrumbList = ({
     <MuiBreadcrumbs
       maxItems={children.length + 1}
       aria-label={t("breadcrumbs.label.text")}
+      data-se={testId}
+      translate={translate}
     >
       {homeHref && (
         <ButtonBase href={homeHref} aria-label={t("breadcrumbs.home.text")}>

package/src/Button.tsx

@@ -22,7 +22,7 @@ import {
 
 import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import { FocusHandle } from "./@types/react-augment";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
@@ -113,7 +113,7 @@ export type ButtonProps = {
       startIcon?: ReactElement;
     }
 ) &
-  SeleniumProps;
+  AllowedProps;
 
 const Button = ({
   ariaDescribedBy,
@@ -130,6 +130,7 @@ const Button = ({
   startIcon,
   testId,
   tooltipText,
+  translate,
   type = "button",
   variant,
 }: ButtonProps) => {
@@ -165,6 +166,7 @@ const Button = ({
         ref={ref}
         size={size}
         startIcon={startIcon}
+        translate={translate}
         type={type}
         variant={variant}
       >
@@ -184,6 +186,7 @@ const Button = ({
       size,
       startIcon,
       testId,
+      translate,
       type,
       variant,
     ]

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export const calloutRoleValues = ["status", "alert"] as const;
 export const calloutSeverityValues = [
@@ -44,15 +44,24 @@ export type CalloutProps = {
    * The title of the Callout
    */
   title?: string;
-} & SeleniumProps;
+} & AllowedProps;
 
-const Callout = ({ children, role, severity, testId, title }: CalloutProps) => {
+const Callout = ({
+  children,
+  role,
+  severity,
+  testId,
+  title,
+  translate,
+}: CalloutProps) => {
   const { t } = useTranslation();
 
   return (
     <Alert data-se={testId} role={role} severity={severity} variant="callout">
-      <ScreenReaderText>{t(`severity.${severity}`)}</ScreenReaderText>
-      {title && <AlertTitle>{title}</AlertTitle>}
+      <ScreenReaderText translate={translate}>
+        {t(`severity.${severity}`)}
+      </ScreenReaderText>
+      {title && <AlertTitle translate={translate}>{title}</AlertTitle>}
       <Box component="div">{children}</Box>
     </Alert>
   );

package/src/Checkbox.tsx

@@ -22,7 +22,7 @@ import {
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Typography } from "./Typography";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import { ComponentControlledState, getControlState } from "./inputUtils";
 import { CheckedFieldProps } from "./FormCheckedProps";
 import { FocusHandle } from "./@types/react-augment";
@@ -80,7 +80,7 @@ export type CheckboxProps = {
   onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
   CheckedFieldProps<MuiCheckboxProps> &
-  SeleniumProps;
+  AllowedProps;
 
 const Checkbox = ({
   ariaLabel,
@@ -98,6 +98,7 @@ const Checkbox = ({
   onChange: onChangeProp,
   onBlur: onBlurProp,
   testId,
+  translate,
   validity = "inherit",
   value,
 }: CheckboxProps) => {
@@ -141,10 +142,10 @@ const Checkbox = ({
             </Typography>
           </>
         )}
-        {hint && <FormHelperText>{hint}</FormHelperText>}
+        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}
       </>
     );
-  }, [isRequired, labelProp, hint, t]);
+  }, [isRequired, labelProp, hint, t, translate]);
 
   const onChange = useCallback<NonNullable<MuiCheckboxProps["onChange"]>>(
     (event, checked) => {
@@ -192,6 +193,7 @@ const Checkbox = ({
       value={value}
       required={isRequired}
       onBlur={onBlur}
+      translate={translate}
     />
   );
 };

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export type CheckboxGroupProps = {
   /**
@@ -37,7 +37,7 @@ export type CheckboxGroupProps = {
   FieldComponentProps,
   "errorMessage" | "hint" | "HintLinkComponent" | "isDisabled"
 > &
-  SeleniumProps;
+  AllowedProps;
 
 const CheckboxGroup = ({
   children,
@@ -48,6 +48,7 @@ const CheckboxGroup = ({
   isRequired = false,
   label,
   testId,
+  translate,
 }: CheckboxGroupProps) => {
   const renderFieldComponent = useCallback(
     ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (
@@ -56,11 +57,12 @@ const CheckboxGroup = ({
         aria-errormessage={errorMessageElementId}
         aria-labelledby={labelElementId}
         data-se={testId}
+        translate={translate}
       >
         {children}
       </MuiFormGroup>
     ),
-    [children, testId]
+    [children, testId, translate]
   );
 
   return (

package/src/CircularProgress.tsx

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

package/src/Dialog.tsx

@@ -28,7 +28,7 @@ import {
   ReactElement,
 } from "react";
 
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export type DialogProps = {
   /**
@@ -60,7 +60,7 @@ export type DialogProps = {
    */
   title: string;
   ariaLabel: string;
-} & SeleniumProps;
+} & AllowedProps;
 
 const Dialog = ({
   callToActionFirstComponent,
@@ -71,6 +71,7 @@ const Dialog = ({
   onClose,
   testId,
   title,
+  translate,
   ariaLabel,
 }: DialogProps) => {
   const [isContentScrollable, setIsContentScrollable] = useState(false);
@@ -107,7 +108,7 @@ const Dialog = ({
 
   return (
     <MuiDialog data-se={testId} open={isOpen} onClose={onClose}>
-      <DialogTitle>
+      <DialogTitle translate={translate}>
         {title}
         <Button
           ariaLabel={ariaLabel}

package/src/FieldError.tsx

@@ -16,19 +16,19 @@ import { FormHelperText } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export type FieldErrorProps = {
   id?: string;
   text: string;
-} & SeleniumProps;
+} & AllowedProps;
 
-const FieldError = ({ id, testId, text }: FieldErrorProps) => {
+const FieldError = ({ id, testId, text, translate }: FieldErrorProps) => {
   const { t } = useTranslation();
 
   return (
-    <FormHelperText data-se={testId} error id={id}>
-      <ScreenReaderText>{`${t(
+    <FormHelperText data-se={testId} error id={id} translate={translate}>
+      <ScreenReaderText translate={translate}>{`${t(
         "fielderror.screenreader.text"
       )}:`}</ScreenReaderText>
       {text}

package/src/FieldHint.tsx

@@ -15,17 +15,23 @@ import { memo } from "react";
 import { FormHelperText } from "@mui/material";
 
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export type FieldHintProps = {
   LinkComponent?: FieldComponentProps["HintLinkComponent"];
   id?: string;
   text: string;
-} & SeleniumProps;
+} & AllowedProps;
 
-const FieldHint = ({ id, LinkComponent, testId, text }: FieldHintProps) => {
+const FieldHint = ({
+  id,
+  LinkComponent,
+  testId,
+  text,
+  translate,
+}: FieldHintProps) => {
   return (
-    <FormHelperText data-se={testId} id={id}>
+    <FormHelperText data-se={testId} id={id} translate={translate}>
       {text}
       {LinkComponent && (
         <>

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export type FieldLabelProps = {
   hasVisibleLabel: boolean;
@@ -24,7 +24,7 @@ export type FieldLabelProps = {
   inputId: string;
   isOptional: boolean;
   text: string;
-} & SeleniumProps;
+} & AllowedProps;
 
 const FieldLabel = ({
   hasVisibleLabel,
@@ -32,26 +32,32 @@ const FieldLabel = ({
   inputId,
   isOptional,
   testId,
+  translate,
   text,
 }: FieldLabelProps) => {
   const { t } = useTranslation();
 
   const inputLabel = useMemo(
     () => (
-      <MuiInputLabel data-se={testId} htmlFor={inputId} id={id}>
+      <MuiInputLabel
+        data-se={testId}
+        htmlFor={inputId}
+        id={id}
+        translate={translate}
+      >
         <span>{text}</span>
         {isOptional && (
           <Subordinate>{t("fieldlabel.optional.text")}</Subordinate>
         )}
       </MuiInputLabel>
     ),
-    [id, inputId, isOptional, testId, text, t]
+    [id, inputId, isOptional, testId, translate, text, t]
   );
 
   return hasVisibleLabel ? (
     inputLabel
   ) : (
-    <ScreenReaderText>{inputLabel}</ScreenReaderText>
+    <ScreenReaderText translate={translate}>{inputLabel}</ScreenReaderText>
   );
 };