@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/src/labs/DataTable.tsx

@@ -37,26 +37,26 @@ import {
   KeyboardEvent,
 } from "react";
 import {
-  ArrowTopIcon,
   ArrowBottomIcon,
   ArrowDownIcon,
+  ArrowTopIcon,
+  ArrowUnsortedIcon,
   ArrowUpIcon,
   DragIndicatorIcon,
   ListIcon,
-  ShowIcon,
   MoreIcon,
-} from "../icons.generated";
+  ShowIcon,
+} from "../icons.generated/index.js";
 import { Checkbox as MuiCheckbox } from "@mui/material";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import {
   DataTablePagination,
   paginationTypeValues,
-} from "./DataTablePagination";
-import { DataFilter, DataFilters } from "./DataFilters";
-import { Button } from "../Buttons";
-import { Box } from "../Box";
-import { MenuButton, MenuItem } from "..";
-import { ArrowUnsortedIcon } from "../icons.generated";
+} from "./DataTablePagination.js";
+import { DataFilter, DataFilters } from "./DataFilters.js";
+import { Button } from "../Buttons/index.js";
+import { Box } from "../Box.js";
+import { MenuButton, MenuItem } from "../index.js";
 import { useTranslation } from "react-i18next";
 
 export const densityValues = ["comfortable", "spacious", "compact"] as const;
