@okta/odyssey-react-mui 1.9.11 → 1.9.13

package/src/TextField.tsx

@@ -25,7 +25,7 @@ import { InputAdornment, InputBase } from "@mui/material";
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Field } from "./Field";
-import { SeleniumProps } from "./SeleniumProps";
+import { AllowedProps } from "./AllowedProps";
 import { useInputValues, getControlState } from "./inputUtils";
 import { FocusHandle } from "./@types/react-augment";
 
@@ -97,7 +97,7 @@ export type TextFieldProps = {
    */
   value?: string;
 } & FieldComponentProps &
-  SeleniumProps;
+  AllowedProps;
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
@@ -124,6 +124,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       placeholder,
       startAdornment,
       testId,
+      translate,
       type = "text",
       value: value,
     },
@@ -179,7 +180,9 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           data-se={testId}
           endAdornment={
             endAdornment && (
-              <InputAdornment position="end">{endAdornment}</InputAdornment>
+              <InputAdornment position="end" translate={translate}>
+                {endAdornment}
+              </InputAdornment>
             )
           }
           id={id}
@@ -195,10 +198,13 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           required={!isOptional}
           startAdornment={
             startAdornment && (
-              <InputAdornment position="start">{startAdornment}</InputAdornment>
+              <InputAdornment position="start" translate={translate}>
+                {startAdornment}
+              </InputAdornment>
             )
           }
           type={type}
+          translate={translate}
         />
       ),
       [
@@ -217,6 +223,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         ref,
         startAdornment,
         testId,
+        translate,
         type,
       ]
     );

package/src/Toast.tsx

@@ -17,7 +17,7 @@ import { Link } from "./Link";
 import { CloseIcon } from "./icons.generated";
 import { Button } from "./Button";
 import { useTranslation } from "react-i18next";
-import { SeleniumProps } from "./SeleniumProps";
+import { AllowedProps } from "./AllowedProps";
 
 export const toastRoleValues = ["status", "alert"] as const;
 export const toastSeverityValues = [
@@ -70,7 +70,7 @@ export type ToastProps = {
    * The text content of the Toast
    */
   text: string;
-} & SeleniumProps;
+} & AllowedProps;
 
 const ClickAwayListenerProps = { onClickAway: () => false };
 
@@ -85,6 +85,7 @@ const Toast = ({
   severity,
   testId,
   text,
+  translate,
 }: ToastProps) => {
   const { t } = useTranslation();
 
@@ -126,12 +127,12 @@ const Toast = ({
         severity={severity}
         variant="toast"
       >
-        <AlertTitle>
+        <AlertTitle translate={translate}>
           <span style={visuallyHidden}>{severity}:</span>
           {text}
         </AlertTitle>
         {linkUrl && (
-          <Link href={linkUrl} variant="monochrome">
+          <Link href={linkUrl} variant="monochrome" translate={translate}>
             {linkText}
           </Link>
         )}

package/src/Tooltip.tsx

@@ -15,7 +15,7 @@ import type { TooltipProps as MuiTooltipProps } from "@mui/material";
 
 import { MuiPropsChild } from "./MuiPropsChild";
 import { ReactElement, memo } from "react";
-import { SeleniumProps } from "./SeleniumProps";
+import { AllowedProps } from "./AllowedProps";
 
 export type TooltipProps = {
   /**
@@ -34,7 +34,7 @@ export type TooltipProps = {
    * The text to display in the Tooltip
    */
   text: string;
-} & SeleniumProps;
+} & AllowedProps;
 
 const Tooltip = ({
   ariaType,
@@ -42,12 +42,14 @@ const Tooltip = ({
   placement = "top",
   testId,
   text,
+  translate,
 }: TooltipProps) => (
   <MuiTooltip
     data-se={testId}
     describeChild={ariaType === "description"}
     placement={placement}
     title={text}
+    translate={translate}
   >
     <MuiPropsChild>{children}</MuiPropsChild>
   </MuiTooltip>

package/src/Typography.tsx

@@ -22,7 +22,7 @@ import {
   useRef,
   useImperativeHandle,
 } from "react";
-import { SeleniumProps } from "./SeleniumProps";
+import { AllowedProps } from "./AllowedProps";
 import { FocusHandle } from "./@types/react-augment";
 
 export type TypographyVariantValue =
@@ -94,7 +94,7 @@ export type TypographyProps = {
    * The variant of Typography to render.
    */
   variant?: keyof typeof typographyVariantMapping;
-} & SeleniumProps;
+} & AllowedProps;
 
 const Typography = ({
   ariaDescribedBy,
@@ -104,6 +104,7 @@ const Typography = ({
   color,
   component: componentProp,
   testId,
+  translate,
   typographyFocusRef,
   variant = "body",
 }: TypographyProps) => {
@@ -145,6 +146,7 @@ const Typography = ({
       data-se={testId}
       ref={ref}
       tabIndex={-1}
+      translate={translate}
       variant={typographyVariantMapping[variant]}
     />
   );
@@ -161,6 +163,7 @@ const Heading1 = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -170,6 +173,7 @@ const Heading1 = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="h1"
   />
 );
@@ -185,6 +189,7 @@ const Heading2 = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -194,6 +199,7 @@ const Heading2 = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="h2"
   />
 );
@@ -209,6 +215,7 @@ const Heading3 = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -218,6 +225,7 @@ const Heading3 = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="h3"
   />
 );
@@ -233,6 +241,7 @@ const Heading4 = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -242,6 +251,7 @@ const Heading4 = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="h4"
   />
 );
@@ -257,6 +267,7 @@ const Heading5 = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -266,6 +277,7 @@ const Heading5 = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="h5"
   />
 );
@@ -281,6 +293,7 @@ const Heading6 = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -290,6 +303,7 @@ const Heading6 = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="h6"
   />
 );
@@ -305,6 +319,7 @@ const Paragraph = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -314,6 +329,7 @@ const Paragraph = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="body"
   />
 );
@@ -329,6 +345,7 @@ const Subordinate = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -338,6 +355,7 @@ const Subordinate = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="subordinate"
   />
 );
