@okta/odyssey-react-mui 1.15.8 → 1.20.0

package/src/labs/DataComponents/TableContent.tsx

@@ -0,0 +1,390 @@
+/*!
+ * Copyright (c) 2024-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 {
+  SetStateAction,
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  ReactNode,
+  Dispatch,
+  ReactElement,
+} from "react";
+import styled, { CSSObject } from "@emotion/styled";
+import {
+  MRT_Row,
+  MRT_RowData,
+  MRT_RowSelectionState,
+  MRT_TableContainer,
+  MRT_TableInstance,
+  MRT_TableOptions,
+  useMaterialReactTable,
+} from "material-react-table";
+import { useTranslation } from "react-i18next";
+
+import {
+  ArrowDownIcon,
+  ArrowUnsortedIcon,
+  ChevronDownIcon,
+  DragIndicatorIcon,
+} from "../../icons.generated";
+import { Box } from "../../Box";
+import { TableProps, TableState, UniversalProps } from "./componentTypes";
+import { DataTableCell } from "./dataTypes";
+import {
+  dataTableImmutableSettings,
+  displayColumnDefOptions,
+  ScrollableTableContainer,
+} from "./tableConstants";
+import { MenuButton } from "../../MenuButton";
+import { MoreIcon } from "../../icons.generated";
+import { RowActions } from "./RowActions";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
+import { useScrollIndication } from "../../DataTable/useScrollIndication";
+
+const TextWrapper = styled("div")(() => ({
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+}));
+
+const RowActionsContainer = styled("div")(() => ({
+  display: "flex",
+}));
+
+export type TableContentProps = {
+  columns: TableProps["columns"];
+  data: MRT_RowData[];
+  draggingRow?: MRT_Row<MRT_RowData> | null;
+  emptyState: ReactNode;
+  getRowId: UniversalProps["getRowId"];
+  hasRowReordering: UniversalProps["hasRowReordering"];
+  hasRowSelection: UniversalProps["hasRowSelection"];
+  isEmpty?: boolean;
+  isLoading: boolean;
+  isNoResults?: boolean;
+  isRowReorderingDisabled?: boolean;
+  onReorderRows: UniversalProps["onReorderRows"];
+  pagination: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  rowReorderingUtilities: {
+    dragHandleStyles: CSSObject;
+    dragHandleText: {
+      title: string;
+      "aria-label": string;
+    };
+    draggableTableBodyRowClassName: ({
+      currentRowId,
+      draggingRowId,
+      hoveredRowId,
+    }: {
+      currentRowId: string;
+      draggingRowId?: string;
+      hoveredRowId?: string;
+    }) => string | undefined;
+    handleDragHandleKeyDown: ({
+      table,
+      row,
+      event,
+    }: {
+      table: MRT_TableInstance<MRT_RowData>;
+      row: MRT_Row<MRT_RowData>;
+      event: React.KeyboardEvent<HTMLButtonElement>;
+    }) => void;
+    handleDragHandleOnDragCapture: (
+      table: MRT_TableInstance<MRT_RowData>,
+    ) => void;
+    handleDragHandleOnDragEnd: (table: MRT_TableInstance<MRT_RowData>) => void;
+    resetDraggingAndHoveredRow: (table: MRT_TableInstance<MRT_RowData>) => void;
+    updateRowOrder: ({
+      rowId,
+      newRowIndex,
+    }: {
+      rowId: string;
+      newRowIndex: number;
+    }) => void;
+  };
+  rowSelection: MRT_RowSelectionState;
+  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
+  setTableState: Dispatch<SetStateAction<TableState>>;
+  tableOptions: TableProps;
+  tableState: TableState;
+  totalRows: UniversalProps["totalRows"];
+};
+
+const TableContent = ({
+  columns,
+  data,
+  draggingRow,
+  emptyState,
+  getRowId,
+  hasRowReordering,
+  hasRowSelection,
+  isEmpty,
+  isLoading,
+  isNoResults,
+  isRowReorderingDisabled,
+  onReorderRows,
+  pagination,
+  rowReorderingUtilities,
+  rowSelection,
+  setRowSelection,
+  setTableState,
+  tableOptions,
+  tableState,
+  totalRows,
+}: TableContentProps) => {
+  const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =
+    useState(true);
+  const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =
+    useState(true);
+  const [tableInnerContainerWidth, setTableInnerContainerWidth] =
+    useState<string>("100%");
+  const tableOuterContainerRef = useRef<HTMLDivElement>(null);
+  const tableInnerContainerRef = useRef<HTMLDivElement>(null);
+  const tableContentRef = useRef<HTMLTableElement>(null);
+
+  useScrollIndication({
+    setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,
+    setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,
+    setTableInnerContainerWidth: setTableInnerContainerWidth,
+    tableInnerContainer: tableInnerContainerRef.current,
+    tableOuterContainer: tableOuterContainerRef.current,
+  });
+
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  const columnIds = useMemo(() => {
+    return columns.map((column) => column.accessorKey) ?? [];
+  }, [columns]);
+
+  const columnOrder = useMemo(
+    () => [
+      "mrt-row-drag",
+      "mrt-row-select",
+      "mrt-row-expand",
+      ...(columnIds?.filter((id): id is string => typeof id === "string") ||
+        []),
+      "mrt-row-actions",
+    ],
+    [columnIds],
+  );
+
+  const rowDensityClassName = useMemo(() => {
+    return tableState.rowDensity === "spacious"
+      ? "MuiTableBody-spacious"
+      : tableState.rowDensity === "compact"
+        ? "MuiTableBody-compact"
+        : "MuiTableBody-default";
+  }, [tableState]);
+
+  const defaultCell = useCallback<
+    ({ cell }: { cell: DataTableCell<MRT_RowData> }) => ReactElement | string
+  >(({ cell }) => {
+    const value = cell.getValue<string>();
+    const hasTextWrapping =
+      cell.column.columnDef.hasTextWrapping ||
+      cell.column.columnDef.enableWrapping;
+    return hasTextWrapping ? value : <TextWrapper>{value}</TextWrapper>;
+  }, []);
+
+  const {
+    draggableTableBodyRowClassName,
+    dragHandleStyles,
+    dragHandleText,
+    handleDragHandleKeyDown,
+    handleDragHandleOnDragCapture,
+    handleDragHandleOnDragEnd,
+    resetDraggingAndHoveredRow,
+    updateRowOrder,
+  } = rowReorderingUtilities;
+
+  const renderRowActions = useCallback(
+    ({ row }: { row: MRT_Row<MRT_RowData> }) => {
+      const currentIndex =
+        row.index + (pagination.pageIndex - 1) * pagination.pageSize;
+      return (
+        <RowActionsContainer>
+          {tableOptions.rowActionButtons?.(row)}
+          {(tableOptions.rowActionMenuItems || hasRowReordering) && (
+            <MenuButton
+              ariaLabel={t("table.moreactions.arialabel")}
+              buttonVariant="floating"
+              endIcon={<MoreIcon />}
+              menuAlignment="right"
+              size="small"
+            >
+              <RowActions
+                isRowReorderingDisabled={isRowReorderingDisabled}
+                row={row}
+                rowActionMenuItems={tableOptions.rowActionMenuItems}
+                rowIndex={currentIndex}
+                totalRows={totalRows}
+                updateRowOrder={
+                  hasRowReordering && onReorderRows ? updateRowOrder : undefined
+                }
+              />
+            </MenuButton>
+          )}
+        </RowActionsContainer>
+      );
+    },
+    [
+      hasRowReordering,
+      isRowReorderingDisabled,
+      onReorderRows,
+      pagination.pageIndex,
+      pagination.pageSize,
+      t,
+      tableOptions,
+      totalRows,
+      updateRowOrder,
+    ],
+  );
+
+  const innerWidthStyle = useMemo(
+    () => ({ width: tableInnerContainerWidth }),
+    [tableInnerContainerWidth],
+  );
+
+  const emptyStateContainer = useCallback(
+    () => <Box sx={innerWidthStyle}>{emptyState}</Box>,
+    [innerWidthStyle, emptyState],
+  );
+
+  const dataTable = useMaterialReactTable({
+    data: !isEmpty && !isNoResults ? data : [],
+    columns,
+    getRowId,
+    state: {
+      sorting: tableState.columnSorting,
+      columnVisibility: tableState.columnVisibility,
+      isLoading: isLoading,
+      rowSelection: rowSelection,
+      columnOrder: columnOrder,
+    },
+    icons: {
+      ArrowDownwardIcon: ArrowDownIcon,
+      DragHandleIcon: DragIndicatorIcon,
+      SyncAltIcon: ArrowUnsortedIcon,
+      ExpandMoreIcon: ChevronDownIcon,
+    },
+    ...dataTableImmutableSettings,
+    displayColumnDefOptions: displayColumnDefOptions satisfies Partial<
+      MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"]
+    >,
+    muiTableProps: {
+      ref: tableContentRef,
+    },
+    muiTableContainerProps: {
+      ref: tableInnerContainerRef,
+    },
+    muiTableBodyProps: () => ({
+      className: rowDensityClassName,
+    }),
+    enableColumnResizing: tableOptions.hasColumnResizing,
+    defaultColumn: {
+      Cell: defaultCell,
+    },
+    enableRowActions:
+      (hasRowReordering === true && onReorderRows) ||
+      tableOptions.rowActionButtons ||
+      tableOptions.rowActionMenuItems
+        ? true
+        : false,
+    renderRowActions: ({ row }) => renderRowActions({ row }),
+    enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
+    enableRowDragging: hasRowReordering && Boolean(onReorderRows),
+    muiDetailPanelProps: ({ row }) => ({
+      sx: {
+        paddingBlock: row.getIsExpanded()
+          ? `${odysseyDesignTokens.Spacing3} !important`
+          : undefined,
+      },
+    }),
+    muiTableBodyRowProps: ({ table, row, isDetailPanel }) => ({
+      className: draggableTableBodyRowClassName({
+        currentRowId: row.id,
+        draggingRowId: draggingRow?.id,
+        hoveredRowId: table.getState().hoveredRow?.id,
+      }),
+      sx: isDetailPanel
+        ? {
+            paddingBlock: "0 !important",
+            border: 0,
+            ["&:hover"]: {
+              backgroundColor: `${odysseyDesignTokens.HueNeutralWhite} !important`,
+            },
+          }
+        : {},
+    }),
+    muiRowDragHandleProps: ({ table, row }) => ({
+      onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),
+      onBlur: () => resetDraggingAndHoveredRow(table),
+      onDragEnd: () => handleDragHandleOnDragEnd(table),
+      onDragCapture: () => handleDragHandleOnDragCapture(table),
+      disabled: isRowReorderingDisabled,
+      sx: dragHandleStyles,
+      ...dragHandleText,
+    }),
+    renderDetailPanel: tableOptions.renderDetailPanel,
+    enableRowVirtualization: data.length >= 50,
+    muiTableHeadCellProps: ({ column: currentColumn }) => ({
+      className: tableState.columnSorting.find(
+        (sortedColumn) => sortedColumn.id === currentColumn.id,
+      )
+        ? "isSorted"
+        : "isUnsorted",
+    }),
+    enableSorting: tableOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise
+    onSortingChange: (sortingUpdater) => {
+      const newSortVal =
+        typeof sortingUpdater === "function"
+          ? sortingUpdater(tableState.columnSorting)
+          : tableState.columnSorting;
+      setTableState((prevState) => ({
+        ...prevState,
+        columnSorting: newSortVal,
+      }));
+    },
+    enableRowSelection: hasRowSelection,
+    onRowSelectionChange: setRowSelection,
+    renderEmptyRowsFallback: emptyStateContainer,
+    localization: {
+      collapse: t("table.rowexpansion.collapse"),
+      collapseAll: t("table.rowexpansion.collapseall"),
+      expand: t("table.rowexpansion.expand"),
+      expandAll: t("table.rowexpansion.expandall"),
+    },
+  });
+
+  return (
+    <ScrollableTableContainer
+      isScrollableEnd={!isTableContainerScrolledToEnd}
+      isScrollableStart={!isTableContainerScrolledToStart}
+      odysseyDesignTokens={odysseyDesignTokens}
+      ref={tableOuterContainerRef}
+    >
+      <MRT_TableContainer table={dataTable} />
+    </ScrollableTableContainer>
+  );
+};
+
+const MemoizedTableContent = memo(TableContent);
+MemoizedTableContent.displayName = "TableContent";
+
+export { MemoizedTableContent as TableContent };

package/src/labs/DataComponents/TableSettings.tsx

@@ -0,0 +1,138 @@
+/*!
+ * 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 { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
+import { Checkbox as MuiCheckbox } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+import { densityValues } from "./constants";
+import { ListIcon, ShowIcon } from "../../icons.generated";
+import { MenuButton } from "../../MenuButton";
+import { MenuItem } from "../../MenuItem";
+import { TableProps, TableState } from "./componentTypes";
+
+export type TableSettingsProps = {
+  setTableState: Dispatch<SetStateAction<TableState>>;
+  tableOptions: TableProps;
+  tableState: TableState;
+};
+
+const TableSettings = ({
+  setTableState,
+  tableOptions,
+  tableState,
+}: TableSettingsProps) => {
+  const { t } = useTranslation();
+
+  const { hasChangeableDensity, hasColumnVisibility, columns } = tableOptions;
+  const { rowDensity, columnVisibility } = tableState;
+
+  const changeRowDensity = useCallback(
+    (value: (typeof densityValues)[number]) =>
+      (_event: React.MouseEvent<HTMLLIElement>) => {
+        // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
+        if (process.env.NODE_ENV === "development") console.debug(_event);
+
+        setTableState((prevState) => ({
+          ...prevState,
+          rowDensity: value,
+        }));
+      },
+    [setTableState],
+  );
+
+  const changeColumnVisibility = useCallback(
+    (columnId: string) => (_event: React.MouseEvent<HTMLLIElement>) => {
+      // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
+      if (process.env.NODE_ENV === "development") console.debug(_event);
+
+      setTableState((prevState) => ({
+        ...prevState,
+        columnVisibility: {
+          ...prevState.columnVisibility,
+          [columnId]: prevState.columnVisibility
+            ? prevState.columnVisibility[columnId] === false
+            : false,
+        },
+      }));
+    },
+    [setTableState],
+  );
+
+  const isColumnVisibilityChecked = useMemo(() => {
+    return columns.reduce(
+      (acc, column) => {
+        const isChecked = columnVisibility
+          ? columnVisibility[column.accessorKey!] !== false
+          : true;
+        acc[column.accessorKey!] = isChecked;
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    );
+  }, [columns, columnVisibility]);
+
+  return (
+    <>
+      {hasChangeableDensity && (
+        <MenuButton
+          ariaLabel={t("table.density.arialabel")}
+          endIcon={<ListIcon />}
+          menuAlignment="right"
+          shouldCloseOnSelect={false}
+        >
+          <>
+            {densityValues.map((value: (typeof densityValues)[number]) => (
+              <MenuItem
+                key={value}
+                isSelected={rowDensity === value}
+                onClick={changeRowDensity(value)}
+              >
+                {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
+              </MenuItem>
+            ))}
+          </>
+        </MenuButton>
+      )}
+
+      {hasColumnVisibility && (
+        <MenuButton
+          ariaLabel={t("table.columnvisibility.arialabel")}
+          endIcon={<ShowIcon />}
+          menuAlignment="right"
+          shouldCloseOnSelect={false}
+        >
+          <>
+            {columns
+              .filter((column) => column.enableHiding !== false)
+              .map((column) => (
+                <MenuItem
+                  key={column.accessorKey}
+                  onClick={changeColumnVisibility(column.id as string)}
+                >
+                  <MuiCheckbox
+                    checked={isColumnVisibilityChecked[column.accessorKey!]}
+                  />
+                  {column.header}
+                </MenuItem>
+              ))}
+          </>
+        </MenuButton>
+      )}
+    </>
+  );
+};
+
+const MemoizedTableSettings = memo(TableSettings);
+MemoizedTableSettings.displayName = "TableSettings";
+
+export { MemoizedTableSettings as TableSettings };

package/src/labs/DataComponents/componentTypes.ts

@@ -0,0 +1,111 @@
+/*!
+ * Copyright (c) 2024-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 {
+  MRT_DensityState,
+  MRT_RowData,
+  MRT_RowSelectionState,
+  MRT_SortingState,
+  MRT_TableOptions,
+  MRT_VisibilityState,
+} from "material-react-table";
+
+import {
+  availableLayouts,
+  availableStackLayouts,
+  densityValues,
+} from "./constants";
+import { DataFilter } from "../DataFilters";
+import {
+  DataGetDataType,
+  DataOnReorderRowsType,
+  DataRowSelectionState,
+  DataTableColumn,
+} from "./dataTypes";
+import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
+import { MenuButtonProps } from "../..";
+import { paginationTypeValues } from "../DataTablePagination";
+import { ReactNode } from "react";
+import { StackCardProps } from "./StackCard";
+
+export type DataLayout = (typeof availableLayouts)[number];
+export type StackLayout = (typeof availableStackLayouts)[number];
+
+export type AvailableLayouts = DataLayout[];
+export type AvailableStackLayouts = StackLayout[];
+
+export type UniversalProps = {
+  bulkActionMenuItems?: (
+    selectedRows: MRT_RowSelectionState,
+  ) => MenuButtonProps["children"];
+  currentPage?: number;
+  emptyPlaceholder?: ReactNode;
+  errorMessage?: string;
+  filters?: Array<DataFilter | DataTableColumn<MRT_RowData> | string>;
+  getData: ({
+    page,
+    resultsPerPage,
+    search,
+    filters,
+    sort,
+  }: DataGetDataType) => MRT_RowData[] | Promise<MRT_RowData[]>;
+  getRowId?: MRT_TableOptions<MRT_RowData>["getRowId"];
+  hasFilters?: boolean;
+  hasPagination?: boolean;
+  hasRowReordering?: boolean;
+  hasRowSelection?: boolean;
+  hasSearch?: boolean;
+  hasSearchSubmitButton?: boolean;
+  isEmpty?: boolean;
+  isLoading?: boolean;
+  isNoResults?: boolean;
+  isRowReorderingDisabled?: boolean;
+  noResultsPlaceholder?: ReactNode;
+  onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void;
+  onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;
+  paginationType?: (typeof paginationTypeValues)[number];
+  resultsPerPage?: number;
+  searchDelayTime?: number;
+  totalRows?: number;
+};
+
+export type TableProps = {
+  columns: DataTableColumn<MRT_RowData>[];
+  hasChangeableDensity?: boolean;
+  hasColumnResizing?: boolean;
+  hasColumnVisibility?: boolean;
+  hasSorting?: boolean;
+  initialDensity?: (typeof densityValues)[number];
+  renderDetailPanel?: MRT_TableOptions<MRT_RowData>["renderDetailPanel"];
+  rowActionButtons?: DataTableRowActionsProps["rowActionButtons"];
+  rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
+};
+
+export type StackProps = {
+  cardProps: (row: MRT_RowData) => StackCardProps;
+  maxGridColumns?: number;
+  renderDetailPanel?: (props: { row: MRT_RowData }) => ReactNode;
+  rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
+};
+
+export type ViewProps<L extends DataLayout> = {
+  availableLayouts?: L[];
+  initialLayout?: L;
+  stackOptions?: StackProps;
+  tableOptions?: TableProps;
+};
+
+export type TableState = {
+  columnSorting: MRT_SortingState;
+  columnVisibility: MRT_VisibilityState;
+  rowDensity?: MRT_DensityState;
+};

package/src/labs/DataComponents/constants.tsx

@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) 2024-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.
+ */
+
+export const availableStackLayouts = ["list", "grid"];
+export const availableTableLayouts = ["table"];
+export const availableLayouts = [
+  ...availableTableLayouts,
+  ...availableStackLayouts,
+];
+
+export const densityValues = ["comfortable", "spacious", "compact"] as const;