@okta/odyssey-react-mui 1.29.0 → 1.32.0

package/src/OdysseyTranslationProvider.tsx

@@ -12,11 +12,11 @@
 
 import { ReactNode, useEffect } from "react";
 
-import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types";
+import { DefaultSupportedLanguages } from "./OdysseyTranslationProvider.types.js";
 
-import { i18n, defaultNS, resources } from "./i18n";
+import { i18n, defaultNS, resources } from "./i18n.js";
 import { I18nextProvider } from "react-i18next";
-import { getTypedObjectKeys } from "./getTypedObjectKeys";
+import { getTypedObjectKeys } from "./getTypedObjectKeys.js";
 
 export type OdysseyI18nResourceKeys = (typeof resources)["en"];
 export const odysseyI18nResourceKeysList = getTypedObjectKeys(resources["en"]);
@@ -25,12 +25,19 @@ export type TranslationOverrides<
   SupportedLanguages extends string = DefaultSupportedLanguages,
 > = Record<SupportedLanguages, Partial<OdysseyI18nResourceKeys>>;
 
-const mergeBundleOverrides = <SupportedLanguages extends string>(
+const mergeBundleOverrides = <
+  SupportedLanguages extends string = DefaultSupportedLanguages,
+>(
   languageCode: SupportedLanguages,
   translationOverrides: TranslationOverrides<SupportedLanguages>,
 ) => {
-  const translationStrings = resources[languageCode] || {};
   const translationStringOverrides = translationOverrides[languageCode];
+
+  const translationStrings =
+    languageCode in resources
+      ? resources[languageCode as DefaultSupportedLanguages]
+      : {};
+
   return {
     ...translationStrings,
     ...translationStringOverrides,
@@ -51,7 +58,6 @@ export const OdysseyTranslationProvider = <SupportedLanguages extends string>({
   translationOverrides,
 }: OdysseyTranslationProviderProps<SupportedLanguages>) => {
   useEffect(() => {
-    // Defaults to the browser's language if available otherwise `en` will be used
     i18n.changeLanguage(languageCode || window.navigator.language);
   }, [languageCode]);
 

package/src/Pagination/Pagination.test.tsx

@@ -12,11 +12,11 @@
 
 import { render, waitFor, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import { Pagination } from "./Pagination";
+import { Pagination } from "./Pagination.js";
 
 describe("Pagination", () => {
   it("renders the expected controls in 'paged' variant", () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -49,7 +49,7 @@ describe("Pagination", () => {
   });
 
   it("calls onPaginationChange with correct pageIndex when clicking next", async () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -78,7 +78,7 @@ describe("Pagination", () => {
   });
 
   it("calls onPaginationChange with correct pageIndex when clicking previous", async () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -107,7 +107,7 @@ describe("Pagination", () => {
   });
 
   it("disables previous button on first page", () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -129,7 +129,7 @@ describe("Pagination", () => {
   });
 
   it("disables next button on last page", () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -151,7 +151,7 @@ describe("Pagination", () => {
   });
 
   it("updates pageIndex when entering a new page number", async () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -184,7 +184,7 @@ describe("Pagination", () => {
   });
 
   it("updates pageSize when entering a new rows per page value", async () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -218,7 +218,7 @@ describe("Pagination", () => {
   });
 
   it("renders 'Load more' button in 'loadMore' variant", () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -235,7 +235,7 @@ describe("Pagination", () => {
   });
 
   it("calls onPaginationChange with increased pageSize when clicking 'Load more'", async () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -259,7 +259,7 @@ describe("Pagination", () => {
   });
 
   it("disables 'Load more' button when isMoreDisabled is true", () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -277,7 +277,7 @@ describe("Pagination", () => {
   });
 
   it("disables 'Next page' button when isMoreDisabled is true", () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination
@@ -300,7 +300,7 @@ describe("Pagination", () => {
   });
 
   it("disables all controls when isDisabled is true", () => {
-    const onPaginationChange = jest.fn();
+    const onPaginationChange = vi.fn();
 
     const { container } = render(
       <Pagination

package/src/Pagination/Pagination.tsx

@@ -10,30 +10,30 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
 import { InputBase } from "@mui/material";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Paragraph } from "../Typography";
-import { Button } from "../Buttons";
-import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated";
-import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+
+import { Box } from "../Box.js";
+import { Button } from "../Buttons/index.js";
+import { paginationTypeValues } from "./constants.js";
+import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated/index.js";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "../OdysseyDesignTokensContext";
-import { Box } from "../Box";
-import { paginationTypeValues } from "./constants";
-import { usePagination } from "./usePagination";
-import { useTranslation } from "react-i18next";
+} from "../OdysseyDesignTokensContext.js";
+import { usePagination } from "./usePagination.js";
+import { Paragraph } from "../Typography.js";
 
 const PaginationContainer = styled("nav")({
   display: "flex",
-  alignItems: "center",
   justifyContent: "space-between",
 });
 
 const PaginationSegment = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   display: "flex",
   alignItems: "center",
   gap: odysseyDesignTokens.Spacing4,
@@ -46,7 +46,7 @@ const PaginationSegment = styled("div", {
 
 const PaginationInput = styled(InputBase, {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   borderColor: odysseyDesignTokens.HueNeutral200,
   borderRadius: odysseyDesignTokens.BorderRadiusTight,
   height: odysseyDesignTokens.Spacing6,
@@ -226,6 +226,13 @@ const Pagination = ({
       }
     }
 
+    console.log({
+      page,
+      updatedPage,
+      rowsPerPage,
+      updatedRowsPerPage,
+    });
+
     onPaginationChange({
       pageIndex: updatedPage,
       pageSize: updatedRowsPerPage,

package/src/Pagination/index.ts

@@ -10,6 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export { Pagination, type PaginationProps } from "./Pagination";
-export { paginationTypeValues } from "./constants";
-export { usePagination } from "./usePagination";
+export { paginationTypeValues } from "./constants.js";
+export * from "./Pagination.js";
+export { usePagination } from "./usePagination.js";

package/src/PasswordField.tsx

@@ -22,15 +22,15 @@ import {
   useState,
 } from "react";
 
-import { ShowIcon, HideIcon } from "./icons.generated";
-import { Field } from "./Field";
+import { ShowIcon, HideIcon } from "./icons.generated/index.js";
+import { Field } from "./Field.js";
 import {
   FieldComponentProps,
   FieldComponentRenderProps,
-} from "./FieldComponentProps";
-import type { HtmlProps } from "./HtmlProps";
+} from "./FieldComponentProps.js";
+import type { HtmlProps } from "./HtmlProps.js";
 import { useTranslation } from "react-i18next";
-import { FocusHandle, getControlState, useInputValues } from "./inputUtils";
+import { FocusHandle, getControlState, useInputValues } from "./inputUtils.js";
 
 export type PasswordFieldProps = {
   /**
@@ -138,17 +138,13 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
     });
 
     const localInputRef = useRef<HTMLInputElement>(null);
-    useImperativeHandle(
-      inputRef,
-      () => {
-        return {
-          focus: () => {
-            localInputRef.current?.focus();
-          },
-        };
-      },
-      [],
-    );
+    useImperativeHandle(inputRef, () => {
+      return {
+        focus: () => {
+          localInputRef.current?.focus();
+        },
+      };
+    }, []);
 
     const onChange = useCallback<
       ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>

package/src/Radio.tsx

@@ -20,15 +20,15 @@ import {
 } from "@mui/material";
 import styled from "@emotion/styled";
 
-import { FieldComponentProps } from "./FieldComponentProps";
-import type { HtmlProps } from "./HtmlProps";
-import { FocusHandle } from "./inputUtils";
+import { FieldComponentProps } from "./FieldComponentProps.js";
+import type { HtmlProps } from "./HtmlProps.js";
+import { FocusHandle } from "./inputUtils.js";
 import {
   useOdysseyDesignTokens,
   DesignTokens,
-} from "./OdysseyDesignTokensContext";
-import { Typography } from "./Typography";
-import { useUniqueId } from "./useUniqueId";
+} from "./OdysseyDesignTokensContext.js";
+import { Typography } from "./Typography.js";
+import { useUniqueId } from "./useUniqueId.js";
 
 const HintContainerWithInlineStartSpacing = styled.div<{
   odysseyDesignTokens: DesignTokens;
@@ -98,21 +98,17 @@ const Radio = ({
   const id = useUniqueId(idOverride);
   const hintId = hint ? `${id}-hint` : undefined;
 
-  useImperativeHandle(
-    inputRef,
-    () => {
-      return {
-        focus: () => {
-          localInputRef.current?.focus();
-        },
-      };
-    },
-    [],
-  );
+  useImperativeHandle(inputRef, () => {
+    return {
+      focus: () => {
+        localInputRef.current?.focus();
+      },
+    };
+  }, []);
 
   const label = useMemo(
     () => <Typography component="span">{labelProp}</Typography>,
-    [labelProp, translate],
+    [labelProp],
   );
 
   const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(

package/src/RadioGroup.tsx

@@ -16,14 +16,14 @@ import {
 } from "@mui/material";
 import React, { memo, ReactNode, useCallback, useRef, useMemo } from "react";
 
-import { Field } from "./Field";
+import { Field } from "./Field.js";
 import {
   FieldComponentProps,
   FieldComponentRenderProps,
-} from "./FieldComponentProps";
-import type { HtmlProps } from "./HtmlProps";
-import { getControlState, useInputValues } from "./inputUtils";
-import { Radio, RadioProps } from "./Radio";
+} from "./FieldComponentProps.js";
+import type { HtmlProps } from "./HtmlProps.js";
+import { getControlState, useInputValues } from "./inputUtils.js";
+import { Radio, RadioProps } from "./Radio.js";
 
 export type RadioGroupProps = {
   /**
@@ -107,15 +107,15 @@ const RadioGroup = ({
       React.Children.map(children, (child) => {
         if (React.isValidElement<RadioProps>(child) && child.type === Radio) {
           return React.cloneElement(child, {
-            isDisabled: isDisabled,
-            isReadOnly: isReadOnly,
+            ...child.props,
+            isDisabled: isDisabled || child.props.isDisabled,
+            isReadOnly: isReadOnly || child.props.isReadOnly,
           });
         }
         return child;
       }),
     [children, isDisabled, isReadOnly],
   );
-
   const renderFieldComponent = useCallback(
     ({
       ariaDescribedBy,

package/src/ScreenReaderText.tsx

@@ -13,7 +13,7 @@
 import { memo, ReactNode } from "react";
 import { Box } from "@mui/material";
 import { visuallyHidden } from "@mui/utils";
-import { HtmlProps } from "./HtmlProps";
+import { HtmlProps } from "./HtmlProps.js";
 
 export type ScreenReaderTextProps = {
   /**

package/src/SearchField.tsx

@@ -21,18 +21,24 @@ import {
   useCallback,
   useRef,
 } from "react";
+import styled from "@emotion/styled";
 
-import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
-import { Field } from "./Field";
+import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
+import { Field } from "./Field.js";
 import {
   FieldComponentProps,
   FieldComponentRenderProps,
-} from "./FieldComponentProps";
-import type { HtmlProps } from "./HtmlProps";
-import { getControlState, useInputValues } from "./inputUtils";
+} from "./FieldComponentProps.js";
+import type { HtmlProps } from "./HtmlProps.js";
+import { getControlState, useInputValues } from "./inputUtils.js";
+import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
 
 export const searchVariantValues = ["outline", "filled"] as const;
 
+const StyledContainerToEnsureThemeProviderDivIsFullWidth = styled("div")({
+  width: "100%",
+});
+
 export type SearchFieldProps = {
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
@@ -209,17 +215,21 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
     );
 
     return (
-      <Field
-        ariaDescribedBy={ariaDescribedBy}
-        fieldType="single"
-        hasVisibleLabel={false}
-        id={idOverride}
-        isDisabled={isDisabled}
-        isFullWidth={isFullWidth}
-        isOptional={true}
-        label={label}
-        renderFieldComponent={renderFieldComponent}
-      />
+      <StyledContainerToEnsureThemeProviderDivIsFullWidth>
+        <OdysseyThemeProvider>
+          <Field
+            ariaDescribedBy={ariaDescribedBy}
+            fieldType="single"
+            hasVisibleLabel={false}
+            id={idOverride}
+            isDisabled={isDisabled}
+            isFullWidth={isFullWidth}
+            isOptional={true}
+            label={label}
+            renderFieldComponent={renderFieldComponent}
+          />
+        </OdysseyThemeProvider>
+      </StyledContainerToEnsureThemeProviderDivIsFullWidth>
     );
   },
 );

package/src/Select.tsx

@@ -32,25 +32,25 @@ import {
   SelectChangeEvent,
 } from "@mui/material";
 
-import { Field } from "./Field";
+import { Field } from "./Field.js";
 import {
   FieldComponentProps,
   FieldComponentRenderProps,
-} from "./FieldComponentProps";
-import { CheckIcon, CloseCircleFilledIcon } from "./icons.generated";
-import type { HtmlProps } from "./HtmlProps";
+} from "./FieldComponentProps.js";
+import { CheckIcon, CloseCircleFilledIcon } from "./icons.generated/index.js";
+import type { HtmlProps } from "./HtmlProps.js";
 import {
   ComponentControlledState,
   FocusHandle,
   useInputValues,
   getControlState,
-} from "./inputUtils";
+} from "./inputUtils.js";
 import {
   useOdysseyDesignTokens,
   DesignTokens,
-} from "./OdysseyDesignTokensContext";
-import { TestSelector } from "./test-selectors";
-import { normalizedKey } from "./useNormalizedKey";
+} from "./OdysseyDesignTokensContext.js";
+import { TestSelector } from "./test-selectors/index.js";
+import { normalizedKey } from "./useNormalizedKey.js";
 
 export const SelectTestSelector = {
   accessibleText: {
@@ -285,17 +285,13 @@ const Select = <
   const localInputRef = useRef<HTMLSelectElement>(null);
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  useImperativeHandle(
-    inputRef,
-    () => {
-      return {
-        focus: () => {
-          localInputRef.current?.focus();
-        },
-      };
-    },
-    [],
-  );
+  useImperativeHandle(inputRef, () => {
+    return {
+      focus: () => {
+        localInputRef.current?.focus();
+      },
+    };
+  }, []);
 
   useEffect(() => {
     if (controlledStateRef.current === CONTROLLED) {
@@ -513,7 +509,6 @@ const Select = <
             sx: {
               ".MuiPaper-root": {
                 maxHeight: "50vh",
-                minHeight: "200px",
               },
             },
           }}

package/src/Status.tsx

@@ -13,8 +13,8 @@
 import { memo } from "react";
 import { Chip } from "@mui/material";
 
-import { useMuiProps } from "./MuiPropsContext";
-import type { HtmlProps } from "./HtmlProps";
+import { useMuiProps } from "./MuiPropsContext.js";
+import type { HtmlProps } from "./HtmlProps.js";
 
 export const statusSeverityValues = [
   "default",

package/src/Surface.tsx

@@ -17,9 +17,9 @@ import { Paper as MuiPaper } from "@mui/material";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "./OdysseyDesignTokensContext";
-import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
-import { useContrastModeContext, ContrastMode } from "./useContrastMode";
+} from "./OdysseyDesignTokensContext.js";
+import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
+import { useContrastModeContext, ContrastMode } from "./useContrastMode.js";
 
 const StyledContainer = styled(MuiPaper, {
   shouldForwardProp: (prop) =>

package/src/SvgIcon.ts

@@ -10,7 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import type { SvgIconProps } from "./SvgIcon";
+import { SvgIconProps } from "@mui/material";
+
+export { SvgIcon } from "@mui/material";
 
 export interface SvgIconNoChildrenProps extends Omit<SvgIconProps, "children"> {
   /**
@@ -18,6 +20,3 @@ export interface SvgIconNoChildrenProps extends Omit<SvgIconProps, "children"> {
    */
   children?: never;
 }
-
-export { default as SvgIcon } from "@mui/material/SvgIcon";
-export * from "@mui/material/SvgIcon";

package/src/Switch.tsx

@@ -23,19 +23,19 @@ import { SwitchProps as MuiSwitchProps, FormLabel } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 
-import { Box } from "./Box";
-import { FieldComponentProps } from "./FieldComponentProps";
-import { FieldHint } from "./FieldHint";
-import { CheckedFieldProps } from "./FormCheckedProps";
-import type { HtmlProps } from "./HtmlProps";
-import { CheckIcon } from "./icons.generated";
-import { ComponentControlledState, getControlState } from "./inputUtils";
+import { Box } from "./Box.js";
+import { FieldComponentProps } from "./FieldComponentProps.js";
+import { FieldHint } from "./FieldHint.js";
+import { CheckedFieldProps } from "./FormCheckedProps.js";
+import type { HtmlProps } from "./HtmlProps.js";
+import { CheckIcon } from "./icons.generated/index.js";
+import { ComponentControlledState, getControlState } from "./inputUtils.js";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "./OdysseyDesignTokensContext";
-import { stripRem, toRem } from "./remUtils";
-import { useUniqueId } from "./useUniqueId";
+} from "./OdysseyDesignTokensContext.js";
+import { stripRem, toRem } from "./remUtils.js";
+import { useUniqueId } from "./useUniqueId.js";
 
 const { CONTROLLED } = ComponentControlledState;
 

package/src/Tabs.tsx

@@ -26,11 +26,11 @@ import {
 } from "@mui/lab";
 import { Tab as MuiTab } from "@mui/material";
 
-import { Badge, BadgeProps } from "./Badge";
-import { Box } from "./Box";
-import { HtmlProps } from "./HtmlProps";
-import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
-import { type TestSelector } from "./test-selectors";
+import { Badge, BadgeProps } from "./Badge.js";
+import { Box } from "./Box.js";
+import { HtmlProps } from "./HtmlProps.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { type TestSelector } from "./test-selectors/index.js";
 
 export const TabsTestSelector = {
   children: {

package/src/Tag.tsx

@@ -14,17 +14,17 @@ import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
 import styled from "@emotion/styled";
 
-import { CloseCircleFilledIcon } from "./icons.generated";
-import { HtmlProps } from "./HtmlProps";
-import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
+import { CloseCircleFilledIcon } from "./icons.generated/index.js";
+import { HtmlProps } from "./HtmlProps.js";
+import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext.js";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "./OdysseyDesignTokensContext";
-import { TagListContext } from "./TagListContext";
-import { ContrastMode, useContrastModeContext } from "./useContrastMode";
+} from "./OdysseyDesignTokensContext.js";
+import { TagListContext } from "./TagListContext.js";
+import { ContrastMode, useContrastModeContext } from "./useContrastMode.js";
 
-const tagSizeValues = ["medium", "small"] as const;
+export const tagSizeValues = ["medium", "small"] as const;
 
 export const tagColorVariants = [
   "accentFour",
@@ -195,7 +195,7 @@ const getChipColors = ({
 const StyledTag = styled(MuiChip, {
   shouldForwardProp: (prop) =>
     !["colorVariant", "contrastMode", "odysseyDesignTokens", "size"].includes(
-      prop as string,
+      prop,
     ),
 })<{
   as?: React.ElementType; // Allow the 'as' prop to be forwarded

package/src/TagList.tsx

@@ -10,11 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Tag } from "./Tag";
+import { Tag } from "./Tag.js";
 import { Stack } from "@mui/material";
 import { memo, ReactElement, useMemo } from "react";
-import { ChipElementType, TagListContext } from "./TagListContext";
-import { HtmlProps } from "./HtmlProps";
+import { ChipElementType, TagListContext } from "./TagListContext.js";
+import { HtmlProps } from "./HtmlProps.js";
 
 export type TagListProps = {
   /**