Add DataGrid (unstyled) (#1808)

* fix: add material-react-table

* fix: upgraded Prettier

* feat: added DataGrid

* fix: added tsbuildinfo to speed up TS compiles

* fix: removed unused dependencies from Storybook

* fix: updated DataGrid story for Storybook v7

* feat: updated DataGrid with more functionality

* fix: added notes to DataGrid and commented out Reports

* fix: removed unused imports from DataGrid

* fix: upgraded material-react-table

* fix: removed unsused comment in DataGrid

* fix: split DataGrid into 2 components

* fix: added translation interpolation and plurality

* feat: added PaginatedDataGrid

* fix: minor alphabetization in Select

* fix: pagination works now in DataGrid

* fix: removed InfinitelyScrolledDataGrid

* fix: minor code positioning

* fix: renamed DataGrid to DataTable

* fix: renamed table and fixed checkboxes

* fix: removed unused DataGrid component

* fix: incorrectly named i18nKey values

* fix: removed old Table stories

* fix: stories using Table now use StaticTable

* fix: incorrect children type in OdysseyTranslationProvider

* fix: story imports use @storybook/blocks instead of @storybook/addon-docs/blocks

* fix: missing Table components in RTL stories

* fix: updated TokenTables to properly render new brand tokens

* fix: removed unused import

* fix: added console.error where we had console.log

* fix: axe testing bug

package.json

@@ -41,7 +41,7 @@
     "lerna": "^6.5.1",
     "lint-staged": "^11.1.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.0",
+    "prettier": "^2.8.8",
     "stylelint": "^14.13.0"
   },
   "version": "0.5.0",

packages/odyssey-react-mui/package.json

@@ -30,6 +30,7 @@
     "@mui/utils": "^5.11.2",
     "@okta/odyssey-design-tokens": "workspace:*",
     "i18next": "^22.4.15",
