@okta/odyssey-react-mui 1.28.1 → 1.29.0

package/src/labs/DataView/DataView.tsx

@@ -50,7 +50,13 @@ import {
 } from "../../OdysseyDesignTokensContext";
 import styled from "@emotion/styled";
 
-export type DataViewProps = UniversalProps & ViewProps<DataLayout>;
+export type DataViewProps<TData extends MRT_RowData> = UniversalProps<TData> &
+  ViewProps<TData, DataLayout>;
+type DataViewComponent = (<TData extends MRT_RowData>(
+  props: DataViewProps<TData>,
+) => JSX.Element) & {
+  displayName?: string;
+};
 
 const DataViewContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
@@ -87,7 +93,7 @@ const MetaTextContainer = styled("div", {
   marginInlineEnd: odysseyDesignTokens.Spacing2,
 }));
 
-const DataView = ({
+const DataView = <TData extends MRT_RowData>({
   additionalActionButton,
   additionalActionMenuItems,
   availableLayouts = allAvailableLayouts,
@@ -127,7 +133,7 @@ const DataView = ({
   maxPages,
   maxResultsPerPage,
   onPaginationChange,
-}: DataViewProps) => {
+}: DataViewProps<TData>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
@@ -135,23 +141,23 @@ const DataView = ({
     initialLayout ?? availableLayouts[0],
   );
 
-  const [data, setData] = useState<MRT_RowData[]>([]);
+  const [data, setData] = useState<TData[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(isLoadingProp ?? true);
   const [isEmpty, setIsEmpty] = useState<boolean>(isEmptyProp ?? true);
   const [isNoResults, setIsNoResults] = useState<boolean>(
     isNoResultsProp ?? false,
   );
   const [errorMessage, setErrorMessage] =
-    useState<UniversalProps["errorMessage"]>(errorMessageProp);
+    useState<UniversalProps<TData>["errorMessage"]>(errorMessageProp);
 
   const [search, setSearch] = useState<string>("");
 
   const [initialFilters, setInitialFilters] =
-    useState<UniversalProps["filters"]>(filtersProp);
+    useState<UniversalProps<TData>["filters"]>(filtersProp);
   const [filters, setFilters] =
-    useState<UniversalProps["filters"]>(filtersProp);
+    useState<UniversalProps<TData>["filters"]>(filtersProp);
 
-  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>();
 
   const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
 
@@ -204,7 +210,7 @@ const DataView = ({
     ],
   );
 
-  const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;
+  const getRowId = getRowIdProp ? getRowIdProp : (row: TData) => row.id;
 
   // Update pagination state if props change
   useEffect(() => {
@@ -246,13 +252,14 @@ const DataView = ({
       pagination.pageIndex === currentPage &&
         pagination.pageSize === resultsPerPage &&
         search === "" &&
-        filters === initialFilters &&
+        (!hasFilters || filters === initialFilters) &&
         data.length === 0,
     );
   }, [
     currentPage,
     data,
     filters,
+    hasFilters,
     initialFilters,
     pagination,
     resultsPerPage,
@@ -488,7 +495,7 @@ const DataView = ({
   );
 };
 
-const MemoizedDataView = memo(DataView);
+const MemoizedDataView = memo(DataView) as DataViewComponent;
 MemoizedDataView.displayName = "DataView";
 
 export { MemoizedDataView as DataView };

package/src/labs/DataView/DetailPanel.tsx

@@ -12,14 +12,14 @@
 
 import { memo } from "react";
 import { CardLayoutProps } from "./componentTypes";
-import { DataRow } from "./dataTypes";
+import { MRT_RowData } from "material-react-table";
 
-const DetailPanel = ({
+const DetailPanel = <TData extends MRT_RowData>({
   row,
   renderDetailPanel,
 }: {
-  row: DataRow;
-  renderDetailPanel: CardLayoutProps["renderDetailPanel"];
+  row: TData;
+  renderDetailPanel: CardLayoutProps<TData>["renderDetailPanel"];
 }) => {
   if (!renderDetailPanel) return null;
   return renderDetailPanel({ row });

package/src/labs/DataView/RowActions.tsx

@@ -23,7 +23,7 @@ import {
 import { Button, MenuButtonProps, MenuItem } from "../../Buttons";
 import { DataTableProps } from "./DataTable";
 
-export type RowActionsProps = {
+export type RowActionsProps<TData extends MRT_RowData> = {
   isRowReorderingDisabled?: boolean;
   row: MRT_Row<MRT_RowData> | MRT_RowData;
   rowActionButtons?: (
@@ -31,7 +31,7 @@ export type RowActionsProps = {
   ) => ReactElement<typeof Button> | ReactElement<typeof Fragment>;
   rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps["children"];
   rowIndex: number;
-  totalRows?: DataTableProps["totalRows"];
+  totalRows?: DataTableProps<TData>["totalRows"];
   updateRowOrder?: ({
     newRowIndex,
     rowId,
@@ -41,14 +41,14 @@ export type RowActionsProps = {
   }) => void;
 };
 
-const RowActions = ({
+const RowActions = <TData extends MRT_RowData>({
   isRowReorderingDisabled,
   row,
   rowActionMenuItems,
   rowIndex,
   totalRows,
   updateRowOrder,
-}: RowActionsProps) => {
+}: RowActionsProps<TData>) => {
   const { t } = useTranslation();
 
   const handleToFrontClick = useCallback(() => {

package/src/labs/DataView/TableLayoutContent.tsx

@@ -64,20 +64,20 @@ const RowActionsContainer = styled("div")(() => ({
   display: "flex",
 }));
 
-export type TableLayoutContentProps = {
-  columns: TableLayoutProps["columns"];
+export type TableLayoutContentProps<TData extends MRT_RowData> = {
+  columns: TableLayoutProps<TData>["columns"];
   data: MRT_RowData[];
-  draggingRow?: MRT_Row<MRT_RowData> | null;
+  draggingRow?: MRT_Row<TData> | null;
   emptyState: ReactNode;
   enableVirtualization?: boolean;
-  getRowId: UniversalProps["getRowId"];
-  hasRowReordering: UniversalProps["hasRowReordering"];
-  hasRowSelection: UniversalProps["hasRowSelection"];
+  getRowId: UniversalProps<TData>["getRowId"];
+  hasRowReordering: UniversalProps<TData>["hasRowReordering"];
+  hasRowSelection: UniversalProps<TData>["hasRowSelection"];
   isEmpty?: boolean;
   isLoading: boolean;
   isNoResults?: boolean;
   isRowReorderingDisabled?: boolean;
-  onReorderRows: UniversalProps["onReorderRows"];
+  onReorderRows: UniversalProps<TData>["onReorderRows"];
   pagination: {
     pageIndex: number;
     pageSize: number;
@@ -102,15 +102,13 @@ export type TableLayoutContentProps = {
       row,
       event,
     }: {
-      table: MRT_TableInstance<MRT_RowData>;
-      row: MRT_Row<MRT_RowData>;
+      table: MRT_TableInstance<TData>;
+      row: MRT_Row<TData>;
       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;
+    handleDragHandleOnDragCapture: (table: MRT_TableInstance<TData>) => void;
+    handleDragHandleOnDragEnd: (table: MRT_TableInstance<TData>) => void;
+    resetDraggingAndHoveredRow: (table: MRT_TableInstance<TData>) => void;
     updateRowOrder: ({
       rowId,
       newRowIndex,
@@ -122,12 +120,18 @@ export type TableLayoutContentProps = {
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
   setTableState: Dispatch<SetStateAction<TableState>>;
-  tableLayoutOptions: TableLayoutProps;
+  tableLayoutOptions: TableLayoutProps<TData>;
   tableState: TableState;
-  totalRows: UniversalProps["totalRows"];
+  totalRows: UniversalProps<TData>["totalRows"];
 };
 
-const TableLayoutContent = ({
+type TableLayoutContentComponent = (<TData extends MRT_RowData>(
+  props: TableLayoutContentProps<TData>,
+) => JSX.Element) & {
+  displayName?: string;
+};
+
+const TableLayoutContent = <TData extends MRT_RowData>({
   columns,
   data,
   draggingRow,
@@ -149,7 +153,7 @@ const TableLayoutContent = ({
   tableLayoutOptions,
   tableState,
   totalRows,
-}: TableLayoutContentProps) => {
+}: TableLayoutContentProps<TData>) => {
   const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =
     useState(true);
   const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =
@@ -197,7 +201,7 @@ const TableLayoutContent = ({
   }, [tableState]);
 
   const defaultCell = useCallback<
-    ({ cell }: { cell: DataTableCell<MRT_RowData> }) => ReactElement | string
+    ({ cell }: { cell: DataTableCell<TData, unknown> }) => ReactElement | string
   >(({ cell }) => {
     const value = cell.getValue<string>();
     const hasTextWrapping =
@@ -218,7 +222,7 @@ const TableLayoutContent = ({
   } = rowReorderingUtilities;
 
   const renderRowActions = useCallback(
-    ({ row }: { row: MRT_Row<MRT_RowData> }) => {
+    ({ row }: { row: MRT_Row<TData> }) => {
       const currentIndex =
         row.index + (pagination.pageIndex - 1) * pagination.pageSize;
       return (
@@ -309,8 +313,8 @@ const TableLayoutContent = ({
 
   const hasColumnWithGrow = columns.some((column) => column.grow === true);
 
-  const dataTable = useMaterialReactTable({
-    data: !isEmpty && !isNoResults ? data : [],
+  const dataTable = useMaterialReactTable<TData>({
+    data: (!isEmpty && !isNoResults ? data : []) as TData[],
     columns,
     getRowId,
     state: {
@@ -383,7 +387,7 @@ const TableLayoutContent = ({
     },
     muiTableBodyProps: () => ({
       className: rowDensityClassName,
-      tabIndex: enableVirtualization ? 0 : undefined,
+      tabIndex: 0,
     }),
     enableColumnResizing: tableLayoutOptions.hasColumnResizing,
     defaultColumn: {
@@ -476,7 +480,9 @@ const TableLayoutContent = ({
   );
 };
 
-const MemoizedTableLayoutContent = memo(TableLayoutContent);
+const MemoizedTableLayoutContent = memo(
+  TableLayoutContent,
+) as TableLayoutContentComponent;
 MemoizedTableLayoutContent.displayName = "TableLayoutContent";
 
 export { MemoizedTableLayoutContent as TableLayoutContent };

package/src/labs/DataView/TableSettings.tsx

@@ -12,7 +12,7 @@
 
 import { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
 import { Checkbox as MuiCheckbox } from "@mui/material";
-import { MRT_DensityState } from "material-react-table";
+import { MRT_DensityState, MRT_RowData } from "material-react-table";
 import { useTranslation } from "react-i18next";
 
 import { densityValues } from "./constants";
@@ -20,17 +20,23 @@ import { ListIcon, ShowIcon } from "../../icons.generated";
 import { MenuButton, MenuItem } from "../../Buttons";
 import { TableLayoutProps, TableState } from "./componentTypes";
 
-export type TableSettingsProps = {
+export type TableSettingsProps<TData extends MRT_RowData> = {
   setTableState: Dispatch<SetStateAction<TableState>>;
-  tableLayoutOptions: TableLayoutProps;
+  tableLayoutOptions: TableLayoutProps<TData>;
   tableState: TableState;
 };
 
-const TableSettings = ({
+type TableSettingsComponent = (<TData extends MRT_RowData>(
+  props: TableSettingsProps<TData>,
+) => JSX.Element) & {
+  displayName?: string;
+};
+
+const TableSettings: TableSettingsComponent = <TData extends MRT_RowData>({
   setTableState,
   tableLayoutOptions,
   tableState,
-}: TableSettingsProps) => {
+}: TableSettingsProps<TData>) => {
   const { t } = useTranslation();
 
   const { hasChangeableDensity, hasColumnVisibility, columns } =
@@ -132,7 +138,7 @@ const TableSettings = ({
   );
 };
 
-const MemoizedTableSettings = memo(TableSettings);
+const MemoizedTableSettings = memo(TableSettings) as TableSettingsComponent;
 MemoizedTableSettings.displayName = "TableSettings";
 
 export { MemoizedTableSettings as TableSettings };

package/src/labs/DataView/componentTypes.ts

@@ -28,11 +28,11 @@ import {
   DataRowSelectionState,
   DataTableColumn,
 } from "./dataTypes";
-import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
 import { MenuButtonProps } from "../..";
 import { paginationTypeValues } from "../DataTablePagination";
 import { DataCardProps } from "./DataCard";
 import { type PaginationProps } from "../../Pagination";
+import { RowActionsProps } from "./RowActions";
 
 export type DataLayout = (typeof availableLayouts)[number];
 export type CardLayout = (typeof availableCardLayouts)[number];
@@ -40,7 +40,7 @@ export type CardLayout = (typeof availableCardLayouts)[number];
 export type AvailableLayouts = DataLayout[];
 export type AvailableCardLayouts = CardLayout[];
 
-export type UniversalProps = {
+export type UniversalProps<TData extends MRT_RowData> = {
   additionalActionButton?: ReactNode;
   additionalActionMenuItems?: ReactNode;
   bulkActionMenuItems?: (
@@ -50,15 +50,15 @@ export type UniversalProps = {
   emptyPlaceholder?: ReactNode;
   enableVirtualization?: boolean;
   errorMessage?: string;
-  filters?: Array<DataFilter | DataTableColumn<MRT_RowData> | string>;
+  filters?: Array<DataFilter | DataTableColumn<TData> | string>;
   getData: ({
     page,
     resultsPerPage,
     search,
     filters,
     sort,
-  }: DataGetDataType) => MRT_RowData[] | Promise<MRT_RowData[]>;
-  getRowId?: MRT_TableOptions<MRT_RowData>["getRowId"];
+  }: DataGetDataType) => TData[] | Promise<TData[]>;
+  getRowId?: MRT_TableOptions<TData>["getRowId"];
   hasFilters?: boolean;
   hasPagination?: boolean;
   hasRowReordering?: boolean;
@@ -96,30 +96,30 @@ export type UniversalProps = {
   "hasPageInput" | "hasRowCountInput" | "hasRowCountLabel"
 >;
 
-export type TableLayoutProps = {
-  columns: DataTableColumn<MRT_RowData>[];
+export type TableLayoutProps<TData extends MRT_RowData> = {
+  columns: DataTableColumn<TData>[];
   hasChangeableDensity?: boolean;
   hasColumnResizing?: boolean;
   hasColumnVisibility?: boolean;
   hasSorting?: boolean;
   initialDensity?: MRT_DensityState;
-  renderDetailPanel?: MRT_TableOptions<MRT_RowData>["renderDetailPanel"];
-  rowActionButtons?: DataTableRowActionsProps["rowActionButtons"];
-  rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
+  renderDetailPanel?: MRT_TableOptions<TData>["renderDetailPanel"];
+  rowActionButtons?: RowActionsProps<TData>["rowActionButtons"];
+  rowActionMenuItems?: RowActionsProps<TData>["rowActionMenuItems"];
 };
 
-export type CardLayoutProps = {
-  itemProps: (row: MRT_RowData) => Omit<DataCardProps, "row">;
+export type CardLayoutProps<TData extends MRT_RowData> = {
+  itemProps: (row: TData) => Omit<DataCardProps<TData>, "row">;
   maxGridColumns?: number;
-  renderDetailPanel?: (props: { row: MRT_RowData }) => ReactNode;
-  rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
+  renderDetailPanel?: (props: { row: TData }) => ReactNode;
+  rowActionMenuItems?: RowActionsProps<TData>["rowActionMenuItems"];
 };
 
-export type ViewProps<L extends DataLayout> = {
+export type ViewProps<TData extends MRT_RowData, L extends DataLayout> = {
   availableLayouts?: L[];
   initialLayout?: L;
-  cardLayoutOptions?: CardLayoutProps;
-  tableLayoutOptions?: TableLayoutProps;
+  cardLayoutOptions?: CardLayoutProps<TData>;
+  tableLayoutOptions?: TableLayoutProps<TData>;
 };
 
 export type TableState = {

package/src/labs/DataView/dataTypes.ts

@@ -29,7 +29,10 @@ export type DataQueryParamsType = {
   sort?: MRT_SortingState;
 };
 
-export type DataTableColumn<T extends MRT_RowData> = MRT_ColumnDef<T> & {
+export type DataTableColumn<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = MRT_ColumnDef<TData, TValue> & {
   /**
    * @deprecated use hasTextWrapping instead of enableWrapping
    */
@@ -37,21 +40,24 @@ export type DataTableColumn<T extends MRT_RowData> = MRT_ColumnDef<T> & {
   hasTextWrapping?: boolean;
 };
 
-export type DataTableColumnInstance<T extends MRT_RowData> = Omit<
-  MRT_Column<T, unknown>,
+export type DataTableColumnInstance<TData extends MRT_RowData, TValue> = Omit<
+  MRT_Column<TData, TValue>,
   "columnDef"
 > & {
-  columnDef: DataTableColumn<T>;
+  columnDef: DataTableColumn<TData, TValue>;
 };
 
-export type DataTableCell<T extends MRT_RowData> = Omit<
-  MRT_Cell<T>,
+export type DataTableCell<TData extends MRT_RowData, TValue> = Omit<
+  MRT_Cell<TData>,
   "column"
 > & {
-  column: DataTableColumnInstance<T>;
+  column: DataTableColumnInstance<TData, TValue>;
 };
 
-export type DataColumns = DataTableColumn<MRT_RowData>[];
+export type DataColumns<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = DataTableColumn<TData, TValue>[];
 
 export type DataRow = MRT_RowData;
 

package/src/labs/DataView/fetchData.ts

@@ -17,23 +17,25 @@ import { t } from "i18next";
 import { DataQueryParamsType } from "./dataTypes";
 import { UniversalProps } from "./componentTypes";
 
-type DataRequestType = {
+type DataRequestType<TData extends MRT_RowData> = {
   dataQueryParams: DataQueryParamsType;
-  errorMessageProp: UniversalProps["errorMessage"];
-  getData: UniversalProps["getData"];
-  setData: Dispatch<SetStateAction<MRT_RowData[]>>;
-  setErrorMessage: Dispatch<SetStateAction<UniversalProps["errorMessage"]>>;
+  errorMessageProp: UniversalProps<TData>["errorMessage"];
+  getData: UniversalProps<TData>["getData"];
+  setData: Dispatch<SetStateAction<TData[]>>;
+  setErrorMessage: Dispatch<
+    SetStateAction<UniversalProps<TData>["errorMessage"]>
+  >;
   setIsLoading?: Dispatch<SetStateAction<boolean>>;
 };
 
-export const fetchData = async ({
+export const fetchData = async <TData extends MRT_RowData>({
   dataQueryParams,
   errorMessageProp,
   getData,
   setData,
   setErrorMessage,
   setIsLoading,
-}: DataRequestType) => {
+}: DataRequestType<TData>) => {
   setIsLoading?.(true);
   setErrorMessage(errorMessageProp);
   try {