@okta/odyssey-react-mui 1.9.11 → 1.9.13

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export type FieldsetProps = {
   /**
@@ -49,7 +49,7 @@ export type FieldsetProps = {
    * The name associated with the group.
    */
   name?: string;
-} & SeleniumProps;
+} & AllowedProps;
 
 const Fieldset = ({
   alert,
@@ -60,6 +60,7 @@ const Fieldset = ({
   legend,
   name,
   testId,
+  translate,
 }: FieldsetProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const id = useUniqueId(idOverride);
@@ -90,9 +91,9 @@ const Fieldset = ({
         },
       }}
     >
-      <Legend>{legend}</Legend>
+      <Legend translate={translate}>{legend}</Legend>
 
-      {description && <Support>{description}</Support>}
+      {description && <Support translate={translate}>{description}</Support>}
 
       {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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export const formEncodingTypeValues = [
   "application/x-www-form-urlencoded",
@@ -85,7 +85,7 @@ export type FormProps = {
    * The title of the Form
    */
   title?: string;
-} & SeleniumProps;
+} & AllowedProps;
 
 const Form = ({
   alert,
@@ -101,6 +101,7 @@ const Form = ({
   target,
   testId,
   title,
+  translate,
 }: FormProps) => {
   const id = useUniqueId(idOverride);
 
@@ -127,8 +128,12 @@ const Form = ({
           marginBlockEnd: (theme) => theme.spacing(4),
         }}
       >
-        {title && <Heading4 component="h1">{title}</Heading4>}
-        {description && <Support>{description}</Support>}
+        {title && (
+          <Heading4 component="h1" translate={translate}>
+            {title}
+          </Heading4>
+        )}
+        {description && <Support translate={translate}>{description}</Support>}
         {alert}
       </Box>
       <Box component="div">{children}</Box>

package/src/Link.tsx

@@ -12,7 +12,7 @@
 
 import { memo, ReactElement, useImperativeHandle, useRef } from "react";
 import { ExternalLinkIcon } from "./icons.generated";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
 import { FocusHandle } from "./@types/react-augment";
@@ -57,7 +57,7 @@ export type LinkProps = {
    * The visual presentation of the Link (default or monochrome)
    */
   variant?: (typeof linkVariantValues)[number];
-} & SeleniumProps;
+} & AllowedProps;
 
 const Link = ({
   children,
@@ -67,6 +67,7 @@ const Link = ({
   rel,
   target,
   testId,
+  translate,
   variant,
   onClick,
 }: LinkProps) => {
@@ -91,6 +92,7 @@ const Link = ({
       ref={ref}
       rel={rel}
       target={target}
+      translate={translate}
       variant={variant}
       onClick={onClick}
     >

package/src/MenuButton.tsx

@@ -28,7 +28,7 @@ import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
 
 import { MenuContext, MenuContextType } from "./MenuContext";
 import { NullElement } from "./NullElement";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export const menuAlignmentValues = ["left", "right"] as const;
 
@@ -109,7 +109,7 @@ export type MenuButtonProps = {
       buttonLabel?: undefined | "";
     }
 ) &
-  SeleniumProps;
+  AllowedProps;
 
 const MenuButton = ({
   ariaLabel,
@@ -126,6 +126,7 @@ const MenuButton = ({
   size,
   testId,
   tooltipText,
+  translate,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -197,6 +198,7 @@ const MenuButton = ({
         onClick={openMenu}
         size={size}
         tooltipText={tooltipText}
+        translate={translate}
         variant={buttonVariant}
       />
 

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export type MenuItemProps = {
   /**
@@ -51,7 +51,7 @@ export type MenuItemProps = {
    * - "destructive": A variant indicating a destructive action.
    */
   variant?: "default" | "destructive";
-} & SeleniumProps;
+} & AllowedProps;
 
 const MenuItem = ({
   children,

package/src/NativeSelect.tsx

@@ -24,7 +24,7 @@ import {
 } from "@mui/material";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import { getControlState, useInputValues } from "./inputUtils";
 import { ForwardRefWithType } from "./@types/react-augment";
 
@@ -89,7 +89,7 @@ export type NativeSelectProps<
   | "isFullWidth"
   | "isOptional"
 > &
-  SeleniumProps;
+  AllowedProps;
 
 const NativeSelect: ForwardRefWithType = forwardRef(
   <
@@ -112,6 +112,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
       onChange: onChangeProp,
       onFocus,
       testId,
+      translate,
       value,
       children,
     }: NativeSelectProps<Value, HasMultipleChoices>,
@@ -164,6 +165,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
           onChange={onChange}
           onFocus={onFocus}
           ref={ref}
+          translate={translate}
         />
       ),
       [
@@ -176,6 +178,7 @@ const NativeSelect: ForwardRefWithType = forwardRef(
         onFocus,
         ref,
         testId,
+        translate,
       ]
     );
 

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import { useTranslation } from "react-i18next";
 import { getControlState, useInputValues } from "./inputUtils";
 import { FocusHandle } from "./@types/react-augment";
@@ -78,7 +78,7 @@ export type PasswordFieldProps = {
    */
   value?: string;
 } & FieldComponentProps &
-  SeleniumProps;
+  AllowedProps;
 
 const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (
@@ -102,6 +102,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       onBlur,
       placeholder,
       testId,
+      translate,
       value,
     },
     ref
@@ -191,6 +192,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           readOnly={isReadOnly}
           ref={ref}
           required={!isOptional}
+          translate={translate}
           type={inputType}
         />
       ),
@@ -211,6 +213,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         hasShowPassword,
         ref,
         testId,
+        translate,
       ]
     );
 

package/src/Radio.tsx

@@ -19,7 +19,7 @@ import {
 import { memo, useCallback, useRef, useImperativeHandle } from "react";
 
 import { FieldComponentProps } from "./FieldComponentProps";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import { FocusHandle } from "./@types/react-augment";
 
 export type RadioProps = {
@@ -52,7 +52,7 @@ export type RadioProps = {
    */
   onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "isDisabled" | "name"> &
-  SeleniumProps;
+  AllowedProps;
 
 const Radio = ({
   inputFocusRef,
@@ -62,6 +62,7 @@ const Radio = ({
   label,
   name,
   testId,
+  translate,
   value,
   onChange: onChangeProp,
   onBlur: onBlurProp,
@@ -103,6 +104,7 @@ const Radio = ({
       disabled={isDisabled}
       label={label}
       name={name}
+      translate={translate}
       value={value}
       onBlur={onBlur}
     />

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import { getControlState, useInputValues } from "./inputUtils";
 
 export type RadioGroupProps = {
@@ -47,7 +47,7 @@ export type RadioGroupProps = {
   FieldComponentProps,
   "errorMessage" | "hint" | "HintLinkComponent" | "id" | "isDisabled" | "name"
 > &
-  SeleniumProps;
+  AllowedProps;
 
 const RadioGroup = ({
   children,
@@ -61,6 +61,7 @@ const RadioGroup = ({
   name: nameOverride,
   onChange: onChangeProp,
   testId,
+  translate,
   value,
 }: RadioGroupProps) => {
   const controlledStateRef = useRef(
@@ -89,11 +90,12 @@ const RadioGroup = ({
         id={id}
         name={nameOverride ?? id}
         onChange={onChange}
+        translate={translate}
       >
         {children}
       </MuiRadioGroup>
     ),
-    [children, inputValues, nameOverride, onChange, testId]
+    [children, inputValues, nameOverride, onChange, testId, translate]
   );
 
   return (

package/src/ScreenReaderText.tsx

@@ -13,13 +13,14 @@
 import { memo, ReactNode } from "react";
 import { Box } from "@mui/material";
 import { visuallyHidden } from "@mui/utils";
+import { AllowedProps } from "./AllowedProps";
 
 export type ScreenReaderTextProps = {
   /**
    * The visually-hidden text.
    */
   children: ReactNode;
-};
+} & AllowedProps;
 
 /**
  * MUI sx expects you pass in a CSS object, not an object with CSS.
@@ -28,8 +29,8 @@ export type ScreenReaderTextProps = {
  */
 const style = { ...visuallyHidden };
 
-const ScreenReaderText = ({ children }: ScreenReaderTextProps) => (
-  <Box sx={style} component="span">
+const ScreenReaderText = ({ children, translate }: ScreenReaderTextProps) => (
+  <Box sx={style} component="span" translate={translate}>
     {children}
   </Box>
 );

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import { getControlState, useInputValues } from "./inputUtils";
 
 export type SearchFieldProps = {
@@ -79,7 +79,7 @@ export type SearchFieldProps = {
    */
   value?: string;
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name" | "isFullWidth"> &
-  SeleniumProps;
+  AllowedProps;
 
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
@@ -98,6 +98,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       onClear: onClearProp,
       placeholder,
       testId,
+      translate,
       value,
     },
     ref
@@ -161,6 +162,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
               <SearchIcon />
             </InputAdornment>
           }
+          translate={translate}
           type="search"
         />
       ),
@@ -178,6 +180,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         placeholder,
         ref,
         testId,
+        translate,
       ]
     );
 

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 { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 import {
   ComponentControlledState,
   useInputValues,
@@ -106,7 +106,7 @@ export type SelectProps<
   | "isOptional"
   | "name"
 > &
-  SeleniumProps;
+  AllowedProps;
 
 /**
  * Options in Odyssey <Select> are passed as an array, which can contain any combination
@@ -146,6 +146,7 @@ const Select = <
   onFocus,
   options,
   testId,
+  translate,
   value,
 }: SelectProps<Value, HasMultipleChoices>) => {
   const hasMultipleChoices = useMemo(
@@ -297,6 +298,7 @@ const Select = <
         onChange={onChange}
         onFocus={onFocus}
         renderValue={hasMultipleChoices ? renderValue : undefined}
+        translate={translate}
       />
     ),
     [
@@ -309,6 +311,7 @@ const Select = <
       onFocus,
       renderValue,
       testId,
+      translate,
     ]
   );
 

package/src/Status.tsx

@@ -13,7 +13,7 @@
 import { Chip } from "@mui/material";
 
 import { useMuiProps } from "./MuiPropsContext";
-import type { SeleniumProps } from "./SeleniumProps";
+import type { AllowedProps } from "./AllowedProps";
 
 export const statusSeverityValues = [
   "default",
@@ -36,12 +36,13 @@ export type StatusProps = {
    * The style of the Status indicator
    */
   variant?: (typeof statusVariantValues)[number];
-} & SeleniumProps;
+} & AllowedProps;
 
 export const Status = ({
   label,
   severity,
   testId,
+  translate,
   variant = "lamp",
 }: StatusProps) => {
   const muiProps = useMuiProps();
@@ -52,6 +53,7 @@ export const Status = ({
       color={severity}
       data-se={testId}
       label={label}
+      translate={translate}
       variant={variant}
     />
   );

package/src/Tabs.tsx

@@ -10,13 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  TabContext as MuiTabContext,
-  TabList as MuiTabList,
-  TabListProps as MuiTabListProps,
-  TabPanel as MuiTabPanel,
-} from "@mui/lab";
-import { Tab as MuiTab } from "@mui/material";
 import {
   ReactElement,
   ReactNode,
@@ -25,7 +18,18 @@ import {
   useEffect,
   useState,
 } from "react";
-import { SeleniumProps } from "./SeleniumProps";
+import {
+  TabContext as MuiTabContext,
+  TabList as MuiTabList,
+  TabListProps as MuiTabListProps,
+  TabPanel as MuiTabPanel,
+} from "@mui/lab";
+import { Tab as MuiTab } from "@mui/material";
+
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
+import { Badge, BadgeProps } from "./Badge";
+import { AllowedProps } from "./AllowedProps";
+import { Box } from "./Box";
 
 export type TabItemProps = {
   /**
@@ -48,7 +52,10 @@ export type TabItemProps = {
    * The value associated with the TabItem
    */
   value?: string;
-} & SeleniumProps;
+} & {
+  notificationCount?: BadgeProps["badgeContent"];
+  notificationCountMax?: BadgeProps["badgeContentMax"];
+} & AllowedProps;
 
 export type TabsProps = {
   /**
@@ -74,6 +81,42 @@ export type TabsProps = {
   onChange?: MuiTabListProps["onChange"];
 };
 
+const TabLabel = ({
+  label,
+  notificationCount,
+  notificationCountMax,
+  tabState,
+  value,
+}: Pick<
+  TabItemProps,
+  "label" | "notificationCount" | "notificationCountMax" | "value"
+> & {
+  tabState: string;
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <>
+      {label}
+      {notificationCount !== undefined && notificationCount > 0 && (
+        <Box
+          sx={{
+            marginInlineStart: notificationCount
+              ? odysseyDesignTokens.Spacing2
+              : 0,
+          }}
+        >
+          <Badge
+            badgeContent={notificationCount}
+            badgeContentMax={notificationCountMax}
+            type={value === tabState ? "attention" : "default"}
+          />
+        </Box>
+      )}
+    </>
+  );
+};
+
 const Tabs = ({
   ariaLabel,
   initialValue,
@@ -97,19 +140,44 @@ const Tabs = ({
     }
   }, [value]);
 
+  const renderTab = useCallback(
+    (tab, index) => {
+      const {
+        testId,
+        isDisabled,
+        label,
+        startIcon,
+        value,
+        notificationCount,
+        notificationCountMax,
+      } = tab;
+
+      return (
+        <MuiTab
+          data-se={testId}
+          disabled={isDisabled}
+          icon={startIcon}
+          label={
+            <TabLabel
+              label={label}
+              notificationCount={notificationCount}
+              notificationCountMax={notificationCountMax}
+              tabState={tabState}
+              value={value}
+            />
+          }
+          value={value ? value : index.toString()}
+          key={value ? value : index.toString()}
+        />
+      );
+    },
+    [tabState]
+  );
+
   return (
     <MuiTabContext value={tabState}>
       <MuiTabList onChange={onChange} aria-label={ariaLabel}>
-        {tabs.map((tab, index) => (
-          <MuiTab
-            data-se={tab.testId}
-            disabled={tab.isDisabled}
-            icon={tab.startIcon}
-            label={tab.label}
-            value={tab.value ? tab.value : index.toString()}
-            key={tab.value ? tab.value : index.toString()}
-          />
-        ))}
+        {tabs.map((tab, index) => renderTab(tab, index))}
       </MuiTabList>
       {tabs.map((tab, index) => (
         <MuiTabPanel

package/src/Tag.tsx

@@ -14,7 +14,7 @@ import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
 import { TagListContext } from "./TagListContext";
 import { MuiPropsContext } from "./MuiPropsContext";
-import { SeleniumProps } from "./SeleniumProps";
+import { AllowedProps } from "./AllowedProps";
 
 export type TagProps = {
   icon?: ReactElement;
@@ -31,7 +31,7 @@ export type TagProps = {
    * Callback fired when the remove button of the Tag is clicked
    */
   onRemove?: MuiChipProps["onDelete"];
-} & SeleniumProps;
+} & AllowedProps;
 
 const Tag = ({
   icon,
@@ -40,6 +40,7 @@ const Tag = ({
   onClick,
   onRemove,
   testId,
+  translate,
 }: TagProps) => {
   const { chipElementType } = useContext(TagListContext);
 
@@ -56,9 +57,19 @@ const Tag = ({
         label={label}
         onClick={onClick}
         onDelete={onRemove}
+        translate={translate}
       />
     ),
-    [chipElementType, icon, isDisabled, label, onClick, onRemove, testId]
+    [
+      chipElementType,
+      icon,
+      isDisabled,
+      label,
+      onClick,
+      onRemove,
+      testId,
+      translate,
+    ]
   );
 
   return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;

package/src/TagList.tsx

@@ -14,14 +14,14 @@ import { Tag } from "./Tag";
 import { Stack } from "@mui/material";
 import { memo, ReactElement, useMemo } from "react";
 import { ChipElementType, TagListContext } from "./TagListContext";
-import { SeleniumProps } from "./SeleniumProps";
+import { AllowedProps } from "./AllowedProps";
 
 export type TagListProps = {
   /**
    * The Tag or array of Tags within the TagList
    */
   children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
-} & SeleniumProps;
+} & AllowedProps;
 
 const TagList = ({ children, testId }: TagListProps) => {
   const providerValue = useMemo<{