@okta/odyssey-react-mui 1.14.4 → 1.14.6

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.14.6](https://github.com/okta/odyssey/compare/v1.14.5...v1.14.6) (2024-03-07)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.14.5](https://github.com/okta/odyssey/compare/v1.14.4...v1.14.5) (2024-03-01)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.14.4](https://github.com/okta/odyssey/compare/v1.14.3...v1.14.4) (2024-03-01)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/Badge.js

@@ -64,7 +64,7 @@ const Badge = ({
     const hasNotificationCount = badgeContent && badgeContent > 0;
     return hasNotificationCount ? _jsx(Box, {
       sx: badgeStyles,
-      "data-se": testId,
+      testId: testId,
       translate: translate,
       children: formattedContent
     }) : null;

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["memo","useMemo","useOdysseyDesignTokens","Box","jsx","_jsx","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","badgeContent","badgeContentMax","testId","translate","type","odysseyDesignTokens","renderBadge","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","overContentMaxMessage","formattedContent","toString","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","length","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","transitionDuration","TransitionDurationMain","transitionProperty","hasNotificationCount","sx","children","MemoizedBadge","displayName"],"sources":["../src/Badge.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { CSSProperties, memo, useMemo } from \"react\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Box } from \"./Box\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type BadgeContentMax = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;\n\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n  badgeContent: number;\n  badgeContentMax?: BadgeContentMax;\n  type?: (typeof badgeTypeValues)[number];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n  default: {\n    background: odysseyTokens.HueNeutral200,\n    font: odysseyTokens.TypographyColorBody,\n  },\n  attention: {\n    background: odysseyTokens.PalettePrimaryMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n  danger: {\n    background: odysseyTokens.PaletteDangerMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n});\n\nconst Badge = ({\n  badgeContent,\n  badgeContentMax = 100,\n  testId,\n  translate,\n  type = \"default\",\n}: BadgeProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const renderBadge = useMemo(() => {\n    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n    const threeDigitLimitedMax =\n      greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n    const isOverContentMax = badgeContent > threeDigitLimitedMax;\n    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n    const formattedContent = isOverContentMax\n      ? overContentMaxMessage\n      : badgeContent.toString();\n\n    const badgeStyles: CSSProperties = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      // 6px horizontal padding per design requirements\n      padding: \"0 6px\",\n      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n      color: badgeTypeColors(odysseyDesignTokens)[type].font,\n      borderRadius:\n        formattedContent.length > 1\n          ? `${odysseyDesignTokens.BorderRadiusOuter}`\n          : \"50%\",\n      fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n      lineHeight: 1,\n      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,\n      transitionProperty: `background-color, color`,\n    };\n\n    const hasNotificationCount = badgeContent && badgeContent > 0;\n\n    return hasNotificationCount ? (\n      <Box sx={badgeStyles} data-se={testId} translate={translate}>\n        {formattedContent}\n      </Box>\n    ) : null;\n  }, [\n    badgeContent,\n    badgeContentMax,\n    odysseyDesignTokens,\n    testId,\n    translate,\n    type,\n  ]);\n\n  return renderBadge;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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"}
+{"version":3,"file":"Badge.js","names":["memo","useMemo","useOdysseyDesignTokens","Box","jsx","_jsx","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","badgeContent","badgeContentMax","testId","translate","type","odysseyDesignTokens","renderBadge","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","overContentMaxMessage","formattedContent","toString","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","length","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","transitionDuration","TransitionDurationMain","transitionProperty","hasNotificationCount","sx","children","MemoizedBadge","displayName"],"sources":["../src/Badge.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { CSSProperties, memo, useMemo } from \"react\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Box } from \"./Box\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type BadgeContentMax = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;\n\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n  badgeContent: number;\n  badgeContentMax?: BadgeContentMax;\n  type?: (typeof badgeTypeValues)[number];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n  default: {\n    background: odysseyTokens.HueNeutral200,\n    font: odysseyTokens.TypographyColorBody,\n  },\n  attention: {\n    background: odysseyTokens.PalettePrimaryMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n  danger: {\n    background: odysseyTokens.PaletteDangerMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n});\n\nconst Badge = ({\n  badgeContent,\n  badgeContentMax = 100,\n  testId,\n  translate,\n  type = \"default\",\n}: BadgeProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const renderBadge = useMemo(() => {\n    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n    const threeDigitLimitedMax =\n      greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n    const isOverContentMax = badgeContent > threeDigitLimitedMax;\n    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n    const formattedContent = isOverContentMax\n      ? overContentMaxMessage\n      : badgeContent.toString();\n\n    const badgeStyles: CSSProperties = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      // 6px horizontal padding per design requirements\n      padding: \"0 6px\",\n      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n      color: badgeTypeColors(odysseyDesignTokens)[type].font,\n      borderRadius:\n        formattedContent.length > 1\n          ? `${odysseyDesignTokens.BorderRadiusOuter}`\n          : \"50%\",\n      fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n      lineHeight: 1,\n      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,\n      transitionProperty: `background-color, color`,\n    };\n\n    const hasNotificationCount = badgeContent && badgeContent > 0;\n\n    return hasNotificationCount ? (\n      <Box sx={badgeStyles} testId={testId} translate={translate}>\n        {formattedContent}\n      </Box>\n    ) : null;\n  }, [\n    badgeContent,\n    badgeContentMax,\n    odysseyDesignTokens,\n    testId,\n    translate,\n    type,\n  ]);\n\n  return renderBadge;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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"}

package/dist/DataTable/DataTable.js

@@ -11,16 +11,25 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { MaterialReactTable, useMaterialReactTable } from "material-react-table";
-import { ArrowDownIcon, ArrowUnsortedIcon, DragIndicatorIcon } from "../icons.generated/index.js";
+import { useMaterialReactTable, MRT_TableContainer } from "material-react-table";
+import { ArrowDownIcon, ArrowUnsortedIcon, DragIndicatorIcon, MoreIcon } from "../icons.generated/index.js";
 import { densityValues } from "./constants.js";
-import { DataTablePagination } from "../labs/DataTablePagination.js";
+import { DataTablePagination } from "./DataTablePagination.js";
 import { DataFilters } from "../labs/DataFilters.js";
 import { DataTableRowActions } from "./DataTableRowActions.js";
 import { useRowReordering } from "./useRowReordering.js";
 import { DataTableSettings } from "./DataTableSettings.js";
+import { MenuButton } from "../MenuButton.js";
 import { Box } from "../Box.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { useScrollIndication } from "./useScrollIndication.js";
+import styled from "@emotion/styled";
+import { DataTableEmptyState } from "./DataTableEmptyState.js";
+import { Callout } from "../Callout.js";
+import { t } from "i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const displayColumnDefOptions = {
   "mrt-row-actions": {
     header: "",
@@ -77,6 +86,50 @@ const displayColumnDefOptions = {
     }
   }
 };
+const ScrollableTableContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrollableStart" && prop !== "isScrollableEnd"
+})(({
+  odysseyDesignTokens,
+  isScrollableStart,
+  isScrollableEnd
+}) => ({
+  borderBlockEndColor: odysseyDesignTokens.HueNeutral100,
+  borderBlockEndStyle: "solid",
+  borderBlockEndWidth: odysseyDesignTokens.BorderWidthMain,
+  marginBlockEnd: odysseyDesignTokens.Spacing4,
+  position: "relative",
+  borderInlineStartColor: isScrollableStart ? odysseyDesignTokens.HueNeutral200 : "transparent",
+  borderInlineStartStyle: "solid",
+  borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,
+  "::before": {
+    background: "linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
+    content: '""',
+    opacity: isScrollableStart ? "0.075" : "0",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: odysseyDesignTokens.Spacing6,
+    zIndex: 100,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
+  },
+  borderInlineEndColor: isScrollableEnd ? odysseyDesignTokens.HueNeutral200 : "transparent",
+  borderInlineEndStyle: "solid",
+  borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,
+  "::after": {
+    background: "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
+    content: '""',
+    opacity: isScrollableEnd ? "0.075" : "0",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: odysseyDesignTokens.Spacing6,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
+  }
+}));
 const DataTable = ({
   columns,
   getRowId: getRowIdProp,
@@ -100,7 +153,11 @@ const DataTable = ({
   hasRowReordering,
   hasRowSelection,
   hasSearch,
-  hasSorting
+  hasSorting,
+  bulkActionMenuItems,
+  errorMessage: errorMessageProp,
+  emptyPlaceholder,
+  noResultsPlaceholder
 }) => {
   const [data, setData] = useState([]);
   const [pagination, setPagination] = useState({
@@ -108,11 +165,30 @@ const DataTable = ({
     pageSize: resultsPerPage
   });
   const [draggingRow, setDraggingRow] = useState();
+  const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] = useState(true);
+  const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] = useState(true);
+  const [tableInnerContainerWidth, setTableInnerContainerWidth] = useState("100%");
+  const tableOuterContainerRef = useRef(null);
+  const tableInnerContainerRef = useRef(null);
+  const tableContentRef = useRef(null);
   const [columnSorting, setColumnSorting] = useState([]);
   const [columnVisibility, setColumnVisibility] = useState();
   const [rowDensity, setRowDensity] = useState(initialDensity);
+  const [rowSelection, setRowSelection] = useState({});
   const [search, setSearch] = useState("");
   const [filters, setFilters] = useState();
+  const [initialFilters, setInitialFilters] = useState();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isEmpty, setIsEmpty] = useState();
+  const [errorMessage, setErrorMessage] = useState(errorMessageProp);
+  useScrollIndication({
+    tableOuterContainer: tableOuterContainerRef.current,
+    tableInnerContainer: tableInnerContainerRef.current,
+    setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,
+    setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,
+    setTableInnerContainerWidth: setTableInnerContainerWidth
+  });
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const {
     dragHandleStyles,
     dragHandleText,
@@ -170,6 +246,19 @@ const DataTable = ({
       children: value
     });
   }, []);
+  const emptyState = useCallback(() => {
+    const noResultsInnerContent = noResultsPlaceholder || _jsx(DataTableEmptyState, {
+      heading: t("table.noresults.heading"),
+      text: t("table.noresults.text")
+    });
+    const emptyStateInnerContent = emptyPlaceholder && isEmpty ? emptyPlaceholder : noResultsInnerContent;
+    return _jsx(Box, {
+      sx: {
+        width: tableInnerContainerWidth
+      },
+      children: emptyStateInnerContent
+    });
+  }, [tableInnerContainerWidth, emptyPlaceholder, noResultsPlaceholder, isEmpty]);
   const dataTable = useMaterialReactTable({
     columns: columns,
     data: data,
@@ -178,7 +267,9 @@ const DataTable = ({
       density: rowDensity,
       sorting: columnSorting,
       globalFilter: search,
-      columnVisibility
+      columnVisibility,
+      isLoading,
+      rowSelection
     },
     icons: {
       ArrowDownwardIcon: ArrowDownIcon,
@@ -245,6 +336,7 @@ const DataTable = ({
       row
     }),
     enableRowSelection: hasRowSelection,
+    onRowSelectionChange: setRowSelection,
     enableSorting: hasSorting,
     onSortingChange: setColumnSorting,
     muiTableHeadCellProps: ({
@@ -252,62 +344,32 @@ const DataTable = ({
     }) => ({
       className: columnSorting.find(sortedColumn => sortedColumn.id === currentColumn.id) ? "isSorted" : "isUnsorted"
     }),
-    enableRowVirtualization: paginationType === "loadMore" || pagination.pageSize > 50,
+    enableRowVirtualization: paginationType !== "loadMore" && pagination.pageSize > 50,
     rowVirtualizerInstanceRef: useRef(null),
     rowVirtualizerOptions: {
       overscan: 4
     },
-    renderTopToolbar: () => _jsx(Box, {
-      sx: {
-        marginBottom: 5
-      },
-      children: _jsx(DataFilters, {
-        onChangeSearch: hasSearch ? setSearch : undefined,
-        onChangeFilters: hasFilters ? setFilters : undefined,
-        hasSearchSubmitButton: hasSearchSubmitButton,
-        searchDelayTime: searchDelayTime,
-        filters: hasFilters ? dataTableFilters : undefined,
-        additionalActions: _jsx(DataTableSettings, {
-          hasChangeableDensity: hasChangeableDensity,
-          rowDensity: rowDensity,
-          setRowDensity: setRowDensity,
-          hasColumnVisibility: hasColumnVisibility,
-          columns: columns,
-          columnVisibility: columnVisibility,
-          setColumnVisibility: setColumnVisibility
-        })
-      })
-    }),
-    renderBottomToolbar: hasPagination ? () => _jsx(DataTablePagination, {
-      paginationType: paginationType,
-      currentNumberOfResults: data.length,
-      currentPage: pagination.pageIndex,
-      isPreviousButtonDisabled: pagination.pageIndex <= 1,
-      isNextButtonDisabled: false,
-      onClickPrevious: () => setPagination({
-        pageIndex: pagination.pageIndex - 1,
-        pageSize: pagination.pageSize
-      }),
-      onClickNext: () => {
-        if (paginationType === "loadMore") {
-          setPagination({
-            pageSize: pagination.pageSize,
-            pageIndex: pagination.pageSize + resultsPerPage
-          });
-        } else {
-          setPagination({
-            pageSize: pagination.pageSize,
-            pageIndex: pagination.pageIndex + 1
-          });
-        }
-      }
-    }) : undefined
+    renderEmptyRowsFallback: emptyState,
+    muiTableProps: {
+      ref: tableContentRef
+    },
+    muiTableContainerProps: {
+      ref: tableInnerContainerRef
+    }
   });
-  useEffect(() => {
-    onChangeRowSelection?.(dataTable.getState().rowSelection);
-  }, [dataTable.getState().rowSelection, dataTable, onChangeRowSelection]);
+  const bulkActionMenuButton = useMemo(() => _jsx(_Fragment, {
+    children: _jsx(MenuButton, {
+      buttonVariant: "secondary",
+      endIcon: _jsx(MoreIcon, {}),
+      isDisabled: Object.keys(rowSelection).length === 0,
+      ariaLabel: "More actions",
+      children: bulkActionMenuItems?.(rowSelection)
+    })
+  }), [bulkActionMenuItems, rowSelection]);
   useEffect(() => {
     (async () => {
+      setIsLoading(true);
+      setErrorMessage(errorMessageProp);
       try {
         const incomingData = await getData?.({
           page: pagination.pageIndex,
@@ -317,11 +379,69 @@ const DataTable = ({
           sort: columnSorting
         });
         setData(incomingData);
-      } catch (error) {} finally {}
+      } catch (error) {
+        setErrorMessage(typeof error === "string" ? error : t("table.error"));
+      } finally {
+        setIsLoading(false);
+      }
     })();
-  }, [pagination, columnSorting, search, filters, getData]);
-  return _jsx(MaterialReactTable, {
-    table: dataTable
+  }, [pagination, columnSorting, search, filters, getData, errorMessageProp]);
+  useEffect(() => {
+    if (!initialFilters && filters) {
+      setInitialFilters(filters);
+    }
+    setIsEmpty(pagination.pageIndex === currentPage && pagination.pageSize === resultsPerPage && search === "" && filters === initialFilters && data.length === 0);
+  }, [filters, pagination, search, data, currentPage, initialFilters, resultsPerPage]);
+  useEffect(() => {
+    onChangeRowSelection?.(rowSelection);
+  }, [rowSelection, onChangeRowSelection]);
+  return _jsxs(_Fragment, {
+    children: [(hasSearch || hasFilters || hasChangeableDensity || hasColumnVisibility || bulkActionMenuItems) && _jsx(Box, {
+      sx: {
+        marginBottom: 5
+      },
+      children: _jsx(DataFilters, {
+        onChangeSearch: hasSearch ? setSearch : undefined,
+        onChangeFilters: hasFilters ? setFilters : undefined,
+        hasSearchSubmitButton: hasSearchSubmitButton,
+        searchDelayTime: searchDelayTime,
+        filters: hasFilters ? dataTableFilters : undefined,
+        isDisabled: isEmpty,
+        additionalActions: _jsxs(_Fragment, {
+          children: [_jsx(DataTableSettings, {
+            hasChangeableDensity: hasChangeableDensity,
+            rowDensity: rowDensity,
+            setRowDensity: setRowDensity,
+            hasColumnVisibility: hasColumnVisibility,
+            columns: columns,
+            columnVisibility: columnVisibility,
+            setColumnVisibility: setColumnVisibility
+          }), bulkActionMenuItems && bulkActionMenuButton]
+        })
+      })
+    }), errorMessage && _jsx(Box, {
+      sx: {
+        marginBlockEnd: 2
+      },
+      children: _jsx(Callout, {
+        severity: "error",
+        text: errorMessage
+      })
+    }), _jsx(ScrollableTableContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      isScrollableStart: !isTableContainerScrolledToStart,
+      isScrollableEnd: !isTableContainerScrolledToEnd,
+      ref: tableOuterContainerRef,
+      children: _jsx(MRT_TableContainer, {
+        table: dataTable
+      })
+    }), hasPagination && _jsx(DataTablePagination, {
+      pagination: pagination,
+      setPagination: setPagination,
+      totalRows: totalRows,
+      isDisabled: isEmpty,
+      variant: paginationType
+    })]
   });
 };
 const MemoizedDataTable = memo(DataTable);

package/dist/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","MaterialReactTable","useMaterialReactTable","ArrowDownIcon","ArrowUnsortedIcon","DragIndicatorIcon","densityValues","DataTablePagination","DataFilters","DataTableRowActions","useRowReordering","DataTableSettings","Box","jsx","_jsx","displayColumnDefOptions","header","grow","muiTableBodyCellProps","align","sx","overflow","width","className","muiTableHeadCellProps","minWidth","children","marginInline","opacity","padding","DataTable","columns","getRowId","getRowIdProp","currentPage","initialDensity","resultsPerPage","getData","onReorderRows","totalRows","hasSearchSubmitButton","searchDelayTime","paginationType","onChangeRowSelection","rowActionButtons","rowActionMenuItems","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSorting","data","setData","pagination","setPagination","pageIndex","pageSize","draggingRow","setDraggingRow","columnSorting","setColumnSorting","columnVisibility","setColumnVisibility","rowDensity","setRowDensity","search","setSearch","filters","setFilters","dragHandleStyles","dragHandleText","draggableTableBodyRowClassName","handleDragHandleKeyDown","handleDragHandleOnDragCapture","handleDragHandleOnDragEnd","resetDraggingAndHoveredRow","updateRowOrder","page","row","id","rowDensityCellClassName","renderRowActions","currentIndex","index","rowIndex","undefined","dataTableFilters","filter","column","enableColumnFilter","map","accessorKey","label","variant","filterVariant","options","filterSelectOptions","defaultCell","cell","value","getValue","whiteSpace","textOverflow","dataTable","state","density","sorting","globalFilter","icons","ArrowDownwardIcon","DragHandleIcon","SyncAltIcon","enableColumnActions","enableColumnResizing","enableDensityToggle","enableFilters","enableFullScreenToggle","enableGlobalFilter","enableHiding","enablePagination","layoutMode","manualFiltering","manualSorting","muiTablePaperProps","elevation","selectAllMode","defaultColumn","Cell","enableRowOrdering","Boolean","enableRowDragging","muiTableBodyRowProps","table","currentRowId","draggingRowId","hoveredRowId","getState","hoveredRow","muiRowDragHandleProps","onKeyDown","event","onBlur","onDragEnd","onDragCapture","enableRowActions","positionActionsColumn","enableRowSelection","enableSorting","onSortingChange","currentColumn","find","sortedColumn","enableRowVirtualization","rowVirtualizerInstanceRef","rowVirtualizerOptions","overscan","renderTopToolbar","marginBottom","onChangeSearch","onChangeFilters","additionalActions","renderBottomToolbar","currentNumberOfResults","length","isPreviousButtonDisabled","isNextButtonDisabled","onClickPrevious","onClickNext","rowSelection","incomingData","sort","error","MemoizedDataTable","displayName"],"sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  MRT_Cell,\n  MRT_DensityState,\n  MRT_Row,\n  MRT_RowData,\n  MRT_SortingState,\n  MRT_TableOptions,\n  MRT_Virtualizer,\n  MRT_VisibilityState,\n  MaterialReactTable,\n  useMaterialReactTable,\n} from \"material-react-table\";\nimport {\n  ArrowDownIcon,\n  ArrowUnsortedIcon,\n  DragIndicatorIcon,\n} from \"../icons.generated\";\nimport { densityValues } from \"./constants\";\nimport {\n  DataTablePagination,\n  paginationTypeValues,\n} from \"../labs/DataTablePagination\";\nimport { DataFilter, DataFilters } from \"../labs/DataFilters\";\nimport {\n  DataTableRowActions,\n  DataTableRowActionsProps,\n} from \"./DataTableRowActions\";\nimport { useRowReordering } from \"./useRowReordering\";\nimport { DataTableSettings } from \"./DataTableSettings\";\nimport { Box } from \"../Box\";\nimport { DataTableRowSelectionState } from \".\";\n\nexport type DataTableProps = {\n  /**\n   * The columns that make up the table\n   */\n  columns: MRT_TableOptions<MRT_RowData>[\"columns\"];\n  /**\n   * The total number of rows in the table. Optional, because it's sometimes impossible\n   * to calculate. Used in table pagination to know when to disable the \"next\"/\"more\" button.\n   */\n  totalRows?: number;\n  /**\n   * The function to get the ID of a row\n   */\n  getRowId?: MRT_TableOptions<MRT_RowData>[\"getRowId\"];\n  /**\n   * The initial density of the table. This is available even if the table density\n   * isn't changeable.\n   */\n  initialDensity?: (typeof densityValues)[number];\n  /**\n   * If true, the end user will be able to change the table density.\n   */\n  hasChangeableDensity?: boolean;\n  /**\n   * If true, the end user can resize individual columns.\n   */\n  hasColumnResizing?: boolean;\n  /**\n   * If true, the end user will be able to show/hide columns.\n   */\n  hasColumnVisibility?: boolean;\n  /**\n   * If true, the end user will be able to filter columns.\n   */\n  hasFilters?: boolean;\n  /**\n   * If true, the table will include pagination controls.\n   */\n  hasPagination?: boolean;\n  /**\n   * If true, the table will include checkboxes on each row, enabling\n   * the user to select some or all rows.\n   */\n  hasRowSelection?: boolean;\n  /**\n   * If true, the global table search controls will be shown.\n   */\n  hasSearch?: boolean;\n  /**\n   * If true, the end user can sort columns (ascending, descending, or neither)\n   */\n  hasSorting?: boolean;\n  /**\n   * If true, the end user can reorder rows via a drag-and-drop interface\n   */\n  hasRowReordering?: boolean;\n  /**\n   * If true, the search field will include a Search button, rather than\n   * firing on input change.\n   */\n  hasSearchSubmitButton?: boolean;\n  /**\n   * The debounce time, in milliseconds, for the search input firing\n   * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,\n   * this doesn't do anything.\n   */\n  searchDelayTime?: number;\n  /**\n   * Callback that fires when a row (or rows) is selected or unselected.\n   */\n  onChangeRowSelection?: (rowSelection: DataTableRowSelectionState) => void;\n  /**\n   * Callback that fires whenever the table needs to fetch new data, due to changes in\n   * page, results per page, search input, filters, or sorting\n   */\n  getData: ({\n    page,\n    resultsPerPage,\n    search,\n    filters,\n    sort,\n  }: {\n    page?: number;\n    resultsPerPage?: number;\n    search?: string;\n    filters?: DataFilter[];\n    sort?: MRT_SortingState;\n  }) =>\n    | MRT_TableOptions<MRT_RowData>[\"data\"]\n    | Promise<MRT_TableOptions<MRT_RowData>[\"data\"]>;\n  /**\n   * Callback that fires when the user reorders rows within the table. Can be used\n   * to propogate order change to the backend.\n   */\n  onReorderRows?: ({\n    rowId,\n    newRowIndex,\n  }: {\n    rowId: string;\n    newRowIndex: number;\n  }) => void;\n  /**\n   * The current page number.\n   */\n  currentPage?: number;\n  /**\n   * The number of results per page.\n   */\n  resultsPerPage?: number;\n  /**\n   * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n   * set to a simple \"Load more\" button by setting to \"loadMore\".\n   */\n  paginationType?: (typeof paginationTypeValues)[number];\n  /**\n   * Action buttons to display in each row\n   */\n  rowActionButtons?: DataTableRowActionsProps[\"rowActionButtons\"];\n  /**\n   * Menu items to include in the optional actions menu on each row.\n   */\n  rowActionMenuItems?: DataTableRowActionsProps[\"rowActionMenuItems\"];\n};\n\nconst displayColumnDefOptions = {\n  \"mrt-row-actions\": {\n    header: \"\",\n    grow: true,\n    muiTableBodyCellProps: {\n      align: \"right\",\n      sx: {\n        overflow: \"visible\",\n        width: \"unset\",\n      },\n      className: \"ods-actions-cell\",\n    },\n    muiTableHeadCellProps: {\n      align: \"right\",\n      sx: {\n        width: \"unset\",\n      },\n      className: \"ods-actions-cell\",\n    },\n  },\n  \"mrt-row-drag\": {\n    header: \"\",\n    muiTableBodyCellProps: {\n      sx: {\n        minWidth: 0,\n        width: \"auto\",\n      },\n      className: \"ods-drag-handle\",\n    },\n    muiTableHeadCellProps: {\n      sx: {\n        minWidth: 0,\n        width: \"auto\",\n      },\n      children: (\n        // Add a spacer to simulate the width of the drag handle in the column.\n        // Without this, the head cells are offset from their body cell counterparts\n        <Box sx={{ marginInline: \"-0.1rem\" }}>\n          <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />\n        </Box>\n      ),\n    },\n  },\n  \"mrt-row-select\": {\n    muiTableHeadCellProps: {\n      padding: \"checkbox\",\n    },\n    muiTableBodyCellProps: {\n      padding: \"checkbox\",\n    },\n  },\n};\n\nconst DataTable = ({\n  columns,\n  getRowId: getRowIdProp,\n  currentPage = 1,\n  initialDensity = densityValues[0],\n  resultsPerPage = 20,\n  getData,\n  onReorderRows,\n  totalRows,\n  hasSearchSubmitButton,\n  searchDelayTime,\n  paginationType = \"paged\",\n  onChangeRowSelection,\n  rowActionButtons,\n  rowActionMenuItems,\n  hasChangeableDensity,\n  hasColumnResizing,\n  hasColumnVisibility,\n  hasFilters,\n  hasPagination,\n  hasRowReordering,\n  hasRowSelection,\n  hasSearch,\n  hasSorting,\n}: DataTableProps) => {\n  const [data, setData] = useState<MRT_RowData[]>([]);\n  const [pagination, setPagination] = useState({\n    pageIndex: currentPage,\n    pageSize: resultsPerPage,\n  });\n  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();\n\n  // Table states\n  const [columnSorting, setColumnSorting] = useState<MRT_SortingState>([]);\n  const [columnVisibility, setColumnVisibility] =\n    useState<MRT_VisibilityState>();\n  const [rowDensity, setRowDensity] =\n    useState<MRT_DensityState>(initialDensity);\n  const [search, setSearch] = useState<string>(\"\");\n  const [filters, setFilters] = useState<DataFilter[]>();\n\n  const {\n    dragHandleStyles,\n    dragHandleText,\n    draggableTableBodyRowClassName,\n    handleDragHandleKeyDown,\n    handleDragHandleOnDragCapture,\n    handleDragHandleOnDragEnd,\n    resetDraggingAndHoveredRow,\n    updateRowOrder,\n  } = useRowReordering({\n    totalRows,\n    onReorderRows,\n    data,\n    setData,\n    draggingRow,\n    setDraggingRow,\n    resultsPerPage: pagination.pageSize,\n    page: pagination.pageIndex,\n  });\n\n  const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;\n\n  const rowDensityCellClassName = useMemo(() => {\n    return rowDensity === \"spacious\"\n      ? \"MuiTableCell-spacious\"\n      : rowDensity === \"compact\"\n        ? \"MuiTableCell-compact\"\n        : \"MuiTableCell-default\";\n  }, [rowDensity]);\n\n  const renderRowActions = useCallback(\n    ({ row }: { row: MRT_Row<MRT_RowData> }) => {\n      const currentIndex =\n        row.index + (pagination.pageIndex - 1) * pagination.pageSize;\n      return (\n        <DataTableRowActions\n          row={row}\n          rowIndex={currentIndex}\n          rowActionButtons={rowActionButtons}\n          rowActionMenuItems={rowActionMenuItems}\n          totalRows={totalRows}\n          updateRowOrder={\n            hasRowReordering && onReorderRows ? updateRowOrder : undefined\n          }\n        />\n      );\n    },\n    [\n      pagination,\n      rowActionButtons,\n      rowActionMenuItems,\n      hasRowReordering,\n      onReorderRows,\n      totalRows,\n      updateRowOrder,\n    ],\n  );\n\n  const dataTableFilters = useMemo(\n    () =>\n      columns\n        .filter((column) => column.enableColumnFilter !== false)\n        .map((column) => {\n          return {\n            id: column.accessorKey as string,\n            label: column.header,\n            variant: column.filterVariant ?? \"text\",\n            options: column.filterSelectOptions,\n          } as DataFilter;\n        }),\n    [columns],\n  );\n\n  const defaultCell = useCallback(\n    ({ cell }: { cell: MRT_Cell<MRT_RowData> }) => {\n      const value = cell.getValue<string>();\n      return (\n        <Box\n          sx={{\n            whiteSpace: \"nowrap\",\n            textOverflow: \"ellipsis\",\n            overflow: \"hidden\",\n          }}\n        >\n          {value}\n        </Box>\n      );\n    },\n    [],\n  );\n\n  const dataTable = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    getRowId: getRowId,\n    state: {\n      density: rowDensity,\n      sorting: columnSorting,\n      globalFilter: search,\n      columnVisibility,\n    },\n    icons: {\n      ArrowDownwardIcon: ArrowDownIcon,\n      DragHandleIcon: DragIndicatorIcon,\n      SyncAltIcon: ArrowUnsortedIcon,\n    },\n\n    // Base table settings\n    enableColumnActions: false,\n    enableColumnResizing: hasColumnResizing,\n    enableDensityToggle: false,\n    enableFilters: false,\n    enableFullScreenToggle: false,\n    enableGlobalFilter: false,\n    enableHiding: false,\n    enablePagination: false,\n    layoutMode: \"grid-no-grow\",\n    manualFiltering: true,\n    manualSorting: true,\n    muiTablePaperProps: {\n      elevation: 0,\n      sx: {\n        overflow: \"visible\",\n      },\n    },\n    selectAllMode: \"all\",\n    displayColumnDefOptions:\n      displayColumnDefOptions as MRT_TableOptions<MRT_RowData>[\"displayColumnDefOptions\"],\n    muiTableBodyCellProps: () => ({\n      className: rowDensityCellClassName,\n    }),\n    defaultColumn: {\n      Cell: defaultCell,\n    },\n\n    // Reordering\n    enableRowOrdering: hasRowReordering && Boolean(onReorderRows),\n    enableRowDragging: hasRowReordering && Boolean(onReorderRows),\n    muiTableBodyRowProps: ({ table, row }) => ({\n      className: draggableTableBodyRowClassName({\n        currentRowId: row.id,\n        draggingRowId: draggingRow?.id,\n        hoveredRowId: table.getState().hoveredRow?.id,\n      }),\n    }),\n    muiRowDragHandleProps: ({ table, row }) => ({\n      onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),\n      onBlur: () => resetDraggingAndHoveredRow(table),\n      onDragEnd: () => handleDragHandleOnDragEnd(table),\n      onDragCapture: () => handleDragHandleOnDragCapture(table),\n      sx: dragHandleStyles,\n      ...dragHandleText,\n    }),\n\n    // Row actions\n    enableRowActions:\n      (hasRowReordering === true && onReorderRows) ||\n      rowActionButtons ||\n      rowActionMenuItems\n        ? true\n        : false,\n    positionActionsColumn:\n      \"last\" as MRT_TableOptions<MRT_RowData>[\"positionActionsColumn\"],\n    renderRowActions: ({ row }) => renderRowActions({ row }),\n\n    // Row selection\n    enableRowSelection: hasRowSelection,\n\n    // Sorting\n    enableSorting: hasSorting,\n    onSortingChange: setColumnSorting,\n    muiTableHeadCellProps: ({ column: currentColumn }) => ({\n      className: columnSorting.find(\n        (sortedColumn) => sortedColumn.id === currentColumn.id,\n      )\n        ? \"isSorted\"\n        : \"isUnsorted\",\n    }),\n\n    // Virtualization\n    enableRowVirtualization:\n      paginationType === \"loadMore\" || pagination.pageSize > 50,\n    rowVirtualizerInstanceRef:\n      useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null),\n    rowVirtualizerOptions: {\n      overscan: 4,\n    },\n\n    // Filters\n    renderTopToolbar: () => (\n      <Box sx={{ marginBottom: 5 }}>\n        <DataFilters\n          onChangeSearch={hasSearch ? setSearch : undefined}\n          onChangeFilters={hasFilters ? setFilters : undefined}\n          hasSearchSubmitButton={hasSearchSubmitButton}\n          searchDelayTime={searchDelayTime}\n          filters={hasFilters ? dataTableFilters : undefined}\n          additionalActions={\n            <DataTableSettings\n              hasChangeableDensity={hasChangeableDensity}\n              rowDensity={rowDensity}\n              setRowDensity={setRowDensity}\n              hasColumnVisibility={hasColumnVisibility}\n              columns={columns}\n              columnVisibility={columnVisibility}\n              setColumnVisibility={setColumnVisibility}\n            />\n          }\n        />\n      </Box>\n    ),\n\n    // Pagination\n    renderBottomToolbar: hasPagination\n      ? () => (\n          <DataTablePagination\n            paginationType={paginationType}\n            currentNumberOfResults={data.length}\n            currentPage={pagination.pageIndex}\n            isPreviousButtonDisabled={pagination.pageIndex <= 1}\n            isNextButtonDisabled={false} // TODO: Add logic for disabling next/load more button\n            onClickPrevious={() =>\n              setPagination({\n                pageIndex: pagination.pageIndex - 1,\n                pageSize: pagination.pageSize,\n              })\n            }\n            onClickNext={() => {\n              if (paginationType === \"loadMore\") {\n                setPagination({\n                  pageSize: pagination.pageSize,\n                  pageIndex: pagination.pageSize + resultsPerPage,\n                });\n              } else {\n                setPagination({\n                  pageSize: pagination.pageSize,\n                  pageIndex: pagination.pageIndex + 1,\n                });\n              }\n            }}\n          />\n        )\n      : undefined,\n  });\n\n  // Effects\n  useEffect(() => {\n    onChangeRowSelection?.(dataTable.getState().rowSelection);\n  }, [dataTable.getState().rowSelection, dataTable, onChangeRowSelection]);\n\n  useEffect(() => {\n    (async () => {\n      try {\n        const incomingData = await getData?.({\n          page: pagination.pageIndex,\n          resultsPerPage: pagination.pageSize,\n          search,\n          filters,\n          sort: columnSorting,\n        });\n        setData(incomingData);\n      } catch (error) {\n      } finally {\n      }\n    })();\n  }, [pagination, columnSorting, search, filters, getData]);\n\n  // Render the table\n  return <MaterialReactTable table={dataTable} />;\n};\n\nconst MemoizedDataTable = memo(DataTable);\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useMaterialReactTable","MRT_TableContainer","ArrowDownIcon","ArrowUnsortedIcon","DragIndicatorIcon","MoreIcon","densityValues","DataTablePagination","DataFilters","DataTableRowActions","useRowReordering","DataTableSettings","MenuButton","Box","useOdysseyDesignTokens","useScrollIndication","styled","DataTableEmptyState","Callout","t","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","displayColumnDefOptions","header","grow","muiTableBodyCellProps","align","sx","overflow","width","className","muiTableHeadCellProps","minWidth","children","marginInline","opacity","padding","ScrollableTableContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrollableStart","isScrollableEnd","borderBlockEndColor","HueNeutral100","borderBlockEndStyle","borderBlockEndWidth","BorderWidthMain","marginBlockEnd","Spacing4","position","borderInlineStartColor","HueNeutral200","borderInlineStartStyle","borderInlineStartWidth","background","content","pointerEvents","top","left","bottom","Spacing6","zIndex","transition","TransitionDurationMain","TransitionTimingMain","borderInlineEndColor","borderInlineEndStyle","borderInlineEndWidth","right","DataTable","columns","getRowId","getRowIdProp","currentPage","initialDensity","resultsPerPage","getData","onReorderRows","totalRows","hasSearchSubmitButton","searchDelayTime","paginationType","onChangeRowSelection","rowActionButtons","rowActionMenuItems","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSorting","bulkActionMenuItems","errorMessage","errorMessageProp","emptyPlaceholder","noResultsPlaceholder","data","setData","pagination","setPagination","pageIndex","pageSize","draggingRow","setDraggingRow","isTableContainerScrolledToStart","setIsTableContainerScrolledToStart","isTableContainerScrolledToEnd","setIsTableContainerScrolledToEnd","tableInnerContainerWidth","setTableInnerContainerWidth","tableOuterContainerRef","tableInnerContainerRef","tableContentRef","columnSorting","setColumnSorting","columnVisibility","setColumnVisibility","rowDensity","setRowDensity","rowSelection","setRowSelection","search","setSearch","filters","setFilters","initialFilters","setInitialFilters","isLoading","setIsLoading","isEmpty","setIsEmpty","setErrorMessage","tableOuterContainer","current","tableInnerContainer","dragHandleStyles","dragHandleText","draggableTableBodyRowClassName","handleDragHandleKeyDown","handleDragHandleOnDragCapture","handleDragHandleOnDragEnd","resetDraggingAndHoveredRow","updateRowOrder","page","row","id","rowDensityCellClassName","renderRowActions","currentIndex","index","rowIndex","undefined","dataTableFilters","filter","column","enableColumnFilter","map","accessorKey","label","variant","filterVariant","options","filterSelectOptions","defaultCell","cell","value","getValue","whiteSpace","textOverflow","emptyState","noResultsInnerContent","heading","text","emptyStateInnerContent","dataTable","state","density","sorting","globalFilter","icons","ArrowDownwardIcon","DragHandleIcon","SyncAltIcon","enableColumnActions","enableColumnResizing","enableDensityToggle","enableFilters","enableFullScreenToggle","enableGlobalFilter","enableHiding","enablePagination","layoutMode","manualFiltering","manualSorting","muiTablePaperProps","elevation","selectAllMode","defaultColumn","Cell","enableRowOrdering","Boolean","enableRowDragging","muiTableBodyRowProps","table","currentRowId","draggingRowId","hoveredRowId","getState","hoveredRow","muiRowDragHandleProps","onKeyDown","event","onBlur","onDragEnd","onDragCapture","enableRowActions","positionActionsColumn","enableRowSelection","onRowSelectionChange","enableSorting","onSortingChange","currentColumn","find","sortedColumn","enableRowVirtualization","rowVirtualizerInstanceRef","rowVirtualizerOptions","overscan","renderEmptyRowsFallback","muiTableProps","ref","muiTableContainerProps","bulkActionMenuButton","buttonVariant","endIcon","isDisabled","Object","keys","length","ariaLabel","incomingData","sort","error","marginBottom","onChangeSearch","onChangeFilters","additionalActions","severity","MemoizedDataTable","displayName"],"sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  MRT_Cell,\n  MRT_DensityState,\n  MRT_Row,\n  MRT_RowData,\n  MRT_SortingState,\n  MRT_TableOptions,\n  MRT_RowSelectionState,\n  MRT_RowVirtualizer,\n  MRT_VisibilityState,\n  useMaterialReactTable,\n  MRT_TableContainer,\n} from \"material-react-table\";\nimport {\n  ArrowDownIcon,\n  ArrowUnsortedIcon,\n  DragIndicatorIcon,\n  MoreIcon,\n} from \"../icons.generated\";\nimport { densityValues, paginationTypeValues } from \"./constants\";\nimport { DataTablePagination } from \"./DataTablePagination\";\nimport { DataFilter, DataFilters } from \"../labs/DataFilters\";\nimport {\n  DataTableRowActions,\n  DataTableRowActionsProps,\n} from \"./DataTableRowActions\";\nimport { useRowReordering } from \"./useRowReordering\";\nimport { DataTableSettings } from \"./DataTableSettings\";\nimport { MenuButton, MenuButtonProps } from \"../MenuButton\";\nimport { Box } from \"../Box\";\nimport { DataTableRowSelectionState } from \".\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { useScrollIndication } from \"./useScrollIndication\";\nimport styled from \"@emotion/styled\";\nimport { DataTableEmptyState } from \"./DataTableEmptyState\";\nimport { Callout } from \"../Callout\";\nimport { t } from \"i18next\";\n\nexport type DataTableGetDataType = {\n  page?: number;\n  resultsPerPage?: number;\n  search?: string;\n  filters?: DataFilter[];\n  sort?: MRT_SortingState;\n};\n\nexport type DataTableOnReorderRowsType = {\n  rowId: string;\n  newRowIndex: number;\n};\n\nexport type DataTableProps = {\n  /**\n   * The columns that make up the table\n   */\n  columns: MRT_TableOptions<MRT_RowData>[\"columns\"];\n  /**\n   * The total number of rows in the table. Optional, because it's sometimes impossible\n   * to calculate. Used in table pagination to know when to disable the \"next\"/\"more\" button.\n   */\n  totalRows?: number;\n  /**\n   * The function to get the ID of a row\n   */\n  getRowId?: MRT_TableOptions<MRT_RowData>[\"getRowId\"];\n  /**\n   * The initial density (height & padding) of the table rows. This is available even if the\n   * table density isn't changeable by the end user via hasChangeableDensity.\n   */\n  initialDensity?: (typeof densityValues)[number];\n  /**\n   * If true, the end user will be able to change the table density.\n   */\n  hasChangeableDensity?: boolean;\n  /**\n   * If true, the end user can resize individual columns.\n   */\n  hasColumnResizing?: boolean;\n  /**\n   * If true, the end user will be able to show/hide columns.\n   */\n  hasColumnVisibility?: boolean;\n  /**\n   * If true, the end user will be able to filter columns.\n   */\n  hasFilters?: boolean;\n  /**\n   * If true, the table will include pagination controls.\n   */\n  hasPagination?: boolean;\n  /**\n   * If true, the table will include checkboxes on each row, enabling\n   * the user to select some or all rows.\n   */\n  hasRowSelection?: boolean;\n  /**\n   * If true, the global table search controls will be shown.\n   */\n  hasSearch?: boolean;\n  /**\n   * If true, the end user can sort columns (ascending, descending, or neither)\n   */\n  hasSorting?: boolean;\n  /**\n   * If true, the end user can reorder rows via a drag-and-drop interface\n   */\n  hasRowReordering?: boolean;\n  /**\n   * If true, the search field will include a Search button, rather than\n   * firing on input change.\n   */\n  hasSearchSubmitButton?: boolean;\n  /**\n   * The debounce time, in milliseconds, for the search input firing\n   * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,\n   * this doesn't do anything.\n   */\n  searchDelayTime?: number;\n  /**\n   * Callback that fires when a row (or rows) is selected or unselected.\n   */\n  onChangeRowSelection?: (rowSelection: DataTableRowSelectionState) => void;\n  /**\n   * Callback that fires whenever the table needs to fetch new data, due to changes in\n   * page, results per page, search input, filters, or sorting\n   */\n  getData: ({\n    page,\n    resultsPerPage,\n    search,\n    filters,\n    sort,\n  }: DataTableGetDataType) =>\n    | MRT_TableOptions<MRT_RowData>[\"data\"]\n    | Promise<MRT_TableOptions<MRT_RowData>[\"data\"]>;\n  /**\n   * Callback that fires when the user reorders rows within the table. Can be used\n   * to propogate order change to the backend.\n   */\n  onReorderRows?: ({ rowId, newRowIndex }: DataTableOnReorderRowsType) => void;\n  /**\n   * The current page number.\n   */\n  currentPage?: number;\n  /**\n   * The number of results per page.\n   */\n  resultsPerPage?: number;\n  /**\n   * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n   * set to a simple \"Load more\" button by setting to \"loadMore\".\n   */\n  paginationType?: (typeof paginationTypeValues)[number];\n  /**\n   * Action buttons to display in each row\n   */\n  rowActionButtons?: DataTableRowActionsProps[\"rowActionButtons\"];\n  /**\n   * Menu items to include in the optional actions menu on each row.\n   */\n  rowActionMenuItems?: DataTableRowActionsProps[\"rowActionMenuItems\"];\n  /**\n   * Menu items to include in the bulk actions menu, which appears above the table if a row or rows are selected\n   */\n  bulkActionMenuItems?: (\n    selectedRows: MRT_RowSelectionState,\n  ) => MenuButtonProps[\"children\"];\n  /**\n   * If `error` is not undefined, the DataTable will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The component to display when the table is displaying the initial empty state\n   */\n  emptyPlaceholder?: ReactNode;\n  /**\n   * The component to display when the query returns no results\n   */\n  noResultsPlaceholder?: ReactNode;\n};\n\nconst displayColumnDefOptions = {\n  \"mrt-row-actions\": {\n    header: \"\",\n    grow: true,\n    muiTableBodyCellProps: {\n      align: \"right\",\n      sx: {\n        overflow: \"visible\",\n        width: \"unset\",\n      },\n      className: \"ods-actions-cell\",\n    },\n    muiTableHeadCellProps: {\n      align: \"right\",\n      sx: {\n        width: \"unset\",\n      },\n      className: \"ods-actions-cell\",\n    },\n  },\n  \"mrt-row-drag\": {\n    header: \"\",\n    muiTableBodyCellProps: {\n      sx: {\n        minWidth: 0,\n        width: \"auto\",\n      },\n      className: \"ods-drag-handle\",\n    },\n    muiTableHeadCellProps: {\n      sx: {\n        minWidth: 0,\n        width: \"auto\",\n      },\n      children: (\n        // Add a spacer to simulate the width of the drag handle in the column.\n        // Without this, the head cells are offset from their body cell counterparts\n        <Box sx={{ marginInline: \"-0.1rem\" }}>\n          <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />\n        </Box>\n      ),\n    },\n  },\n  \"mrt-row-select\": {\n    muiTableHeadCellProps: {\n      padding: \"checkbox\",\n    },\n    muiTableBodyCellProps: {\n      padding: \"checkbox\",\n    },\n  },\n};\n\nconst ScrollableTableContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isScrollableStart\" &&\n    prop !== \"isScrollableEnd\",\n})(\n  ({\n    odysseyDesignTokens,\n    isScrollableStart,\n    isScrollableEnd,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isScrollableStart: boolean;\n    isScrollableEnd: boolean;\n  }) => ({\n    borderBlockEndColor: odysseyDesignTokens.HueNeutral100,\n    borderBlockEndStyle: \"solid\",\n    borderBlockEndWidth: odysseyDesignTokens.BorderWidthMain,\n    marginBlockEnd: odysseyDesignTokens.Spacing4,\n    position: \"relative\",\n    borderInlineStartColor: isScrollableStart\n      ? odysseyDesignTokens.HueNeutral200\n      : \"transparent\",\n    borderInlineStartStyle: \"solid\",\n    borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,\n    \"::before\": {\n      background:\n        \"linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n      content: '\"\"',\n      opacity: isScrollableStart ? \"0.075\" : \"0\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      bottom: 0,\n      width: odysseyDesignTokens.Spacing6,\n      zIndex: 100,\n      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    },\n    borderInlineEndColor: isScrollableEnd\n      ? odysseyDesignTokens.HueNeutral200\n      : \"transparent\",\n    borderInlineEndStyle: \"solid\",\n    borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,\n    \"::after\": {\n      background:\n        \"linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n      content: '\"\"',\n      opacity: isScrollableEnd ? \"0.075\" : \"0\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      top: 0,\n      right: 0,\n      bottom: 0,\n      width: odysseyDesignTokens.Spacing6,\n      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    },\n  }),\n);\n\nconst DataTable = ({\n  columns,\n  getRowId: getRowIdProp,\n  currentPage = 1,\n  initialDensity = densityValues[0],\n  resultsPerPage = 20,\n  getData,\n  onReorderRows,\n  totalRows,\n  hasSearchSubmitButton,\n  searchDelayTime,\n  paginationType = \"paged\",\n  onChangeRowSelection,\n  rowActionButtons,\n  rowActionMenuItems,\n  hasChangeableDensity,\n  hasColumnResizing,\n  hasColumnVisibility,\n  hasFilters,\n  hasPagination,\n  hasRowReordering,\n  hasRowSelection,\n  hasSearch,\n  hasSorting,\n  bulkActionMenuItems,\n  errorMessage: errorMessageProp,\n  emptyPlaceholder,\n  noResultsPlaceholder,\n}: DataTableProps) => {\n  const [data, setData] = useState<MRT_RowData[]>([]);\n  const [pagination, setPagination] = useState({\n    pageIndex: currentPage,\n    pageSize: resultsPerPage,\n  });\n  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();\n  const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =\n    useState(true);\n  const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =\n    useState(true);\n  const [tableInnerContainerWidth, setTableInnerContainerWidth] =\n    useState<string>(\"100%\");\n  const tableOuterContainerRef = useRef<HTMLDivElement>(null);\n  const tableInnerContainerRef = useRef<HTMLDivElement>(null);\n  const tableContentRef = useRef<HTMLTableElement>(null);\n\n  // Table states\n  const [columnSorting, setColumnSorting] = useState<MRT_SortingState>([]);\n  const [columnVisibility, setColumnVisibility] =\n    useState<MRT_VisibilityState>();\n  const [rowDensity, setRowDensity] =\n    useState<MRT_DensityState>(initialDensity);\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n  const [search, setSearch] = useState<string>(\"\");\n  const [filters, setFilters] = useState<DataFilter[]>();\n  const [initialFilters, setInitialFilters] = useState<DataFilter[]>();\n  const [isLoading, setIsLoading] = useState<boolean | undefined>(true);\n  const [isEmpty, setIsEmpty] = useState<boolean | undefined>();\n  const [errorMessage, setErrorMessage] = useState<string | undefined>(\n    errorMessageProp,\n  );\n\n  useScrollIndication({\n    tableOuterContainer: tableOuterContainerRef.current,\n    tableInnerContainer: tableInnerContainerRef.current,\n    setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,\n    setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,\n    setTableInnerContainerWidth: setTableInnerContainerWidth,\n  });\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const {\n    dragHandleStyles,\n    dragHandleText,\n    draggableTableBodyRowClassName,\n    handleDragHandleKeyDown,\n    handleDragHandleOnDragCapture,\n    handleDragHandleOnDragEnd,\n    resetDraggingAndHoveredRow,\n    updateRowOrder,\n  } = useRowReordering({\n    totalRows,\n    onReorderRows,\n    data,\n    setData,\n    draggingRow,\n    setDraggingRow,\n    resultsPerPage: pagination.pageSize,\n    page: pagination.pageIndex,\n  });\n\n  const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;\n\n  const rowDensityCellClassName = useMemo(() => {\n    return rowDensity === \"spacious\"\n      ? \"MuiTableCell-spacious\"\n      : rowDensity === \"compact\"\n        ? \"MuiTableCell-compact\"\n        : \"MuiTableCell-default\";\n  }, [rowDensity]);\n\n  const renderRowActions = useCallback(\n    ({ row }: { row: MRT_Row<MRT_RowData> }) => {\n      const currentIndex =\n        row.index + (pagination.pageIndex - 1) * pagination.pageSize;\n      return (\n        <DataTableRowActions\n          row={row}\n          rowIndex={currentIndex}\n          rowActionButtons={rowActionButtons}\n          rowActionMenuItems={rowActionMenuItems}\n          totalRows={totalRows}\n          updateRowOrder={\n            hasRowReordering && onReorderRows ? updateRowOrder : undefined\n          }\n        />\n      );\n    },\n    [\n      pagination,\n      rowActionButtons,\n      rowActionMenuItems,\n      hasRowReordering,\n      onReorderRows,\n      totalRows,\n      updateRowOrder,\n    ],\n  );\n\n  const dataTableFilters = useMemo(\n    () =>\n      columns\n        .filter((column) => column.enableColumnFilter !== false)\n        .map((column) => {\n          return {\n            id: column.accessorKey as string,\n            label: column.header,\n            variant: column.filterVariant ?? \"text\",\n            options: column.filterSelectOptions,\n          } as DataFilter;\n        }),\n    [columns],\n  );\n\n  const defaultCell = useCallback(\n    ({ cell }: { cell: MRT_Cell<MRT_RowData> }) => {\n      const value = cell.getValue<string>();\n      return (\n        <Box\n          sx={{\n            whiteSpace: \"nowrap\",\n            textOverflow: \"ellipsis\",\n            overflow: \"hidden\",\n          }}\n        >\n          {value}\n        </Box>\n      );\n    },\n    [],\n  );\n\n  const emptyState = useCallback(() => {\n    const noResultsInnerContent = noResultsPlaceholder || (\n      <DataTableEmptyState\n        heading={t(\"table.noresults.heading\")}\n        text={t(\"table.noresults.text\")}\n      />\n    );\n\n    const emptyStateInnerContent =\n      emptyPlaceholder && isEmpty ? emptyPlaceholder : noResultsInnerContent;\n\n    return (\n      <Box sx={{ width: tableInnerContainerWidth }}>\n        {emptyStateInnerContent}\n      </Box>\n    );\n  }, [\n    tableInnerContainerWidth,\n    emptyPlaceholder,\n    noResultsPlaceholder,\n    isEmpty,\n  ]);\n\n  const dataTable = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    getRowId: getRowId,\n    state: {\n      density: rowDensity,\n      sorting: columnSorting,\n      globalFilter: search,\n      columnVisibility,\n      isLoading,\n      rowSelection,\n    },\n    icons: {\n      ArrowDownwardIcon: ArrowDownIcon,\n      DragHandleIcon: DragIndicatorIcon,\n      SyncAltIcon: ArrowUnsortedIcon,\n    },\n\n    // Base table settings\n    enableColumnActions: false,\n    enableColumnResizing: hasColumnResizing,\n    enableDensityToggle: false,\n    enableFilters: false,\n    enableFullScreenToggle: false,\n    enableGlobalFilter: false,\n    enableHiding: false,\n    enablePagination: false,\n    layoutMode: \"grid-no-grow\",\n    manualFiltering: true,\n    manualSorting: true,\n    muiTablePaperProps: {\n      elevation: 0,\n      sx: {\n        overflow: \"visible\",\n      },\n    },\n    selectAllMode: \"all\",\n    displayColumnDefOptions:\n      displayColumnDefOptions as MRT_TableOptions<MRT_RowData>[\"displayColumnDefOptions\"],\n    muiTableBodyCellProps: () => ({\n      className: rowDensityCellClassName,\n    }),\n    defaultColumn: {\n      Cell: defaultCell,\n    },\n\n    // Reordering\n    enableRowOrdering: hasRowReordering && Boolean(onReorderRows),\n    enableRowDragging: hasRowReordering && Boolean(onReorderRows),\n    muiTableBodyRowProps: ({ table, row }) => ({\n      className: draggableTableBodyRowClassName({\n        currentRowId: row.id,\n        draggingRowId: draggingRow?.id,\n        hoveredRowId: table.getState().hoveredRow?.id,\n      }),\n    }),\n    muiRowDragHandleProps: ({ table, row }) => ({\n      onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),\n      onBlur: () => resetDraggingAndHoveredRow(table),\n      onDragEnd: () => handleDragHandleOnDragEnd(table),\n      onDragCapture: () => handleDragHandleOnDragCapture(table),\n      sx: dragHandleStyles,\n      ...dragHandleText,\n    }),\n\n    // Row actions\n    enableRowActions:\n      (hasRowReordering === true && onReorderRows) ||\n      rowActionButtons ||\n      rowActionMenuItems\n        ? true\n        : false,\n    positionActionsColumn:\n      \"last\" as MRT_TableOptions<MRT_RowData>[\"positionActionsColumn\"],\n    renderRowActions: ({ row }) => renderRowActions({ row }),\n\n    // Row selection\n    enableRowSelection: hasRowSelection,\n    onRowSelectionChange: setRowSelection,\n\n    // Sorting\n    enableSorting: hasSorting,\n    onSortingChange: setColumnSorting,\n    muiTableHeadCellProps: ({ column: currentColumn }) => ({\n      className: columnSorting.find(\n        (sortedColumn) => sortedColumn.id === currentColumn.id,\n      )\n        ? \"isSorted\"\n        : \"isUnsorted\",\n    }),\n\n    // Virtualization\n    enableRowVirtualization:\n      paginationType !== \"loadMore\" && pagination.pageSize > 50,\n    rowVirtualizerInstanceRef:\n      useRef<MRT_RowVirtualizer<HTMLDivElement, HTMLTableRowElement>>(null),\n    rowVirtualizerOptions: {\n      overscan: 4,\n    },\n\n    // States\n    renderEmptyRowsFallback: emptyState,\n\n    // Refs\n    muiTableProps: {\n      ref: tableContentRef,\n    },\n\n    muiTableContainerProps: {\n      ref: tableInnerContainerRef,\n    },\n  });\n\n  // Effects\n  const bulkActionMenuButton = useMemo(\n    () => (\n      <>\n        <MenuButton\n          buttonVariant=\"secondary\"\n          endIcon={<MoreIcon />}\n          isDisabled={Object.keys(rowSelection).length === 0}\n          ariaLabel=\"More actions\"\n        >\n          {bulkActionMenuItems?.(rowSelection)}\n        </MenuButton>\n      </>\n    ),\n    [bulkActionMenuItems, rowSelection],\n  );\n\n  useEffect(() => {\n    (async () => {\n      setIsLoading(true);\n      setErrorMessage(errorMessageProp);\n      try {\n        const incomingData = await getData?.({\n          page: pagination.pageIndex,\n          resultsPerPage: pagination.pageSize,\n          search,\n          filters,\n          sort: columnSorting,\n        });\n        setData(incomingData);\n      } catch (error) {\n        setErrorMessage(typeof error === \"string\" ? error : t(\"table.error\"));\n      } finally {\n        setIsLoading(false);\n      }\n    })();\n  }, [pagination, columnSorting, search, filters, getData, errorMessageProp]);\n\n  useEffect(() => {\n    if (!initialFilters && filters) {\n      setInitialFilters(filters);\n    }\n\n    setIsEmpty(\n      pagination.pageIndex === currentPage &&\n        pagination.pageSize === resultsPerPage &&\n        search === \"\" &&\n        filters === initialFilters &&\n        data.length === 0,\n    );\n  }, [\n    filters,\n    pagination,\n    search,\n    data,\n    currentPage,\n    initialFilters,\n    resultsPerPage,\n  ]);\n\n  useEffect(() => {\n    onChangeRowSelection?.(rowSelection);\n  }, [rowSelection, onChangeRowSelection]);\n\n  // Render the table\n  return (\n    <>\n      {(hasSearch ||\n        hasFilters ||\n        hasChangeableDensity ||\n        hasColumnVisibility ||\n        bulkActionMenuItems) && (\n        <Box sx={{ marginBottom: 5 }}>\n          <DataFilters\n            onChangeSearch={hasSearch ? setSearch : undefined}\n            onChangeFilters={hasFilters ? setFilters : undefined}\n            hasSearchSubmitButton={hasSearchSubmitButton}\n            searchDelayTime={searchDelayTime}\n            filters={hasFilters ? dataTableFilters : undefined}\n            isDisabled={isEmpty}\n            additionalActions={\n              <>\n                <DataTableSettings\n                  hasChangeableDensity={hasChangeableDensity}\n                  rowDensity={rowDensity}\n                  setRowDensity={setRowDensity}\n                  hasColumnVisibility={hasColumnVisibility}\n                  columns={columns}\n                  columnVisibility={columnVisibility}\n                  setColumnVisibility={setColumnVisibility}\n                />\n                {bulkActionMenuItems && bulkActionMenuButton}\n              </>\n            }\n          />\n        </Box>\n      )}\n\n      {errorMessage && (\n        <Box sx={{ marginBlockEnd: 2 }}>\n          <Callout severity=\"error\" text={errorMessage} />\n        </Box>\n      )}\n\n      <ScrollableTableContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isScrollableStart={!isTableContainerScrolledToStart}\n        isScrollableEnd={!isTableContainerScrolledToEnd}\n        ref={tableOuterContainerRef}\n      >\n        <MRT_TableContainer table={dataTable} />\n      </ScrollableTableContainer>\n\n      {hasPagination && (\n        <DataTablePagination\n          pagination={pagination}\n          setPagination={setPagination}\n          totalRows={totalRows}\n          isDisabled={isEmpty}\n          variant={paginationType}\n        />\n      )}\n    </>\n  );\n};\n\nconst MemoizedDataTable = memo(DataTable);\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"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"}

package/dist/DataTable/DataTableEmptyState.js

@@ -0,0 +1,55 @@
+/*!
+ * 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 { Heading4, Paragraph } from "../Typography.js";
+import { Box } from "../Box.js";
+import styled from "@emotion/styled";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const EmptyContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  marginBlock: odysseyDesignTokens.Spacing9,
+  padding: odysseyDesignTokens.Spacing5,
+  textAlign: "center",
+  width: "100%"
+}));
+const DataTableEmptyState = ({
+  heading,
+  text,
+  primaryButton,
+  secondaryButton
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(EmptyContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [_jsx(Heading4, {
+      children: heading
+    }), _jsx(Paragraph, {
+      children: text
+    }), (primaryButton || secondaryButton) && _jsxs(Box, {
+      sx: {
+        marginBlockStart: 5
+      },
+      children: [secondaryButton, primaryButton]
+    })]
+  });
+};
+const MemoizedDataTableEmptyState = memo(DataTableEmptyState);
+export { MemoizedDataTableEmptyState as DataTableEmptyState };
+//# sourceMappingURL=DataTableEmptyState.js.map

package/dist/DataTable/DataTableEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableEmptyState.js","names":["memo","Heading4","Paragraph","Box","styled","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","EmptyContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","marginBlock","Spacing9","padding","Spacing5","textAlign","width","DataTableEmptyState","heading","text","primaryButton","secondaryButton","children","sx","marginBlockStart","MemoizedDataTableEmptyState"],"sources":["../../src/DataTable/DataTableEmptyState.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, memo } from \"react\";\nimport { Heading4, Paragraph } from \"../Typography\";\nimport { Box } from \"../Box\";\nimport styled from \"@emotion/styled\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\n\nconst EmptyContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  marginBlock: odysseyDesignTokens.Spacing9,\n  padding: odysseyDesignTokens.Spacing5,\n  textAlign: \"center\",\n  width: \"100%\",\n}));\n\nexport type DataTableEmptyStateProps = {\n  heading: string;\n  text: string;\n  primaryButton?: ReactNode;\n  secondaryButton?: ReactNode;\n};\n\nconst DataTableEmptyState = ({\n  heading,\n  text,\n  primaryButton,\n  secondaryButton,\n}: DataTableEmptyStateProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  return (\n    <EmptyContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Heading4>{heading}</Heading4>\n      <Paragraph>{text}</Paragraph>\n      {(primaryButton || secondaryButton) && (\n        <Box sx={{ marginBlockStart: 5 }}>\n          {secondaryButton}\n          {primaryButton}\n        </Box>\n      )}\n    </EmptyContainer>\n  );\n};\n\nconst MemoizedDataTableEmptyState = memo(DataTableEmptyState);\nexport { MemoizedDataTableEmptyState as DataTableEmptyState };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,IAAI,QAAQ,OAAO;AAAC,SAC/BC,QAAQ,EAAEC,SAAS;AAAA,SACnBC,GAAG;AACZ,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAEnCC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIxB,MAAMC,cAAc,GAAGN,MAAM,CAAC,KAAK,EAAE;EACnCO,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,WAAW,EAAEH,mBAAmB,CAACI,QAAQ;EACzCC,OAAO,EAAEL,mBAAmB,CAACM,QAAQ;EACrCC,SAAS,EAAE,QAAQ;EACnBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AASH,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,OAAO;EACPC,IAAI;EACJC,aAAa;EACbC;AACwB,CAAC,KAAK;EAC9B,MAAMb,mBAAmB,GAAGR,sBAAsB,CAAC,CAAC;EACpD,OACEI,KAAA,CAACC,cAAc;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAc,QAAA,GACvDpB,IAAA,CAACN,QAAQ;MAAA0B,QAAA,EAAEJ;IAAO,CAAW,CAAC,EAC9BhB,IAAA,CAACL,SAAS;MAAAyB,QAAA,EAAEH;IAAI,CAAY,CAAC,EAC5B,CAACC,aAAa,IAAIC,eAAe,KAChCjB,KAAA,CAACN,GAAG;MAACyB,EAAE,EAAE;QAAEC,gBAAgB,EAAE;MAAE,CAAE;MAAAF,QAAA,GAC9BD,eAAe,EACfD,aAAa;IAAA,CACX,CACN;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAMK,2BAA2B,GAAG9B,IAAI,CAACsB,mBAAmB,CAAC;AAC7D,SAASQ,2BAA2B,IAAIR,mBAAmB"}