@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/src/Pagination/Pagination.test.tsx

@@ -0,0 +1,305 @@
+/*!
+ * Copyright (c) 2024-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.
+ */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Pagination } from "./Pagination";
+
+describe("Pagination", () => {
+  it("renders the expected controls in 'paged' variant", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    expect(screen.getByLabelText("Rows per page")).toBeInTheDocument();
+    expect(screen.getByLabelText("Page")).toBeInTheDocument();
+    expect(screen.getByLabelText("Previous page")).toBeInTheDocument();
+    expect(screen.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();
+  });
+
+  it("calls onPaginationChange with correct pageIndex when clicking next", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Next page"));
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 2,
+        pageSize: 10,
+      });
+    });
+  });
+
+  it("calls onPaginationChange with correct pageIndex when clicking previous", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={20}
+        pageIndex={2}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Previous page"));
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 1,
+        pageSize: 10,
+      });
+    });
+  });
+
+  it("disables previous button on first page", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    expect(screen.getByLabelText("Previous page")).toBeDisabled();
+  });
+
+  it("disables next button on last page", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={100}
+        pageIndex={10}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    expect(screen.getByLabelText("Next page")).toBeDisabled();
+  });
+
+  it("updates pageIndex when entering a new page number", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    const pageInput = screen.getByLabelText("Page");
+    fireEvent.change(pageInput, { target: { value: "5" } });
+    fireEvent.blur(pageInput);
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 5,
+        pageSize: 10,
+      });
+    });
+  });
+
+  it("updates pageSize when entering a new rows per page value", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+      />,
+    );
+
+    const rowsPerPageInput = screen.getByLabelText("Rows per page");
+    fireEvent.change(rowsPerPageInput, { target: { value: "20" } });
+    fireEvent.blur(rowsPerPageInput);
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 1,
+        pageSize: 20,
+      });
+    });
+  });
+
+  it("renders 'Load more' button in 'loadMore' variant", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        loadMoreLabel="Load more"
+        onPaginationChange={onPaginationChange}
+        pageIndex={1}
+        pageSize={20}
+        totalRows={100}
+        variant="loadMore"
+      />,
+    );
+
+    expect(screen.getByText("Load more")).toBeInTheDocument();
+  });
+
+  it("calls onPaginationChange with increased pageSize when clicking 'Load more'", async () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        loadMoreLabel="Load more"
+        onPaginationChange={onPaginationChange}
+        pageIndex={1}
+        pageSize={20}
+        totalRows={100}
+        variant="loadMore"
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Load more"));
+
+    await waitFor(() => {
+      expect(onPaginationChange).toHaveBeenCalledWith({
+        pageIndex: 1,
+        pageSize: 40, // Assuming initial pageSize is 20, it should increment by 20
+      });
+    });
+  });
+
+  it("disables 'Load more' button when isMoreDisabled is true", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        loadMoreLabel="Load more"
+        onPaginationChange={onPaginationChange}
+        pageIndex={1}
+        pageSize={100}
+        totalRows={100}
+        variant="loadMore"
+        isMoreDisabled={true}
+      />,
+    );
+
+    expect(screen.getByText("Load more")).toBeDisabled();
+  });
+
+  it("disables 'Next page' button when isMoreDisabled is true", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+        isMoreDisabled={true}
+      />,
+    );
+
+    expect(screen.getByLabelText("Next page")).toBeDisabled();
+  });
+
+  it("disables all controls when isDisabled is true", () => {
+    const onPaginationChange = jest.fn();
+    render(
+      <Pagination
+        currentPageLabel="Page"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        rowsPerPageLabel="Rows per page"
+        loadMoreLabel="Load more"
+        totalRows={100}
+        lastRow={10}
+        pageIndex={1}
+        pageSize={10}
+        onPaginationChange={onPaginationChange}
+        variant="paged"
+        isDisabled={true}
+      />,
+    );
+
+    expect(screen.getByLabelText("Rows per page")).toBeDisabled();
+    expect(screen.getByLabelText("Page")).toBeDisabled();
+    expect(screen.getByLabelText("Previous page")).toBeDisabled();
+    expect(screen.getByLabelText("Next page")).toBeDisabled();
+  });
+});

package/src/Pagination/Pagination.tsx