@@ -69,7 +69,7 @@ export type {
 
 // The shape of the table columns,
 // with props named to match their MRT_ColumnDef counterparts
-export type DataTableColumn = {
+export type DataTableColumn<TData extends MRT_RowData> = {
   /**
    * The unique ID of the column
    */
@@ -82,12 +82,12 @@ export type DataTableColumn = {
    * Customize the way each cell in the column is
    * displayed via a custom React component.
    */
-  Cell?: MRT_ColumnDef<MRT_RowData>["Cell"];
+  Cell?: MRT_ColumnDef<TData>["Cell"];
   /**
    * The UI control that will be used to filter the column.
    * Defaults to a standard text input.
    */
-  filterVariant?: MRT_ColumnDef<MRT_RowData>["filterVariant"];
+  filterVariant?: MRT_ColumnDef<TData>["filterVariant"];
   /**
    * If the filter control has preset options (such as a select or multi-select),
    * these are the options provided.
@@ -127,16 +127,16 @@ export type DataTableColumn = {
   enableHiding?: boolean;
 };
 
-export type DataTableProps = {
+export type DataTableProps<TData extends MRT_RowData> = {
   /**
    * The columns that make up the table
    */
-  columns: DataTableColumn[];
+  columns: DataTableColumn<TData>[];
   /**
    * The data that goes into the table, which will be displayed
    * as the table rows
    */
-  data: MRT_TableOptions<MRT_RowData>["data"];
+  data: MRT_TableOptions<TData>["data"];
   /**
    * The total number of rows in the table. Optional, because it's sometimes impossible
    * to calculate. Used in table pagination to know when to disable the "next"/"more" button.
@@ -145,7 +145,7 @@ export type DataTableProps = {
   /**
    * The function to get the ID of a row
    */
-  getRowId?: MRT_TableOptions<MRT_RowData>["getRowId"];
+  getRowId?: MRT_TableOptions<TData>["getRowId"];
   /**
    * The initial density of the table. This is available even if the table density
    * isn't changeable.
@@ -219,7 +219,9 @@ export type DataTableProps = {
     search?: string;
     filters?: DataFilter[];
     sort?: MRT_SortingState;
-  }) => MRT_TableOptions<MRT_RowData>["data"];
+  }) =>
+    | MRT_TableOptions<TData>["data"]
+    | Promise<MRT_TableOptions<TData>["data"]>;
   /**
    * Callback that fires when the user reorders rows within the table. Can be used
    * to propogate order change to the backend.
@@ -248,24 +250,24 @@ export type DataTableProps = {
    * Action buttons to display in each row
    */
   rowActionButtons?: (
-    row: MRT_RowData,
+    row: TData,
   ) => ReactElement<typeof Button | typeof Fragment>;
   /**
    * Menu items to include in the optional actions menu on each row.
    */
   rowActionMenuItems?: (
-    row: MRT_RowData,
+    row: TData,
   ) => ReactElement<typeof MenuItem | typeof Fragment>;
 };
 
-type TableType = MRT_TableInstance<MRT_RowData>;
+type TableType<TData extends MRT_RowData> = MRT_TableInstance<TData>;
 
-const reorderDataRowsLocally = ({
+const reorderDataRowsLocally = <TData extends MRT_RowData>({
   currentData,
   rowId,
   newIndex,
 }: {
-  currentData: MRT_TableOptions<MRT_RowData>["data"];
+  currentData: MRT_TableOptions<TData>["data"];
   rowId: string;
   newIndex: number;
 }) => {
@@ -284,7 +286,7 @@ const reorderDataRowsLocally = ({
   return updatedData;
 };
 
-const DataTable = ({
+const DataTable = <TData extends MRT_RowData>({
   columns,
   data: dataProp,
   getRowId,
@@ -309,13 +311,12 @@ const DataTable = ({
   hasRowSelection,
   hasSearch,
   hasSorting,
-}: DataTableProps) => {
+}: DataTableProps<TData>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
-  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>();
   const [showSkeletons, setShowSkeletons] = useState<boolean>(true);
-  const [data, setData] =
-    useState<MRT_TableOptions<MRT_RowData>["data"]>(dataProp);
+  const [data, setData] = useState<MRT_TableOptions<TData>["data"]>(dataProp);
   const [page, setPage] = useState<number>(pageProp);
   const [resultsPerPage, setResultsPerPage] =
     useState<number>(resultsPerPageProp);
@@ -325,7 +326,7 @@ const DataTable = ({
 
   const initialColumnVisibility = useMemo(() => {
     return columns.reduce((acc, column) => {
-      acc[column.accessorKey as string] = true;
+      acc[column.accessorKey] = true;
       return acc;
     }, {} as MRT_VisibilityState);
   }, [columns]);
@@ -348,16 +349,19 @@ const DataTable = ({
   const refreshData = useCallback(async () => {
     setShowSkeletons(true);
     try {
-      const newData = await fetchDataFn({
+      const newData = fetchDataFn({
         page: page,
         resultsPerPage: resultsPerPage,
         sort: sorting,
         search: globalFilter,
         filters: filters,
       });
-      setData(newData);
+
+      setData(newData instanceof Promise ? await newData : newData);
+
       setShowSkeletons(false);
     } catch (error) {
+      console.error(error);
       setShowSkeletons(false);
     }
   }, [page, resultsPerPage, sorting, globalFilter, filters, fetchDataFn]);
@@ -428,24 +432,31 @@ const DataTable = ({
   const rowVirtualizerInstanceRef =
     useRef<MRT_RowVirtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
 
-  const setHoveredRow = (table: TableType, id: MRT_RowData["id"]) => {
+  const setHoveredRow = useCallback<
+    (table: TableType<TData>, id: TData["id"]) => void
+  >((table, id) => {
     if (id) {
-      const nextRow: MRT_RowData = table.getRow(id);
+      const nextRow = table.getRow(id) as MRT_Row<TData>;
 
       if (nextRow) {
         table.setHoveredRow(nextRow);
       }
     }
-  };
+  }, []);
 
-  const resetDraggingAndHoveredRow = (table: TableType) => {
-    setDraggingRow(null);
-    table.setHoveredRow(null);
-  };
+  const resetDraggingAndHoveredRow = useCallback<
+    (table: TableType<TData>) => void
+  >(
+    (table) => {
+      setDraggingRow(null);
+      table.setHoveredRow(null);
+    },
+    [setDraggingRow],
+  );
 
   type HandleDragHandleKeyDownArgs = {
-    table: TableType;
-    row: MRT_Row<MRT_RowData>;
+    table: TableType<TData>;
+    row: MRT_Row<TData>;
     event: KeyboardEvent<HTMLButtonElement>;
   };
 
@@ -498,12 +509,14 @@ const DataTable = ({
 
           if (isArrowDown || isArrowUp) {
             const nextIndex = isArrowDown ? index + 1 : index - 1;
-            setHoveredRow(table, data[nextIndex]?.id);
+            // This is a legacy file. In general, we shouldn't have `as` here. Newer versions will have this fixed. --Kevin Ghadyani
+            setHoveredRow(table, data[nextIndex]?.id as TData["id"]);
           }
         } else {
           if (isArrowDown || isArrowUp) {
             const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;
-            setHoveredRow(table, data[nextIndex]?.id);
+            // This is a legacy file. In general, we shouldn't have `as` here. Newer versions will have this fixed. --Kevin Ghadyani
+            setHoveredRow(table, data[nextIndex]?.id as TData["id"]);
           }
         }
       } else {
@@ -515,23 +528,26 @@ const DataTable = ({
     [
       data,
       draggingRow,
-      odysseyDesignTokens,
+      odysseyDesignTokens.TransitionDurationMainAsNumber,
       page,
+      resetDraggingAndHoveredRow,
       resultsPerPage,
+      setHoveredRow,
       updateRowOrder,
     ],
   );
 
   const handleDragHandleOnDragEnd = useCallback(
-    (table: TableType) => {
+    (table: TableType<TData>) => {
       const cols = table.getAllColumns();
       cols[0].toggleVisibility();
 
       const { draggingRow, hoveredRow } = table.getState();
+
       if (draggingRow) {
         updateRowOrder({
+          newIndex: (hoveredRow as TData).index as number,
           rowId: draggingRow.id,
-          newIndex: (hoveredRow as MRT_RowData).index,
         });
       }
 
@@ -541,7 +557,7 @@ const DataTable = ({
   );
 
   const handleDragHandleOnDragCapture = useCallback(
-    (table: TableType) => {
+    (table: TableType<TData>) => {
       if (!draggingRow && table.getState().draggingRow?.id) {
         setDraggingRow(table.getState().draggingRow);
       }
@@ -683,7 +699,7 @@ const DataTable = ({
 
       return (
         <Box sx={{ display: "flex" }}>
-          {rowActionButtons?.(row)}
+          {rowActionButtons?.(row.original)}
           {(rowActionMenuItems || hasRowReordering) && (
             <MenuButton
               endIcon={<MoreIcon />}
@@ -694,7 +710,7 @@ const DataTable = ({
             >
               {rowActionMenuItems && (
                 <>
-                  {rowActionMenuItems(row)}
+                  {rowActionMenuItems(row.original)}
                   <hr />
                 </>
               )}
@@ -785,14 +801,10 @@ const DataTable = ({
                 .map((column) => (
                   <MenuItem
                     key={column.accessorKey}
-                    onClick={() =>
-                      handleColumnVisibility(column.accessorKey as string)
-                    }
+                    onClick={() => handleColumnVisibility(column.accessorKey)}
                   >
                     <MuiCheckbox
-                      checked={
-                        columnVisibility[column.accessorKey as string] !== false
-                      }
+                      checked={columnVisibility[column.accessorKey] !== false}
                     />
                     {column.header}
                   </MenuItem>
@@ -826,7 +838,7 @@ const DataTable = ({
                 .filter((column) => column.enableColumnFilter !== false)
                 .map((column) => {
                   return {
-                    id: column.accessorKey as string,
+                    id: column.accessorKey,
                     label: column.header,
                     variant: column.filterVariant ?? "text",
                     options: column.filterSelectOptions,

package/src/labs/DataTablePagination.tsx

@@ -11,10 +11,10 @@
  */
 
 import { memo } from "react";
-import { Box } from "../Box";
-import { Button } from "../Buttons";
-import { Support } from "../Typography";
-import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated";
+import { Box } from "../Box.js";
+import { Button } from "../Buttons/index.js";
+import { Support } from "../Typography.js";
+import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated/index.js";
 
 export const paginationTypeValues = ["paged", "loadMore"] as const;
 

package/src/labs/DataView/BulkActionsMenu.tsx

@@ -15,18 +15,18 @@ import { MRT_RowData, MRT_RowSelectionState } from "material-react-table";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
-import { Box } from "../../Box";
-import { Button, MenuButton } from "../../Buttons";
-import { ChevronDownIcon } from "../../icons.generated";
-import { UniversalProps } from "./componentTypes";
+import { Box } from "../../Box.js";
+import { Button, MenuButton } from "../../Buttons/index.js";
+import { ChevronDownIcon } from "../../icons.generated/index.js";
+import { UniversalProps } from "./componentTypes.js";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext";
+} from "../../OdysseyDesignTokensContext.js";
 
-export type BulkActionsMenuProps = {
+export type BulkActionsMenuProps<TData extends MRT_RowData> = {
   data: MRT_RowData[];
-  menuItems: UniversalProps["bulkActionMenuItems"];
+  menuItems: UniversalProps<TData>["bulkActionMenuItems"];
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
 };
@@ -40,19 +40,21 @@ const BulkActionsContainer = styled("div", {
   gap: odysseyDesignTokens.Spacing2,
 }));
 
-const BulkActionsMenu = ({
+const BulkActionsMenu = <TData extends MRT_RowData>({
   data,
   menuItems,
   rowSelection,
   setRowSelection,
-}: BulkActionsMenuProps) => {
+}: BulkActionsMenuProps<TData>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
   const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;
 
   const handleSelectAll = useCallback(() => {
-    const rows = Object.fromEntries(data.map((row) => [row.id, true]));
+    const rows = Object.fromEntries(
+      data.map((row) => [row.id as string, true]),
+    );
     setRowSelection(rows);
   }, [data, setRowSelection]);
 

package/src/labs/DataView/CardLayoutContent.tsx

@@ -19,30 +19,34 @@ import {
   MRT_TableInstance,
 } from "material-react-table";
 
-import { Box } from "../../Box";
+import { Box } from "../../Box.js";
 import { Checkbox as MuiCheckbox } from "@mui/material";
-import { CircularProgress } from "../../CircularProgress";
+import { CircularProgress } from "../../CircularProgress.js";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext";
-import { RowActions } from "./RowActions";
-import { DataCard } from "./DataCard";
-import { CardLayout, CardLayoutProps, UniversalProps } from "./componentTypes";
+} from "../../OdysseyDesignTokensContext.js";
+import { RowActions } from "./RowActions.js";
+import { DataCard } from "./DataCard.js";
+import {
+  CardLayout,
+  CardLayoutProps,
+  UniversalProps,
+} from "./componentTypes.js";
 
-export type CardLayoutContentProps = {
+export type CardLayoutContentProps<TData extends MRT_RowData> = {
   currentLayout: CardLayout;
-  data: MRT_RowData[];
-  draggingRow?: MRT_Row<MRT_RowData> | null;
+  data: TData[];
+  draggingRow?: MRT_Row<TData> | null;
   emptyState: ReactNode;
-  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 };
   rowReorderingUtilities: {
     dragHandleStyles: CSSObject;
@@ -64,15 +68,13 @@ export type CardLayoutContentProps = {
       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,
@@ -83,8 +85,13 @@ export type CardLayoutContentProps = {
   };
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
-  cardLayoutOptions: CardLayoutProps;
-  totalRows: UniversalProps["totalRows"];
+  cardLayoutOptions: CardLayoutProps<TData>;
+  totalRows: UniversalProps<TData>["totalRows"];
+};
+type CardLayoutContentComponent = (<TData extends MRT_RowData>(
+  props: CardLayoutContentProps<TData>,
+) => JSX.Element) & {
+  displayName?: string;
 };
 
 const StackContainer = styled("div", {
@@ -134,7 +141,7 @@ const CheckboxContainer = styled("div", {
   marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,
 }));
 
-const CardLayoutContent = ({
+const CardLayoutContent = <TData extends MRT_RowData>({
   currentLayout,
   data,
   emptyState,
@@ -151,7 +158,7 @@ const CardLayoutContent = ({
   setRowSelection,
   cardLayoutOptions,
   totalRows,
-}: CardLayoutContentProps) => {
+}: CardLayoutContentProps<TData>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   const handleRowSelectionChange = useCallback(
@@ -170,11 +177,7 @@ const CardLayoutContent = ({
   const { updateRowOrder } = rowReorderingUtilities;
 
   return (
-    <StackContainer
-      odysseyDesignTokens={odysseyDesignTokens}
-      currentLayout={currentLayout}
-      maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}
-    >
+    <Box>
       {isLoading ? (
         <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>
           <CircularProgress />
@@ -184,8 +187,13 @@ const CardLayoutContent = ({
           {!data || data.length === 0 || isEmpty || isNoResults ? (
             <Box>{emptyState}</Box>
           ) : (
-            <>
-              {data.map((row: MRT_RowData, index: number) => {
+            <StackContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              currentLayout={currentLayout}
+              maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}
+              role="list"
+            >
+              {data.map((row, index) => {
                 const {
                   overline,
                   title,
@@ -193,6 +201,7 @@ const CardLayoutContent = ({
                   image,
                   children,
                   variant,
+                  button,
                 } = cardLayoutOptions.itemProps(row);
                 const currentIndex =
                   index + (pagination.pageIndex - 1) * pagination.pageSize;
@@ -206,26 +215,30 @@ const CardLayoutContent = ({
                           odysseyDesignTokens={odysseyDesignTokens}
                         >
                           <MuiCheckbox
-                            checked={rowSelection[row.id] ?? false}
+                            checked={rowSelection[row.id as string] ?? false}
                             onChange={() => handleRowSelectionChange(row)}
                           />
                         </CheckboxContainer>
                       )
                     }
+                    button={button}
                     children={children}
                     description={description}
                     renderDetailPanel={cardLayoutOptions.renderDetailPanel}
                     row={row}
                     image={image}
-                    key={row.id}
+                    key={row.id as string}
                     menuButtonChildren={
                       (cardLayoutOptions.rowActionMenuItems ||
                         hasRowReordering) && (
                         <RowActions
-                          row={row}
+                          row={row as unknown as MRT_Row<MRT_RowData>} // TODO: FIX THIS! The types are wrong. `row` is incorrectly set in `RowActions` to not be TData.
                           rowIndex={currentIndex}
                           rowActionMenuItems={
-                            cardLayoutOptions.rowActionMenuItems
+                            // TODO: FIX THIS! The types are wrong. `row` is incorrectly set in `RowActions` to not be TData.
+                            cardLayoutOptions.rowActionMenuItems as unknown as (
+                              row: MRT_Row<MRT_RowData>,
+                            ) => any // eslint-disable-line @typescript-eslint/no-explicit-any
                           }
                           isRowReorderingDisabled={isRowReorderingDisabled}
                           totalRows={totalRows}
@@ -243,15 +256,17 @@ const CardLayoutContent = ({
                   />
                 );
               })}
-            </>
+            </StackContainer>
           )}
         </>
       )}
-    </StackContainer>
+    </Box>
   );
 };
 
-const MemoizedCardLayoutContent = memo(CardLayoutContent);
+const MemoizedCardLayoutContent = memo(
+  CardLayoutContent,
+) as CardLayoutContentComponent;
 MemoizedCardLayoutContent.displayName = "CardLayoutContent";
 
 export { MemoizedCardLayoutContent as CardLayoutContent };

package/src/labs/DataView/DataCard.tsx

@@ -28,24 +28,24 @@ import {
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
-import { Box } from "../../Box";
+import { Box } from "../../Box.js";
 import {
   Button,
   ButtonContext,
   MenuButton,
   MenuButtonProps,
-} from "../../Buttons";
+} from "../../Buttons/index.js";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext";
-import { Heading5, Paragraph, Support } from "../../Typography";
+} from "../../OdysseyDesignTokensContext.js";
+import { Heading5, Paragraph, Support } from "../../Typography.js";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
   MoreIcon,
-} from "../../icons.generated";
-import { CardLayoutProps } from "./componentTypes";
+} from "../../icons.generated/index.js";
+import { CardLayoutProps } from "./componentTypes.js";
 import { MRT_RowData } from "material-react-table";
 
 export const CARD_IMAGE_SIZE = "64px";
@@ -53,13 +53,13 @@ export const CARD_IMAGE_SIZE_COMPACT = "48px";
 
 export const cardVariantValues = ["tile", "stack", "compact"] as const;
 
-export type DataCardProps = {
+export type DataCardProps<TData extends MRT_RowData> = {
   children?: ReactNode;
   description?: string;
   image?: ReactElement;
   overline?: string;
-  renderDetailPanel?: CardLayoutProps["renderDetailPanel"];
-  row: MRT_RowData;
+  renderDetailPanel?: CardLayoutProps<TData>["renderDetailPanel"];
+  row: TData;
   title?: string;
   variant?: (typeof cardVariantValues)[number];
 } & (
@@ -77,6 +77,12 @@ export type DataCardProps = {
     }
 );
 
+type DataCardComponent = (<TData extends MRT_RowData>(
+  props: DataCardProps<TData>,
+) => JSX.Element) & {
+  displayName?: string;
+};
+
 const AccessoryContainer = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "variant",
@@ -165,12 +171,13 @@ const CardChildrenContainer = styled("div", {
   },
 }));
 
-const AccessoryPlaceholder = styled(MuiIconButton)(() => ({
+const AccessoryPlaceholder = styled(MuiIconButton)({
   visibility: "hidden",
-}));
+});
+
 const buttonProviderValue = { isFullWidth: true };
 
-const DataCard = ({
+const DataCard: DataCardComponent = <TData extends MRT_RowData>({
   Accessory: AccessoryProp,
   button,
   children,
@@ -183,7 +190,7 @@ const DataCard = ({
   row,
   title,
   variant = "tile",
-}: DataCardProps) => {
+}: DataCardProps<TData>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
@@ -315,6 +322,7 @@ const DataCard = ({
   return (
     <MuiCard
       className={`${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""} ods-card-${variant}`}
+      role="listitem"
     >
       {onClick ? (
         <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
@@ -343,7 +351,7 @@ const DataCard = ({
   );
 };
 
-const MemoizedDataCard = memo(DataCard);
+const MemoizedDataCard = memo(DataCard) as DataCardComponent;
 MemoizedDataCard.displayName = "DataCard";
 
 export { MemoizedDataCard as DataCard };