Data view, stack, and table

package.json

@@ -85,4 +85,4 @@
   },
   "version": "0.6.0",
   "packageManager": "[email protected]"
-}
+}

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";
 
@@ -63,7 +64,7 @@ const ImageContainer = styled("div", {
 }>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({
   display: "flex",
   alignItems: "flex-start",
-  maxHeight: `${CARD_IMAGE_HEIGHT}`,
+  maxHeight: CARD_IMAGE_HEIGHT,
   marginBlockEnd: odysseyDesignTokens.Spacing5,
   paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,
 }));
@@ -76,6 +77,10 @@ const MenuButtonContainer = styled("div", {
   top: odysseyDesignTokens.Spacing3,
 }));
 
+const CardContentContainer = styled("div")(() => ({
+  display: "flex",
+}));
+
 const buttonProviderValue = { isFullWidth: true };
 
 const Card = ({
@@ -91,30 +96,32 @@ 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>
-        )}
-      </>
+      <CardContentContainer>
+        <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>
+      </CardContentContainer>
     ),
     [
       button,

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

@@ -34,6 +34,7 @@
   MRT_ColumnDef,
   MRT_TableInstance,
 } from "material-react-table";
+import { useTranslation } from "react-i18next";
 import {
   ArrowDownIcon,
   ArrowUnsortedIcon,
@@ -61,7 +62,6 @@
 import styled from "@emotion/styled";
 import { EmptyState } from "../EmptyState";
 import { Callout } from "../Callout";
-import { t } from "i18next";
 
 export type DataTableColumn<T extends DataTableRowData> = MRT_ColumnDef<T> & {
   /**
@@ -387,6 +387,8 @@
   searchDelayTime,
   totalRows,
 }: DataTableProps) => {
+  const { t } = useTranslation();
+
   const [data, setData] = useState<DataTableRowData[]>([]);
   const [pagination, setPagination] = useState({
     pageIndex: currentPage,
@@ -598,7 +600,7 @@
         {emptyStateInnerContent}
       </Box>
     );
   }, [
     tableInnerContainerWidth,
     emptyPlaceholder,
     noResultsPlaceholder,
@@ -774,7 +776,7 @@
         setIsLoading(false);
       }
     })();
   }, [pagination, columnSorting, search, filters, getData, errorMessageProp]);
 
   useEffect(() => {
     if (!initialFilters && filters) {

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

@@ -23,38 +23,46 @@ import { CacheProvider } from "@emotion/react";
 
 export type OdysseyCacheProviderProps = {
   children: ReactNode;
-  nonce?: string;
   /**
    * Emotion caches styles into the style element.
    * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.
    */
   emotionRoot?: HTMLStyleElement;
+  hasShadowDom?: boolean;
+  nonce?: string;
   /**
    * Emotion renders into this HTML element.
    * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.
    */
+  /**
+   * @deprecated Will be removed in a future Odyssey version. Use `hasShadowDomElement` instead.
+   */
   shadowDomElement?: HTMLDivElement | HTMLElement;
   stylisPlugins?: StylisPlugin[];
 };
 
 const OdysseyCacheProvider = ({
   children,
   emotionRoot,
+  hasShadowDom: hasShadowDomProp,
   nonce,
+  shadowDomElement,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
 
+  const hasShadowDom = hasShadowDomProp || shadowDomElement;
+
   const emotionCache = useMemo(() => {
     return createCache({
       ...(emotionRoot && { container: emotionRoot }),
       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
+      speedy: hasShadowDom ? false : true, // <-- 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]);
+  }, [emotionRoot, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 };

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

@@ -49,7 +49,7 @@ const OdysseyProvider = <SupportedLanguages extends string>({
   <OdysseyCacheProvider
     nonce={nonce}
     emotionRoot={emotionRoot}
-    shadowDomElement={shadowDomElement}
+    hasShadowDom={Boolean(shadowDomElement)}
     stylisPlugins={stylisPlugins}
   >
     <OdysseyThemeProvider

packages/odyssey-react-mui/src/Pagination/usePagination.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 
 type UsePaginationType = {
   pageIndex: number;
@@ -23,6 +23,8 @@ export const usePagination = ({
   pageSize,
   totalRows,
 }: UsePaginationType) => {
+  const { t } = useTranslation();
+
   const firstRow = pageSize * (pageIndex - 1) + 1;
   const lastRow = firstRow + (pageSize - 1);
   if (totalRows && lastRow > totalRows) {

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

@@ -0,0 +1,97 @@
+/*!
+ * 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 { MRT_RowData, MRT_RowSelectionState } from "material-react-table";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+
+import { Box } from "../../Box";
+import { Button } from "../../Button";
+import { ChevronDownIcon } from "../../icons.generated";
+import { MenuButton } from "../../MenuButton";
+import { UniversalProps } from "./componentTypes";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+
+export type BulkActionsMenuProps = {
+  data: MRT_RowData[];
+  menuItems: UniversalProps["bulkActionMenuItems"];
+  rowSelection: MRT_RowSelectionState;
+  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
+};
+
+const BulkActionsContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+}));
+
+const BulkActionsMenu = ({
+  data,
+  menuItems,
+  rowSelection,
+  setRowSelection,
+}: BulkActionsMenuProps) => {
+  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]));
+    setRowSelection(rows);
+  }, [data, setRowSelection]);
+
+  const handleSelectNone = useCallback(() => {
+    setRowSelection({});
+  }, [setRowSelection]);
+
+  return (
+    <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}>
+      {selectedRowCount > 0 && (
+        <MenuButton
+          ariaLabel="More actions"
+          buttonLabel={t("table.actions.selectsome", { selectedRowCount })}
+          buttonVariant="primary"
+          endIcon={<ChevronDownIcon />}
+        >
+          {menuItems?.(rowSelection)}
+        </MenuButton>
+      )}
+      <Box>
+        <Button
+          isDisabled={selectedRowCount === data.length} // Disabled if all are selected
+          label={t("table.actions.selectall")}
+          onClick={handleSelectAll}
+          variant="secondary"
+        />
+        <Button
+          isDisabled={selectedRowCount === 0} // Disabled if none are selected
+          label={t("table.actions.selectnone")}
+          onClick={handleSelectNone}
+          variant="secondary"
+        />
+      </Box>
+    </BulkActionsContainer>
+  );
+};
+
+const MemoizedBulkActionsMenu = memo(BulkActionsMenu);
+MemoizedBulkActionsMenu.displayName = "BulkActionsMenu";
+
+export { MemoizedBulkActionsMenu as BulkActionsMenu };