@okta/odyssey-react-mui 1.27.1 → 1.29.0

package/src/labs/DataView/BulkActionsMenu.tsx

@@ -16,18 +16,17 @@ import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
 import { Box } from "../../Box";
-import { Button } from "../../Button";
+import { Button, MenuButton } from "../../Buttons";
 import { ChevronDownIcon } from "../../icons.generated";
-import { MenuButton } from "../../MenuButton";
 import { UniversalProps } from "./componentTypes";
 import {
   DesignTokens,
   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>>;
 };
@@ -41,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

@@ -29,14 +29,17 @@ import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
 import { Box } from "../../Box";
-import { Button } from "../../Button";
-import { ButtonContext } from "../../ButtonContext";
+import {
+  Button,
+  ButtonContext,
+  MenuButton,
+  MenuButtonProps,
+} from "../../Buttons";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "../../Typography";
-import { MenuButton, MenuButtonProps } from "../../MenuButton";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -50,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];
 } & (
@@ -74,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",
@@ -114,7 +123,10 @@ const MenuButtonContainer = styled("div", {
 }>(({ odysseyDesignTokens, variant }) => ({
   position: "absolute",
   right: odysseyDesignTokens.Spacing3,
-  top: odysseyDesignTokens.Spacing3,
+  top:
+    variant === "compact"
+      ? odysseyDesignTokens.Spacing4
+      : odysseyDesignTokens.Spacing3,
   height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto",
   display: "flex",
   alignItems: "center",
@@ -128,11 +140,14 @@ const CardInnerContainer = styled("div", {
 }));
 
 const CardImageAndContentContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "variant",
-})<{ variant: (typeof cardVariantValues)[number] }>(({ variant }) => ({
-  display: "flex",
-  flexDirection: variant === "tile" ? "column" : "row",
-}));
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "centerContent",
+})<{ variant: (typeof cardVariantValues)[number]; centerContent: boolean }>(
+  ({ variant, centerContent }) => ({
+    display: "flex",
+    flexDirection: variant === "tile" ? "column" : "row",
+    alignItems: centerContent ? "center" : "flex-start",
+  }),
+);
 
 const CardContent = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
@@ -140,9 +155,12 @@ const CardContent = styled("div", {
   odysseyDesignTokens: DesignTokens;
   variant: (typeof cardVariantValues)[number];
 }>(({ odysseyDesignTokens, variant }) => ({
-  "& > .MuiTypography-h5": {
+  "& > .MuiTypography-h5:not(:last-child)": {
     marginBlockEnd: `${variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`,
   },
+  "& > *:last-child": {
+    marginBlockEnd: 0,
+  },
 }));
 
 const CardChildrenContainer = styled("div", {
@@ -158,7 +176,7 @@ const AccessoryPlaceholder = styled(MuiIconButton)(() => ({
 }));
 const buttonProviderValue = { isFullWidth: true };
 
-const DataCard = ({
+const DataCard: DataCardComponent = <TData extends MRT_RowData>({
   Accessory: AccessoryProp,
   button,
   children,
@@ -171,7 +189,7 @@ const DataCard = ({
   row,
   title,
   variant = "tile",
-}: DataCardProps) => {
+}: DataCardProps<TData>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
@@ -221,11 +239,25 @@ const DataCard = ({
     variant,
   ]);
 
-  const cardContent = useMemo(
-    () => (
+  const cardContent = useMemo(() => {
+    const countDefinedProps = (
+      props: Array<string | ReactNode | undefined>,
+    ) => {
+      return props.filter((prop) => prop !== undefined).length;
+    };
+
+    const shouldCenterContent =
+      variant === "compact" &&
+      (!renderDetailPanel || !isDetailPanelOpen) &&
+      countDefinedProps([title, description, overline, button, children]) <= 2;
+
+    return (
       <CardInnerContainer odysseyDesignTokens={odysseyDesignTokens}>
         {(AccessoryProp || renderDetailPanel) && <Box>{Accessory}</Box>}
-        <CardImageAndContentContainer variant={variant}>
+        <CardImageAndContentContainer
+          variant={variant}
+          centerContent={shouldCenterContent}
+        >
           {image && (
             <ImageContainer
               odysseyDesignTokens={odysseyDesignTokens}
@@ -268,28 +300,28 @@ const DataCard = ({
           </CardContent>
         </CardImageAndContentContainer>
       </CardInnerContainer>
-    ),
-    [
-      odysseyDesignTokens,
-      AccessoryProp,
-      renderDetailPanel,
-      Accessory,
-      variant,
-      image,
-      menuButtonChildren,
-      overline,
-      title,
-      description,
-      button,
-      children,
-      isDetailPanelOpen,
-      row,
-    ],
-  );
+    );
+  }, [
+    odysseyDesignTokens,
+    AccessoryProp,
+    renderDetailPanel,
+    Accessory,
+    variant,
+    image,
+    menuButtonChildren,
+    overline,
+    title,
+    description,
+    button,
+    children,
+    isDetailPanelOpen,
+    row,
+  ]);
 
   return (
     <MuiCard
       className={`${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""} ods-card-${variant}`}
+      role="listitem"
     >
       {onClick ? (
         <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
@@ -318,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 };