@@ -23,6 +23,7 @@ import {
 import { Box } from "../Box";
 import { paginationTypeValues } from "./constants";
 import { usePagination } from "./usePagination";
+import { useTranslation } from "react-i18next";
 
 const PaginationContainer = styled("div")({
   display: "flex",
@@ -68,11 +69,25 @@ export type PaginationProps = {
   /**
    * The labeled rendered for the current page index
    */
-  currentPageLabel: string;
+  currentPageLabel?: string;
   /**
    * The number of items currently visible on the page
    */
   currentRowsCount?: number;
+  /**
+   * If true, the page input will be visible and the user can directly manipulate which page
+   * is visible.
+   */
+  hasPageInput?: boolean;
+  /**
+   * If true, the row count input will be visible and the user can directly manipulate how many rows
+   * are visible.
+   */
+  hasRowCountInput?: boolean;
+  /**
+   * If true, the "X - X of total X" label will be visible
+   */
+  hasRowCountLabel?: boolean;
   /**
    * If true, the pagination controls will be disabled
    */
@@ -84,11 +99,11 @@ export type PaginationProps = {
   /**
    * The current page last row index
    */
-  lastRow: number;
+  lastRow?: number;
   /**
    * If the pagination is of "loadMore" variant, then this is the the load more label
    */
-  loadMoreLabel: string;
+  loadMoreLabel?: string;
   /**
    * The max page
    */
@@ -100,7 +115,7 @@ export type PaginationProps = {
   /**
    * The label for the next control
    */
-  nextLabel: string;
+  nextLabel?: string;
   /**
    * Page index and page size setter
    */
@@ -122,11 +137,11 @@ export type PaginationProps = {
   /**
    * The label for the previous control
    */
-  previousLabel: string;
+  previousLabel?: string;
   /**
    * The label that shows how many results are rendered per page
    */
-  rowsPerPageLabel: string;
+  rowsPerPageLabel?: string;
   /**
    * Total rows count
    */
@@ -139,34 +154,51 @@ export type PaginationProps = {
 };
 
 const Pagination = ({
-  currentPageLabel,
+  currentPageLabel: currentPageLabelProp,
+  currentRowsCount,
+  hasPageInput = true,
+  hasRowCountInput = true,
+  hasRowCountLabel = true,
   isDisabled,
   isMoreDisabled,
   lastRow,
-  loadMoreLabel,
+  loadMoreLabel: loadMoreLabelProp,
   maxPageIndex,
   maxPageSize,
-  nextLabel,
-  onPaginationChange,
+  nextLabel: nextLabelProp,
+  onPaginationChange: onPaginationChangeProp,
   pageIndex,
   pageSize,
-  previousLabel,
-  rowsPerPageLabel,
+  previousLabel: previousLabelProp,
+  rowsPerPageLabel: rowsPerPageLabelProp,
   totalRows,
-  currentRowsCount,
   variant,
 }: PaginationProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
   const [page, setPage] = useState<number>(pageIndex);
   const [rowsPerPage, setRowsPerPage] = useState<number>(pageSize);
   const initialRowsPerPage = useRef<number>(pageSize);
 
+  const currentPageLabel = currentPageLabelProp ?? t("pagination.page");
+  const loadMoreLabel = loadMoreLabelProp ?? t("pagination.loadmore");
+  const nextLabel = nextLabelProp ?? t("pagination.next");
+  const previousLabel = previousLabelProp ?? t("pagination.previous");
+  const rowsPerPageLabel = rowsPerPageLabelProp ?? t("pagination.rowsperpage");
+
   useEffect(() => {
     setPage(pageIndex);
     setRowsPerPage(pageSize);
   }, [pageIndex, pageSize]);
 
+  const onPaginationChange = useCallback(
+    ({ pageIndex, pageSize }: { pageIndex: number; pageSize: number }) => {
+      onPaginationChangeProp({ pageIndex, pageSize });
+    },
+    [onPaginationChangeProp],
+  );
+
   const { totalRowsLabel } = usePagination({
     pageIndex,
     pageSize,
@@ -175,18 +207,30 @@ const Pagination = ({
   });
 
   const handlePaginationChange = useCallback(() => {
-    const updatedPage =
-      totalRows && page * totalRows > lastRow
-        ? Math.ceil(totalRows / rowsPerPage)
-        : page;
-    const updatedRowsPerPage =
-      totalRows && rowsPerPage > totalRows ? totalRows : rowsPerPage;
+    let updatedPage = page;
+    let updatedRowsPerPage = rowsPerPage;
+
+    if (totalRows) {
+      const maxPageIndex = Math.ceil(totalRows / updatedRowsPerPage);
+
+      // Ensure rowsPerPage does not exceed totalRows
+      if (updatedRowsPerPage > totalRows) {
+        updatedRowsPerPage = totalRows;
+      }
+
+      // Ensure page is within valid range
+      if (updatedPage > maxPageIndex) {
+        updatedPage = maxPageIndex;
+      } else if (updatedPage < 1) {
+        updatedPage = 1;
+      }
+    }
 
     onPaginationChange({
       pageIndex: updatedPage,
       pageSize: updatedRowsPerPage,
     });
-  }, [page, rowsPerPage, lastRow, onPaginationChange, totalRows]);
+  }, [page, rowsPerPage, onPaginationChange, totalRows]);
 
   // The following handlers use React.KeyboardEvent (rather than just KeyboardEvent) becuase React.KeyboardEvent
   // is generic, while plain KeyboardEvent is not. We need this generic so we can specify the HTMLInputElement,
@@ -259,7 +303,7 @@ const Pagination = ({
   const nextButtonDisabled = useMemo(
     () =>
       isMoreDisabled ||
-      (totalRows ? lastRow >= totalRows : false) ||
+      (lastRow && (totalRows ? lastRow >= totalRows : false)) ||
       isDisabled,
     [isMoreDisabled, totalRows, lastRow, isDisabled],
   );
@@ -288,28 +332,32 @@ const Pagination = ({
   return variant === "paged" ? (
     <PaginationContainer>
       <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>
-        <Box>
+        {hasRowCountInput && (
+          <Box>
+            <Paragraph component="span" color="textSecondary">
+              {rowsPerPageLabel}
+            </Paragraph>
+            <PaginationInput
+              odysseyDesignTokens={odysseyDesignTokens}
+              type="number"
+              value={rowsPerPage}
+              onChange={setRowsPerPageFromEvent}
+              onBlur={handlePaginationChange}
+              onKeyDown={handleRowsPerPageSubmit}
+              disabled={isDisabled}
+              inputProps={rowsPerPageInputProps}
+            />
+          </Box>
+        )}
+        {hasRowCountLabel && (
           <Paragraph component="span" color="textSecondary">
-            {rowsPerPageLabel}
+            {totalRowsLabel}
           </Paragraph>
-          <PaginationInput
-            odysseyDesignTokens={odysseyDesignTokens}
-            type="number"
-            value={rowsPerPage}
-            onChange={setRowsPerPageFromEvent}
-            onBlur={handlePaginationChange}
-            onKeyDown={handleRowsPerPageSubmit}
-            disabled={isDisabled}
-            inputProps={rowsPerPageInputProps}
-          />
-        </Box>
-        <Paragraph component="span" color="textSecondary">
-          {totalRowsLabel}
-        </Paragraph>
+        )}
       </PaginationSegment>
 
       <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>
-        {totalRows && (
+        {totalRows && hasPageInput && (
           <Box>
             <Paragraph component="span" color="textSecondary">
               {currentPageLabel}

package/src/Select.tsx

@@ -19,6 +19,7 @@ import {
   useState,
   useImperativeHandle,
 } from "react";
+import styled from "@emotion/styled";
 import {
   Box as MuiBox,
   Checkbox as MuiCheckbox,
@@ -27,9 +28,10 @@ import {
   ListSubheader,
   MenuItem as MuiMenuItem,
   Select as MuiSelect,
+  SelectProps as MuiSelectProps,
   SelectChangeEvent,
 } from "@mui/material";
-import { SelectProps as MuiSelectProps } from "@mui/material";
+
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -43,13 +45,12 @@ import {
   useInputValues,
   getControlState,
 } from "./inputUtils";
-import { normalizedKey } from "./useNormalizedKey";
-import styled from "@emotion/styled";
 import {
   useOdysseyDesignTokens,
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { TestSelector } from "./test-selectors";
+import { normalizedKey } from "./useNormalizedKey";
 
 export const SelectTestSelector = {
   accessibleText: {
@@ -508,6 +509,14 @@ const Select = <
             selectRef.current = el;
           }}
           labelId={labelElementId}
+          MenuProps={{
+            sx: {
+              ".MuiPaper-root": {
+                maxHeight: "50vh",
+                minHeight: "200px",
+              },
+            },
+          }}
           multiple={hasMultipleChoices}
           name={nameOverride ?? id}
           onBlur={onBlur}

package/src/Surface.tsx

@@ -18,6 +18,7 @@ import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
+import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
 
 const StyledContainer = styled(MuiPaper, {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
@@ -37,7 +38,7 @@ const Surface = ({ children }: SurfaceProps) => {
 
   return (
     <StyledContainer odysseyDesignTokens={odysseyDesignTokens}>
-      {children}
+      <OdysseyThemeProvider>{children}</OdysseyThemeProvider>
     </StyledContainer>
   );
 };