@okta/odyssey-react-mui 1.6.19 → 1.6.21

package/src/labs/DataTablePagination.tsx

@@ -0,0 +1,88 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { Support } from "../Typography";
+import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated";
+
+export const paginationTypeValues = ["paged", "loadMore"] as const;
+
+export type DataTablePaginationProps = {
+  currentPage?: number;
+  currentNumberOfResults?: number;
+  isNextButtonDisabled?: boolean;
+  isPreviousButtonDisabled?: boolean;
+  onClickNext: () => void;
+  onClickPrevious?: () => void;
+  paginationType?: (typeof paginationTypeValues)[number];
+};
+
+const DataTablePagination = ({
+  currentPage,
+  currentNumberOfResults,
+  isNextButtonDisabled,
+  isPreviousButtonDisabled,
+  onClickNext,
+  onClickPrevious,
+  paginationType,
+}: DataTablePaginationProps) => {
+  return (
+    <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
+      {paginationType === "loadMore" ? (
+        <>
+          <Button
+            label="Show more"
+            variant="secondary"
+            onClick={onClickNext}
+            isDisabled={isNextButtonDisabled}
+          />
+          {currentNumberOfResults && (
+            <Support color="textSecondary">
+              {currentNumberOfResults} results
+            </Support>
+          )}
+        </>
+      ) : (
+        <>
+          <Button
+            label="Previous"
+            startIcon={<ArrowLeftIcon />}
+            variant="secondary"
+            onClick={onClickPrevious}
+            isDisabled={isPreviousButtonDisabled}
+          />
+          {currentPage && (
+            <Box>
+              <Support color="textSecondary" component="span">
+                Page {currentPage}
+              </Support>
+            </Box>
+          )}
+          <Button
+            label="Next"
+            endIcon={<ArrowRightIcon />}
+            variant="secondary"
+            onClick={onClickNext}
+            isDisabled={isNextButtonDisabled}
+          />
+        </>
+      )}
+    </Box>
+  );
+};
+
+const MemoizedDataTablePagination = memo(DataTablePagination);
+MemoizedDataTablePagination.displayName = "DataTablePagination";
+
+export { MemoizedDataTablePagination as DataTablePagination };

package/src/labs/PaginatedTable.tsx

@@ -10,14 +10,16 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertProps, TablePaginationProps } from "@mui/material";
+import { AlertProps } from "@mui/material";
 import { Typography } from "../Typography";
