@okta/odyssey-react-mui 1.21.1 → 1.22.0

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

@@ -41,7 +41,7 @@ import {
 } from "../../icons.generated";
 import { Box } from "../../Box";
 import { Button } from "../../Button";
-import { TableProps, TableState, UniversalProps } from "./componentTypes";
+import { TableLayoutProps, TableState, UniversalProps } from "./componentTypes";
 import { DataTableCell } from "./dataTypes";
 import {
   dataTableImmutableSettings,
@@ -64,8 +64,8 @@ const RowActionsContainer = styled("div")(() => ({
   display: "flex",
 }));
 
-export type TableContentProps = {
-  columns: TableProps["columns"];
+export type TableLayoutContentProps = {
+  columns: TableLayoutProps["columns"];
   data: MRT_RowData[];
   draggingRow?: MRT_Row<MRT_RowData> | null;
   emptyState: ReactNode;
@@ -121,12 +121,12 @@ export type TableContentProps = {
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
   setTableState: Dispatch<SetStateAction<TableState>>;
-  tableOptions: TableProps;
+  tableLayoutOptions: TableLayoutProps;
   tableState: TableState;
   totalRows: UniversalProps["totalRows"];
 };
 
-const TableContent = ({
+const TableLayoutContent = ({
   columns,
   data,
   draggingRow,
@@ -144,10 +144,10 @@ const TableContent = ({
   rowSelection,
   setRowSelection,
   setTableState,
-  tableOptions,
+  tableLayoutOptions,
   tableState,
   totalRows,
-}: TableContentProps) => {
+}: TableLayoutContentProps) => {
   const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =
     useState(true);
   const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =
@@ -220,8 +220,8 @@ const TableContent = ({
         row.index + (pagination.pageIndex - 1) * pagination.pageSize;
       return (
         <RowActionsContainer>
-          {tableOptions.rowActionButtons?.(row)}
-          {(tableOptions.rowActionMenuItems || hasRowReordering) && (
+          {tableLayoutOptions.rowActionButtons?.(row)}
+          {(tableLayoutOptions.rowActionMenuItems || hasRowReordering) && (
             <MenuButton
               ariaLabel={t("table.moreactions.arialabel")}
               buttonVariant="floating"
@@ -232,7 +232,7 @@ const TableContent = ({
               <RowActions
                 isRowReorderingDisabled={isRowReorderingDisabled}
                 row={row}
-                rowActionMenuItems={tableOptions.rowActionMenuItems}
+                rowActionMenuItems={tableLayoutOptions.rowActionMenuItems}
                 rowIndex={currentIndex}
                 totalRows={totalRows}
                 updateRowOrder={
@@ -251,7 +251,7 @@ const TableContent = ({
       pagination.pageIndex,
       pagination.pageSize,
       t,
-      tableOptions,
+      tableLayoutOptions,
       totalRows,
       updateRowOrder,
     ],
@@ -270,15 +270,15 @@ const TableContent = ({
   const shouldDisplayRowActions = useMemo(
     () =>
       (hasRowReordering === true && onReorderRows) ||
-      tableOptions.rowActionButtons ||
-      tableOptions.rowActionMenuItems
+      tableLayoutOptions.rowActionButtons ||
+      tableLayoutOptions.rowActionMenuItems
         ? true
         : false,
     [
       hasRowReordering,
       onReorderRows,
-      tableOptions.rowActionButtons,
-      tableOptions.rowActionMenuItems,
+      tableLayoutOptions.rowActionButtons,
+      tableLayoutOptions.rowActionMenuItems,
     ],
   );
 
@@ -323,10 +323,10 @@ const TableContent = ({
           className: "ods-actions-cell",
           children: (
             <Box sx={{ display: "flex", visibility: "hidden" }}>
-              {tableOptions.rowActionButtons &&
-                tableOptions.rowActionButtons({ id: null })}
+              {tableLayoutOptions.rowActionButtons &&
+                tableLayoutOptions.rowActionButtons({ id: null })}
               {((hasRowReordering === true && onReorderRows) ||
-                tableOptions.rowActionMenuItems) && (
+                tableLayoutOptions.rowActionMenuItems) && (
                 <Box>
                   <Button
                     endIcon={<MoreIcon />}
@@ -345,7 +345,7 @@ const TableContent = ({
     muiTableProps: {
       ref: tableContentRef,
       className:
-        !shouldDisplayRowActions && tableOptions.hasColumnResizing
+        !shouldDisplayRowActions && tableLayoutOptions.hasColumnResizing
           ? "ods-hide-spacer-column"
           : "",
     },
@@ -355,11 +355,16 @@ const TableContent = ({
     muiTableBodyProps: () => ({
       className: rowDensityClassName,
     }),
-    enableColumnResizing: tableOptions.hasColumnResizing,
+    enableColumnResizing: tableLayoutOptions.hasColumnResizing,
     defaultColumn: {
       Cell: defaultCell,
     },
-    enableRowActions: shouldDisplayRowActions,
+    enableRowActions:
+      (hasRowReordering === true && onReorderRows) ||
+      tableLayoutOptions.rowActionButtons ||
+      tableLayoutOptions.rowActionMenuItems
+        ? true
+        : false,
     renderRowActions: ({ row }) => renderRowActions({ row }),
     enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
     enableRowDragging: hasRowReordering && Boolean(onReorderRows),
@@ -395,7 +400,7 @@ const TableContent = ({
       sx: dragHandleStyles,
       ...dragHandleText,
     }),
-    renderDetailPanel: tableOptions.renderDetailPanel,
+    renderDetailPanel: tableLayoutOptions.renderDetailPanel,
     enableRowVirtualization: data.length >= 50,
     muiTableHeadCellProps: ({ column: currentColumn }) => ({
       className: tableState.columnSorting.find(
@@ -407,7 +412,7 @@ const TableContent = ({
     muiTableBodyCellProps: ({ column }) => ({
       className: column.getIsResizing() ? "isResizing" : "",
     }),
-    enableSorting: tableOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise
+    enableSorting: tableLayoutOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise
     onSortingChange: (sortingUpdater) => {
       const newSortVal =
         typeof sortingUpdater === "function"
@@ -441,7 +446,7 @@ const TableContent = ({
   );
 };
 
-const MemoizedTableContent = memo(TableContent);
-MemoizedTableContent.displayName = "TableContent";
+const MemoizedTableLayoutContent = memo(TableLayoutContent);
+MemoizedTableLayoutContent.displayName = "TableLayoutContent";
 
-export { MemoizedTableContent as TableContent };
+export { MemoizedTableLayoutContent as TableLayoutContent };

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

@@ -19,22 +19,23 @@ import { densityValues } from "./constants";
 import { ListIcon, ShowIcon } from "../../icons.generated";
 import { MenuButton } from "../../MenuButton";
 import { MenuItem } from "../../MenuItem";
-import { TableProps, TableState } from "./componentTypes";
+import { TableLayoutProps, TableState } from "./componentTypes";
 
 export type TableSettingsProps = {
   setTableState: Dispatch<SetStateAction<TableState>>;
-  tableOptions: TableProps;
+  tableLayoutOptions: TableLayoutProps;
   tableState: TableState;
 };
 
 const TableSettings = ({
   setTableState,
-  tableOptions,
+  tableLayoutOptions,
   tableState,
 }: TableSettingsProps) => {
   const { t } = useTranslation();
 
-  const { hasChangeableDensity, hasColumnVisibility, columns } = tableOptions;
+  const { hasChangeableDensity, hasColumnVisibility, columns } =
+    tableLayoutOptions;
   const { rowDensity, columnVisibility } = tableState;
 
   const changeRowDensity = useCallback<(value: MRT_DensityState) => void>(

package/src/labs/{DataComponents → DataView}/componentTypes.ts

@@ -19,7 +19,7 @@ import {
   MRT_VisibilityState,
 } from "material-react-table";
 
-import { availableLayouts, availableStackLayouts } from "./constants";
+import { availableLayouts, availableCardLayouts } from "./constants";
 import { DataFilter } from "../DataFilters";
 import {
   DataGetDataType,
@@ -31,15 +31,17 @@ import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
 import { MenuButtonProps } from "../..";
 import { paginationTypeValues } from "../DataTablePagination";
 import { ReactNode } from "react";
-import { StackCardProps } from "./StackCard";
+import { DataCardProps } from "./DataCard";
 
 export type DataLayout = (typeof availableLayouts)[number];
-export type StackLayout = (typeof availableStackLayouts)[number];
+export type CardLayout = (typeof availableCardLayouts)[number];
 
 export type AvailableLayouts = DataLayout[];
-export type AvailableStackLayouts = StackLayout[];
+export type AvailableCardLayouts = CardLayout[];
 
 export type UniversalProps = {
+  additionalActionButton?: ReactNode;
+  additionalActionMenuItems?: ReactNode;
   bulkActionMenuItems?: (
     selectedRows: MRT_RowSelectionState,
   ) => MenuButtonProps["children"];
@@ -77,7 +79,7 @@ export type UniversalProps = {
   totalRows?: number;
 };
 
-export type TableProps = {
+export type TableLayoutProps = {
   columns: DataTableColumn<MRT_RowData>[];
   hasChangeableDensity?: boolean;
   hasColumnResizing?: boolean;
@@ -89,8 +91,8 @@ export type TableProps = {
   rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
 };
 
-export type StackProps = {
-  cardProps: (row: MRT_RowData) => StackCardProps;
+export type CardLayoutProps = {
+  itemProps: (row: MRT_RowData) => DataCardProps;
   maxGridColumns?: number;
   renderDetailPanel?: (props: { row: MRT_RowData }) => ReactNode;
   rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
@@ -99,8 +101,8 @@ export type StackProps = {
 export type ViewProps<L extends DataLayout> = {
   availableLayouts?: L[];
   initialLayout?: L;
-  stackOptions?: StackProps;
-  tableOptions?: TableProps;
+  cardLayoutOptions?: CardLayoutProps;
+  tableLayoutOptions?: TableLayoutProps;
 };
 
 export type TableState = {

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

@@ -14,11 +14,11 @@ import { MRT_DensityState } from "material-react-table";
 
 export type DataViewLayout = "list" | "grid" | "table";
 
-export const availableStackLayouts: DataViewLayout[] = ["list", "grid"];
+export const availableCardLayouts: DataViewLayout[] = ["list", "grid"];
 export const availableTableLayouts: DataViewLayout[] = ["table"];
 export const availableLayouts: DataViewLayout[] = [
   ...availableTableLayouts,
-  ...availableStackLayouts,
+  ...availableCardLayouts,
 ];
 
 export const densityValues: MRT_DensityState[] = [

package/src/labs/{DataComponents → DataView}/fetchData.ts

@@ -23,7 +23,7 @@ type DataRequestType = {
   getData: UniversalProps["getData"];
   setData: Dispatch<SetStateAction<MRT_RowData[]>>;
   setErrorMessage: Dispatch<SetStateAction<UniversalProps["errorMessage"]>>;
-  setIsLoading: Dispatch<SetStateAction<boolean>>;
+  setIsLoading?: Dispatch<SetStateAction<boolean>>;
 };
 
 export const fetchData = async ({
@@ -34,7 +34,7 @@ export const fetchData = async ({
   setErrorMessage,
   setIsLoading,
 }: DataRequestType) => {
-  setIsLoading(true);
+  setIsLoading?.(true);
   setErrorMessage(errorMessageProp);
   try {
     const incomingData = await getData?.(dataQueryParams);
@@ -42,6 +42,6 @@ export const fetchData = async ({
   } catch (error) {
     setErrorMessage(typeof error === "string" ? error : t("table.error"));
   } finally {
-    setIsLoading(false);
+    setIsLoading?.(false);
   }
 };

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

@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export { DataStack, type DataStackProps } from "./DataStack";
 export { DataTable, type DataTableProps } from "./DataTable";
 export { DataView, type DataViewProps } from "./DataView";
 

package/src/labs/{DataComponents → DataView}/useFilterConversion.ts

@@ -15,10 +15,10 @@ import { MRT_RowData } from "material-react-table";
 
 import { DataFilter } from "../DataFilters";
 import { DataTableColumn } from "../../DataTable";
-import { UniversalProps, TableProps } from "./componentTypes";
+import { UniversalProps, TableLayoutProps } from "./componentTypes";
 
 type FilterConversionType = {
-  columns?: TableProps["columns"];
+  columns?: TableLayoutProps["columns"];
   filters?: UniversalProps["filters"];
 };
 

package/src/labs/SideNav/CollapseIcon.tsx

@@ -0,0 +1,48 @@
+/*!
+ * 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, useMemo, ReactElement } from "react";
+import { CollapseLeftIcon } from "../../icons.generated";
+import { Box } from "../../Box";
+import { Button } from "../../Button";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
+
+const CollapseIcon = ({ onClick }: { onClick?(): void }): ReactElement => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const collapseButtonStyles = useMemo(
+    () => ({
+      "& > button": {
+        height: odysseyDesignTokens.Spacing6,
+        width: odysseyDesignTokens.Spacing6,
+        color: odysseyDesignTokens.HueNeutral400,
+      },
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <Box sx={collapseButtonStyles}>
+      <Button
+        tabIndex={0}
+        variant="secondary"
+        onClick={onClick}
+        startIcon={<CollapseLeftIcon />}
+        ariaLabel="collapse side navigation"
+      />
+    </Box>
+  );
+};
+const MemoizedCollapseIcon = memo(CollapseIcon);
+MemoizedCollapseIcon.displayName = "CollapseIcon";
+
+export { MemoizedCollapseIcon as CollapseIcon };