@okta/odyssey-react-mui 1.21.2 → 1.22.0

package/src/labs/AppTile.tsx

@@ -0,0 +1,200 @@
+/*!
+ * 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 {
+  MouseEventHandler,
+  ReactElement,
+  memo,
+  useMemo,
+  ReactNode,
+  HTMLAttributes,
+} from "react";
+import {
+  Card as MuiCard,
+  CardActionArea as MuiCardActionArea,
+} from "@mui/material";
+import styled from "@emotion/styled";
+
+import { Button } from ".././Button";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from ".././OdysseyDesignTokensContext";
+import { Heading5, Paragraph, Subordinate, Support } from ".././Typography";
+import { Box } from ".././Box";
+
+export const APP_TILE_IMAGE_HEIGHT = "64px";
+
+export type AppTileProps = {
+  // Text that appears in the upper right corner of the tile
+  auxiliaryText?: string;
+  // Arbitrary content to render underneath any other tile content
+  children?: ReactNode;
+  // A string description
+  description?: string;
+  // An image or icon at the top of the tile
+  image?: ReactElement;
+  // Event handler for when the user clicks the tile
+  onClick: MouseEventHandler;
+  // An 'eyebrow' of text above the title
+  overline?: string;
+  // A string for the tile title
+  title?: string;
+} & (
+  | {
+      // Event that fires when the user clicks the action button in the upper-right corner
+      // If this isn't set, the other action props can't be set either
+      onActionClick: MouseEventHandler;
+      // The ID of the element which the button controls (for instance, a drawer or dialog), if any.
+      actionAriaControls?: HTMLAttributes<HTMLElement>["aria-controls"];
+      // Should be filled if the button controls a popup element such as a Drawer or Dialog
+      actionAriaHasPopup?: HTMLAttributes<HTMLElement>["aria-haspopup"];
+      // Should be true if the button controls a popup element that is currently expanded. Should be synced to
+      // the state of the popup element
+      actionAriaExpanded?: HTMLAttributes<HTMLElement>["aria-expanded"];
+      // The label for the button, used as the aria-label and tooltip
+      actionLabel: string;
+      // An icon for the action button
+      actionIcon: ReactElement;
+    }
+  | {
+      onActionClick?: never;
+      actionAriaControls?: never;
+      actionAriaHasPopup?: never;
+      actionAriaExpanded?: never;
+      actionLabel?: never;
+      actionIcon?: never;
+    }
+);
+
+const ImageContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "hasAction",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  hasAction: boolean;
+}>(({ odysseyDesignTokens, hasAction }) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  maxHeight: APP_TILE_IMAGE_HEIGHT,
+  marginBlockEnd: odysseyDesignTokens.Spacing5,
+  paddingRight: hasAction ? odysseyDesignTokens.Spacing5 : 0,
+}));
+
+const ActionContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  alignItems: "center",
+  display: "flex",
+  minHeight: odysseyDesignTokens.Spacing6,
+  gap: odysseyDesignTokens.Spacing1,
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing3,
+  top: odysseyDesignTokens.Spacing3,
+}));
+
+const ContentContainer = styled("div")(() => ({
+  display: "flex",
+}));
+
+const ChildrenContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  ["&:not(:first-child)"]: {
+    marginBlockStart: odysseyDesignTokens.Spacing3,
+  },
+}));
+
+const AppTile = ({
+  actionAriaControls,
+  actionAriaHasPopup,
+  actionAriaExpanded,
+  actionLabel,
+  actionIcon,
+  auxiliaryText,
+  children,
+  description,
+  image,
+  onActionClick,
+  onClick,
+  overline,
+  title,
+}: AppTileProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const tileContent = useMemo(
+    () => (
+      <ContentContainer>
+        <Box>
+          {image && (
+            <ImageContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              hasAction={Boolean(onActionClick)}
+            >
+              {image}
+            </ImageContainer>
+          )}
+
+          {overline && <Support component="div">{overline}</Support>}
+          {title && <Heading5 component="div">{title}</Heading5>}
+          {description && (
+            <Paragraph color="textSecondary">{description}</Paragraph>
+          )}
+          {children && (
+            <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+              {children}
+            </ChildrenContainer>
+          )}
+        </Box>
+      </ContentContainer>
+    ),
+    [
+      image,
+      odysseyDesignTokens,
+      onActionClick,
+      overline,
+      title,
+      description,
+      children,
+    ],
+  );
+
+  return (
+    <MuiCard className="isClickable">
+      <MuiCardActionArea onClick={onClick}>{tileContent}</MuiCardActionArea>
+
+      {(onActionClick || auxiliaryText) && (
+        <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>
+          {auxiliaryText && <Subordinate>{auxiliaryText}</Subordinate>}
+          {onActionClick && (
+            <Button
+              endIcon={actionIcon}
+              ariaLabel={actionLabel}
+              variant="floating"
+              size="small"
+              tooltipText={actionLabel}
+              ariaControls={actionAriaControls}
+              ariaExpanded={actionAriaExpanded}
+              ariaHasPopup={actionAriaHasPopup}
+              onClick={onActionClick}
+            />
+          )}
+        </ActionContainer>
+      )}
+    </MuiCard>
+  );
+};
+
+const MemoizedAppTile = memo(AppTile);
+MemoizedAppTile.displayName = "AppTile";
+
+export { MemoizedAppTile as AppTile };

package/src/labs/{DataComponents/StackContent.tsx → DataView/CardLayoutContent.tsx}

@@ -27,12 +27,12 @@ import {
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import { RowActions } from "./RowActions";
-import { StackCard } from "./StackCard";
-import { StackLayout, StackProps, UniversalProps } from "./componentTypes";
+import { DataCard } from "./DataCard";
+import { CardLayout, CardLayoutProps, UniversalProps } from "./componentTypes";
 import { DetailPanel } from "./DetailPanel";
 
-export type StackContentProps = {
-  currentLayout: StackLayout;
+export type CardLayoutContentProps = {
+  currentLayout: CardLayout;
   data: MRT_RowData[];
   draggingRow?: MRT_Row<MRT_RowData> | null;
   emptyState: ReactNode;
@@ -84,7 +84,7 @@ export type StackContentProps = {
   };
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
-  stackOptions: StackProps;
+  cardLayoutOptions: CardLayoutProps;
   totalRows: UniversalProps["totalRows"];
 };
 
@@ -95,7 +95,7 @@ const StackContainer = styled("div", {
     prop !== "maxGridColumns",
 })<{
   odysseyDesignTokens: DesignTokens;
-  currentLayout: StackLayout;
+  currentLayout: CardLayout;
   maxGridColumns: number;
 }>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({
   display: currentLayout === "list" ? "flex" : "grid",
@@ -135,7 +135,7 @@ const CheckboxContainer = styled("div", {
   marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,
 }));
 
-const StackContent = ({
+const CardLayoutContent = ({
   currentLayout,
   data,
   emptyState,
@@ -150,9 +150,9 @@ const StackContent = ({
   rowReorderingUtilities,
   rowSelection,
   setRowSelection,
-  stackOptions,
+  cardLayoutOptions,
   totalRows,
-}: StackContentProps) => {
+}: CardLayoutContentProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   const handleRowSelectionChange = useCallback(
@@ -174,7 +174,7 @@ const StackContent = ({
     <StackContainer
       odysseyDesignTokens={odysseyDesignTokens}
       currentLayout={currentLayout}
-      maxGridColumns={stackOptions.maxGridColumns ?? 3}
+      maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}
     >
       {isLoading ? (
         <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>
@@ -188,12 +188,12 @@ const StackContent = ({
             <>
               {data.map((row: MRT_RowData, index: number) => {
                 const { overline, title, description, image, children } =
-                  stackOptions.cardProps(row);
+                  cardLayoutOptions.itemProps(row);
                 const currentIndex =
                   index + (pagination.pageIndex - 1) * pagination.pageSize;
 
                 return (
-                  <StackCard
+                  <DataCard
                     Accessory={
                       hasRowSelection && (
                         // Negative margin to counteract the checkbox's inbuilt spacing
@@ -210,21 +210,26 @@ const StackContent = ({
                     children={children}
                     description={description}
                     detailPanel={
-                      stackOptions.renderDetailPanel ? (
+                      cardLayoutOptions.renderDetailPanel ? (
                         <DetailPanel
                           row={row}
-                          renderDetailPanel={stackOptions.renderDetailPanel}
+                          renderDetailPanel={
+                            cardLayoutOptions.renderDetailPanel
+                          }
                         />
                       ) : undefined
                     }
                     image={image}
                     key={row.id}
                     menuButtonChildren={
-                      (stackOptions.rowActionMenuItems || hasRowReordering) && (
+                      (cardLayoutOptions.rowActionMenuItems ||
+                        hasRowReordering) && (
                         <RowActions
                           row={row}
                           rowIndex={currentIndex}
-                          rowActionMenuItems={stackOptions.rowActionMenuItems}
+                          rowActionMenuItems={
+                            cardLayoutOptions.rowActionMenuItems
+                          }
                           isRowReorderingDisabled={isRowReorderingDisabled}
                           totalRows={totalRows}
                           updateRowOrder={
@@ -248,7 +253,7 @@ const StackContent = ({
   );
 };
 
-const MemoizedStackContent = memo(StackContent);
-MemoizedStackContent.displayName = "StackContent";
+const MemoizedCardLayoutContent = memo(CardLayoutContent);
+MemoizedCardLayoutContent.displayName = "CardLayoutContent";
 
-export { MemoizedStackContent as StackContent };
+export { MemoizedCardLayoutContent as CardLayoutContent };

package/src/labs/{DataComponents/StackCard.tsx → DataView/DataCard.tsx}

@@ -45,7 +45,7 @@ import {
 
 export const CARD_IMAGE_HEIGHT = "64px";
 
-export type StackCardProps = {
+export type DataCardProps = {
   children?: ReactNode;
   description?: string;
   detailPanel?: ReactNode;
@@ -110,14 +110,14 @@ const CardContentContainer = styled("div", {
 const CardChildrenContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  ["div + &"]: {
+  ["&:not(:first-child)"]: {
     marginBlockStart: odysseyDesignTokens.Spacing3,
   },
 }));
 
 const buttonProviderValue = { isFullWidth: true };
 
-const StackCard = ({
+const DataCard = ({
   Accessory: AccessoryProp,
   button,
   children,
@@ -128,7 +128,7 @@ const StackCard = ({
   onClick,
   overline,
   title,
-}: StackCardProps) => {
+}: DataCardProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
@@ -250,7 +250,7 @@ const StackCard = ({
   );
 };
 
-const MemoizedStackCard = memo(StackCard);
-MemoizedStackCard.displayName = "StackCard";
+const MemoizedDataCard = memo(DataCard);
+MemoizedDataCard.displayName = "DataCard";
 
-export { MemoizedStackCard as StackCard };
+export { MemoizedDataCard as DataCard };

package/src/labs/{DataComponents → DataView}/DataTable.tsx

@@ -13,11 +13,13 @@
 import { memo, useMemo } from "react";
 
 import { DataView } from "./DataView";
-import { TableProps, UniversalProps } from "./componentTypes";
+import { TableLayoutProps, UniversalProps } from "./componentTypes";
 
-export type DataTableProps = UniversalProps & TableProps;
+export type DataTableProps = UniversalProps & TableLayoutProps;
 
 const DataTable = ({
+  additionalActionButton,
+  additionalActionMenuItems,
   bulkActionMenuItems,
   columns,
   currentPage,
@@ -53,7 +55,7 @@ const DataTable = ({
   searchDelayTime,
   totalRows,
 }: DataTableProps) => {
-  const tableOptions = useMemo(
+  const tableLayoutOptions = useMemo(
     () => ({
       columns,
       hasChangeableDensity,
@@ -80,6 +82,8 @@ const DataTable = ({
 
   return (
     <DataView
+      additionalActionButton={additionalActionButton}
+      additionalActionMenuItems={additionalActionMenuItems}
       availableLayouts={["table"]}
       bulkActionMenuItems={bulkActionMenuItems}
       currentPage={currentPage}
@@ -105,7 +109,7 @@ const DataTable = ({
       paginationType={paginationType}
       resultsPerPage={resultsPerPage}
       searchDelayTime={searchDelayTime}
-      tableOptions={tableOptions}
+      tableLayoutOptions={tableLayoutOptions}
       totalRows={totalRows}
     />
   );

package/src/labs/{DataComponents → DataView}/DataView.tsx

@@ -35,10 +35,12 @@ import { DataFilters } from "../DataFilters";
 import { EmptyState } from "../../EmptyState";
 import { fetchData } from "./fetchData";
 import { LayoutSwitcher } from "./LayoutSwitcher";
+import { MenuButton } from "../..";
+import { MoreIcon } from "../../icons.generated";
 import { TableSettings } from "./TableSettings";
 import { Pagination, usePagination } from "../../Pagination";
-import { TableContent } from "./TableContent";
-import { StackContent } from "./StackContent";
+import { TableLayoutContent } from "./TableLayoutContent";
+import { CardLayoutContent } from "./CardLayoutContent";
 import { useFilterConversion } from "./useFilterConversion";
 import { useRowReordering } from "../../DataTable/useRowReordering";
 import {
@@ -68,6 +70,8 @@ const AdditionalActionsContainer = styled("div")(() => ({
 }));
 
 const DataView = ({
+  additionalActionButton,
+  additionalActionMenuItems,
   availableLayouts = allAvailableLayouts,
   bulkActionMenuItems,
   currentPage = 1,
@@ -94,8 +98,8 @@ const DataView = ({
   paginationType = "paged",
   resultsPerPage = 20,
   searchDelayTime,
-  stackOptions,
-  tableOptions,
+  cardLayoutOptions,
+  tableLayoutOptions,
   totalRows,
   maxPages,
   maxResultsPerPage,
@@ -139,14 +143,18 @@ const DataView = ({
   const [tableState, setTableState] = useState<TableState>({
     columnSorting: [],
     columnVisibility: {},
-    rowDensity: tableOptions?.initialDensity ?? densityValues[0],
+    rowDensity: tableLayoutOptions?.initialDensity ?? densityValues[0],
   });
 
-  const shouldShowFilters = hasSearch || hasFilters;
+  const shouldShowFilters =
+    hasSearch ||
+    hasFilters ||
+    additionalActionButton ||
+    additionalActionMenuItems;
 
   const availableFilters = useFilterConversion({
     filters: filters,
-    columns: tableOptions?.columns,
+    columns: tableLayoutOptions?.columns,
   });
 
   useEffect(() => {
@@ -257,10 +265,10 @@ const DataView = ({
   const additionalActions = useMemo(
     () => (
       <>
-        {currentLayout === "table" && tableOptions && (
+        {currentLayout === "table" && tableLayoutOptions && (
           <TableSettings
             setTableState={setTableState}
-            tableOptions={tableOptions}
+            tableLayoutOptions={tableLayoutOptions}
             tableState={tableState}
           />
         )}
@@ -272,9 +280,30 @@ const DataView = ({
             setCurrentLayout={setCurrentLayout}
           />
         )}
+
+        {additionalActionButton}
+
+        {additionalActionMenuItems && (
+          <MenuButton
+            endIcon={<MoreIcon />}
+            ariaLabel={t("table.moreactions.arialabel")}
+            buttonVariant="secondary"
+            menuAlignment="right"
+          >
+            {additionalActionMenuItems}
+          </MenuButton>
+        )}
       </>
     ),
-    [currentLayout, tableOptions, tableState, availableLayouts],
+    [
+      currentLayout,
+      tableLayoutOptions,
+      tableState,
+      availableLayouts,
+      additionalActionButton,
+      additionalActionMenuItems,
+      t,
+    ],
   );
 
   const { lastRow: lastRowOnPage } = usePagination({
@@ -333,9 +362,9 @@ const DataView = ({
         </AdditionalActionsContainer>
       )}
 
-      {currentLayout === "table" && tableOptions && (
-        <TableContent
-          columns={tableOptions.columns}
+      {currentLayout === "table" && tableLayoutOptions && (
+        <TableLayoutContent
+          columns={tableLayoutOptions.columns}
           data={data}
           draggingRow={draggingRow}
           emptyState={emptyState}
@@ -352,14 +381,14 @@ const DataView = ({
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
           setTableState={setTableState}
-          tableOptions={tableOptions}
+          tableLayoutOptions={tableLayoutOptions}
           tableState={tableState}
           totalRows={totalRows}
         />
       )}
       {(currentLayout === "list" || currentLayout === "grid") &&
-        stackOptions && (
-          <StackContent
+        cardLayoutOptions && (
+          <CardLayoutContent
             currentLayout={currentLayout}
             data={data}
             draggingRow={draggingRow}
@@ -376,7 +405,7 @@ const DataView = ({
             rowReorderingUtilities={rowReorderingUtilities}
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
-            stackOptions={stackOptions}
+            cardLayoutOptions={cardLayoutOptions}
             totalRows={totalRows}
           />
         )}

package/src/labs/{DataComponents → DataView}/DetailPanel.tsx

@@ -11,7 +11,7 @@
  */
 
 import { memo } from "react";
-import { StackProps } from "./componentTypes";
+import { CardLayoutProps } from "./componentTypes";
 import { DataRow } from "./dataTypes";
 
 const DetailPanel = ({
@@ -19,7 +19,7 @@ const DetailPanel = ({
   renderDetailPanel,
 }: {
   row: DataRow;
-  renderDetailPanel: StackProps["renderDetailPanel"];
+  renderDetailPanel: CardLayoutProps["renderDetailPanel"];
 }) => {
   if (!renderDetailPanel) return null;
   return renderDetailPanel({ row });