Data view, stack, and table

packages/odyssey-react-mui/src/Card.tsx

@@ -33,6 +33,7 @@ import {
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "./Typography";
+import { Box } from "./Box";
 
 export const CARD_IMAGE_HEIGHT = "64px";
 
@@ -91,30 +92,36 @@ const Card = ({
 
   const cardContent = useMemo(
     () => (
-      <>
-        {image && (
-          <ImageContainer
-            odysseyDesignTokens={odysseyDesignTokens}
-            hasMenuButtonChildren={Boolean(menuButtonChildren)}
-          >
-            {image}
-          </ImageContainer>
-        )}
-
-        {overline && <Support component="div">{overline}</Support>}
-        {title && <Heading5 component="div">{title}</Heading5>}
-        {description && (
-          <Paragraph color="textSecondary">{description}</Paragraph>
-        )}
-
-        {button && (
-          <MuiCardActions>
-            <ButtonContext.Provider value={buttonProviderValue}>
-              {button}
-            </ButtonContext.Provider>
-          </MuiCardActions>
-        )}
-      </>
+      <Box
+        sx={{
+          display: "flex",
+        }}
+      >
+        <Box>
+          {image && (
+            <ImageContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              hasMenuButtonChildren={Boolean(menuButtonChildren)}
+            >
+              {image}
+            </ImageContainer>
+          )}
+
+          {overline && <Support component="div">{overline}</Support>}
+          {title && <Heading5 component="div">{title}</Heading5>}
+          {description && (
+            <Paragraph color="textSecondary">{description}</Paragraph>
+          )}
+
+          {button && (
+            <MuiCardActions>
+              <ButtonContext.Provider value={buttonProviderValue}>
+                {button}
+              </ButtonContext.Provider>
+            </MuiCardActions>
+          )}
+        </Box>
+      </Box>
     ),
     [
       button,

packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx

@@ -27,7 +27,7 @@ import { DataTableProps } from "./DataTable";
 import { Trans, useTranslation } from "react-i18next";
 
 export type DataTableRowActionsProps = {
-  row: MRT_Row<MRT_RowData>;
+  row: MRT_Row<MRT_RowData> | MRT_RowData;
   rowIndex: number;
   rowActionButtons?: (
     row: MRT_RowData,

packages/odyssey-react-mui/src/OdysseyCacheProvider.tsx

@@ -51,7 +51,9 @@ const OdysseyCacheProvider = ({
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
       prepend: true,
-      speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
+      // TODO: Change this back!!
+      speedy: true,
+      // speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122
       ...(stylisPlugins && { stylisPlugins }),
     });
   }, [emotionRoot, nonce, stylisPlugins, uniqueAlphabeticalId]);

packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.tsx

@@ -0,0 +1,85 @@
+/*!
+ * 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 { memo, useCallback, Dispatch, SetStateAction } from "react";
+import { UniversalProps } from "./componentTypes";
+import { MenuButton } from "../../MenuButton";
+import { Button } from "../../Button";
+import { Box } from "../../Box";
+import { ChevronDownIcon } from "../../icons.generated";
+import { MRT_RowData, MRT_RowSelectionState } from "material-react-table";
+
+export type BulkActionMenuProps = {
+  data: MRT_RowData[];
+  menuItems: UniversalProps["bulkActionMenuItems"];
+  rowSelection: MRT_RowSelectionState;
+  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
+};
+
+const BulkActionMenu = ({
+  data,
+  menuItems,
+  rowSelection,
+  setRowSelection,
+}: BulkActionMenuProps) => {
+  const selectedRowCount = Object.values(rowSelection).filter(
+    (value) => value === true,
+  ).length;
+
+  const handleSelectAll = useCallback(() => {
+    const rows = Object.fromEntries(data.map((row) => [row.id, true]));
+    setRowSelection(rows);
+  }, [data, setRowSelection]);
+
+  const handleSelectNone = useCallback(() => {
+    setRowSelection({});
+  }, [setRowSelection]);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        gap: 2,
+      }}
+    >
+      {selectedRowCount > 0 && (
+        <MenuButton
+          buttonVariant="primary"
+          endIcon={<ChevronDownIcon />}
+          buttonLabel={`${selectedRowCount} selected`}
+          ariaLabel="More actions"
+        >
+          {menuItems?.(rowSelection)}
+        </MenuButton>
+      )}
+      <Box>
+        <Button
+          variant="secondary"
+          label="Select all"
+          isDisabled={selectedRowCount === 20}
+          onClick={handleSelectAll}
+        />
+        <Button
+          variant="secondary"
+          label="Select none"
+          isDisabled={selectedRowCount === 0}
+          onClick={handleSelectNone}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+const MemoizedBulkActionMenu = memo(BulkActionMenu);
+MemoizedBulkActionMenu.displayName = "BulkActionMenu";
+
+export { MemoizedBulkActionMenu as BulkActionMenu };

packages/odyssey-react-mui/src/labs/DataComponents/DataStack.tsx

@@ -0,0 +1,93 @@
+/*!
+ * 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 { memo } from "react";
+import { DataView } from "./DataView";
+import {
+  AvailableStackLayouts,
+  StackProps,
+  UniversalProps,
+} from "./componentTypes";
+import { availableStackLayouts } from "./constants";
+
+export type DataStackProps = UniversalProps &
+  StackProps & {
+    initialLayout?: (typeof availableStackLayouts)[number];
+    availableLayouts?: AvailableStackLayouts;
+  };
+
+const DataStack = ({
+  availableLayouts,
+  getData,
+  hasRowSelection,
+  onChangeRowSelection,
+  bulkActionMenuItems,
+  hasPagination,
+  currentPage,
+  paginationType,
+  resultsPerPage,
+  totalRows,
+  hasFilters,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasRowReordering,
+  isRowReorderingDisabled,
+  filters,
+  searchDelayTime,
+  errorMessage,
+  emptyPlaceholder,
+  noResultsPlaceholder,
+  isLoading,
+  isEmpty,
+  isNoResults,
+  cardProps,
+  maxGridColumns,
+  rowActionMenuItems,
+}: DataStackProps) => {
+  return (
+    <DataView
+      availableLayouts={availableLayouts}
+      getData={getData}
+      hasRowSelection={hasRowSelection}
+      onChangeRowSelection={onChangeRowSelection}
+      bulkActionMenuItems={bulkActionMenuItems}
+      hasPagination={hasPagination}
+      currentPage={currentPage}
+      paginationType={paginationType}
+      resultsPerPage={resultsPerPage}
+      totalRows={totalRows}
+      hasFilters={hasFilters}
+      hasSearch={hasSearch}
+      hasSearchSubmitButton={hasSearchSubmitButton}
+      hasRowReordering={hasRowReordering}
+      isRowReorderingDisabled={isRowReorderingDisabled}
+      filters={filters}
+      searchDelayTime={searchDelayTime}
+      errorMessage={errorMessage}
+      emptyPlaceholder={emptyPlaceholder}
+      noResultsPlaceholder={noResultsPlaceholder}
+      isLoading={isLoading}
+      isEmpty={isEmpty}
+      isNoResults={isNoResults}
+      stackOptions={{
+        cardProps,
+        maxGridColumns,
+        rowActionMenuItems,
+      }}
+    />
+  );
+};
+
+const MemoizedDataStack = memo(DataStack);
+MemoizedDataStack.displayName = "DataStack";
+
+export { MemoizedDataStack as DataStack };

packages/odyssey-react-mui/src/labs/DataComponents/DataTable.tsx

@@ -0,0 +1,95 @@
+/*!
+ * 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 { memo } from "react";
+import { DataView } from "./DataView";
+import { TableProps, UniversalProps } from "./componentTypes";
+
+export type DataTableProps = UniversalProps & TableProps;
+
+const DataTable = ({
+  getData,
+  hasRowSelection,
+  onChangeRowSelection,
+  bulkActionMenuItems,
+  hasPagination,
+  currentPage,
+  paginationType,
+  resultsPerPage,
+  totalRows,
+  hasFilters,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasRowReordering,
+  isRowReorderingDisabled,
+  filters,
+  searchDelayTime,
+  errorMessage,
+  emptyPlaceholder,
+  noResultsPlaceholder,
+  isLoading,
+  isEmpty,
+  isNoResults,
+  columns,
+  initialDensity,
+  hasChangeableDensity,
+  hasColumnResizing,
+  hasColumnVisibility,
+  renderDetailPanel,
+  rowActionButtons,
+  rowActionMenuItems,
+  hasSorting,
+}: DataTableProps) => {
+  return (
+    <DataView
+      availableLayouts={["table"]}
+      getData={getData}
+      hasRowSelection={hasRowSelection}
+      onChangeRowSelection={onChangeRowSelection}
+      bulkActionMenuItems={bulkActionMenuItems}
+      hasPagination={hasPagination}
+      currentPage={currentPage}
+      paginationType={paginationType}
+      resultsPerPage={resultsPerPage}
+      totalRows={totalRows}
+      hasFilters={hasFilters}
+      hasSearch={hasSearch}
+      hasSearchSubmitButton={hasSearchSubmitButton}
+      hasRowReordering={hasRowReordering}
+      isRowReorderingDisabled={isRowReorderingDisabled}
+      filters={filters}
+      searchDelayTime={searchDelayTime}
+      errorMessage={errorMessage}
+      emptyPlaceholder={emptyPlaceholder}
+      noResultsPlaceholder={noResultsPlaceholder}
+      isLoading={isLoading}
+      isEmpty={isEmpty}
+      isNoResults={isNoResults}
+      tableOptions={{
+        columns,
+        initialDensity,
+        hasChangeableDensity,
+        hasColumnResizing,
+        hasColumnVisibility,
+        renderDetailPanel,
+        rowActionButtons,
+        rowActionMenuItems,
+        hasSorting,
+      }}
+    />
+  );
+};
+
+const MemoizedDataTable = memo(DataTable);
+MemoizedDataTable.displayName = "DataTable";
+
+export { MemoizedDataTable as DataTable };