-import MaterialReactTable, {
+import {
   MRT_PaginationState,
   type MRT_ColumnFiltersState,
   type MRT_RowSelectionState,
   type MRT_TableInstance,
   type MRT_Virtualizer,
+  useMaterialReactTable,
+  MaterialReactTable,
 } from "material-react-table";
 import {
   FunctionComponent,
@@ -55,8 +57,8 @@ export type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {
 };
 
 const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
-  columns,
-  data,
+  columns = [],
+  data = [],
   fetchMoreData,
   getRowId,
   hasError,
@@ -130,7 +132,9 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
       undefined
     >
   >(
-    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,
+    ({ table }: { table: MRT_TableInstance<TData> }) => (
+      <>{ToolbarButtons && <ToolbarButtons table={table} />}</>
+    ),
     [ToolbarButtons]
   );
 
@@ -224,9 +228,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
     [hasError, t]
   );
 
-  const muiTablePaginationProps: Partial<
-    Omit<TablePaginationProps, "rowsPerPage">
-  > = useMemo(
+  const muiTablePaginationProps = useMemo(
     () => ({
       rowsPerPageOptions: [],
       showFirstButton: false,
@@ -246,31 +248,31 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
     []
   );
 
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      enableMultiRowSelection={hasRowSelection}
-      enablePagination
-      enableRowSelection={hasRowSelection}
-      enableSorting={false}
-      getRowId={getRowId}
-      initialState={modifiedInitialState}
-      muiSelectAllCheckboxProps={{ sx: muiCheckboxStyles }}
-      muiSelectCheckboxProps={{ sx: muiCheckboxStyles }}
-      muiTablePaginationProps={muiTablePaginationProps}
-      muiToolbarAlertBannerProps={muiToolbarAlertBannerProps}
-      onColumnFiltersChange={setColumnFilters}
-      onGlobalFilterChange={setGlobalFilter}
-      onPaginationChange={updatePagination}
-      onRowSelectionChange={setRowSelection}
-      renderBottomToolbarCustomActions={renderBottomToolbarCustomActions}
-      renderTopToolbarCustomActions={renderTopToolbarCustomActions}
-      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef}
-      rowVirtualizerProps={{ overscan: 4 }}
-      state={modifiedState}
-    />
-  );
+  const table = useMaterialReactTable({
+    columns: columns,
+    data: data,
+    enableMultiRowSelection: hasRowSelection,
+    enablePagination: true,
+    enableRowSelection: hasRowSelection,
+    enableSorting: false,
+    getRowId: getRowId,
+    initialState: modifiedInitialState,
+    muiSelectAllCheckboxProps: { sx: muiCheckboxStyles },
+    muiSelectCheckboxProps: { sx: muiCheckboxStyles },
+    muiPaginationProps: muiTablePaginationProps,
+    muiToolbarAlertBannerProps: muiToolbarAlertBannerProps,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: updatePagination,
+    onRowSelectionChange: setRowSelection,
+    renderBottomToolbarCustomActions: renderBottomToolbarCustomActions,
+    renderTopToolbarCustomActions: renderTopToolbarCustomActions,
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    rowVirtualizerOptions: { overscan: 4 },
+    state: modifiedState,
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 const MemoizedPaginatedTable = memo(PaginatedTable) as typeof PaginatedTable;

package/src/labs/StaticTable.tsx

@@ -10,10 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import MaterialReactTable, {
+import {
+  useMaterialReactTable,
   type MRT_ColumnFiltersState,
   type MRT_TableInstance,
   type MRT_Virtualizer,
+  MaterialReactTable,
 } from "material-react-table";
 import {
   FunctionComponent,
@@ -45,8 +47,8 @@ export type StaticTableProps<TData extends DefaultMaterialReactTableData> = {
 };
 
 const StaticTable = <TData extends DefaultMaterialReactTableData>({
-  columns,
-  data,
+  columns = [],
+  data = [],
   getRowId,
   hasError,
   initialState,
@@ -99,32 +101,27 @@ const StaticTable = <TData extends DefaultMaterialReactTableData>({
     }
   }, [columnFilters, globalFilter]);
 
-  return (
-    <MaterialReactTable
-      columns={columns}
-      data={data}
-      enableBottomToolbar={false}
-      enablePagination={false}
-      enableRowVirtualization
-      enableSorting={false}
-      getRowId={getRowId}
-      initialState={initialState}
-      muiToolbarAlertBannerProps={
-        hasError
-          ? {
-              children: t("table.error"),
-              color: "error",
-            }
-          : undefined
-      }
-      onColumnFiltersChange={setColumnFilters}
-      onGlobalFilterChange={setGlobalFilter}
-      renderTopToolbarCustomActions={renderTopToolbarCustomActions}
-      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef}
-      rowVirtualizerProps={{ overscan: 4 }}
-      state={modifiedState}
-    />
-  );
+  const table = useMaterialReactTable({
+    columns: columns,
+    data: data,
+    enableBottomToolbar: false,
+    enablePagination: false,
+    enableRowVirtualization: true,
+    enableSorting: false,
+    getRowId: getRowId,
+    initialState: initialState,
+    muiToolbarAlertBannerProps: hasError
+      ? { children: t("table.error"), color: "error" }
+      : undefined,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    renderTopToolbarCustomActions: renderTopToolbarCustomActions,
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    rowVirtualizerOptions: { overscan: 4 },
+    state: modifiedState,
+  });
+
+  return <MaterialReactTable table={table} />;
 };
 
 const MemoizedStaticTable = memo(StaticTable) as typeof StaticTable;

package/src/labs/index.ts

@@ -14,13 +14,16 @@ export { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 export { LocalizationProvider } from "@mui/x-date-pickers";
 export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 
-export type { MRT_ColumnDef as TableColumn } from "material-react-table";
-
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
+export * from "./DataTable";
+export * from "./DataTablePagination";
+export * from "./DataFilters";
+
 export * from "./materialReactTableTypes";
-export * from "./PaginatedTable";
 export * from "./StaticTable";
+export * from "./PaginatedTable";
+
 export * from "./GroupPicker";
 export * from "./VirtualizedAutocomplete";

package/src/labs/{materialReactTableTypes.ts → materialReactTableTypes.tsx}

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import MaterialReactTable from "material-react-table";
+import { MaterialReactTable } from "material-react-table";
 
 export type DefaultMaterialReactTableData = Record<string, unknown>;
 

package/src/theme/components.tsx

@@ -29,15 +29,12 @@ import { radioClasses } from "@mui/material/Radio";
 import { stackClasses } from "@mui/material/Stack";
 import { svgIconClasses } from "@mui/material/SvgIcon";
 import { tableBodyClasses } from "@mui/material/TableBody";
-import { tableCellClasses } from "@mui/material/TableCell";
 import { tableHeadClasses } from "@mui/material/TableHead";
 import { tableRowClasses } from "@mui/material/TableRow";
-import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
 import { tooltipClasses } from "@mui/material/Tooltip";
 import { typographyClasses } from "@mui/material/Typography";
 
 import {
-  ArrowDownIcon,
   CheckCircleFilledIcon,
   CheckIcon,
   ChevronDownIcon,
@@ -1793,6 +1790,13 @@ export const components = ({
           paddingInline: odysseyTokens.Spacing2,
           borderRadius: odysseyTokens.BorderRadiusMain,
         },
+        root: {
+          "& hr": {
+            borderStyle: "solid none none",
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderColor: odysseyTokens.BorderColorDisplay,
+          },
+        },
       },
     },
     MuiMenuItem: {
@@ -2148,6 +2152,22 @@ export const components = ({
         },
       },
     },
+    MuiTabs: {
+      defaultProps: {
+        textColor: "inherit",
+      },
+      styleOverrides: {
+        root: {
+          minHeight: "unset",
+          marginBottom: odysseyTokens.Spacing5,
+        },
+
+        flexContainer: {
+          gap: odysseyTokens.Spacing5,
+          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.BorderColorDisplay}`,
+        },
+      },
+    },
     MuiTable: {
       styleOverrides: {
         root: ({ ownerState }) => ({
@@ -2155,12 +2175,15 @@ export const components = ({
           width: "auto",
           borderCollapse: "separate",
           borderSpacing: 0,
-          border: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
-          borderRadius: odysseyTokens.BorderRadiusMain,
           marginBlock: odysseyTokens.Spacing0,
           marginInline: odysseyTokens.Spacing0,
           lineHeight: odysseyTokens.TypographyLineHeightUi,
 
+          "&.narrow": {
+            width: "100%",
+            tableLayout: "fixed",
+          },
+
           "&:only-child": {
             marginBlockEnd: 0,
           },
@@ -2189,11 +2212,13 @@ export const components = ({
           borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
           textAlign: "start",
           verticalAlign: "baseline",
-          padding: "unset",
-          paddingBlock: odysseyTokens.Spacing4,
-          paddingInline: odysseyTokens.Spacing4,
+          padding: odysseyTokens.Spacing3,
           overflowWrap: "break-word",
 
+          [`.MuiTable-root.narrow &:last-child`]: {
+            width: "auto",
+          },
+
           [`.${tableRowClasses.root}:hover &[rowspan]`]: {
             backgroundColor: odysseyTokens.HueNeutralWhite,
           },
@@ -2203,6 +2228,13 @@ export const components = ({
               borderBottom: 0,
             },
 
+          [`.${tableBodyClasses.root} .${tableRowClasses.root}:first-of-type &`]:
+            {
+              borderTopColor: odysseyTokens.HueNeutralWhite,
+              borderTopStyle: "solid",
+              borderTopWidth: odysseyTokens.BorderWidthMain,
+            },
+
           [`.${tableRowClasses.selected} &`]: {
             borderBottomColor: odysseyTokens.PalettePrimaryLight,
           },
@@ -2230,10 +2262,23 @@ export const components = ({
           }),
 
           [`.${tableHeadClasses.root} &`]: {
-            color: odysseyTokens.TypographyColorBody,
+            color: odysseyTokens.TypographyColorHeading,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
             lineHeight: odysseyTokens.TypographyLineHeightBody,
             fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            textTransform: "uppercase",
             backgroundColor: odysseyTokens.HueNeutral50,
+            borderBottom: 0,
+          },
+
+          [`.${tableHeadClasses.root} &:first-of-type`]: {
+            borderTopLeftRadius: odysseyTokens.Spacing2,
+            borderBottomLeftRadius: odysseyTokens.Spacing2,
+          },
+
+          [`.${tableHeadClasses.root} &:last-of-type`]: {
+            borderTopRightRadius: odysseyTokens.Spacing2,
+            borderBottomRightRadius: odysseyTokens.Spacing2,
           },
 
           ...(ownerState.variant === "head" && {
@@ -2271,6 +2316,26 @@ export const components = ({
           ...(ownerState.align === "justify" && {
             textAlign: "justify",
           }),
+
+          ["&.MuiTableCell-compact"]: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            padding: odysseyTokens.Spacing2,
+          },
+
+          ["&.MuiTableCell-spacious"]: {
+            padding: odysseyTokens.Spacing4,
+          },
+
+          [`& .${checkboxClasses.root}`]: {
+            width: `${odysseyTokens.TypographyLineHeightUi}rem`,
+            height: `${odysseyTokens.TypographyLineHeightUi}rem`,
+            margin: 0,
+          },
+
+          [`& .${dividerClasses.vertical}`]: {
+            borderStyle: "dotted",
+            borderWidth: 2,
+          },
         }),
       },
     },
@@ -2296,24 +2361,82 @@ export const components = ({
     },
     MuiTableRow: {
       styleOverrides: {
-        root: {
+        root: () => ({
           verticalAlign: "unset",
-          [`&.${tableRowClasses.root}:hover`]: {
-            backgroundColor: odysseyTokens.HueNeutral50,
-          },
           [`&.${tableRowClasses.selected}`]: {
             backgroundColor: odysseyTokens.PalettePrimaryLighter,
             "&:hover": {
               backgroundColor: odysseyTokens.PalettePrimaryLighter,
             },
           },
-        },
+          [`&.${tableRowClasses.head}`]: {
+            boxShadow: "none !important",
+
+            "&:hover, &:focus-within": {
+              backgroundColor: "transparent !important",
+            },
+          },
+
+          "&.isDragTarget": {
+            opacity: 1,
+            position: "relative",
+
+            "&::after": {
+              content: '""',
+              width: "100%",
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: odysseyTokens.Spacing1,
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+            },
+
+            "& td": {
+              borderTop: "0 !important",
+              borderLeft: "0 !important",
+              borderRight: "0 !important",
+              borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100} !important`,
+            },
+          },
+
+          "&.isDragging, &.isDragging.isDragTarget": {
+            border: "0 !important",
+            position: "relative",
+            opacity: 1,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              height: "auto",
+              borderRadius: odysseyTokens.BorderRadiusOuter,
+              borderColor: odysseyTokens.PalettePrimaryLight,
+              borderStyle: "solid",
+              borderWidth: odysseyTokens.Spacing1,
+              backgroundColor: "transparent",
+            },
+
+            "& td": {
+              borderTop: "0 !important",
+              borderLeft: "0 !important",
+              borderRight: "0 !important",
+              borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100} !important`,
+              opacity: 0.5,
+            },
+          },
+
+          "&.isDragging.isDragTarget::after": {
+            borderColor: odysseyTokens.PalettePrimaryMain,
+          },
+        }),
       },
     },
     MuiTableSortLabel: {
-      defaultProps: {
-        IconComponent: ArrowDownIcon,
-      },
       styleOverrides: {
         root: {
           cursor: "pointer",
@@ -2330,62 +2453,31 @@ export const components = ({
           },
           "&:hover": {
             color: odysseyTokens.TypographyColorBody,
-            [`& .${tableSortLabelClasses.icon}`]: {
-              opacity: 1,
-            },
-          },
-          [`&.${tableSortLabelClasses.active}`]: {
-            color: odysseyTokens.TypographyColorSubordinate,
-            [`& .${tableSortLabelClasses.icon}`]: {
-              opacity: 1,
-              color: "inherit",
-            },
           },
         },
-        icon: ({ theme, ownerState }) => ({
-          fontSize: "inherit",
-          marginInlineEnd: 0,
-          marginInlineStart: 0,
-          opacity: 0,
-          color: "inherit",
-          transition: theme.transitions.create(["opacity", "transform"], {
-            duration: odysseyTokens.TransitionDurationMain,
+        icon: ({ ownerState }) => ({
+          ...(ownerState.direction === "asc" && {
+            transform: "rotate(180deg) !important",
           }),
-          userSelect: "none",
 
-          [`.${tableCellClasses.alignRight} &`]: {
-            marginInlineEnd: odysseyTokens.Spacing2,
+          ".isUnsorted &": {
+            opacity: "0 !important",
           },
 
-          [`.${tableCellClasses.alignLeft} &`]: {
-            marginInlineStart: odysseyTokens.Spacing2,
+          ".isUnsorted:hover &, .isUnsorted:focus &": {
+            opacity: "0.5 !important",
+
+            "&:hover, &:focus": {
+              opacity: "1 !important",
+            },
           },
 
-          ...(ownerState.direction === "desc" && {
-            transform: "rotate(0deg)",
-          }),
-          ...(ownerState.direction === "asc" && {
-            transform: "rotate(180deg)",
-          }),
+          ".isSorted &": {
+            opacity: 1,
+          },
         }),
       },
     },
-    MuiTabs: {
-      defaultProps: {
-        textColor: "inherit",
-      },
-      styleOverrides: {
-        root: {
-          minHeight: "unset",
-          marginBottom: odysseyTokens.Spacing5,
-        },
-
-        flexContainer: {
-          gap: odysseyTokens.Spacing5,
-          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.BorderColorDisplay}`,
-        },
-      },
-    },
     MuiTooltip: {
       defaultProps: {
         arrow: true,