@okta/odyssey-react-mui 1.28.1 → 1.29.0

package/src/Checkbox.tsx

@@ -19,6 +19,7 @@ import {
   FormControlLabelProps as MuiFormControlLabelProps,
   FormHelperText,
 } from "@mui/material";
+import styled from "@emotion/styled";
 
 import { CheckedFieldProps } from "./FormCheckedProps";
 import type { HtmlProps } from "./HtmlProps";
@@ -28,10 +29,28 @@ import {
   getControlState,
 } from "./inputUtils";
 import { FieldComponentProps } from "./FieldComponentProps";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
 import { Typography } from "./Typography";
+import { useUniqueId } from "./useUniqueId";
 
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
+const HintContainerWithInlineStartSpacing = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,
+  marginBlockEnd: odysseyDesignTokens.Spacing2,
+
+  // MUI applies the '.Mui-error' class to this hint text when the checkbox is invalid which turns the copy red
+  // We want to keep the hint text gray in the error state
+  ".Mui-error": {
+    color: odysseyDesignTokens.TypographyColorSubordinate,
+  },
+}));
+
 export type CheckboxProps = {
   /**
    * The ref forwarded to the Checkbox
@@ -90,6 +109,10 @@ const Checkbox = ({
   value,
 }: CheckboxProps) => {
   const { t } = useTranslation();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const id = useUniqueId(idOverride);
+  const hintId = hint ? `${id}-hint` : undefined;
+
   const controlledStateRef = useRef(
     getControlState({
       controlledValue: isChecked,
@@ -126,10 +149,9 @@ const Checkbox = ({
             </Typography>
           </>
         )}
-        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}
       </>
     );
-  }, [isRequired, labelProp, hint, t, translate]);
+  }, [isRequired, labelProp, t, translate]);
 
   const onChange = useCallback<NonNullable<MuiCheckboxProps["onChange"]>>(
     (event, checked) => {
@@ -158,58 +180,78 @@ const Checkbox = ({
   const checkboxStyles = useMemo(
     () => ({
       alignItems: "flex-start",
+
       ...(isReadOnly && {
         cursor: "default",
         "& .MuiTypography-root": {
           cursor: "default",
         },
       }),
+
+      ...(hint && {
+        // needed to override specific :not(:last-child) selector
+        ":not(:last-child)": {
+          marginBlockEnd: 0,
+        },
+      }),
     }),
-    [isReadOnly],
+    [hint, isReadOnly],
   );
 
   return (
-    <FormControlLabel
-      sx={checkboxStyles}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      className={
-        validity === "invalid"
-          ? "Mui-error"
-          : validity === "valid"
-            ? "Mui-valid"
-            : ""
-      }
-      control={
-        <MuiCheckbox
-          {...inputValues}
-          indeterminate={isIndeterminate}
-          onChange={onChange}
-          onClick={
-            onClick as unknown as React.MouseEventHandler<HTMLButtonElement>
-          }
-          required={isRequired}
-          inputProps={{
-            "data-se": testId,
-            "aria-readonly": isReadOnly,
-            readOnly: isReadOnly,
-          }}
-          disabled={isDisabled}
-          inputRef={localInputRef}
-          sx={{
-            marginBlockStart: "2px",
-          }}
-        />
-      }
-      disabled={isDisabled}
-      id={idOverride}
-      label={label}
-      name={nameOverride ?? idOverride}
-      value={value}
-      required={isRequired}
-      onBlur={onBlur}
-      translate={translate}
-    />
+    <>
+      <FormControlLabel
+        sx={checkboxStyles}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        className={
+          validity === "invalid"
+            ? "Mui-error"
+            : validity === "valid"
+              ? "Mui-valid"
+              : ""
+        }
+        control={
+          <MuiCheckbox
+            {...inputValues}
+            indeterminate={isIndeterminate}
+            onChange={onChange}
+            onClick={
+              onClick as unknown as React.MouseEventHandler<HTMLButtonElement>
+            }
+            required={isRequired}
+            inputProps={{
+              "aria-describedby": hintId,
+              "aria-readonly": isReadOnly,
+              "data-se": testId,
+              readOnly: isReadOnly,
+            }}
+            disabled={isDisabled}
+            inputRef={localInputRef}
+            sx={{
+              marginBlockStart: "2px",
+            }}
+          />
+        }
+        disabled={isDisabled}
+        id={idOverride}
+        label={label}
+        name={nameOverride ?? idOverride}
+        value={value}
+        required={isRequired}
+        onBlur={onBlur}
+        translate={translate}
+      />
+      {hint && (
+        <HintContainerWithInlineStartSpacing
+          odysseyDesignTokens={odysseyDesignTokens}
+        >
+          <FormHelperText id={hintId} translate={translate}>
+            {hint}
+          </FormHelperText>
+        </HintContainerWithInlineStartSpacing>
+      )}
+    </>
   );
 };
 

package/src/DataTable/reorderDataRowsLocally.tsx

@@ -20,15 +20,15 @@ import { MRT_RowData } from "material-react-table";
  * @param newIndex - The new index to move the row to.
  * @returns A new array of data with the row moved to the specified index.
  */
-export const reorderDataRowsLocally = ({
+export const reorderDataRowsLocally = <TData extends MRT_RowData>({
   currentData,
   rowId,
   newRowIndex,
 }: {
-  currentData: MRT_RowData[];
+  currentData: TData[];
   rowId: string;
   newRowIndex: number;
-}): MRT_RowData[] => {
+}): TData[] => {
   const updatedData = [...currentData];
   const rowIndex = updatedData.findIndex((row) => row.id === rowId);
 

package/src/DataTable/useRowReordering.tsx

@@ -16,7 +16,7 @@ import { reorderDataRowsLocally } from "./reorderDataRowsLocally";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
 import { MRT_Row, MRT_RowData, MRT_TableInstance } from "material-react-table";
 
-export const useRowReordering = ({
+export const useRowReordering = <TData extends MRT_RowData>({
   totalRows,
   onReorderRows,
   data,
@@ -28,12 +28,10 @@ export const useRowReordering = ({
 }: {
   totalRows: DataTableProps["totalRows"];
   onReorderRows: DataTableProps["onReorderRows"];
-  data: MRT_RowData[];
-  setData: Dispatch<SetStateAction<MRT_RowData[]>>;
-  draggingRow?: MRT_Row<MRT_RowData> | null;
-  setDraggingRow: Dispatch<
-    SetStateAction<MRT_Row<MRT_RowData> | null | undefined>
-  >;
+  data: TData[];
+  setData: Dispatch<SetStateAction<TData[]>>;
+  draggingRow?: MRT_Row<TData> | null;
+  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | undefined>>;
   resultsPerPage: number;
   page: number;
 }) => {
@@ -68,7 +66,6 @@ export const useRowReordering = ({
   const dragHandleStyles = {
     padding: odysseyDesignTokens.Spacing1,
     borderRadius: odysseyDesignTokens.BorderRadiusMain,
-
     "&:focus-visible": {
       boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,
       outline: "2px solid transparent",
@@ -106,12 +103,12 @@ export const useRowReordering = ({
     return undefined;
   };
 
-  const setHoveredRow = (
-    table: MRT_TableInstance<MRT_RowData>,
-    id: MRT_RowData["id"],
-  ) => {
+  const setHoveredRow = (table: MRT_TableInstance<TData>, id: TData["id"]) => {
     if (id) {
-      const nextRow: MRT_RowData = table.getRow(id);
+      // The `as MRT_Row<TData>` is necessary here to overcome some type/generic
+      // issues with the type of `setHoveredRow` defined by MRT. It's not ideal code,
+      // but it's the only way that works without a much larger rewrite.
+      const nextRow = table.getRow(id) as MRT_Row<TData>;
 
       if (nextRow) {
         table.setHoveredRow(nextRow);
@@ -120,8 +117,8 @@ export const useRowReordering = ({
   };
 
   type HandleDragHandleKeyDownArgs = {
-    table: MRT_TableInstance<MRT_RowData>;
-    row: MRT_Row<MRT_RowData>;
+    table: MRT_TableInstance<TData>;
+    row: MRT_Row<TData>;
     event: KeyboardEvent<HTMLButtonElement>;
   };
 
@@ -192,7 +189,7 @@ export const useRowReordering = ({
     }
   };
 
-  const handleDragHandleOnDragEnd = (table: MRT_TableInstance<MRT_RowData>) => {
+  const handleDragHandleOnDragEnd = (table: MRT_TableInstance<TData>) => {
     const cols = table.getAllColumns();
     cols[0].toggleVisibility();
 
@@ -200,24 +197,20 @@ export const useRowReordering = ({
     if (draggingRow) {
       updateRowOrder({
         rowId: draggingRow.id,
-        newRowIndex: (hoveredRow as MRT_RowData).index,
+        newRowIndex: (hoveredRow as TData).index,
       });
     }
 
     setDraggingRow(null);
   };
 
-  const handleDragHandleOnDragCapture = (
-    table: MRT_TableInstance<MRT_RowData>,
-  ) => {
+  const handleDragHandleOnDragCapture = (table: MRT_TableInstance<TData>) => {
     if (!draggingRow && table.getState().draggingRow?.id) {
       setDraggingRow(table.getState().draggingRow);
     }
   };
 
-  const resetDraggingAndHoveredRow = (
-    table: MRT_TableInstance<MRT_RowData>,
-  ) => {
+  const resetDraggingAndHoveredRow = (table: MRT_TableInstance<TData>) => {
     setDraggingRow(null);
     table.setHoveredRow(null);
   };

package/src/HtmlProps.ts

@@ -29,6 +29,33 @@ export type HtmlProps = {
    * Value: A space-separated list of one or more ID values referencing the elements being controlled by the current element
    */
   ariaControls?: HTMLAttributes<HTMLElement>["aria-controls"];
+  /**
+   * A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.
+   *
+   * Value:
+   * 
+   * `page`
+      Represents the current page within a set of pages such as the link to the current document in a breadcrumb.
+
+      `step`
+      Represents the current step within a process such as the current step in an enumerated multi step checkout flow.
+
+      `location`
+      Represents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.
+
+      `date`
+      Represents the current date within a collection of dates such as the current date within a calendar.
+
+      `time`
+      Represents the current time within a set of times such as the current time within a timetable.
+
+      `true`
+      Represents the current item within a set.
+
+      `false` (default)
+        Does not represent the current item within a set.
+   */
+  ariaCurrent?: HTMLAttributes<HTMLElement>["aria-current"];
   /**
    * The global `aria-describedby` attribute identifies the element (or elements) that describes the element on which the attribute is set.
    *

package/src/Pagination/Pagination.tsx

@@ -25,7 +25,7 @@ import { paginationTypeValues } from "./constants";
 import { usePagination } from "./usePagination";
 import { useTranslation } from "react-i18next";
 
-const PaginationContainer = styled("div")({
+const PaginationContainer = styled("nav")({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -330,7 +330,7 @@ const Pagination = ({
   );
 
   return variant === "paged" ? (
-    <PaginationContainer>
+    <PaginationContainer aria-label={t("pagination.label")}>
       <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>
         {hasRowCountInput && (
           <Box>

package/src/Radio.tsx

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
 import {
   FormControlLabel,
   FormControlLabelProps as MuiFormControlLabelProps,
@@ -17,11 +18,30 @@ import {
   Radio as MuiRadio,
   RadioProps as MuiRadioProps,
 } from "@mui/material";
-import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
+import styled from "@emotion/styled";
+
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
 import { Typography } from "./Typography";
+import { useUniqueId } from "./useUniqueId";
+
+const HintContainerWithInlineStartSpacing = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,
+  marginBlockEnd: odysseyDesignTokens.Spacing2,
+
+  // MUI applies the '.Mui-error' class to this hint text when the checkbox is invalid which turns the copy red
+  // We want to keep the hint text gray in the error state
+  ".Mui-error": {
+    color: odysseyDesignTokens.TypographyColorSubordinate,
+  },
+}));
 
 export type RadioProps = {
   /**
@@ -58,6 +78,7 @@ export type RadioProps = {
 
 const Radio = ({
   hint,
+  id: idOverride,
   inputRef,
   isChecked,
   isDisabled,
@@ -73,6 +94,10 @@ const Radio = ({
   onClick,
 }: RadioProps) => {
   const localInputRef = useRef<HTMLInputElement>(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const id = useUniqueId(idOverride);
+  const hintId = hint ? `${id}-hint` : undefined;
+
   useImperativeHandle(
     inputRef,
     () => {
@@ -86,13 +111,8 @@ const Radio = ({
   );
 
   const label = useMemo(
-    () => (
-      <>
-        <Typography component="span">{labelProp}</Typography>
-        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}
-      </>
-    ),
-    [labelProp, hint, translate],
+    () => <Typography component="span">{labelProp}</Typography>,
+    [labelProp, translate],
   );
 
   const onChange = useCallback<NonNullable<MuiRadioProps["onChange"]>>(
@@ -123,38 +143,57 @@ const Radio = ({
   );
 
   return (
-    <FormControlLabel
-      checked={isChecked}
-      className={isInvalid ? "Mui-error" : ""}
-      control={
-        <MuiRadio
-          inputProps={{
-            "data-se": testId,
-            "aria-disabled": isDisabled || isReadOnly,
-            readOnly: isReadOnly,
-            tabIndex: isReadOnly ? 0 : undefined,
-          }}
-          inputRef={localInputRef}
-          onChange={onChange}
-          onClick={onClick || handleClick}
-          disabled={isDisabled}
-        />
-      }
-      label={label}
-      name={name}
-      translate={translate}
-      value={value}
-      onBlur={onBlur}
-      disabled={isDisabled}
-      sx={{
-        ...(isReadOnly && {
-          cursor: "default",
-          "& .MuiTypography-root": {
+    <>
+      <FormControlLabel
+        checked={isChecked}
+        className={isInvalid ? "Mui-error" : ""}
+        control={
+          <MuiRadio
+            inputProps={{
+              "aria-describedby": hintId,
+              "aria-disabled": isDisabled || isReadOnly,
+              "data-se": testId,
+              readOnly: isReadOnly,
+              tabIndex: isReadOnly ? 0 : undefined,
+            }}
+            inputRef={localInputRef}
+            onChange={onChange}
+            onClick={onClick || handleClick}
+            disabled={isDisabled}
+          />
+        }
+        label={label}
+        name={name}
+        translate={translate}
+        value={value}
+        onBlur={onBlur}
+        disabled={isDisabled}
+        sx={{
+          ...(isReadOnly && {
             cursor: "default",
-          },
-        }),
-      }}
-    />
+            "& .MuiTypography-root": {
+              cursor: "default",
+            },
+          }),
+
+          ...(hint && {
+            // needed to override specific :not(:last-child) selector
+            ":not(:last-child)": {
+              marginBlockEnd: 0,
+            },
+          }),
+        }}
+      />
+      {hint && (
+        <HintContainerWithInlineStartSpacing
+          odysseyDesignTokens={odysseyDesignTokens}
+        >
+          <FormHelperText id={hintId} translate={translate}>
+            {hint}
+          </FormHelperText>
+        </HintContainerWithInlineStartSpacing>
+      )}
+    </>
   );
 };
 

package/src/Typography.tsx

@@ -87,10 +87,16 @@ export type TypographyProps = {
   variant?: keyof typeof typographyVariantMapping;
 } & Pick<
   HtmlProps,
-  "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "testId" | "translate"
+  | "ariaCurrent"
+  | "ariaDescribedBy"
+  | "ariaLabel"
+  | "ariaLabelledBy"
+  | "testId"
+  | "translate"
 >;
 
 const Typography = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -133,6 +139,7 @@ const Typography = ({
 
   return (
     <MuiTypography
+      aria-current={ariaCurrent}
       aria-describedby={ariaDescribedBy}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
@@ -152,6 +159,7 @@ const MemoizedTypography = memo(Typography);
 MemoizedTypography.displayName = "Typography";
 
 const Heading1 = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -162,6 +170,7 @@ const Heading1 = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
@@ -178,6 +187,7 @@ const MemoizedHeading1 = memo(Heading1);
 MemoizedHeading1.displayName = "Heading1";
 
 const Heading2 = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -188,6 +198,7 @@ const Heading2 = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
@@ -204,6 +215,7 @@ const MemoizedHeading2 = memo(Heading2);
 MemoizedHeading2.displayName = "Heading2";
 
 const Heading3 = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -214,6 +226,7 @@ const Heading3 = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
@@ -230,6 +243,7 @@ const MemoizedHeading3 = memo(Heading3);
 MemoizedHeading3.displayName = "Heading3";
 
 const Heading4 = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -240,6 +254,7 @@ const Heading4 = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
@@ -256,6 +271,7 @@ const MemoizedHeading4 = memo(Heading4);
 MemoizedHeading4.displayName = "Heading4";
 
 const Heading5 = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -266,6 +282,7 @@ const Heading5 = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
@@ -282,6 +299,7 @@ const MemoizedHeading5 = memo(Heading5);
 MemoizedHeading5.displayName = "Heading5";
 
 const Heading6 = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -292,6 +310,7 @@ const Heading6 = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
@@ -308,6 +327,7 @@ const MemoizedHeading6 = memo(Heading6);
 MemoizedHeading6.displayName = "Heading6";
 
 const Paragraph = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -318,6 +338,7 @@ const Paragraph = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
@@ -334,6 +355,7 @@ const MemoizedParagraph = memo(Paragraph);
 MemoizedParagraph.displayName = "Paragraph";
 
 const Subordinate = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -344,6 +366,7 @@ const Subordinate = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
@@ -360,6 +383,7 @@ const MemoizedSubordinate = memo(Subordinate);
 MemoizedSubordinate.displayName = "Subordinate";
 
 const Support = ({
+  ariaCurrent,
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -370,6 +394,7 @@ const Support = ({
   translate,
 }: TypographyProps) => (
   <Typography
+    ariaCurrent={ariaCurrent}
     ariaDescribedBy={ariaDescribedBy}
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}