@okta/odyssey-react-mui 1.26.0 → 1.27.0

package/i18n.config.json

@@ -1,9 +1,10 @@
 {
+  "namespace": "enduser",
   "resourceFile": "odyssey-react-mui.properties",
   "resourceFilePath": "packages/odyssey-react-mui/src/properties",
   "translationsFilePath": "packages/odyssey-react-mui/src/properties/translations",
   "commitPrefix": "chore(odyssey-react-mui): ",
   "reviewers": ["okta/eng-globalizationcore", "okta/design-system"],
   "slackChannel": "odyssey",
-  "guardian": "guardian-odyssey"
+  "guardian": ""
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -49,6 +49,9 @@
     "directory": "packages/odyssey-react-mui"
   },
   "dependencies": {
+    "@dnd-kit/core": "6.0.3",
+    "@dnd-kit/sortable": "7.0.0",
+    "@dnd-kit/utilities": "3.2.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
@@ -58,7 +61,7 @@
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^7.2.0",
-    "@okta/odyssey-design-tokens": "^1.26.0",
+    "@okta/odyssey-design-tokens": "^1.27.0",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
@@ -74,5 +77,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "72de92f62683a351a51e8682485a64f74c493ca8"
+  "gitHead": "929b26fa0b7821e97b67b218cbcfd23e75b3ea1e"
 }

package/src/Surface.tsx