@@ -353,6 +371,7 @@ const Support = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -362,6 +381,7 @@ const Support = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="support"
   />
 );
@@ -377,6 +397,7 @@ const Legend = ({
   color,
   component,
   testId,
+  translate,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
@@ -386,6 +407,7 @@ const Legend = ({
     color={color}
     component={component}
     data-se={testId}
+    translate={translate}
     variant="legend"
   />
 );

package/src/labs/Switch.tsx

@@ -30,7 +30,7 @@ import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
 import { Box } from "../Box";
 import { FieldComponentProps } from "../FieldComponentProps";
 import { FieldHint } from "../FieldHint";
-import type { SeleniumProps } from "../SeleniumProps";
+import type { AllowedProps } from "../AllowedProps";
 import { useUniqueId } from "../useUniqueId";
 import { ComponentControlledState, getControlState } from "../inputUtils";
 import { CheckedFieldProps } from "../FormCheckedProps";
@@ -62,7 +62,7 @@ export type SwitchProps = {
   "hint" | "id" | "isFullWidth" | "isDisabled" | "name"
 > &
   CheckedFieldProps<MuiSwitchProps> &
-  SeleniumProps;
+  AllowedProps;
 
 type SwitchLabelProps = {
   checked: boolean;

package/src/labs/VirtualizedAutocomplete.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,
   getControlState,
@@ -170,7 +170,7 @@ export type AutocompleteProps<
   FieldComponentProps,
   "errorMessage" | "hint" | "id" | "isOptional" | "name"
 > &
-  SeleniumProps;
+  AllowedProps;
 
 const VirtualizedAutocomplete = <
   OptionType,
@@ -199,6 +199,7 @@ const VirtualizedAutocomplete = <
   value,
   getIsOptionEqualToValue,
   testId,
+  translate,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const controlledStateRef = useRef(
     getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
@@ -327,6 +328,7 @@ const VirtualizedAutocomplete = <
       readOnly={isReadOnly}
       renderInput={renderInput}
       isOptionEqualToValue={getIsOptionEqualToValue}
+      translate={translate}
     />
   );
 };

package/src/theme/components.tsx

@@ -2208,7 +2208,7 @@ export const components = ({
         root: ({ ownerState }) => ({
           maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
           minWidth: "unset",
-          minHeight: "unset",
+          minHeight: odysseyTokens.Spacing9,
           padding: `${odysseyTokens.Spacing4} ${odysseyTokens.Spacing1}`,
           fontSize: odysseyTokens.TypographySizeHeading6,
           fontFamily: odysseyTokens.TypographyFamilyHeading,

package/dist/SeleniumProps.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=SeleniumProps.js.map

package/dist/SeleniumProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SeleniumProps.js","names":[],"sources":["../src/SeleniumProps.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport type SeleniumProps = {\n  /**\n   * This prop puts a `data` attribute on an HTML element in this component with the value provided.\n   *\n   * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.\n   */\n  testId?: string;\n};\n"],"mappings":""}

package/dist/src/SeleniumProps.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SeleniumProps.d.ts","sourceRoot":"","sources":["../../src/SeleniumProps.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}