@okta/odyssey-react-mui 0.23.0 → 1.0.0

package/src/labs/PaginatedTable.tsx

@@ -0,0 +1,272 @@
+/*!
+ * 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 } from "@mui/material";
+import { Typography } from "../Typography";
+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 };

package/src/labs/README.md

@@ -0,0 +1,44 @@
+# @okta/odyssey-react-labs
+
+## Production Readiness
+
+This project has not yet hit version 1.0.0 and is still in active development.
+
+That said, it is beyond the early alpha stage in some key areas. For some
+early-adopters that means it is good enough to use for real things. Some
+other people think this means it is not ready yet.
+
+Even though the project is in development, effort is still made to keep
+the API stable. Patch versions are intended for backwards-compatible
+changes and minor versions are intended for backwards-incompatible changes.
+
+If you plan to use this for something real, you should either pin the
+exact version (maximum safety) or pin the major and minor versions
+(only accept backwards-compatible upgrades).
+
+## Getting Started
+
+Install the package and peer dependencies:
+
+```sh
+yarn add @okta/odyssey-react-mui @okta/odyssey-react-labs @emotion/react
+```
+
+## Components
+
+Components are published in an ESM format transpiled for the modern browsers
+within the [Okta supported browser list][1]. These modules can be served
+directly to evergreen browsers for simple applications, or further transpiled,
+bundled, and polyfilled for advanced use cases and browser support targets.
+
+[1]: https://help.okta.com/en/prod/Content/Topics/Miscellaneous/Platforms_Browser_OS_Support.htm
+
+## License
+
+[Apache Version 2.0](https://github.com/okta/odyssey/blob/master/LICENSE)
+
+## Support Disclaimer
+
+This library is community supported and is maintained by members of the Okta team for developers and IT professionals.
+This library is not an official Okta product and does not qualify for any Okta support. Anyone who chooses to use this
+library must ensure that their implementation meets any applicable legal obligations including any Okta terms and conditions.

package/src/labs/StaticTable.tsx

@@ -0,0 +1,122 @@
+/*!
+ * 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 MaterialReactTable, {
+  type MRT_ColumnFiltersState,
+  type MRT_TableInstance,
+  type MRT_Virtualizer,
+} from "material-react-table";
+import {
+  FunctionComponent,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+
+import type {
+  DefaultMaterialReactTableData,
+  MaterialReactTableProps,
+} from "./materialReactTableTypes";
+
+export type StaticTableProps<TData extends DefaultMaterialReactTableData> = {
+  columns: MaterialReactTableProps<TData>["columns"];
+  data: MaterialReactTableProps<TData>["data"];
+  getRowId?: MaterialReactTableProps<TData>["getRowId"];
+  hasError?: boolean;
+  initialState?: MaterialReactTableProps<TData>["initialState"];
+  onGlobalFilterChange?: MaterialReactTableProps<TData>["onGlobalFilterChange"];
+  state?: MaterialReactTableProps<TData>["state"];
+  ToolbarButtons?: FunctionComponent<
+    { table: MRT_TableInstance<TData> } & unknown
+  >;
+};
+
+const StaticTable = <TData extends DefaultMaterialReactTableData>({
+  columns,
+  data,
+  getRowId,
+  hasError,
+  initialState,
+  onGlobalFilterChange,
+  state,
+  ToolbarButtons,
+}: StaticTableProps<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]);
+
+  const renderTopToolbarCustomActions = useCallback<
+    Exclude<
+      MaterialReactTableProps<TData>["renderTopToolbarCustomActions"],
+      undefined
+    >
+  >(
+    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,
+    [ToolbarButtons]
+  );
+
+  useEffect(() => {
+    try {
+      // Scroll to top of table when sorting or filters change.
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [columnFilters, globalFilter]);
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableBottomToolbar={false}
+      enablePagination={false}
+      enableRowVirtualization={data.length > 50}
+      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={state}
+    />
+  );
+};
+
+const MemoizedStaticTable = memo(StaticTable) as typeof StaticTable;
+
+export { MemoizedStaticTable as StaticTable };