@okta/odyssey-react-mui 1.25.0 → 1.26.0

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/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>
   );
 };

package/src/Tag.tsx

@@ -13,26 +13,30 @@
 import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
 import styled from "@emotion/styled";
-import { TagListContext } from "./TagListContext";
-import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
+
+import { CloseCircleFilledIcon } from "./icons.generated";
 import { HtmlProps } from "./HtmlProps";
+import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
-import { CloseCircleFilledIcon } from "./icons.generated";
-import { useContrastContext, ContrastMode } from "./ContrastModeProvider";
+import { TagListContext } from "./TagListContext";
+import { ContrastMode, useContrastModeContext } from "./useContrastMode";
+
+const tagSizeValues = ["medium", "small"] as const;
 
 export const tagColorVariants = [
-  "default",
-  "info",
+  "accentFour",
   "accentOne",
-  "accentTwo",
   "accentThree",
-  "accentFour",
+  "accentTwo",
+  "default",
+  "info",
 ] as const;
 
 type TagColorVariant = (typeof tagColorVariants)[number];
+type TagSize = (typeof tagSizeValues)[number];
 
 export type TagProps = {
   icon?: ReactElement;
@@ -53,21 +57,29 @@ export type TagProps = {
    * Color variant of the Tag, affecting its appearance
    */
   colorVariant?: TagColorVariant;
+  /*
+   *  Size variant of the Tag
+   */
+  size?: TagSize;
 } & Pick<HtmlProps, "testId" | "translate">;
 
-const getChipColors = (
-  colorVariant: TagColorVariant,
-  odysseyDesignTokens: DesignTokens,
-  contrastMode: ContrastMode,
-) => {
+const getChipColors = ({
+  colorVariant,
+  contrastMode,
+  odysseyDesignTokens,
+}: {
+  colorVariant: TagColorVariant;
+  contrastMode: ContrastMode;
+  odysseyDesignTokens: DesignTokens;
+}) => {
   const colors = {
     default: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueNeutral200,
         text: odysseyDesignTokens.HueNeutral700,
         textDisabled: odysseyDesignTokens.HueNeutral400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueNeutral100,
         text: odysseyDesignTokens.HueNeutral700,
         textDisabled: odysseyDesignTokens.HueNeutral300,
@@ -81,12 +93,12 @@ const getChipColors = (
       iconDisabled: odysseyDesignTokens.HueNeutral300,
     },
     info: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueBlue200,
         text: odysseyDesignTokens.HueBlue700,
         textDisabled: odysseyDesignTokens.HueBlue400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueBlue100,
         text: odysseyDesignTokens.HueBlue700,
         textDisabled: odysseyDesignTokens.HueBlue300,
@@ -100,12 +112,12 @@ const getChipColors = (
       iconDisabled: odysseyDesignTokens.HueBlue300,
     },
     accentOne: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentOne200,
         text: odysseyDesignTokens.HueAccentOne700,
         textDisabled: odysseyDesignTokens.HueAccentOne400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentOne100,
         text: odysseyDesignTokens.HueAccentOne700,
         textDisabled: odysseyDesignTokens.HueAccentOne300,
@@ -119,12 +131,12 @@ const getChipColors = (
       iconDisabled: odysseyDesignTokens.HueAccentOne300,
     },
     accentTwo: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentTwo200,
         text: odysseyDesignTokens.HueAccentTwo800,
         textDisabled: odysseyDesignTokens.HueAccentTwo400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentTwo100,
         text: odysseyDesignTokens.HueAccentTwo700,
         textDisabled: odysseyDesignTokens.HueAccentTwo300,
@@ -138,12 +150,12 @@ const getChipColors = (
       iconDisabled: odysseyDesignTokens.HueAccentTwo300,
     },
     accentThree: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentThree200,
         text: odysseyDesignTokens.HueAccentThree700,
         textDisabled: odysseyDesignTokens.HueAccentThree400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentThree100,
         text: odysseyDesignTokens.HueAccentThree700,
         textDisabled: odysseyDesignTokens.HueAccentThree300,
@@ -157,12 +169,12 @@ const getChipColors = (
       iconDisabled: odysseyDesignTokens.HueAccentThree300,
     },
     accentFour: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentFour200,
         text: odysseyDesignTokens.HueAccentFour700,
         textDisabled: odysseyDesignTokens.HueAccentFour400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentFour100,
         text: odysseyDesignTokens.HueAccentFour700,
         textDisabled: odysseyDesignTokens.HueAccentFour300,
@@ -182,17 +194,22 @@ const getChipColors = (
 
 const StyledTag = styled(MuiChip, {
   shouldForwardProp: (prop) =>
-    !["colorVariant", "contrastMode", "odysseyDesignTokens"].includes(
+    !["colorVariant", "contrastMode", "odysseyDesignTokens", "size"].includes(
       prop as string,
     ),
 })<{
+  as?: React.ElementType; // Allow the 'as' prop to be forwarded
+  clickable?: boolean;
   colorVariant: TagColorVariant;
   contrastMode: ContrastMode;
   odysseyDesignTokens: DesignTokens;
-  as?: React.ElementType; // Allow the 'as' prop to be forwarded
-  clickable?: boolean;
-}>(({ colorVariant, contrastMode, odysseyDesignTokens, clickable }) => {
-  const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);
+  size?: TagSize;
+}>(({ colorVariant, contrastMode, odysseyDesignTokens, clickable, size }) => {
+  const colors = getChipColors({
+    colorVariant,
+    odysseyDesignTokens,
+    contrastMode,
+  });
 
   return {
     backgroundColor: colors.background,
@@ -206,6 +223,10 @@ const StyledTag = styled(MuiChip, {
       borderColor: "transparent",
     }),
 
+    ...(size === "small" && {
+      paddingBlock: `calc(${odysseyDesignTokens.Spacing1})`,
+    }),
+
     "&.MuiChip-clickable:hover": {
       backgroundColor: colors.hover,
     },
@@ -225,6 +246,7 @@ const StyledTag = styled(MuiChip, {
     "& .MuiChip-icon": {
       color: colors.icon,
     },
+
     "& .MuiChip-deleteIcon": {
       color: colors.deleteIcon,
       "&:hover": {
@@ -241,45 +263,48 @@ const Tag = ({
   label,
   onClick,
   onRemove,
+  size = "medium",
   testId,
   translate,
 }: TagProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { chipElementType } = useContext(TagListContext);
-  const { contrastMode } = useContrastContext();
+  const { contrastMode } = useContrastModeContext();
 
   const renderTag = useCallback(
     (muiProps: MuiPropsContextType) => (
       <StyledTag
         {...muiProps}
-        as={chipElementType}
         aria-disabled={isDisabled}
+        as={chipElementType}
         clickable={Boolean(onClick)}
-        data-se={testId}
         colorVariant={colorVariant}
-        odysseyDesignTokens={odysseyDesignTokens}
-        contrastMode="highContrast"
+        contrastMode={contrastMode}
+        data-se={testId}
+        deleteIcon={<CloseCircleFilledIcon />}
         disabled={isDisabled}
         icon={icon}
         label={label}
+        odysseyDesignTokens={odysseyDesignTokens}
         onClick={onClick}
         onDelete={onRemove}
-        deleteIcon={<CloseCircleFilledIcon />}
+        size={size}
         translate={translate}
       />
     ),
     [
       chipElementType,
+      colorVariant,
+      contrastMode,
       icon,
       isDisabled,
       label,
+      odysseyDesignTokens,
       onClick,
       onRemove,
+      size,
       testId,
       translate,
-      colorVariant,
-      odysseyDesignTokens,
-      contrastMode,
     ],
   );
 

package/src/createUniqueAlphabeticalId.test.ts

@@ -13,7 +13,7 @@
 import { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId";
 
 describe("createUniqueAlphabeticalId", () => {
-  it("only has lowercase letters", () => {
+  test("only has lowercase letters", () => {
     const uniqueAlphabeticalId = createUniqueAlphabeticalId();
 
     expect(uniqueAlphabeticalId.match(/[a-z]/)).not.toBeNull();

package/src/createUniqueId.test.ts

@@ -13,7 +13,7 @@
 import { createUniqueId, uniqueIdLength } from "./createUniqueId";
 
 describe("createUniqueId", () => {
-  it("returns a nice id string", () => {
+  test("returns a nice id string", () => {
     const result = createUniqueId();
 
     expect(typeof result).toBe("string");

package/src/index.ts

@@ -65,21 +65,19 @@ export * from "./Banner";
 export * from "./Box";
 export * from "./Breadcrumbs";
 export * from "./Button";
-export * from "./Card";
 export * from "./Callout";
+export * from "./Card";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
-export * from "./ContrastModeProvider";
-export * from "./CssBaseline";
-export * from "./createShadowDomElements";
 export * from "./createUniqueId";
+export * from "./CssBaseline";
 export * from "./DataTable";
 export * from "./Dialog";
 export * from "./Drawer";
 export * from "./EmptyState";
-export * from "./Fieldset";
 export * from "./FieldComponentProps";
+export * from "./Fieldset";
 export {
   FileUploader,
   fileUploadTypes,
@@ -97,6 +95,7 @@ export * from "./OdysseyCacheProvider";
 export * from "./OdysseyProvider";
 export * from "./OdysseyThemeProvider";
 export * from "./OdysseyTranslationProvider";
+export * from "./Pagination";
 export * from "./PasswordField";
 export * from "./Radio";
 export * from "./RadioGroup";
@@ -106,6 +105,7 @@ export * from "./Select";
 export * from "./Stack";
 export * from "./Status";
 export * from "./Surface";
+export * from "./Switch";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TagList";
@@ -113,8 +113,7 @@ export * from "./TextField";
 export * from "./theme";
 export * from "./Toast";
 export * from "./ToastStack";
-export * from "./Switch";
 export * from "./Tooltip";
 export * from "./Typography";
 export * from "./useUniqueId";
-export * from "./Pagination";
+export * from "./web-component";