@okta/odyssey-react-mui 1.14.3 → 1.14.4

package/src/labs/DataTable.tsx

@@ -57,6 +57,7 @@ import { Button } from "../Button";
 import { Box } from "../Box";
 import { MenuButton, MenuItem } from "..";
 import { ArrowUnsortedIcon } from "../icons.generated";
+import { useTranslation } from "react-i18next";
 
 export const densityValues = ["comfortable", "spacious", "compact"] as const;
 
@@ -68,7 +69,7 @@ export type {
 
 // The shape of the table columns,
 // with props named to match their MRT_ColumnDef counterparts
-export type DataColumn = {
+export type DataTableColumn = {
   /**
    * The unique ID of the column
    */
@@ -130,7 +131,7 @@ export type DataTableProps = {
   /**
    * The columns that make up the table
    */
-  columns: DataColumn[];
+  columns: DataTableColumn[];
   /**
    * The data that goes into the table, which will be displayed
    * as the table rows
@@ -310,6 +311,7 @@ const DataTable = ({
   hasSorting,
 }: DataTableProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
   const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();
   const [showSkeletons, setShowSkeletons] = useState<boolean>(true);
   const [data, setData] =
@@ -550,17 +552,29 @@ const DataTable = ({
     [draggingRow],
   );
 
-  const table = useMaterialReactTable({
-    columns: columns,
-    data: data,
-    state: {
+  const tableState = useMemo(
+    () => ({
       density,
       sorting,
       globalFilter,
       columnVisibility,
       rowSelection,
       showSkeletons,
-    },
+    }),
+    [
+      density,
+      sorting,
+      globalFilter,
+      columnVisibility,
+      rowSelection,
+      showSkeletons,
+    ],
+  );
+
+  const table = useMaterialReactTable({
+    columns: columns,
+    data: data,
+    state: tableState,
     rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
     rowVirtualizerOptions: { overscan: 4 },
     enableRowVirtualization:
@@ -648,9 +662,8 @@ const DataTable = ({
     }),
 
     muiRowDragHandleProps: ({ table, row }) => ({
-      title: "Drag row or press space/enter key to start and stop reordering",
-      "aria-label":
-        "Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.",
+      title: t("table.draghandle.tooltip"),
+      "aria-label": t("table.draghandle.arialabel"),
       onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),
       onBlur: () => {
         resetDraggingAndHoveredRow(table);
@@ -680,7 +693,7 @@ const DataTable = ({
               endIcon={<MoreIcon />}
               size="small"
               buttonVariant="floating"
-              ariaLabel="More actions"
+              ariaLabel={t("table.moreactions.arialabel")}
               menuAlignment="right"
             >
               {rowActionMenuItems && (

package/src/labs/index.ts

@@ -17,7 +17,6 @@ export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
-export * from "./DataTable";
 export * from "./DataTablePagination";
 export * from "./DataFilters";
 

package/src/properties/odyssey-react-mui.properties

@@ -4,16 +4,33 @@ close.text = close
 fielderror.screenreader.text = Error
 fieldlabel.optional.text = Optional
 fieldlabel.required.text = Required
-passwordfield.icon.label.show = Show password
+filters.clear.label = Clear filters
+filters.filter.any = Any
+filters.filter.clear = Clear filter
+filters.filters.arialabel = Filters
+filters.menuitem.any = Any {{label}}
+filters.menuitem.selected = {{selected}} selected
+filters.search.label = Search
 passwordfield.icon.label.hide = Hide password
+passwordfield.icon.label.show = Show password
 severity.error = error
 severity.info = info
 severity.success = success
 severity.warning = warning
 switch.active = Active
 switch.inactive = Inactive
+table.actions = Actions
+table.columnvisibility.arialabel = Show/hide columns
+table.density.arialabel = Table density
+table.draghandle.arialabel = Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.
+table.draghandle.tooltip = Drag row or press space/enter key to start and stop reordering
 table.error = Error loading data.
 table.fetchedrows.text = Fetched {{totalRows}} row
 table.fetchedrows.text_plural = Fetched {{totalRows}} total rows
+table.moreactions.arialabel = More actions
+table.reorder.backward = Send backward
+table.reorder.forward = Bring forward
+table.reorder.toback = Send to back
+table.reorder.tofront = Bring to front
 table.rows.text = {{totalRows}} row
-table.rows.text_plural = {{totalRows}} rows
+table.rows.text_plural = {{totalRows}} rows

package/src/properties/ts/odyssey-react-mui.ts

@@ -1 +1 @@
-export const translation = {"breadcrumbs.home.text":"Home","breadcrumbs.label.text":"Breadcrumbs","close.text":"close","fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","passwordfield.icon.label.show":"Show password","passwordfield.icon.label.hide":"Hide password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","switch.active":"Active","switch.inactive":"Inactive","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows"};
+export const translation = {"breadcrumbs.home.text":"Home","breadcrumbs.label.text":"Breadcrumbs","close.text":"close","fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","filters.clear.label":"Clear filters","filters.filter.any":"Any","filters.filter.clear":"Clear filter","filters.filters.arialabel":"Filters","filters.menuitem.any":"Any {{label}}","filters.menuitem.selected":"{{selected}} selected","filters.search.label":"Search","passwordfield.icon.label.hide":"Hide password","passwordfield.icon.label.show":"Show password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","switch.active":"Active","switch.inactive":"Inactive","table.actions":"Actions","table.columnvisibility.arialabel":"Show/hide columns","table.density.arialabel":"Table density","table.draghandle.arialabel":"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.","table.draghandle.tooltip":"Drag row or press space/enter key to start and stop reordering","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.moreactions.arialabel":"More actions","table.reorder.backward":"Send backward","table.reorder.forward":"Bring forward","table.reorder.toback":"Send to back","table.reorder.tofront":"Bring to front","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows"};

package/src/theme/components.tsx

@@ -809,7 +809,7 @@ export const components = ({
             }),
           },
 
-          "&.Mui-checked": {
+          "&.Mui-checked, &.MuiCheckbox-indeterminate": {
             backgroundColor: odysseyTokens.PalettePrimaryMain,
             borderColor: odysseyTokens.PalettePrimaryMain,
 
@@ -1993,6 +1993,9 @@ export const components = ({
       },
     },
     MuiMenu: {
+      defaultProps: {
+        elevation: 2,
+      },
       styleOverrides: {
         list: {
           paddingBlock: odysseyTokens.Spacing2,
@@ -2015,7 +2018,7 @@ export const components = ({
           minHeight: "unset",
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
-          borderRadius: odysseyTokens.BorderRadiusTight,
+          borderRadius: odysseyTokens.BorderRadiusMain,
 
           [`& .${formControlLabelClasses.root}`]: {
             gap: "unset",
@@ -2043,6 +2046,14 @@ export const components = ({
             },
           },
 
+          "&.isVisiblySelected": {
+            backgroundColor: `${odysseyTokens.PalettePrimaryLighter} !important`,
+
+            [`& .${typographyClasses.root}`]: {
+              color: odysseyTokens.HueBlue600,
+            },
+          },
+
           [`&.${menuItemClasses.selected}`]: {
             backgroundColor: "transparent",
             color: odysseyTokens.TypographyColorAction,
@@ -2517,12 +2528,14 @@ export const components = ({
 
           [`.${tableHeadClasses.root} &`]: {
             color: odysseyTokens.TypographyColorHeading,
-            fontSize: odysseyTokens.TypographySizeSubordinate,
+            fontSize: `0.71428571rem`,
             lineHeight: odysseyTokens.TypographyLineHeightBody,
             fontWeight: odysseyTokens.TypographyWeightBodyBold,
             textTransform: "uppercase",
             backgroundColor: odysseyTokens.HueNeutral50,
             borderBottom: 0,
+            height: `${odysseyTokens.Spacing7} !important`,
+            paddingBlock: `${odysseyTokens.Spacing3} !important`,
           },
 
           [`.${tableHeadClasses.root} &:first-of-type`]: {
@@ -2535,10 +2548,11 @@ export const components = ({
             borderBottomRightRadius: odysseyTokens.Spacing2,
           },
 
-          ...(ownerState.variant === "head" && {
-            lineHeight: odysseyTokens.TypographyLineHeightBody,
-            fontWeight: odysseyTokens.TypographyWeightBodyBold,
-          }),
+          [`.${tableHeadClasses.root} .ods-actions-cell + &:last-of-type, .${tableBodyClasses.root} .ods-actions-cell + &:last-of-type`]:
+            {
+              flexGrow: 0,
+              width: odysseyTokens.Spacing2,
+            },
 
           ...(ownerState.variant === "number" && {
             textAlign: "end",
@@ -2571,14 +2585,21 @@ export const components = ({
             textAlign: "justify",
           }),
 
-          ["&.MuiTableCell-compact"]: {
-            fontSize: odysseyTokens.TypographySizeSubordinate,
-            padding: odysseyTokens.Spacing2,
-          },
+          ...(ownerState.variant !== "head" && {
+            ["&.MuiTableCell-compact"]: {
+              // TODO: Find a way to tokenize these values.
+              // We can't currently because these are between existing token
+              // values, but we need these precise values to match design.
+              // We use rems so this can scale with the text size.
+              padding: "0.4285714286rem",
+              height: "2.5714285714rem",
+            },
 
-          ["&.MuiTableCell-spacious"]: {
-            padding: odysseyTokens.Spacing4,
-          },
+            ["&.MuiTableCell-spacious"]: {
+              padding: odysseyTokens.Spacing4,
+              height: odysseyTokens.Spacing9,
+            },
+          }),
 
           [`& .${checkboxClasses.root}`]: {
             width: `${odysseyTokens.TypographyLineHeightUi}rem`,
@@ -2587,10 +2608,16 @@ export const components = ({
           },
 
           [`& .${dividerClasses.vertical}`]: {
-            borderStyle: "none none none dotted",
-            borderWidth: 2,
+            borderStyle: "none none none solid",
+            borderWidth: 1,
             borderRadius: 0,
             marginRight: 2,
+            borderColor: odysseyTokens.HueNeutral400,
+            height: 18,
+          },
+
+          ["&.ods-drag-handle svg"]: {
+            color: odysseyTokens.HueNeutral500,
           },
         }),
       },