@okta/odyssey-react-mui 1.9.6 → 1.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.9.6",
+    "@okta/odyssey-design-tokens": "1.9.7",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "6dec6e9312bbcda85401a6f29304a22cfd1bdc88"
+  "gitHead": "b27f35a95290d8e55eada55587b2b26804d1520e"
 }

package/src/Breadcrumbs.tsx

@@ -27,7 +27,7 @@ import {
   useState,
 } from "react";
 import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated";
-import { Typography } from "./Typography";
+import { Subordinate } from "./Typography";
 import { useTranslation } from "react-i18next";
 
 export type BreadcrumbType = "listItem" | "menuItem" | "currentPage";
@@ -71,7 +71,7 @@ export const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {
   }
 
   if (breadcrumbType === "currentPage") {
-    return <Typography>{breadcrumbContent}</Typography>;
+    return <Subordinate color="textPrimary">{breadcrumbContent}</Subordinate>;
   }
 
   // breadcrumbType === "listItem" is the default
@@ -152,7 +152,7 @@ const BreadcrumbList = ({
 
       {breadcrumbSections.insideMenu && (
         <>
-          <ButtonBase onClick={onMenuButtonClick}>…</ButtonBase>
+          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>
           <Menu
             open={Boolean(anchorEl)}
             onClose={onCloseMenu}

package/src/labs/DataTable.tsx

@@ -189,6 +189,12 @@ export type DataTableProps = {
    * firing on input change.
    */
   hasSearchSubmitButton?: boolean;
+  /**
+   * The debounce time, in milliseconds, for the search input firing
+   * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,
+   * this doesn't do anything.
+   */
+  searchDelayTime?: number;
   /**
    * Callback that fires when a row (or rows) is selected or unselected.
    */
@@ -259,6 +265,7 @@ const DataTable = ({
   reorderDataFn,
   totalRows,
   hasSearchSubmitButton,
+  searchDelayTime,
   paginationType = "paged",
   onRowSelectionChange,
   rowActionButtons,
@@ -644,6 +651,7 @@ const DataTable = ({
         onChangeSearch={hasSearch ? handleSearch : undefined}
         onChangeFilters={handleFilters}
         hasSearchSubmitButton={hasSearchSubmitButton}
+        searchDelayTime={searchDelayTime}
         additionalActions={tableSettings}
         filters={
           hasFilters

package/src/theme/components.tsx

@@ -20,6 +20,7 @@ import { chipClasses } from "@mui/material/Chip";
 import { dividerClasses } from "@mui/material/Divider";
 import { formControlLabelClasses } from "@mui/material/FormControlLabel";
 import { formLabelClasses } from "@mui/material/FormLabel";
+import { formGroupClasses } from "@mui/material/FormGroup";
 import { inputAdornmentClasses } from "@mui/material/InputAdornment";
 import { inputBaseClasses } from "@mui/material/InputBase";
 import { listItemIconClasses } from "@mui/material/ListItemIcon";
@@ -453,34 +454,46 @@ export const components = ({
     MuiBreadcrumbs: {
       styleOverrides: {
         li: {
-          fontSize: odysseyTokens.TypographySizeBody,
-          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+
+          "& svg": {
+            width: odysseyTokens.Spacing3,
+          },
+
+          "& > p": {
+            paddingInline: odysseyTokens.Spacing1,
+          },
 
           "& > a, & > button": {
             borderRadius: odysseyTokens.BorderRadiusTight,
             color: odysseyTokens.TypographyColorSubordinate,
             display: "flex",
             gap: odysseyTokens.Spacing1,
-            padding: odysseyTokens.Spacing1,
+            paddingInline: odysseyTokens.Spacing1,
+            paddingBlock: 2,
             transitionProperty: "color, background-color",
             transitionDuration: "100ms",
             transitionTimingFunction: "linear",
 
             "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral200,
+              backgroundColor: odysseyTokens.HueNeutral100,
               color: odysseyTokens.TypographyColorBody,
             },
 
             "&:focus-visible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-              outline: "2px solid transparent",
-              outlineOffset: "1px",
+              outlineWidth: 2,
+              outlineStyle: "solid",
+              outlineColor: odysseyTokens.PalettePrimaryMain,
+              outlineOffset: -2,
             },
           },
         },
         separator: {
           color: odysseyTokens.BorderColorDisplay,
-          marginInline: odysseyTokens.Spacing1,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          marginInlineStart: 6,
+          marginInlineEnd: 4,
         },
       },
     },
@@ -770,7 +783,7 @@ export const components = ({
             },
 
             [`.${svgIconClasses.root}`]: {
-              color: odysseyTokens.HueNeutral900,
+              color: odysseyTokens.HueNeutral300,
             },
           },
         }),
@@ -948,8 +961,8 @@ export const components = ({
     },
     MuiCircularProgress: {
       defaultProps: {
-        size: odysseyTokens.TypographyScale2,
-        thickness: 8,
+        size: odysseyTokens.Spacing5,
+        thickness: 10,
         color: "primary",
         disableShrink: false,
         variant: "indeterminate",
@@ -957,7 +970,7 @@ export const components = ({
       styleOverrides: {
         root: ({ ownerState }) => ({
           ...(ownerState.color !== "inherit" && {
-            color: odysseyTokens.PalettePrimaryDark,
+            color: odysseyTokens.PalettePrimaryMain,
           }),
         }),
         circle: ({ ownerState }) => ({
@@ -1449,6 +1462,9 @@ export const components = ({
           ...(ownerState.fullWidth && {
             maxWidth: "100%",
           }),
+          [`& .${formGroupClasses.root}`]: {
+            marginBlockStart: odysseyTokens.Spacing1,
+          },
         }),
       },
     },
@@ -1474,6 +1490,9 @@ export const components = ({
           "&.Mui-disabled": {
             pointerEvents: "none",
           },
+          [`& .${checkboxClasses.root}`]: {
+            marginBlockStart: 0,
+          },
           [`&:hover .${radioClasses.root}, &:hover .${checkboxClasses.root}`]: {
             color: odysseyTokens.TypographyColorBody,
           },
@@ -1492,6 +1511,7 @@ export const components = ({
         }),
         label: {
           gap: odysseyTokens.Spacing1,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
         },
         asterisk: () => ({
           display: "none",
@@ -1994,8 +2014,8 @@ export const components = ({
           "&::before": {
             content: "''",
             position: "absolute",
-            width: "0.5em",
-            height: "0.5em",
+            width: odysseyTokens.Spacing2,
+            height: odysseyTokens.Spacing2,
             borderRadius: "50%",
             backgroundColor: "transparent",
             transition: theme.transitions.create(["background-color"], {
@@ -2039,10 +2059,10 @@ export const components = ({
           },
           "&.Mui-disabled": {
             backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.HueNeutral300,
+            borderColor: odysseyTokens.BorderColorDisabled,
 
             "&.Mui-checked::before": {
-              backgroundColor: odysseyTokens.HueNeutral300,
+              backgroundColor: odysseyTokens.BorderColorDisabled,
             },
           },
         }),