+    "material-react-table": "^1.14.0",
     "react-i18next": "^12.2.2"
   },
   "devDependencies": {

packages/odyssey-react-mui/src/MenuItem.tsx

@@ -34,7 +34,6 @@ export interface MenuItemProps
 
 const MenuItem = ({ isDestructive, ...props }: MenuItemProps) => {
   const { closeMenu } = useContext(MenuContext);
-  console.log(closeMenu);
 
   return (
     <MuiMenuItem

packages/odyssey-react-mui/src/OdysseyTranslationProvider.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactElement, useEffect } from "react";
+import { ReactNode, useEffect } from "react";
 
 import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
 
@@ -22,7 +22,7 @@ export type TranslationOverrides = {
 };
 
 type OdysseyTranslationProviderProps = {
-  children: ReactElement;
+  children: ReactNode;
   languageCode?: SupportedLanguages;
   translationOverrides?: TranslationOverrides;
 };

packages/odyssey-react-mui/src/PaginatedTable.tsx

@@ -0,0 +1,271 @@
+/*!
+ * Copyright (c) 2022-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 { AlertProps, TablePaginationProps, Typography } from "@mui/material";
+import MaterialReactTable, {
+  MRT_PaginationState,
+  type MRT_ColumnFiltersState,
+  type MRT_RowSelectionState,
+  type MRT_TableInstance,
+  type MRT_Virtualizer,
+} from "material-react-table";
+import {
+  FunctionComponent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Trans, useTranslation } from "react-i18next";
+
+import type {
+  DefaultMaterialReactTableData,
+  MaterialReactTableProps,
+} from "./materialReactTableTypes";
+
+export type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {
+  columns: MaterialReactTableProps<TData>["columns"];
+  data: MaterialReactTableProps<TData>["data"];
+  fetchMoreData?: () => void;
+  getRowId?: MaterialReactTableProps<TData>["getRowId"];
+  hasError?: boolean;
+  hasRowSelection?: boolean;
+  initialState?: MaterialReactTableProps<TData>["initialState"];
+  isFetching?: boolean;
+  onGlobalFilterChange?: MaterialReactTableProps<TData>["onGlobalFilterChange"];
+  onPaginationChange?: MaterialReactTableProps<TData>["onPaginationChange"];
+  onRowSelectionChange?: MaterialReactTableProps<TData>["onRowSelectionChange"];
+  rowsPerPage?: number;
+  state?: MaterialReactTableProps<TData>["state"];
+  ToolbarButtons?: FunctionComponent<
+    { table: MRT_TableInstance<TData> } & unknown
+  >;
+};
+
+const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
+  columns,
+  data,
+  fetchMoreData,
+  getRowId,
+  hasError,
+  hasRowSelection,
+  initialState,
+  isFetching,
+  onGlobalFilterChange,
+  onPaginationChange,
+  onRowSelectionChange: onRowSelectionChangeProp,
+  rowsPerPage = 10,
+  state,
+  ToolbarButtons,
+}: PaginatedTableProps<TData>) => {
+  const { t } = useTranslation();
+
+  const rowVirtualizerInstanceRef =
+    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
+
+  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
+    []
+  );
+
+  const [globalFilter, setGlobalFilter] = useState<string>();
+
+  useEffect(() => {
+    if (globalFilter) {
+      onGlobalFilterChange?.(globalFilter);
+    }
+  }, [globalFilter, onGlobalFilterChange]);
+
+  useEffect(() => {
+    try {
+      // Scroll to top of table when sorting or filters change.
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [columnFilters, globalFilter]);
+
+  const totalFetchedRows = data.length ?? 0;
+
+  const renderBottomToolbarCustomActions = useCallback(
+    () =>
+      fetchMoreData ? (
+        <Typography>
+          <Trans
+            count={totalFetchedRows}
+            i18nKey="table.fetchedrows.text"
+            values={{
+              totalRows: totalFetchedRows,
+            }}
+          />
+        </Typography>
+      ) : (
+        <Typography>
+          <Trans
+            count={totalFetchedRows}
+            i18nKey="table.rows.text"
+            values={{
+              totalRows: totalFetchedRows,
+            }}
+          />
+        </Typography>
+      ),
+    [fetchMoreData, totalFetchedRows]
+  );
+
+  const renderTopToolbarCustomActions = useCallback<
+    Exclude<
+      MaterialReactTableProps<TData>["renderTopToolbarCustomActions"],
+      undefined
+    >
+  >(
+    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,
+    [ToolbarButtons]
+  );
+
+  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+
+  useEffect(() => {
+    onRowSelectionChangeProp?.(rowSelection);
+  }, [onRowSelectionChangeProp, rowSelection]);
+
+  const [pagination, setPagination] = useState<MRT_PaginationState>(
+    initialState?.pagination || {
+      pageIndex: 0,
+      pageSize: rowsPerPage,
+    }
+  );
+
+  const dataLengthRef = useRef(data.length);
+
+  const updatePagination = useCallback(
+    (paginationFunction) => {
+      if (data.length === dataLengthRef.current) {
+        setPagination((previousPagination) => {
+          const nextPagination = paginationFunction(previousPagination);
+          return nextPagination;
+        });
+      } else {
+        dataLengthRef.current = data.length;
+      }
+    },
+    [data.length]
+  );
+
+  useEffect(() => {
+    const numberOfPages = Math.floor(data.length / pagination.pageSize);
+
+    if (!isFetching && pagination.pageIndex > numberOfPages - 1) {
+      fetchMoreData?.();
+    }
+  }, [
+    data.length,
+    fetchMoreData,
+    isFetching,
+    pagination.pageIndex,
+    pagination.pageSize,
+  ]);
+
+  useEffect(() => {
+    onPaginationChange?.({
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+    });
+  }, [onPaginationChange, pagination.pageIndex, pagination.pageSize]);
+
+  const modifiedInitialState = useMemo(
+    () => ({
+      pagination,
+      ...initialState,
+    }),
+    [initialState, pagination]
+  );
+
+  const modifiedState = useMemo(
+    () => ({
+      ...state,
+      pagination: {
+        pageIndex: pagination.pageIndex,
+        pageSize: pagination.pageSize,
+      },
+      rowSelection,
+    }),
+    [pagination.pageIndex, pagination.pageSize, rowSelection, state]
+  );
+
+  const muiToolbarAlertBannerProps: AlertProps = useMemo(
+    () =>
+      hasError
+        ? {
+            children: t("table.error"),
+            severity: "error",
+          }
+        : {},
+    [hasError, t]
+  );
+
+  const muiTablePaginationProps: Partial<
+    Omit<TablePaginationProps, "rowsPerPage">
+  > = useMemo(
+    () => ({
+      rowsPerPageOptions: [],
+      showFirstButton: false,
+      showLastButton: false,
+    }),
+    []
+  );
+
+  const muiCheckboxStyles = useCallback(
+    (theme) =>
+      typeof theme.components?.MuiCheckbox?.styleOverrides?.root === "function"
+        ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({
+            ownerState: {},
+            theme,
+          })
+        : "",
+    []
+  );
+
+  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 MemoizedPaginatedTable = memo(PaginatedTable) as typeof PaginatedTable;
+
+// @ts-expect-error | This is going to error because the component isn't and can't be defined as a `FunctionComponent`, and therefore, doesn't have a `displayName` prop.
+MemoizedPaginatedTable.displayName = "PaginatedTable";
+
+export { MemoizedPaginatedTable as PaginatedTable };

packages/odyssey-react-mui/src/Select.tsx

@@ -25,8 +25,8 @@ import { Field } from "./Field";
 
 export type SelectOption = {
   text: string;
-  value?: string;
   type?: "heading" | "option";
+  value?: string;
 };
 
 export type SelectProps = {
@@ -179,14 +179,14 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
     const renderFieldComponent = useCallback(
       () => (
         <MuiSelect
+          children={children}
           id={idOverride}
-          name={idOverride}
           multiple={isMultiSelect}
+          name={idOverride}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
           ref={ref}
-          children={children}
           renderValue={isMultiSelect ? renderValue : undefined}
           value={selectedValue}
         />