@okta/odyssey-react-mui 1.27.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/DataTable.tsx

@@ -51,7 +51,6 @@ import {
 } from "./DataTableRowActions";
 import { useRowReordering } from "./useRowReordering";
 import { DataTableSettings } from "./DataTableSettings";
-import { MenuButton, MenuButtonProps } from "../MenuButton";
 import { Box } from "../Box";
 import { DataTableRowSelectionState, DataTableRowData } from ".";
 import {
@@ -61,7 +60,7 @@ import {
 import { useScrollIndication } from "./useScrollIndication";
 import styled from "@emotion/styled";
 import { EmptyState } from "../EmptyState";
-import { Button } from "../Button";
+import { Button, MenuButton, MenuButtonProps } from "../Buttons";
 import { Callout } from "../Callout";
 
 export type DataTableColumn<T extends DataTableRowData> = MRT_ColumnDef<T> & {

package/src/DataTable/DataTableRowActions.tsx

@@ -12,10 +12,8 @@
 
 import { MRT_Row, MRT_RowData } from "material-react-table";
 import { Fragment, ReactElement, memo, useCallback } from "react";
-import { Button } from "../Button";
-import { MenuItem } from "../MenuItem";
+import { Button, MenuButton, MenuButtonProps, MenuItem } from "../Buttons";
 import { Box as MuiBox } from "@mui/material";
-import { MenuButton, MenuButtonProps } from "../MenuButton";
 import {
   ArrowBottomIcon,
   ArrowDownIcon,

package/src/DataTable/DataTableSettings.tsx

@@ -12,8 +12,7 @@
 
 import { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
 import { Checkbox as MuiCheckbox } from "@mui/material";
-import { MenuButton } from "../MenuButton";
-import { MenuItem } from "../MenuItem";
+import { MenuButton, MenuItem } from "../Buttons";
 import { ListIcon, ShowIcon } from "../icons.generated";
 import { densityValues } from "./constants";
 import { DataTableProps } from "./DataTable";

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/Dialog.tsx

@@ -18,7 +18,7 @@ import {
   DialogContentText,
   DialogActions,
 } from "@mui/material";
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { CloseIcon } from "./icons.generated";
 import {
   cloneElement,

package/src/Drawer.tsx

@@ -24,7 +24,7 @@ import { Drawer as MuiDrawer } from "@mui/material";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { CloseIcon } from "./icons.generated";
 import {
   DesignTokens,

package/src/FileUploader/FileUploader.tsx

@@ -21,7 +21,7 @@ import {
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { UploadIcon } from "../icons.generated";
 import { Field, RenderFieldComponentProps } from "../Field";
 import { FieldComponentProps } from "../FieldComponentProps";

package/src/Form.tsx

@@ -13,7 +13,7 @@
 import { FormEventHandler, memo, ReactElement } from "react";
 import styled from "@emotion/styled";
 
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { Callout } from "./Callout";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";

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.test.tsx

@@ -10,13 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { render, waitFor, within } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
 import { Pagination } from "./Pagination";
 
 describe("Pagination", () => {
   it("renders the expected controls in 'paged' variant", () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -32,19 +34,24 @@ describe("Pagination", () => {
       />,
     );
 
-    expect(screen.getByLabelText("Rows per page")).toBeInTheDocument();
-    expect(screen.getByLabelText("Page")).toBeInTheDocument();
-    expect(screen.getByLabelText("Previous page")).toBeInTheDocument();
-    expect(screen.getByLabelText("Next page")).toBeInTheDocument();
+    expect(
+      within(container).getByLabelText("Rows per page"),
+    ).toBeInTheDocument();
+    expect(within(container).getByLabelText("Page")).toBeInTheDocument();
+    expect(
+      within(container).getByLabelText("Previous page"),
+    ).toBeInTheDocument();
+    expect(within(container).getByLabelText("Next page")).toBeInTheDocument();
     // Temporarily disabled while we figure out why i18n string interpolation
     // isn't playing nicely with testing-library. Can confirm this works properly
     // via VRT results
-    // expect(screen.getByText("1-10 of 100")).toBeInTheDocument();
+    // expect(within(container).getByText("1-10 of 100")).toBeInTheDocument();
   });
 
   it("calls onPaginationChange with correct pageIndex when clicking next", async () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -60,7 +67,7 @@ describe("Pagination", () => {
       />,
     );
 
-    fireEvent.click(screen.getByLabelText("Next page"));
+    await userEvent.click(within(container).getByLabelText("Next page"));
 
     await waitFor(() => {
       expect(onPaginationChange).toHaveBeenCalledWith({
@@ -72,7 +79,8 @@ describe("Pagination", () => {
 
   it("calls onPaginationChange with correct pageIndex when clicking previous", async () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -88,7 +96,7 @@ describe("Pagination", () => {
       />,
     );
 
-    fireEvent.click(screen.getByLabelText("Previous page"));
+    await userEvent.click(within(container).getByLabelText("Previous page"));
 
     await waitFor(() => {
       expect(onPaginationChange).toHaveBeenCalledWith({
@@ -100,7 +108,8 @@ describe("Pagination", () => {
 
   it("disables previous button on first page", () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -116,12 +125,13 @@ describe("Pagination", () => {
       />,
     );
 
-    expect(screen.getByLabelText("Previous page")).toBeDisabled();
+    expect(within(container).getByLabelText("Previous page")).toBeDisabled();
   });
 
   it("disables next button on last page", () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -137,12 +147,13 @@ describe("Pagination", () => {
       />,
     );
 
-    expect(screen.getByLabelText("Next page")).toBeDisabled();
+    expect(within(container).getByLabelText("Next page")).toBeDisabled();
   });
 
   it("updates pageIndex when entering a new page number", async () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -158,9 +169,11 @@ describe("Pagination", () => {
       />,
     );
 
-    const pageInput = screen.getByLabelText("Page");
-    fireEvent.change(pageInput, { target: { value: "5" } });
-    fireEvent.blur(pageInput);
+    const pageElement = await within(container).findByLabelText("Page");
+
+    await userEvent.tripleClick(pageElement);
+    await userEvent.keyboard("5");
+    await userEvent.click(document.body);
 
     await waitFor(() => {
       expect(onPaginationChange).toHaveBeenCalledWith({
@@ -172,7 +185,8 @@ describe("Pagination", () => {
 
   it("updates pageSize when entering a new rows per page value", async () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -188,9 +202,12 @@ describe("Pagination", () => {
       />,
     );
 
-    const rowsPerPageInput = screen.getByLabelText("Rows per page");
-    fireEvent.change(rowsPerPageInput, { target: { value: "20" } });
-    fireEvent.blur(rowsPerPageInput);
+    const rowsPerPageInput =
+      await within(container).findByLabelText("Rows per page");
+
+    await userEvent.tripleClick(rowsPerPageInput);
+    await userEvent.keyboard("20");
+    await userEvent.click(document.body);
 
     await waitFor(() => {
       expect(onPaginationChange).toHaveBeenCalledWith({
@@ -202,7 +219,8 @@ describe("Pagination", () => {
 
   it("renders 'Load more' button in 'loadMore' variant", () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         loadMoreLabel="Load more"
         onPaginationChange={onPaginationChange}
@@ -213,12 +231,13 @@ describe("Pagination", () => {
       />,
     );
 
-    expect(screen.getByText("Load more")).toBeInTheDocument();
+    expect(within(container).getByText("Load more")).toBeInTheDocument();
   });
 
   it("calls onPaginationChange with increased pageSize when clicking 'Load more'", async () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         loadMoreLabel="Load more"
         onPaginationChange={onPaginationChange}
@@ -229,7 +248,7 @@ describe("Pagination", () => {
       />,
     );
 
-    fireEvent.click(screen.getByText("Load more"));
+    await userEvent.click(within(container).getByText("Load more"));
 
     await waitFor(() => {
       expect(onPaginationChange).toHaveBeenCalledWith({
@@ -241,7 +260,8 @@ describe("Pagination", () => {
 
   it("disables 'Load more' button when isMoreDisabled is true", () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         loadMoreLabel="Load more"
         onPaginationChange={onPaginationChange}
@@ -253,12 +273,13 @@ describe("Pagination", () => {
       />,
     );
 
-    expect(screen.getByText("Load more")).toBeDisabled();
+    expect(within(container).getByText("Load more")).toBeDisabled();
   });
 
   it("disables 'Next page' button when isMoreDisabled is true", () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -275,12 +296,13 @@ describe("Pagination", () => {
       />,
     );
 
-    expect(screen.getByLabelText("Next page")).toBeDisabled();
+    expect(within(container).getByLabelText("Next page")).toBeDisabled();
   });
 
   it("disables all controls when isDisabled is true", () => {
     const onPaginationChange = jest.fn();
-    render(
+
+    const { container } = render(
       <Pagination
         currentPageLabel="Page"
         nextLabel="Next page"
@@ -297,9 +319,9 @@ describe("Pagination", () => {
       />,
     );
 
-    expect(screen.getByLabelText("Rows per page")).toBeDisabled();
-    expect(screen.getByLabelText("Page")).toBeDisabled();
-    expect(screen.getByLabelText("Previous page")).toBeDisabled();
-    expect(screen.getByLabelText("Next page")).toBeDisabled();
+    expect(within(container).getByLabelText("Rows per page")).toBeDisabled();
+    expect(within(container).getByLabelText("Page")).toBeDisabled();
+    expect(within(container).getByLabelText("Previous page")).toBeDisabled();
+    expect(within(container).getByLabelText("Next page")).toBeDisabled();
   });
 });