@okta/odyssey-react-mui 1.28.1 → 1.29.0

package/src/labs/DataFilters.tsx

@@ -433,9 +433,9 @@ const DataFilters = ({
       <>
         <Box>
           <Button
-            aria-controls={isFiltersMenuOpen ? "filters-menu" : undefined}
-            aria-expanded={isFiltersMenuOpen ? "true" : undefined}
-            aria-haspopup="true"
+            ariaControls={isFiltersMenuOpen ? "filters-menu" : undefined}
+            ariaExpanded={isFiltersMenuOpen ? "true" : undefined}
+            ariaHasPopup="true"
             ariaLabel={t("filters.filters.arialabel")}
             isDisabled={isDisabled}
             endIcon={<FilterIcon />}
@@ -469,6 +469,7 @@ const DataFilters = ({
             return (
               <MuiMenuItem
                 key={filter.id}
+                aria-controls={isFilterPopoverOpen ? "filter-form" : undefined}
                 onClick={(event) => {
                   setIsFilterPopoverOpen(true);
                   setFilterPopoverAnchorElement(event.currentTarget);
@@ -563,6 +564,7 @@ const DataFilters = ({
               {filterMenu}
               {/* Filter popover */}
               <MuiPopover
+                id="filter-form"
                 anchorEl={filterPopoverAnchorElement}
                 // Positions the popover flush with the edge of the parent menu
                 // and at the right shadow elevation. These magic values are simply
@@ -630,6 +632,7 @@ const DataFilters = ({
                                 variant="primary"
                                 endIcon={<CheckIcon />}
                                 type="submit"
+                                ariaLabel={t("filters.submit.label")}
                               />
                             </AutocompleteOuterContainer>
                           )}
@@ -697,6 +700,7 @@ const DataFilters = ({
                               variant="primary"
                               endIcon={<CheckIcon />}
                               type="submit"
+                              ariaLabel={t("filters.submit.label")}
                             />
                           </Box>
                         )}

package/src/labs/DataTable.tsx

@@ -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,7 @@ export type DataTableProps = {
     search?: string;
     filters?: DataFilter[];
     sort?: MRT_SortingState;
-  }) => MRT_TableOptions<MRT_RowData>["data"];
+  }) => 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 +248,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 +284,7 @@ const reorderDataRowsLocally = ({
   return updatedData;
 };
 
-const DataTable = ({
+const DataTable = <TData extends MRT_RowData>({
   columns,
   data: dataProp,
   getRowId,
@@ -309,13 +309,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);
@@ -428,24 +427,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>;
   };
 
@@ -515,15 +521,17 @@ 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();
 
@@ -531,7 +539,7 @@ const DataTable = ({
       if (draggingRow) {
         updateRowOrder({
           rowId: draggingRow.id,
-          newIndex: (hoveredRow as MRT_RowData).index,
+          newIndex: (hoveredRow as TData).index,
         });
       }
 
@@ -541,7 +549,7 @@ const DataTable = ({
   );
 
   const handleDragHandleOnDragCapture = useCallback(
-    (table: TableType) => {
+    (table: TableType<TData>) => {
       if (!draggingRow && table.getState().draggingRow?.id) {
         setDraggingRow(table.getState().draggingRow);
       }
@@ -683,7 +691,7 @@ const DataTable = ({
 
       return (
         <Box sx={{ display: "flex" }}>
-          {rowActionButtons?.(row)}
+          {rowActionButtons?.(row.original)}
           {(rowActionMenuItems || hasRowReordering) && (
             <MenuButton
               endIcon={<MoreIcon />}
@@ -694,7 +702,7 @@ const DataTable = ({
             >
               {rowActionMenuItems && (
                 <>
-                  {rowActionMenuItems(row)}
+                  {rowActionMenuItems(row.original)}
                   <hr />
                 </>
               )}

package/src/labs/DataView/BulkActionsMenu.tsx

@@ -24,9 +24,9 @@ import {
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 
-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,12 +40,12 @@ 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();
 

package/src/labs/DataView/CardLayoutContent.tsx

@@ -30,19 +30,19 @@ import { RowActions } from "./RowActions";
 import { DataCard } from "./DataCard";
 import { CardLayout, CardLayoutProps, UniversalProps } from "./componentTypes";
 
-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 +64,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 +81,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 +137,7 @@ const CheckboxContainer = styled("div", {
   marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,
 }));
 
-const CardLayoutContent = ({
+const CardLayoutContent = <TData extends MRT_RowData>({
   currentLayout,
   data,
   emptyState,
@@ -151,7 +154,7 @@ const CardLayoutContent = ({
   setRowSelection,
   cardLayoutOptions,
   totalRows,
-}: CardLayoutContentProps) => {
+}: CardLayoutContentProps<TData>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   const handleRowSelectionChange = useCallback(
@@ -170,11 +173,7 @@ const CardLayoutContent = ({
   const { updateRowOrder } = rowReorderingUtilities;
 
   return (
-    <StackContainer
-      odysseyDesignTokens={odysseyDesignTokens}
-      currentLayout={currentLayout}
-      maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}
-    >
+    <Box>
       {isLoading ? (
         <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>
           <CircularProgress />
@@ -184,8 +183,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: TData, index: number) => {
                 const {
                   overline,
                   title,
@@ -243,15 +247,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

@@ -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",
@@ -170,7 +176,7 @@ const AccessoryPlaceholder = styled(MuiIconButton)(() => ({
 }));
 const buttonProviderValue = { isFullWidth: true };
 
-const DataCard = ({
+const DataCard: DataCardComponent = <TData extends MRT_RowData>({
   Accessory: AccessoryProp,
   button,
   children,
@@ -183,7 +189,7 @@ const DataCard = ({
   row,
   title,
   variant = "tile",
-}: DataCardProps) => {
+}: DataCardProps<TData>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
@@ -315,6 +321,7 @@ const DataCard = ({
   return (
     <MuiCard
       className={`${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""} ods-card-${variant}`}
+      role="listitem"
     >
       {onClick ? (
         <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
@@ -343,7 +350,7 @@ const DataCard = ({
   );
 };
 
-const MemoizedDataCard = memo(DataCard);
+const MemoizedDataCard = memo(DataCard) as DataCardComponent;
 MemoizedDataCard.displayName = "DataCard";
 
 export { MemoizedDataCard as DataCard };

package/src/labs/DataView/DataTable.tsx

@@ -14,10 +14,17 @@ import { memo, useMemo } from "react";
 
 import { DataView } from "./DataView";
 import { TableLayoutProps, UniversalProps } from "./componentTypes";
+import { MRT_RowData } from "material-react-table";
 
-export type DataTableProps = UniversalProps & TableLayoutProps;
+export type DataTableProps<TData extends MRT_RowData> = UniversalProps<TData> &
+  TableLayoutProps<TData>;
+type DataTableComponent = (<TData extends MRT_RowData>(
+  props: DataTableProps<TData>,
+) => JSX.Element) & {
+  displayName?: string;
+};
 
-const DataTable = ({
+const DataTable = <TData extends MRT_RowData>({
   additionalActionButton,
   additionalActionMenuItems,
   bulkActionMenuItems,
@@ -54,7 +61,7 @@ const DataTable = ({
   rowActionMenuItems,
   searchDelayTime,
   totalRows,
-}: DataTableProps) => {
+}: DataTableProps<TData>) => {
   const tableLayoutOptions = useMemo(
     () => ({
       columns,
@@ -115,7 +122,7 @@ const DataTable = ({
   );
 };
 
-const MemoizedDataTable = memo(DataTable);
+const MemoizedDataTable = memo(DataTable) as DataTableComponent;
 MemoizedDataTable.displayName = "DataTable";
 
 export { MemoizedDataTable as DataTable };