okta · oktapp-aperture-okta · Jul 2, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
@@ -85,4 +85,4 @@
   },
   "version": "0.6.0",
   "packageManager": "[email protected]"
-}
+}
@@ -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,

@@ -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,

@@ -23,12 +23,12 @@ 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;
+  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>`.
@@ -41,6 +41,7 @@ const OdysseyCacheProvider = ({
   children,
   emotionRoot,
   nonce,
+  shadowDomElement,
   stylisPlugins,
 }: OdysseyCacheProviderProps) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
@@ -51,10 +52,16 @@ 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
+      speedy: shadowDomElement ? 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,
+    nonce,
+    shadowDomElement,
+    stylisPlugins,
+    uniqueAlphabeticalId,
+  ]);
 
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 };

@@ -0,0 +1,99 @@
+/*!
+ * 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 BulkActionMenu = ({
+  data,
+  menuItems,
+  rowSelection,
+  setRowSelection,
+}: BulkActionsMenuProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  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 (
+    <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 === 20}
+          label={t("table.actions.selectall")}
+          onClick={handleSelectAll}
+          variant="secondary"
+        />
+        <Button
+          isDisabled={selectedRowCount === 0}
+          label={t("table.actions.selectnone")}
+          onClick={handleSelectNone}
+          variant="secondary"
+        />
+      </Box>
+    </BulkActionsContainer>
+  );
+};
+
+const MemoizedBulkActionMenu = memo(BulkActionMenu);
+MemoizedBulkActionMenu.displayName = "BulkActionMenu";
+
+export { MemoizedBulkActionMenu as BulkActionMenu };
@@ -0,0 +1,94 @@
+/*!
+ * 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 { availableStackLayouts } from "./constants";
+import {
+  AvailableStackLayouts,
+  StackProps,
+  UniversalProps,
+} from "./componentTypes";
+import { DataView } from "./DataView";
+
+export type DataStackProps = UniversalProps &
+  StackProps & {
+    initialLayout?: (typeof availableStackLayouts)[number];
+    availableLayouts?: AvailableStackLayouts;
+  };
+
+const DataStack = ({
+  availableLayouts,
+  bulkActionMenuItems,
+  cardProps,
+  currentPage,
+  emptyPlaceholder,
+  errorMessage,
+  filters,
+  getData,
+  hasFilters,
+  hasPagination,
+  hasRowReordering,
+  hasRowSelection,
+  hasSearch,
+  hasSearchSubmitButton,
+  isEmpty,
+  isLoading,
+  isNoResults,
+  isRowReorderingDisabled,
+  maxGridColumns,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  paginationType,
+  resultsPerPage,
+  rowActionMenuItems,
+  searchDelayTime,
+  totalRows,
+}: DataStackProps) => {
+  return (
+    <DataView
+      availableLayouts={availableLayouts}
+      bulkActionMenuItems={bulkActionMenuItems}
+      currentPage={currentPage}
+      emptyPlaceholder={emptyPlaceholder}
+      errorMessage={errorMessage}
+      filters={filters}
+      getData={getData}
+      hasFilters={hasFilters}
+      hasPagination={hasPagination}
+      hasRowReordering={hasRowReordering}
+      hasSearch={hasSearch}
+      hasSearchSubmitButton={hasSearchSubmitButton}
+      hasRowSelection={hasRowSelection}
+      isEmpty={isEmpty}
+      isLoading={isLoading}
+      isNoResults={isNoResults}
+      isRowReorderingDisabled={isRowReorderingDisabled}
+      noResultsPlaceholder={noResultsPlaceholder}
+      onChangeRowSelection={onChangeRowSelection}
+      paginationType={paginationType}
+      resultsPerPage={resultsPerPage}
+      searchDelayTime={searchDelayTime}
+      stackOptions={{
+        cardProps,
+        maxGridColumns,
+        rowActionMenuItems,
+      }}
+      totalRows={totalRows}
+    />
+  );
+};
+
+const MemoizedDataStack = memo(DataStack);
+MemoizedDataStack.displayName = "DataStack";
+
+export { MemoizedDataStack as DataStack };