@okta/odyssey-react-mui 1.14.2 → 1.14.4

package/src/labs/DataFilters.tsx

@@ -30,7 +30,9 @@ import { Button } from "../Button";
 import {
   IconButton as MuiIconButton,
   Menu as MuiMenu,
+  MenuItem as MuiMenuItem,
   Popover as MuiPopover,
+  Typography as MuiTypography,
 } from "@mui/material";
 import {
   CheckIcon,
@@ -38,14 +40,14 @@ import {
   CloseCircleFilledIcon,
   FilterIcon,
 } from "../icons.generated";
-import { MenuItem } from "../MenuItem";
-import { Paragraph, Subordinate } from "../Typography";
+import { Subordinate } from "../Typography";
 import { TextField } from "../TextField";
 import { CheckboxGroup } from "../CheckboxGroup";
 import { Checkbox } from "../Checkbox";
 import { RadioGroup } from "../RadioGroup";
 import { Radio } from "../Radio";
 import { MRT_ColumnDef, MRT_RowData } from "material-react-table";
+import { Trans, useTranslation } from "react-i18next";
 
 export type DataFilterValue = string | string[] | undefined;
 
@@ -128,6 +130,7 @@ const DataFilters = ({
   filters: filtersProp = [],
 }: DataFiltersProps) => {
   const [filters, setFilters] = useState<DataFilter[]>(filtersProp);
+  const { t } = useTranslation();
 
   const initialInputValues = useMemo(() => {
     return filtersProp.reduce(
@@ -307,7 +310,7 @@ const DataFilters = ({
             aria-controls={isFiltersMenuOpen ? "filters-menu" : undefined}
             aria-expanded={isFiltersMenuOpen ? "true" : undefined}
             aria-haspopup="true"
-            ariaLabel="Filters"
+            ariaLabel={t("filters.filters.arialabel")}
             endIcon={<FilterIcon />}
             onClick={(event) => {
               setFiltersMenuAnchorElement(event.currentTarget);
@@ -337,13 +340,23 @@ const DataFilters = ({
             )?.value;
 
             return (
-              <MenuItem
+              <MuiMenuItem
                 key={filter.id}
                 onClick={(event) => {
                   setIsFilterPopoverOpen(true);
                   setFilterPopoverAnchorElement(event.currentTarget);
                   setFilterPopoverCurrentFilter(filter);
                 }}
+                selected={
+                  filterPopoverCurrentFilter === filter &&
+                  isFilterPopoverOpen === true
+                }
+                className={
+                  filterPopoverCurrentFilter === filter &&
+                  isFilterPopoverOpen === true
+                    ? "isVisiblySelected"
+                    : undefined
+                }
               >
                 <Box
                   sx={{
@@ -352,29 +365,54 @@ const DataFilters = ({
                     justifyContent: "space-between",
                     width: "100%",
                     minWidth: 180,
+                    paddingBlock: 1,
+                    paddingInlineStart: 2,
                   }}
                 >
                   <Box sx={{ marginRight: 2 }}>
-                    <Paragraph component="div">{filter.label}</Paragraph>
+                    <MuiTypography fontWeight="500" sx={{ marginBlockEnd: 2 }}>
+                      {filter.label}
+                    </MuiTypography>
                     <Subordinate component="div">
                       {!latestFilterValue ||
                       (Array.isArray(latestFilterValue) &&
-                        latestFilterValue.length === 0)
-                        ? `Any ${filter.label.toLowerCase()}`
-                        : Array.isArray(latestFilterValue)
-                          ? `${latestFilterValue.length} selected`
-                          : latestFilterValue}
+                        latestFilterValue.length === 0) ? (
+                        <Trans
+                          i18nKey="filters.menuitem.any"
+                          values={{
+                            label: filter.label.toLowerCase(),
+                          }}
+                        />
+                      ) : Array.isArray(latestFilterValue) ? (
+                        <Trans
+                          count={latestFilterValue.length}
+                          i18nKey="filters.menuitem.selected"
+                          values={{
+                            selected: latestFilterValue.length,
+                          }}
+                        />
+                      ) : (
+                        latestFilterValue
+                      )}
                     </Subordinate>
                   </Box>
                   <ChevronRightIcon />
                 </Box>
-              </MenuItem>
+              </MuiMenuItem>
             );
           })}
         </MuiMenu>
       </>
     ),
-    [isFiltersMenuOpen, filtersMenuAnchorElement, filtersProp, filters],
+    [
+      isFiltersMenuOpen,
+      filterPopoverCurrentFilter,
+      isFilterPopoverOpen,
+      filtersMenuAnchorElement,
+      filtersProp,
+      filters,
+      t,
+    ],
   );
 
   return (
@@ -390,6 +428,11 @@ const DataFilters = ({
               {/* Filter popover */}
               <MuiPopover
                 anchorEl={filterPopoverAnchorElement}
+                // Positions the popover flush with the edge of the parent menu
+                // and at the right shadow elevation. These magic values are simply
+                // to match the default popover offset.
+                elevation={2}
+                sx={{ marginLeft: 2, marginTop: -1 }}
                 open={isFilterPopoverOpen}
                 anchorOrigin={{ vertical: "top", horizontal: "right" }}
                 onClose={(ev: MouseEvent) => {
@@ -493,7 +536,7 @@ const DataFilters = ({
                               inputValues[filterPopoverCurrentFilter.id] && (
                                 <MuiIconButton
                                   size="small"
-                                  aria-label="Clear filter"
+                                  aria-label={t("filters.filter.clear")}
                                   onClick={() => {
                                     updateInputValue({
                                       filterId: filterPopoverCurrentFilter.id,
@@ -571,7 +614,7 @@ const DataFilters = ({
                           }}
                         >
                           <Radio
-                            label="Any"
+                            label={t("filters.filter.any")}
                             value={""}
                             isChecked={
                               !inputValues[filterPopoverCurrentFilter.id]
@@ -615,7 +658,7 @@ const DataFilters = ({
               <Box sx={{ display: "flex", gap: 2, width: "100%" }}>
                 <SearchField
                   value={searchValue}
-                  label="Search"
+                  label={t("filters.search.label")}
                   onClear={() => {
                     setSearchValue("");
                     onChangeSearch("");
@@ -626,7 +669,7 @@ const DataFilters = ({
                   <Box>
                     <Button
                       variant="primary"
-                      label="Search"
+                      label={t("filters.search.label")}
                       onClick={() => onChangeSearch(searchValue)}
                     />
                   </Box>
@@ -642,7 +685,7 @@ const DataFilters = ({
             <Box>
               <Button
                 variant="secondary"
-                label="Clear filters"
+                label={t("filters.clear.label")}
                 onClick={clearAllFilters}
               />
             </Box>

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,
           },
         }),
       },