@okta/odyssey-react-mui 1.0.2 → 1.2.0

package/src/TextField.tsx

@@ -22,6 +22,7 @@ import {
 } from "react";
 
 import { Field } from "./Field";
+import { SeleniumProps } from "./SeleniumProps";
 
 export const textFieldTypeValues = [
   "email",
@@ -78,6 +79,10 @@ export type TextFieldProps = {
    * The label for the `input` element.
    */
   label: string;
+  /**
+   * The name of the `input` element. Defaults to the `id` if not set.
+   */
+  name?: string;
   /**
    * Callback fired when the `input` element loses focus.
    */
@@ -106,7 +111,7 @@ export type TextFieldProps = {
    * The value of the `input` element, required for a controlled component.
    */
   value?: string;
-};
+} & SeleniumProps;
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
@@ -122,11 +127,13 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       isOptional = false,
       isReadOnly,
       label,
+      name: nameOverride,
       onBlur,
       onChange,
       onFocus,
       placeholder,
       startAdornment,
+      testId,
       type = "text",
       value,
     },
@@ -139,6 +146,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
+          data-se={testId}
           endAdornment={
             endAdornment && (
               <InputAdornment position="end">{endAdornment}</InputAdornment>
@@ -146,13 +154,14 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           }
           id={id}
           multiline={isMultiline}
-          name={id}
+          name={nameOverride ?? id}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
           placeholder={placeholder}
           readOnly={isReadOnly}
           ref={ref}
+          required={!isOptional}
           startAdornment={
             startAdornment && (
               <InputAdornment position="start">{startAdornment}</InputAdornment>
@@ -167,13 +176,16 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         hasInitialFocus,
         endAdornment,
         isMultiline,
+        nameOverride,
         onChange,
         onFocus,
         onBlur,
         placeholder,
+        isOptional,
         isReadOnly,
         ref,
         startAdornment,
+        testId,
         type,
         value,
       ]

package/src/Toast.tsx

@@ -17,6 +17,7 @@ import { Link } from "./Link";
 import { CloseIcon } from "./icons.generated";
 import { Button } from "./Button";
 import { useTranslation } from "react-i18next";
+import { SeleniumProps } from "./SeleniumProps";
 
 export const toastRoleValues = ["status", "alert"] as const;
 export const toastSeverityValues = [
@@ -69,7 +70,7 @@ export type ToastProps = {
    * The text content of the Toast
    */
   text: string;
-};
+} & SeleniumProps;
 
 const ClickAwayListenerProps = { onClickAway: () => false };
 
@@ -82,6 +83,7 @@ const Toast = ({
   onHide: onHideProp,
   role,
   severity,
+  testId,
   text,
 }: ToastProps) => {
   const { t } = useTranslation();
@@ -119,6 +121,7 @@ const Toast = ({
             />
           )
         }
+        data-se={testId}
         role={role}
         severity={severity}
         variant="toast"

package/src/Tooltip.tsx

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

package/src/Typography.tsx

@@ -14,7 +14,8 @@ import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
 } from "@mui/material";
-import { ElementType, ReactNode, useMemo } from "react";
+import { ElementType, ReactNode, memo, useMemo } from "react";
+import { SeleniumProps } from "./SeleniumProps";
 
 export type TypographyVariantValue =
   | "h1"
@@ -69,10 +70,6 @@ export type TypographyProps = {
    * The text content of the component.
    */
   children: ReactNode;
-  /**
-   * Additional classes to add to the component.
-   */
-  classes?: object;
   /**
    * The color of the text.
    */
@@ -85,16 +82,16 @@ export type TypographyProps = {
    * The variant of Typography to render.
    */
   variant?: keyof typeof typographyVariantMapping;
-};
+} & SeleniumProps;
 
-export const Typography = ({
+const Typography = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component: componentProp,
+  testId,
   variant = "body",
 }: TypographyProps) => {
   const component = useMemo(() => {
@@ -102,7 +99,7 @@ export const Typography = ({
       if (variant === "body") {
         return "p";
       } else if (variant === "subordinate" || variant === "support") {
-        return "h6";
+        return "p";
       } else {
         return variant;
       }
@@ -112,246 +109,271 @@ export const Typography = ({
 
   return (
     <MuiTypography
-      ariaDescribedBy={ariaDescribedBy}
-      ariaLabel={ariaLabel}
-      ariaLabelledBy={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       children={children}
-      classes={classes}
       color={color}
       component={component}
+      data-se={testId}
       variant={typographyVariantMapping[variant]}
     />
   );
 };
 
-Typography.displayName = "Typography";
+const MemoizedTypography = memo(Typography);
+MemoizedTypography.displayName = "Typography";
 
-export const Heading1 = ({
+const Heading1 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h1"
   />
 );
 
-Heading1.displayName = "Heading1";
+const MemoizedHeading1 = memo(Heading1);
+MemoizedHeading1.displayName = "Heading1";
 
-export const Heading2 = ({
+const Heading2 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h2"
   />
 );
 
-Heading2.displayName = "Heading2";
+const MemoizedHeading2 = memo(Heading2);
+MemoizedHeading2.displayName = "Heading2";
 
-export const Heading3 = ({
+const Heading3 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h3"
   />
 );
 
-Heading3.displayName = "Heading3";
+const MemoizedHeading3 = memo(Heading3);
+MemoizedHeading3.displayName = "Heading3";
 
-export const Heading4 = ({
+const Heading4 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h4"
   />
 );
 
-Heading4.displayName = "Heading4";
+const MemoizedHeading4 = memo(Heading4);
+MemoizedHeading4.displayName = "Heading4";
 
-export const Heading5 = ({
+const Heading5 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h5"
   />
 );
 
-Heading5.displayName = "Heading5";
+const MemoizedHeading5 = memo(Heading5);
+MemoizedHeading5.displayName = "Heading5";
 
-export const Heading6 = ({
+const Heading6 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="h6"
   />
 );
 
-Heading6.displayName = "Heading6";
+const MemoizedHeading6 = memo(Heading6);
+MemoizedHeading6.displayName = "Heading6";
 
-export const Paragraph = ({
+const Paragraph = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="body"
   />
 );
 
-Paragraph.displayName = "Paragraph";
+const MemoizedParagraph = memo(Paragraph);
+MemoizedParagraph.displayName = "Paragraph";
 
-export const Subordinate = ({
+const Subordinate = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="subordinate"
   />
 );
 
-Subordinate.displayName = "Subordinate";
+const MemoizedSubordinate = memo(Subordinate);
+MemoizedSubordinate.displayName = "Subordinate";
 
-export const Support = ({
+const Support = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="support"
   />
 );
 
-Support.displayName = "Support";
+const MemoizedSupport = memo(Support);
+MemoizedSupport.displayName = "Support";
 
-export const Legend = ({
+const Legend = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
   children,
-  classes,
   color,
   component,
+  testId,
 }: TypographyProps) => (
   <Typography
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     children={children}
-    classes={classes}
     color={color}
     component={component}
+    data-se={testId}
     variant="legend"
   />
 );
 
-Legend.displayName = "Legend";
+const MemoizedLegend = memo(Legend);
+MemoizedLegend.displayName = "Legend";
+
+export {
+  MemoizedTypography as Typography,
+  MemoizedHeading1 as Heading1,
+  MemoizedHeading2 as Heading2,
+  MemoizedHeading3 as Heading3,
+  MemoizedHeading4 as Heading4,
+  MemoizedHeading5 as Heading5,
+  MemoizedHeading6 as Heading6,
+  MemoizedLegend as Legend,
+  MemoizedParagraph as Paragraph,
+  MemoizedSubordinate as Subordinate,
+  MemoizedSupport as Support,
+};

package/src/createShadowDom.ts

@@ -0,0 +1,46 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+export const createShadowDom = (containerElement: HTMLElement) => {
+  const shadowContainer = containerElement.attachShadow({ mode: "open" });
+  const emotionRootElement = document.createElement("style");
+  const shadowRootElement = document.createElement("div");
+
+  shadowContainer.appendChild(emotionRootElement);
+  shadowContainer.appendChild(shadowRootElement);
+
+  return {
+    emotionRootElement,
+    shadowRootElement,
+  };
+};
+
+// --DOCS--
+
+// const {
+//   emotionRootElement,
+//   shadowRootElement,
+// } = (
+//   createShadowDom(
+//     document.querySelector('#root') as HTMLElement
+//   )
+// )
+
+// ReactDOM
+// .createRoot(
+//   shadowRootElement
+// )
+// .render(
+//   <OdysseyProvider emotionRootElement={emotionRootElement} shadowRootElement={shadowRootElement}>
+//     <App />
+//   </OdysseyProvider>
+// )

package/src/{OdysseyI18n.ts → i18n.ts}

@@ -39,6 +39,7 @@ import { translation as sv } from "./properties/ts/odyssey-react-mui_sv";
 import { translation as th } from "./properties/ts/odyssey-react-mui_th";
 import { translation as tr } from "./properties/ts/odyssey-react-mui_tr";
 import { translation as uk } from "./properties/ts/odyssey-react-mui_uk";
+import { translation as vi } from "./properties/ts/odyssey-react-mui_vi";
 import { translation as zhCN } from "./properties/ts/odyssey-react-mui_zh_CN";
 import { translation as znTW } from "./properties/ts/odyssey-react-mui_zh_TW";
 
@@ -76,6 +77,7 @@ export const resources = {
   th,
   tr,
   uk,
+  vi,
   zh_CN: zhCN,
   zh_TW: znTW,
 };
@@ -101,5 +103,5 @@ Object.entries(resources).forEach(([locale, property]) => {
   i18n.addResourceBundle(locale, defaultNS, property);
 });
 
-// eslint-disable-next-line import/no-default-export
-export default i18n;
+export const odysseyTranslate = i18n.t.bind(i18n);
+export { i18n };

package/src/index.ts

@@ -74,6 +74,7 @@ export * from "./MenuItem";
 export * from "./NativeSelect";
 export * from "./NullElement";
 export * from "./OdysseyCacheProvider";
+export { odysseyTranslate } from "./i18n";
 export * from "./OdysseyProvider";
 export * from "./OdysseyThemeProvider";
 export * from "./OdysseyTranslationProvider";

package/src/labs/DatePicker.tsx

@@ -19,23 +19,31 @@ import { useCallback } from "react";
 
 export type DatePickerProps<TInputDate, TDate> = {
   label: MuiDatePickerProps<TInputDate, TDate>["label"];
+  /**
+   * If `true`, the `input` element is not required.
+   */
+  isOptional?: boolean;
   onChange: MuiDatePickerProps<TInputDate, TDate>["onChange"];
   value: MuiDatePickerProps<TInputDate, TDate>["value"];
 };
 
 export const DatePicker = <TInputDate, TDate>({
   label,
+  isOptional = false,
   onChange,
   value = null,
 }: DatePickerProps<TInputDate, TDate>) => {
-  const renderInput = useCallback(({ InputProps, ...props }) => {
-    const combinedProps = {
-      ...InputProps,
-      ...props,
-    };
+  const renderInput = useCallback(
+    ({ InputProps, ...props }) => {
+      const combinedProps = {
+        ...InputProps,
+        ...props,
+      };
 
-    return <InputBase {...combinedProps} />;
-  }, []);
+      return <InputBase {...combinedProps} required={!isOptional} />;
+    },
+    [isOptional]
+  );
 
   return (
     <MuiDatePicker

package/src/labs/PaginatedTable.tsx

@@ -82,7 +82,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
   const [globalFilter, setGlobalFilter] = useState<string>();
 
   useEffect(() => {
-    if (globalFilter) {
+    if (globalFilter !== undefined) {
       onGlobalFilterChange?.(globalFilter);
     }
   }, [globalFilter, onGlobalFilterChange]);
@@ -194,14 +194,23 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
 
   const modifiedState = useMemo(
     () => ({
-      ...state,
       pagination: {
         pageIndex: pagination.pageIndex,
         pageSize: pagination.pageSize,
       },
       rowSelection,
+      globalFilter,
+      columnFilters,
+      ...state,
     }),
-    [pagination.pageIndex, pagination.pageSize, rowSelection, state]
+    [
+      pagination.pageIndex,
+      pagination.pageSize,
+      rowSelection,
+      globalFilter,
+      columnFilters,
+      state,
+    ]
   );
 
   const muiToolbarAlertBannerProps: AlertProps = useMemo(

package/src/labs/README.md

@@ -20,10 +20,10 @@ This project follows semantic versioning conventions:
 
 ## Getting Started
 
-Install the package and peer dependencies:
+To use Odyssey Labs, import as:
 
 ```sh
-yarn add @okta/odyssey-react-mui @okta/odyssey-react-labs @emotion/react
+import from "@okta/odyssey-react-mui/labs"
 ```
 
 ## Components