@@ -19,14 +19,22 @@ import {
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
+import { useContrastModeContext, ContrastMode } from "./useContrastMode";
 
 const StyledContainer = styled(MuiPaper, {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "contrastMode",
 })<{
+  contrastMode: ContrastMode;
   odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
+}>(({ contrastMode, odysseyDesignTokens }) => ({
   borderRadius: odysseyDesignTokens.Spacing4,
-  padding: odysseyDesignTokens.Spacing4,
+  padding: odysseyDesignTokens.Spacing5,
+  border:
+    contrastMode === "lowContrast"
+      ? `1px solid ${odysseyDesignTokens.HueNeutral100}`
+      : "none",
+  boxShadow: "none",
 }));
 
 export type SurfaceProps = {
@@ -35,9 +43,13 @@ export type SurfaceProps = {
 
 const Surface = ({ children }: SurfaceProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { contrastMode } = useContrastModeContext();
 
   return (
-    <StyledContainer odysseyDesignTokens={odysseyDesignTokens}>
+    <StyledContainer
+      contrastMode={contrastMode}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
       <OdysseyThemeProvider>{children}</OdysseyThemeProvider>
     </StyledContainer>
   );

package/src/labs/DataView/DataView.tsx

@@ -101,6 +101,9 @@ const DataView = ({
   getRowId: getRowIdProp,
   hasFilters,
   hasPagination,
+  hasPageInput,
+  hasRowCountInput,
+  hasRowCountLabel,
   hasSearch,
   hasSearchSubmitButton,
   hasRowReordering,
@@ -461,6 +464,9 @@ const DataView = ({
       {hasPagination && (
         <Pagination
           currentPageLabel={t("pagination.page")}
+          hasPageInput={hasPageInput}
+          hasRowCountInput={hasRowCountInput}
+          hasRowCountLabel={hasRowCountLabel}
           isDisabled={isEmpty}
           isMoreDisabled={isPaginationMoreDisabled}
           lastRow={lastRowOnPage}

package/src/labs/DataView/componentTypes.ts

@@ -18,6 +18,7 @@ import {
   MRT_TableOptions,
   MRT_VisibilityState,
 } from "material-react-table";
+import { ReactNode } from "react";
 
 import { availableLayouts, availableCardLayouts } from "./constants";
 import { DataFilter } from "../DataFilters";
@@ -30,8 +31,8 @@ import {
 import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
 import { MenuButtonProps } from "../..";
 import { paginationTypeValues } from "../DataTablePagination";
-import { ReactNode } from "react";
 import { DataCardProps } from "./DataCard";
+import { type PaginationProps } from "../../Pagination";
 
 export type DataLayout = (typeof availableLayouts)[number];
 export type CardLayout = (typeof availableCardLayouts)[number];
@@ -90,7 +91,10 @@ export type UniversalProps = {
   resultsPerPage?: number;
   searchDelayTime?: number;
   totalRows?: number;
-};
+} & Pick<
+  PaginationProps,
+  "hasPageInput" | "hasRowCountInput" | "hasRowCountLabel"
+>;
 
 export type TableLayoutProps = {
   columns: DataTableColumn<MRT_RowData>[];

package/src/labs/SideNav/NavAccordion.tsx

@@ -17,7 +17,7 @@ import {
   AccordionSummary as MuiAccordionSummary,
   AccordionProps as MuiAccordionProps,
 } from "@mui/material";
-import { ReactNode, memo } from "react";
+import { PropsWithChildren, ReactNode, memo } from "react";
 
 import type { HtmlProps } from "../../HtmlProps";
 import { ChevronDownIcon } from "../../icons.generated";
@@ -29,10 +29,6 @@ import { Support } from "../../Typography";
 import { useUniqueId } from "../../useUniqueId";
 
 export type NavAccordionProps = {
-  /**
-   * The content of the Accordion itself
-   */
-  children: ReactNode;
   /**
    * The label text for the AccordionSummary
    */
@@ -76,8 +72,7 @@ const AccordionLabelContainer = styled("span", {
   isIconVisible: boolean;
 }>(({ odysseyDesignTokens, isIconVisible }) => ({
   width: "100%",
-  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
-  fontSize: odysseyDesignTokens.TypographyScale0,
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
   fontWeight: odysseyDesignTokens.TypographyWeightHeading,
   color: odysseyDesignTokens.TypographyColorHeading,
 }));
@@ -95,16 +90,16 @@ const AccordionSummaryContainer = styled(MuiAccordionSummary, {
   borderRadius: odysseyDesignTokens.BorderRadiusMain,
   paddingBlock: odysseyDesignTokens.Spacing3,
   paddingInline: odysseyDesignTokens.Spacing4,
-  lineHeight: 1.5,
 
   "&:focus-visible": {
     backgroundColor: "unset",
     outline: "none",
-    boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
   },
 
   ...(isCompact && {
     paddingBlock: odysseyDesignTokens.Spacing2,
+    minHeight: "unset",
   }),
 
   ...(!isDisabled && {
@@ -124,7 +119,7 @@ const NavAccordion = ({
   isExpanded,
   translate,
   startIcon,
-}: NavAccordionProps) => {
+}: PropsWithChildren<NavAccordionProps>) => {
   const id = useUniqueId(idOverride);
   const headerId = `${id}-header`;
   const contentId = `${id}-content`;

package/src/labs/SideNav/SideNav.test.tsx

@@ -101,12 +101,12 @@ describe("SideNav", () => {
 
     expect(screen.getByText(menuItemText)).toBeVisible();
 
-    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    const collapseButton = screen.getByLabelText("Close navigation");
     fireEvent.click(collapseButton);
 
     expect(screen.getByText(menuItemText)).not.toBeVisible;
 
-    const expandButton = screen.getByLabelText("Expand side navigation");
+    const expandButton = screen.getByLabelText("Open navigation");
     fireEvent.click(expandButton);
 
     expect(screen.getByText(menuItemText)).toBeVisible();
@@ -133,7 +133,7 @@ describe("SideNav", () => {
       </OdysseyProvider>,
     );
 
-    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    const collapseButton = screen.getByLabelText("Close navigation");
     fireEvent.click(collapseButton);
 
     expect(mockOnCollapse).toBeCalled();
@@ -160,10 +160,10 @@ describe("SideNav", () => {
       </OdysseyProvider>,
     );
 
-    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    const collapseButton = screen.getByLabelText("Close navigation");
     fireEvent.click(collapseButton);
 
-    const expandButton = screen.getByLabelText("Expand side navigation");
+    const expandButton = screen.getByLabelText("Open navigation");
     fireEvent.click(expandButton);
 
     expect(mockOnExpand).toBeCalled();
@@ -273,7 +273,7 @@ describe("SideNav", () => {
             {
               id: "accordionOuter",
               label: accordionOuter,
-              children: [
+              nestedNavItems: [
                 {
                   id: "accordionInner",
                   href: "#",
@@ -286,7 +286,7 @@ describe("SideNav", () => {
       </OdysseyProvider>,
     );
 
-    expect(screen.getByRole("menuitem", { name: menuLinkText })).toBeVisible();
+    expect(screen.getByRole("link", { name: menuLinkText })).toBeVisible();
     expect(
       screen.getByRole("button", { name: menuClickableText }),
     ).toBeVisible();
@@ -318,6 +318,6 @@ describe("SideNav", () => {
       </OdysseyProvider>,
     );
 
-    expect(screen.getByRole("menuitem")).toHaveTextContent(`${badgeCount}`);
+    expect(screen.getByRole("listitem")).toHaveTextContent(`${badgeCount}`);
   });
 });