@okta/odyssey-react-mui 1.22.0 → 1.24.0

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 05 Sep 2024 19:54:26 GMT
+ * Generated on Wed, 02 Oct 2024 18:57:12 GMT
  */
 
 $border-color-control: #8d8d8d !default;
@@ -46,7 +46,7 @@ $hue-blue-200: #c1c9f6 !default;
 $hue-blue-300: #9daaf1 !default;
 $hue-blue-400: #7286eb !default;
 $hue-blue-500: #546be7 !default;
-$hue-blue-600: #4c64e1 !default;
+$hue-blue-600: #4C64E1 !default;
 $hue-blue-700: #2e40a5 !default;
 $hue-blue-800: #22307c !default;
 $hue-blue-900: #182257 !default;
@@ -80,12 +80,52 @@ $hue-yellow-600: #966603 !default;
 $hue-yellow-700: #664402 !default;
 $hue-yellow-800: #4c3302 !default;
 $hue-yellow-900: #352401 !default;
+$hue-accent-one-50: #F5F2FD !default;
+$hue-accent-one-100: #E4DFF1 !default;
+$hue-accent-one-200: #D2C2FF !default;
+$hue-accent-one-300: #B89FFE !default;
+$hue-accent-one-400: #9777F9 !default;
+$hue-accent-one-500: #8951FB !default;
+$hue-accent-one-600: #6E47C9 !default;
+$hue-accent-one-700: #5227BE !default;
+$hue-accent-one-800: #401895 !default;
+$hue-accent-one-900: #2B0679 !default;
+$hue-accent-two-50: #FCF2E8 !default;
+$hue-accent-two-100: #F7DCD6 !default;
+$hue-accent-two-200: #F2C299 !default;
+$hue-accent-two-300: #ED9B58 !default;
+$hue-accent-two-400: #E06C07 !default;
+$hue-accent-two-500: #C25608 !default;
+$hue-accent-two-600: #964E1E !default;
+$hue-accent-two-700: #964E1E !default;
+$hue-accent-two-800: #50301B !default;
+$hue-accent-two-900: #3E1F09 !default;
+$hue-accent-three-50: #E1F7F7 !default;
+$hue-accent-three-100: #BCEBEA !default;
+$hue-accent-three-200: #89D9D9 !default;
+$hue-accent-three-300: #5CBDBD !default;
+$hue-accent-three-400: #269C9C !default;
+$hue-accent-three-500: #008585 !default;
+$hue-accent-three-600: #1B6C6C !default;
+$hue-accent-three-700: #255157 !default;
+$hue-accent-three-800: #1C3D3D !default;
+$hue-accent-three-900: #12282B !default;
+$hue-accent-four-50: #FFF2E6 !default;
+$hue-accent-four-100: #EBDFCA !default;
+$hue-accent-four-200: #D6C9AD !default;
+$hue-accent-four-300: #C2AB84 !default;
+$hue-accent-four-400: #A18A60 !default;
+$hue-accent-four-500: #87744D !default;
+$hue-accent-four-600: #696803 !default;
+$hue-accent-four-700: #574931 !default;
+$hue-accent-four-800: #403727 !default;
+$hue-accent-four-900: #2E2618 !default;
 $palette-primary-lighter: #f2f3fd !default;
 $palette-primary-light: #9daaf1 !default;
 $palette-primary-main: #546be7 !default;
 $palette-primary-dark: #2e40a5 !default;
 $palette-primary-darker: #22307c !default;
-$palette-primary-text: #4c64e1 !default;
+$palette-primary-text: #4C64E1 !default;
 $palette-primary-heading: #182257 !default;
 $palette-primary-highlight: #dbe0fa !default;
 $palette-danger-lighter: #fff0ee !default;
@@ -137,7 +177,7 @@ $typography-color-inverse: #ffffff !default; // Inverse text color typically use
 $typography-color-support: #4b4b4b !default;
 $typography-color-subordinate: #6e6e6e !default; // Text color for subordinate text like captions
 $typography-color-disabled: #aeaeae !default;
-$typography-color-action: #4c64e1 !default;
+$typography-color-action: #4C64E1 !default;
 $typography-color-danger: #d92300 !default;
 $typography-color-success: #197f48 !default;
 $typography-color-warning: #966603 !default;
@@ -187,6 +227,7 @@ $typography-line-height-heading3: 1.25 !default;
 $typography-line-height-heading2: 1.2 !default;
 $typography-line-height-heading1: 1.2 !default;
 $typography-line-length-max: 55ch !default;
+$typography-letter-spacing-overline: .05em !default;
 
 $ods-tokens: (
   'border': (
@@ -301,6 +342,54 @@ $ods-tokens: (
       '700': $hue-yellow-700,
       '800': $hue-yellow-800,
       '900': $hue-yellow-900
+    ),
+    'accentOne': (
+      '50': $hue-accent-one-50,
+      '100': $hue-accent-one-100,
+      '200': $hue-accent-one-200,
+      '300': $hue-accent-one-300,
+      '400': $hue-accent-one-400,
+      '500': $hue-accent-one-500,
+      '600': $hue-accent-one-600,
+      '700': $hue-accent-one-700,
+      '800': $hue-accent-one-800,
+      '900': $hue-accent-one-900
+    ),
+    'accentTwo': (
+      '50': $hue-accent-two-50,
+      '100': $hue-accent-two-100,
+      '200': $hue-accent-two-200,
+      '300': $hue-accent-two-300,
+      '400': $hue-accent-two-400,
+      '500': $hue-accent-two-500,
+      '600': $hue-accent-two-600,
+      '700': $hue-accent-two-700,
+      '800': $hue-accent-two-800,
+      '900': $hue-accent-two-900
+    ),
+    'accentThree': (
+      '50': $hue-accent-three-50,
+      '100': $hue-accent-three-100,
+      '200': $hue-accent-three-200,
+      '300': $hue-accent-three-300,
+      '400': $hue-accent-three-400,
+      '500': $hue-accent-three-500,
+      '600': $hue-accent-three-600,
+      '700': $hue-accent-three-700,
+      '800': $hue-accent-three-800,
+      '900': $hue-accent-three-900
+    ),
+    'accentFour': (
+      '50': $hue-accent-four-50,
+      '100': $hue-accent-four-100,
+      '200': $hue-accent-four-200,
+      '300': $hue-accent-four-300,
+      '400': $hue-accent-four-400,
+      '500': $hue-accent-four-500,
+      '600': $hue-accent-four-600,
+      '700': $hue-accent-four-700,
+      '800': $hue-accent-four-800,
+      '900': $hue-accent-four-900
     )
   ),
   'palette': (
@@ -452,6 +541,9 @@ $ods-tokens: (
     ),
     'lineLength': (
       'max': $typography-line-length-max
+    ),
+    'letterSpacing': (
+      'overline': $typography-letter-spacing-overline
     )
   )
 );

package/dist/labs/DataView/DataView.js

@@ -20,7 +20,7 @@ import { DataFilters } from "../DataFilters.js";
 import { EmptyState } from "../../EmptyState.js";
 import { fetchData } from "./fetchData.js";
 import { LayoutSwitcher } from "./LayoutSwitcher.js";
-import { MenuButton } from "../../index.js";
+import { MenuButton } from "../../MenuButton.js";
 import { MoreIcon } from "../../icons.generated/index.js";
 import { TableSettings } from "./TableSettings.js";
 import { Pagination, usePagination } from "../../Pagination/index.js";
@@ -28,10 +28,10 @@ import { TableLayoutContent } from "./TableLayoutContent.js";
 import { CardLayoutContent } from "./CardLayoutContent.js";
 import { useFilterConversion } from "./useFilterConversion.js";
 import { useRowReordering } from "../../DataTable/useRowReordering.js";
+import { Typography } from "../../Typography.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import styled from "@emotion/styled";
 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 DataViewContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
@@ -46,9 +46,30 @@ const BulkActionsContainer = styled("div")(() => ({
   display: "flex",
   justifyContent: "space-between"
 }));
-const AdditionalActionsContainer = styled("div")(() => ({
+const AdditionalActionsContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
   display: "flex",
-  justifyContent: "flex-end"
+  justifyContent: "flex-end",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const AdditionalActionsInner = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const MetaTextContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  marginInlineEnd: odysseyDesignTokens.Spacing2
 }));
 const DataView = ({
   additionalActionButton,
@@ -57,6 +78,7 @@ const DataView = ({
   bulkActionMenuItems,
   currentPage = 1,
   emptyPlaceholder,
+  enableVirtualization: enableVirtualizationProp,
   errorMessage: errorMessageProp,
   filters: filtersProp,
   getData,
@@ -73,6 +95,7 @@ const DataView = ({
   isNoResults: isNoResultsProp,
   isPaginationMoreDisabled,
   isRowReorderingDisabled,
+  metaText,
   noResultsPlaceholder,
   onChangeRowSelection,
   onReorderRows,
@@ -83,7 +106,8 @@ const DataView = ({
   tableLayoutOptions,
   totalRows,
   maxPages,
-  maxResultsPerPage
+  maxResultsPerPage,
+  onPaginationChange
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const {
@@ -139,9 +163,12 @@ const DataView = ({
   useEffect(() => {
     setPagination(prev => ({
       pageIndex: 1,
-      pageSize: prev.pageSize
+      pageSize: paginationType == "loadMore" ? resultsPerPage : prev.pageSize
     }));
-  }, [filters, search]);
+  }, [filters, paginationType, resultsPerPage, search]);
+  useEffect(() => {
+    onPaginationChange?.(pagination);
+  }, [onPaginationChange, pagination]);
   useEffect(() => {
     fetchData({
       dataQueryParams,
@@ -177,23 +204,33 @@ const DataView = ({
     }
     return;
   }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);
-  const additionalActions = useMemo(() => _jsxs(_Fragment, {
-    children: [currentLayout === "table" && tableLayoutOptions && _jsx(TableSettings, {
-      setTableState: setTableState,
-      tableLayoutOptions: tableLayoutOptions,
-      tableState: tableState
-    }), availableLayouts.length > 1 && _jsx(LayoutSwitcher, {
-      availableLayouts: availableLayouts,
-      currentLayout: currentLayout,
-      setCurrentLayout: setCurrentLayout
-    }), additionalActionButton, additionalActionMenuItems && _jsx(MenuButton, {
-      endIcon: _jsx(MoreIcon, {}),
-      ariaLabel: t("table.moreactions.arialabel"),
-      buttonVariant: "secondary",
-      menuAlignment: "right",
-      children: additionalActionMenuItems
-    })]
-  }), [currentLayout, tableLayoutOptions, tableState, availableLayouts, additionalActionButton, additionalActionMenuItems, t]);
+  const additionalActions = useMemo(() => {
+    return (metaText || currentLayout === "table" && tableLayoutOptions || availableLayouts.length > 1 || additionalActionButton || additionalActionMenuItems) && _jsxs(AdditionalActionsInner, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [metaText && _jsx(MetaTextContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: _jsx(Typography, {
+          color: "textSecondary",
+          children: metaText
+        })
+      }), currentLayout === "table" && tableLayoutOptions && _jsx(TableSettings, {
+        setTableState: setTableState,
+        tableLayoutOptions: tableLayoutOptions,
+        tableState: tableState
+      }), availableLayouts.length > 1 && _jsx(LayoutSwitcher, {
+        availableLayouts: availableLayouts,
+        currentLayout: currentLayout,
+        setCurrentLayout: setCurrentLayout
+      }), additionalActionButton, additionalActionMenuItems && _jsx(MenuButton, {
+        endIcon: _jsx(MoreIcon, {}),
+        ariaLabel: t("table.moreactions.arialabel"),
+        buttonVariant: "secondary",
+        menuAlignment: "right",
+        children: additionalActionMenuItems
+      })]
+    });
+  }, [additionalActionButton, additionalActionMenuItems, availableLayouts, currentLayout, metaText, odysseyDesignTokens, tableLayoutOptions, tableState, t]);
+  const enableVirtualization = useMemo(() => enableVirtualizationProp ?? paginationType === "loadMore", [enableVirtualizationProp, paginationType]);
   const {
     lastRow: lastRowOnPage
   } = usePagination({
@@ -234,13 +271,15 @@ const DataView = ({
         rowSelection: rowSelection,
         setRowSelection: setRowSelection
       }), !shouldShowFilters && additionalActions]
-    }), !shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && _jsx(AdditionalActionsContainer, {
+    }), !shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && additionalActions && _jsx(AdditionalActionsContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
       children: additionalActions
     }), currentLayout === "table" && tableLayoutOptions && _jsx(TableLayoutContent, {
       columns: tableLayoutOptions.columns,
       data: data,
       draggingRow: draggingRow,
       emptyState: emptyState,
+      enableVirtualization: enableVirtualization,
       getRowId: getRowId,
       hasRowReordering: hasRowReordering,
       hasRowSelection: hasRowSelection,

package/dist/labs/DataView/DataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataView.js","names":["memo","useEffect","useMemo","useState","useTranslation","availableLayouts","allAvailableLayouts","densityValues","Box","BulkActionsMenu","Callout","DataFilters","EmptyState","fetchData","LayoutSwitcher","MenuButton","MoreIcon","TableSettings","Pagination","usePagination","TableLayoutContent","CardLayoutContent","useFilterConversion","useRowReordering","useOdysseyDesignTokens","styled","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DataViewContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","gap","Spacing4","BulkActionsContainer","justifyContent","AdditionalActionsContainer","DataView","additionalActionButton","additionalActionMenuItems","bulkActionMenuItems","currentPage","emptyPlaceholder","errorMessage","errorMessageProp","filters","filtersProp","getData","getRowId","getRowIdProp","hasFilters","hasPagination","hasSearch","hasSearchSubmitButton","hasRowReordering","hasRowSelection","initialLayout","isEmpty","isEmptyProp","isLoading","isLoadingProp","isNoResults","isNoResultsProp","isPaginationMoreDisabled","isRowReorderingDisabled","noResultsPlaceholder","onChangeRowSelection","onReorderRows","paginationType","resultsPerPage","searchDelayTime","cardLayoutOptions","tableLayoutOptions","totalRows","maxPages","maxResultsPerPage","t","currentLayout","setCurrentLayout","data","setData","setIsLoading","setIsEmpty","setIsNoResults","setErrorMessage","search","setSearch","initialFilters","setInitialFilters","setFilters","draggingRow","setDraggingRow","rowSelection","setRowSelection","pagination","setPagination","pageIndex","pageSize","tableState","setTableState","columnSorting","columnVisibility","rowDensity","initialDensity","shouldShowFilters","availableFilters","columns","dataQueryParams","page","sort","row","id","prev","undefined","length","prevValue","emptyState","noResultsInnerContent","description","heading","additionalActions","children","endIcon","ariaLabel","buttonVariant","menuAlignment","lastRow","lastRowOnPage","currentRowsCount","rowReorderingUtilities","severity","text","isDisabled","onChangeFilters","onChangeSearch","menuItems","currentPageLabel","isMoreDisabled","loadMoreLabel","maxPageIndex","maxPageSize","nextLabel","onPaginationChange","previousLabel","rowsPerPageLabel","variant","MemoizedDataView","displayName"],"sources":["../../../src/labs/DataView/DataView.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 { memo, useEffect, useMemo, useState } from \"react\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n} from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  availableLayouts as allAvailableLayouts,\n  densityValues,\n} from \"./constants\";\nimport {\n  DataLayout,\n  UniversalProps,\n  ViewProps,\n  TableState,\n} from \"./componentTypes\";\nimport { Box } from \"../../Box\";\nimport { BulkActionsMenu } from \"./BulkActionsMenu\";\nimport { Callout } from \"../../Callout\";\nimport { DataFilters } from \"../DataFilters\";\nimport { EmptyState } from \"../../EmptyState\";\nimport { fetchData } from \"./fetchData\";\nimport { LayoutSwitcher } from \"./LayoutSwitcher\";\nimport { MenuButton } from \"../..\";\nimport { MoreIcon } from \"../../icons.generated\";\nimport { TableSettings } from \"./TableSettings\";\nimport { Pagination, usePagination } from \"../../Pagination\";\nimport { TableLayoutContent } from \"./TableLayoutContent\";\nimport { CardLayoutContent } from \"./CardLayoutContent\";\nimport { useFilterConversion } from \"./useFilterConversion\";\nimport { useRowReordering } from \"../../DataTable/useRowReordering\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport styled from \"@emotion/styled\";\n\nexport type DataViewProps = UniversalProps & ViewProps<DataLayout>;\n\nconst DataViewContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing4,\n}));\n\nconst BulkActionsContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n}));\n\nconst AdditionalActionsContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  justifyContent: \"flex-end\",\n}));\n\nconst DataView = ({\n  additionalActionButton,\n  additionalActionMenuItems,\n  availableLayouts = allAvailableLayouts,\n  bulkActionMenuItems,\n  currentPage = 1,\n  emptyPlaceholder,\n  errorMessage: errorMessageProp,\n  filters: filtersProp,\n  getData,\n  getRowId: getRowIdProp,\n  hasFilters,\n  hasPagination,\n  hasSearch,\n  hasSearchSubmitButton,\n  hasRowReordering,\n  hasRowSelection,\n  initialLayout,\n  isEmpty: isEmptyProp,\n  isLoading: isLoadingProp,\n  isNoResults: isNoResultsProp,\n  isPaginationMoreDisabled,\n  isRowReorderingDisabled,\n  noResultsPlaceholder,\n  onChangeRowSelection,\n  onReorderRows,\n  paginationType = \"paged\",\n  resultsPerPage = 20,\n  searchDelayTime,\n  cardLayoutOptions,\n  tableLayoutOptions,\n  totalRows,\n  maxPages,\n  maxResultsPerPage,\n}: DataViewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [currentLayout, setCurrentLayout] = useState<DataLayout>(\n    initialLayout ?? availableLayouts[0],\n  );\n\n  const [data, setData] = useState<MRT_RowData[]>([]);\n  const [isLoading, setIsLoading] = useState<boolean>(isLoadingProp ?? true);\n  const [isEmpty, setIsEmpty] = useState<boolean>(isEmptyProp ?? true);\n  const [isNoResults, setIsNoResults] = useState<boolean>(\n    isNoResultsProp ?? false,\n  );\n  const [errorMessage, setErrorMessage] =\n    useState<UniversalProps[\"errorMessage\"]>(errorMessageProp);\n\n  const [search, setSearch] = useState<string>(\"\");\n\n  const [initialFilters, setInitialFilters] =\n    useState<UniversalProps[\"filters\"]>(filtersProp);\n  const [filters, setFilters] =\n    useState<UniversalProps[\"filters\"]>(filtersProp);\n\n  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();\n\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n  useEffect(() => {\n    onChangeRowSelection?.(rowSelection);\n  }, [rowSelection, onChangeRowSelection]);\n\n  const [pagination, setPagination] = useState({\n    pageIndex: currentPage,\n    pageSize: resultsPerPage,\n  });\n\n  const [tableState, setTableState] = useState<TableState>({\n    columnSorting: [],\n    columnVisibility: {},\n    rowDensity: tableLayoutOptions?.initialDensity ?? densityValues[0],\n  });\n\n  const shouldShowFilters =\n    hasSearch ||\n    hasFilters ||\n    additionalActionButton ||\n    additionalActionMenuItems;\n\n  const availableFilters = useFilterConversion({\n    filters: filters,\n    columns: tableLayoutOptions?.columns,\n  });\n\n  useEffect(() => {\n    if (!initialFilters && availableFilters) {\n      setInitialFilters(availableFilters);\n    }\n  }, [availableFilters, initialFilters]);\n\n  const dataQueryParams = useMemo(\n    () => ({\n      page: pagination.pageIndex,\n      resultsPerPage: pagination.pageSize,\n      search,\n      filters: availableFilters,\n      sort: tableState?.columnSorting,\n    }),\n    [\n      pagination.pageIndex,\n      pagination.pageSize,\n      search,\n      availableFilters,\n      tableState?.columnSorting,\n    ],\n  );\n\n  const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;\n\n  // Update pagination state if props change\n  useEffect(() => {\n    setPagination({\n      pageIndex: currentPage,\n      pageSize: resultsPerPage,\n    });\n  }, [currentPage, resultsPerPage]);\n\n  // Reset pagination if search or filters change\n  useEffect(() => {\n    setPagination((prev) => ({\n      pageIndex: 1,\n      pageSize: prev.pageSize,\n    }));\n  }, [filters, search]);\n\n  // Retrieve the data\n  useEffect(() => {\n    fetchData({\n      dataQueryParams,\n      errorMessageProp,\n      getData,\n      setData,\n      setErrorMessage,\n      // Only include setIsLoading if that's not being controlled manually\n      setIsLoading: isLoadingProp ? undefined : setIsLoading,\n    });\n  }, [dataQueryParams, errorMessageProp, getData, isLoadingProp]);\n\n  // When data is updated\n  useEffect(() => {\n    setIsEmpty(\n      pagination.pageIndex === currentPage &&\n        pagination.pageSize === resultsPerPage &&\n        search === \"\" &&\n        filters === initialFilters &&\n        data.length === 0,\n    );\n  }, [\n    currentPage,\n    data,\n    filters,\n    initialFilters,\n    pagination,\n    resultsPerPage,\n    search,\n  ]);\n\n  // Change loading, empty and noResults state on prop change\n  useEffect(() => {\n    setIsLoading((prevValue) => isLoadingProp ?? prevValue);\n  }, [isLoadingProp]);\n\n  useEffect(() => {\n    setIsEmpty((prevValue) => isEmptyProp ?? prevValue);\n  }, [isEmptyProp]);\n\n  useEffect(() => {\n    setIsNoResults((prevValue) => isNoResultsProp ?? prevValue);\n  }, [isNoResultsProp]);\n\n  const emptyState = useMemo(() => {\n    const noResultsInnerContent = noResultsPlaceholder || (\n      <EmptyState\n        description={t(\"table.noresults.text\")}\n        heading={t(\"table.noresults.heading\")}\n      />\n    );\n\n    if (isEmpty) {\n      return emptyPlaceholder || noResultsInnerContent;\n    }\n\n    if (isNoResults) {\n      return noResultsInnerContent;\n    }\n\n    return;\n  }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);\n\n  const additionalActions = useMemo(\n    () => (\n      <>\n        {currentLayout === \"table\" && tableLayoutOptions && (\n          <TableSettings\n            setTableState={setTableState}\n            tableLayoutOptions={tableLayoutOptions}\n            tableState={tableState}\n          />\n        )}\n\n        {availableLayouts.length > 1 && (\n          <LayoutSwitcher\n            availableLayouts={availableLayouts}\n            currentLayout={currentLayout}\n            setCurrentLayout={setCurrentLayout}\n          />\n        )}\n\n        {additionalActionButton}\n\n        {additionalActionMenuItems && (\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel={t(\"table.moreactions.arialabel\")}\n            buttonVariant=\"secondary\"\n            menuAlignment=\"right\"\n          >\n            {additionalActionMenuItems}\n          </MenuButton>\n        )}\n      </>\n    ),\n    [\n      currentLayout,\n      tableLayoutOptions,\n      tableState,\n      availableLayouts,\n      additionalActionButton,\n      additionalActionMenuItems,\n      t,\n    ],\n  );\n\n  const { lastRow: lastRowOnPage } = usePagination({\n    currentRowsCount: data.length,\n    pageIndex: pagination.pageIndex,\n    pageSize: pagination.pageSize,\n    totalRows,\n  });\n\n  const rowReorderingUtilities = useRowReordering({\n    totalRows,\n    onReorderRows,\n    data,\n    setData,\n    draggingRow,\n    setDraggingRow,\n    resultsPerPage: pagination.pageSize,\n    page: pagination.pageIndex,\n  });\n\n  return (\n    <DataViewContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {errorMessage && (\n        <Box>\n          <Callout severity=\"error\" text={errorMessage} />\n        </Box>\n      )}\n\n      {shouldShowFilters && (\n        <DataFilters\n          additionalActions={additionalActions}\n          filters={hasFilters ? availableFilters : undefined}\n          hasSearchSubmitButton={hasSearchSubmitButton}\n          isDisabled={isEmpty}\n          onChangeFilters={hasFilters ? setFilters : undefined}\n          onChangeSearch={hasSearch ? setSearch : undefined}\n          searchDelayTime={searchDelayTime}\n        />\n      )}\n\n      {(bulkActionMenuItems || hasRowSelection) && (\n        <BulkActionsContainer>\n          <BulkActionsMenu\n            data={data}\n            menuItems={bulkActionMenuItems}\n            rowSelection={rowSelection}\n            setRowSelection={setRowSelection}\n          />\n          {!shouldShowFilters && additionalActions}\n        </BulkActionsContainer>\n      )}\n\n      {!shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && (\n        <AdditionalActionsContainer>\n          {additionalActions}\n        </AdditionalActionsContainer>\n      )}\n\n      {currentLayout === \"table\" && tableLayoutOptions && (\n        <TableLayoutContent\n          columns={tableLayoutOptions.columns}\n          data={data}\n          draggingRow={draggingRow}\n          emptyState={emptyState}\n          getRowId={getRowId}\n          hasRowReordering={hasRowReordering}\n          hasRowSelection={hasRowSelection}\n          isEmpty={isEmpty}\n          isLoading={isLoading}\n          isNoResults={isNoResults}\n          isRowReorderingDisabled={isRowReorderingDisabled}\n          onReorderRows={onReorderRows}\n          pagination={pagination}\n          rowReorderingUtilities={rowReorderingUtilities}\n          rowSelection={rowSelection}\n          setRowSelection={setRowSelection}\n          setTableState={setTableState}\n          tableLayoutOptions={tableLayoutOptions}\n          tableState={tableState}\n          totalRows={totalRows}\n        />\n      )}\n      {(currentLayout === \"list\" || currentLayout === \"grid\") &&\n        cardLayoutOptions && (\n          <CardLayoutContent\n            currentLayout={currentLayout}\n            data={data}\n            draggingRow={draggingRow}\n            emptyState={emptyState}\n            getRowId={getRowId}\n            hasRowReordering={hasRowReordering}\n            hasRowSelection={hasRowSelection}\n            isEmpty={isEmpty}\n            isLoading={isLoading}\n            isNoResults={isNoResults}\n            isRowReorderingDisabled={isRowReorderingDisabled}\n            onReorderRows={onReorderRows}\n            pagination={pagination}\n            rowReorderingUtilities={rowReorderingUtilities}\n            rowSelection={rowSelection}\n            setRowSelection={setRowSelection}\n            cardLayoutOptions={cardLayoutOptions}\n            totalRows={totalRows}\n          />\n        )}\n\n      {hasPagination && (\n        <Pagination\n          currentPageLabel={t(\"pagination.page\")}\n          isDisabled={isEmpty}\n          isMoreDisabled={isPaginationMoreDisabled}\n          lastRow={lastRowOnPage}\n          loadMoreLabel={t(\"pagination.loadmore\")}\n          maxPageIndex={maxPages}\n          maxPageSize={maxResultsPerPage}\n          nextLabel={t(\"pagination.next\")}\n          onPaginationChange={setPagination}\n          pageIndex={pagination.pageIndex}\n          pageSize={pagination.pageSize}\n          previousLabel={t(\"pagination.previous\")}\n          rowsPerPageLabel={t(\"pagination.rowsperpage\")}\n          totalRows={totalRows}\n          currentRowsCount={data.length}\n          variant={paginationType}\n        />\n      )}\n    </DataViewContainer>\n  );\n};\n\nconst MemoizedDataView = memo(DataView);\nMemoizedDataView.displayName = \"DataView\";\n\nexport { MemoizedDataView as DataView };\n"],"mappings":"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"}
+{"version":3,"file":"DataView.js","names":["memo","useEffect","useMemo","useState","useTranslation","availableLayouts","allAvailableLayouts","densityValues","Box","BulkActionsMenu","Callout","DataFilters","EmptyState","fetchData","LayoutSwitcher","MenuButton","MoreIcon","TableSettings","Pagination","usePagination","TableLayoutContent","CardLayoutContent","useFilterConversion","useRowReordering","Typography","useOdysseyDesignTokens","styled","jsx","_jsx","jsxs","_jsxs","DataViewContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","gap","Spacing4","BulkActionsContainer","justifyContent","AdditionalActionsContainer","Spacing2","AdditionalActionsInner","alignItems","MetaTextContainer","marginInlineEnd","DataView","additionalActionButton","additionalActionMenuItems","bulkActionMenuItems","currentPage","emptyPlaceholder","enableVirtualization","enableVirtualizationProp","errorMessage","errorMessageProp","filters","filtersProp","getData","getRowId","getRowIdProp","hasFilters","hasPagination","hasSearch","hasSearchSubmitButton","hasRowReordering","hasRowSelection","initialLayout","isEmpty","isEmptyProp","isLoading","isLoadingProp","isNoResults","isNoResultsProp","isPaginationMoreDisabled","isRowReorderingDisabled","metaText","noResultsPlaceholder","onChangeRowSelection","onReorderRows","paginationType","resultsPerPage","searchDelayTime","cardLayoutOptions","tableLayoutOptions","totalRows","maxPages","maxResultsPerPage","onPaginationChange","t","currentLayout","setCurrentLayout","data","setData","setIsLoading","setIsEmpty","setIsNoResults","setErrorMessage","search","setSearch","initialFilters","setInitialFilters","setFilters","draggingRow","setDraggingRow","rowSelection","setRowSelection","pagination","setPagination","pageIndex","pageSize","tableState","setTableState","columnSorting","columnVisibility","rowDensity","initialDensity","shouldShowFilters","availableFilters","columns","dataQueryParams","page","sort","row","id","prev","undefined","length","prevValue","emptyState","noResultsInnerContent","description","heading","additionalActions","children","color","endIcon","ariaLabel","buttonVariant","menuAlignment","lastRow","lastRowOnPage","currentRowsCount","rowReorderingUtilities","severity","text","isDisabled","onChangeFilters","onChangeSearch","menuItems","currentPageLabel","isMoreDisabled","loadMoreLabel","maxPageIndex","maxPageSize","nextLabel","previousLabel","rowsPerPageLabel","variant","MemoizedDataView","displayName"],"sources":["../../../src/labs/DataView/DataView.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 { memo, useEffect, useMemo, useState } from \"react\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n} from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  availableLayouts as allAvailableLayouts,\n  densityValues,\n} from \"./constants\";\nimport {\n  DataLayout,\n  UniversalProps,\n  ViewProps,\n  TableState,\n} from \"./componentTypes\";\nimport { Box } from \"../../Box\";\nimport { BulkActionsMenu } from \"./BulkActionsMenu\";\nimport { Callout } from \"../../Callout\";\nimport { DataFilters } from \"../DataFilters\";\nimport { EmptyState } from \"../../EmptyState\";\nimport { fetchData } from \"./fetchData\";\nimport { LayoutSwitcher } from \"./LayoutSwitcher\";\nimport { MenuButton } from \"../../MenuButton\";\nimport { MoreIcon } from \"../../icons.generated\";\nimport { TableSettings } from \"./TableSettings\";\nimport { Pagination, usePagination } from \"../../Pagination\";\nimport { TableLayoutContent } from \"./TableLayoutContent\";\nimport { CardLayoutContent } from \"./CardLayoutContent\";\nimport { useFilterConversion } from \"./useFilterConversion\";\nimport { useRowReordering } from \"../../DataTable/useRowReordering\";\nimport { Typography } from \"../../Typography\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport styled from \"@emotion/styled\";\n\nexport type DataViewProps = UniversalProps & ViewProps<DataLayout>;\n\nconst DataViewContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing4,\n}));\n\nconst BulkActionsContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n}));\n\nconst AdditionalActionsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  justifyContent: \"flex-end\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst AdditionalActionsInner = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst MetaTextContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  marginInlineEnd: odysseyDesignTokens.Spacing2,\n}));\n\nconst DataView = ({\n  additionalActionButton,\n  additionalActionMenuItems,\n  availableLayouts = allAvailableLayouts,\n  bulkActionMenuItems,\n  currentPage = 1,\n  emptyPlaceholder,\n  enableVirtualization: enableVirtualizationProp,\n  errorMessage: errorMessageProp,\n  filters: filtersProp,\n  getData,\n  getRowId: getRowIdProp,\n  hasFilters,\n  hasPagination,\n  hasSearch,\n  hasSearchSubmitButton,\n  hasRowReordering,\n  hasRowSelection,\n  initialLayout,\n  isEmpty: isEmptyProp,\n  isLoading: isLoadingProp,\n  isNoResults: isNoResultsProp,\n  isPaginationMoreDisabled,\n  isRowReorderingDisabled,\n  metaText,\n  noResultsPlaceholder,\n  onChangeRowSelection,\n  onReorderRows,\n  paginationType = \"paged\",\n  resultsPerPage = 20,\n  searchDelayTime,\n  cardLayoutOptions,\n  tableLayoutOptions,\n  totalRows,\n  maxPages,\n  maxResultsPerPage,\n  onPaginationChange,\n}: DataViewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [currentLayout, setCurrentLayout] = useState<DataLayout>(\n    initialLayout ?? availableLayouts[0],\n  );\n\n  const [data, setData] = useState<MRT_RowData[]>([]);\n  const [isLoading, setIsLoading] = useState<boolean>(isLoadingProp ?? true);\n  const [isEmpty, setIsEmpty] = useState<boolean>(isEmptyProp ?? true);\n  const [isNoResults, setIsNoResults] = useState<boolean>(\n    isNoResultsProp ?? false,\n  );\n  const [errorMessage, setErrorMessage] =\n    useState<UniversalProps[\"errorMessage\"]>(errorMessageProp);\n\n  const [search, setSearch] = useState<string>(\"\");\n\n  const [initialFilters, setInitialFilters] =\n    useState<UniversalProps[\"filters\"]>(filtersProp);\n  const [filters, setFilters] =\n    useState<UniversalProps[\"filters\"]>(filtersProp);\n\n  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();\n\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n  useEffect(() => {\n    onChangeRowSelection?.(rowSelection);\n  }, [rowSelection, onChangeRowSelection]);\n\n  const [pagination, setPagination] = useState({\n    pageIndex: currentPage,\n    pageSize: resultsPerPage,\n  });\n\n  const [tableState, setTableState] = useState<TableState>({\n    columnSorting: [],\n    columnVisibility: {},\n    rowDensity: tableLayoutOptions?.initialDensity ?? densityValues[0],\n  });\n\n  const shouldShowFilters =\n    hasSearch ||\n    hasFilters ||\n    additionalActionButton ||\n    additionalActionMenuItems;\n\n  const availableFilters = useFilterConversion({\n    filters: filters,\n    columns: tableLayoutOptions?.columns,\n  });\n\n  useEffect(() => {\n    if (!initialFilters && availableFilters) {\n      setInitialFilters(availableFilters);\n    }\n  }, [availableFilters, initialFilters]);\n\n  const dataQueryParams = useMemo(\n    () => ({\n      page: pagination.pageIndex,\n      resultsPerPage: pagination.pageSize,\n      search,\n      filters: availableFilters,\n      sort: tableState?.columnSorting,\n    }),\n    [\n      pagination.pageIndex,\n      pagination.pageSize,\n      search,\n      availableFilters,\n      tableState?.columnSorting,\n    ],\n  );\n\n  const getRowId = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;\n\n  // Update pagination state if props change\n  useEffect(() => {\n    setPagination({\n      pageIndex: currentPage,\n      pageSize: resultsPerPage,\n    });\n  }, [currentPage, resultsPerPage]);\n\n  // Reset pagination if search or filters change\n  useEffect(() => {\n    setPagination((prev) => ({\n      pageIndex: 1,\n      pageSize: paginationType == \"loadMore\" ? resultsPerPage : prev.pageSize,\n    }));\n  }, [filters, paginationType, resultsPerPage, search]);\n\n  // Fire onPaginationChange if pagination changes\n  useEffect(() => {\n    onPaginationChange?.(pagination);\n  }, [onPaginationChange, pagination]);\n\n  // Retrieve the data\n  useEffect(() => {\n    fetchData({\n      dataQueryParams,\n      errorMessageProp,\n      getData,\n      setData,\n      setErrorMessage,\n      // Only include setIsLoading if that's not being controlled manually\n      setIsLoading: isLoadingProp ? undefined : setIsLoading,\n    });\n  }, [dataQueryParams, errorMessageProp, getData, isLoadingProp]);\n\n  // When data is updated\n  useEffect(() => {\n    setIsEmpty(\n      pagination.pageIndex === currentPage &&\n        pagination.pageSize === resultsPerPage &&\n        search === \"\" &&\n        filters === initialFilters &&\n        data.length === 0,\n    );\n  }, [\n    currentPage,\n    data,\n    filters,\n    initialFilters,\n    pagination,\n    resultsPerPage,\n    search,\n  ]);\n\n  // Change loading, empty and noResults state on prop change\n  useEffect(() => {\n    setIsLoading((prevValue) => isLoadingProp ?? prevValue);\n  }, [isLoadingProp]);\n\n  useEffect(() => {\n    setIsEmpty((prevValue) => isEmptyProp ?? prevValue);\n  }, [isEmptyProp]);\n\n  useEffect(() => {\n    setIsNoResults((prevValue) => isNoResultsProp ?? prevValue);\n  }, [isNoResultsProp]);\n\n  const emptyState = useMemo(() => {\n    const noResultsInnerContent = noResultsPlaceholder || (\n      <EmptyState\n        description={t(\"table.noresults.text\")}\n        heading={t(\"table.noresults.heading\")}\n      />\n    );\n\n    if (isEmpty) {\n      return emptyPlaceholder || noResultsInnerContent;\n    }\n\n    if (isNoResults) {\n      return noResultsInnerContent;\n    }\n\n    return;\n  }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);\n\n  const additionalActions = useMemo(() => {\n    return (\n      (metaText ||\n        (currentLayout === \"table\" && tableLayoutOptions) ||\n        availableLayouts.length > 1 ||\n        additionalActionButton ||\n        additionalActionMenuItems) && (\n        <AdditionalActionsInner odysseyDesignTokens={odysseyDesignTokens}>\n          {metaText && (\n            <MetaTextContainer odysseyDesignTokens={odysseyDesignTokens}>\n              <Typography color=\"textSecondary\">{metaText}</Typography>\n            </MetaTextContainer>\n          )}\n\n          {currentLayout === \"table\" && tableLayoutOptions && (\n            <TableSettings\n              setTableState={setTableState}\n              tableLayoutOptions={tableLayoutOptions}\n              tableState={tableState}\n            />\n          )}\n\n          {availableLayouts.length > 1 && (\n            <LayoutSwitcher\n              availableLayouts={availableLayouts}\n              currentLayout={currentLayout}\n              setCurrentLayout={setCurrentLayout}\n            />\n          )}\n\n          {additionalActionButton}\n\n          {additionalActionMenuItems && (\n            <MenuButton\n              endIcon={<MoreIcon />}\n              ariaLabel={t(\"table.moreactions.arialabel\")}\n              buttonVariant=\"secondary\"\n              menuAlignment=\"right\"\n            >\n              {additionalActionMenuItems}\n            </MenuButton>\n          )}\n        </AdditionalActionsInner>\n      )\n    );\n  }, [\n    additionalActionButton,\n    additionalActionMenuItems,\n    availableLayouts,\n    currentLayout,\n    metaText,\n    odysseyDesignTokens,\n    tableLayoutOptions,\n    tableState,\n    t,\n  ]);\n\n  const enableVirtualization = useMemo(\n    () => enableVirtualizationProp ?? paginationType === \"loadMore\",\n    [enableVirtualizationProp, paginationType],\n  );\n\n  const { lastRow: lastRowOnPage } = usePagination({\n    currentRowsCount: data.length,\n    pageIndex: pagination.pageIndex,\n    pageSize: pagination.pageSize,\n    totalRows,\n  });\n\n  const rowReorderingUtilities = useRowReordering({\n    totalRows,\n    onReorderRows,\n    data,\n    setData,\n    draggingRow,\n    setDraggingRow,\n    resultsPerPage: pagination.pageSize,\n    page: pagination.pageIndex,\n  });\n\n  return (\n    <DataViewContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {errorMessage && (\n        <Box>\n          <Callout severity=\"error\" text={errorMessage} />\n        </Box>\n      )}\n\n      {shouldShowFilters && (\n        <DataFilters\n          additionalActions={additionalActions}\n          filters={hasFilters ? availableFilters : undefined}\n          hasSearchSubmitButton={hasSearchSubmitButton}\n          isDisabled={isEmpty}\n          onChangeFilters={hasFilters ? setFilters : undefined}\n          onChangeSearch={hasSearch ? setSearch : undefined}\n          searchDelayTime={searchDelayTime}\n        />\n      )}\n\n      {(bulkActionMenuItems || hasRowSelection) && (\n        <BulkActionsContainer>\n          <BulkActionsMenu\n            data={data}\n            menuItems={bulkActionMenuItems}\n            rowSelection={rowSelection}\n            setRowSelection={setRowSelection}\n          />\n          {!shouldShowFilters && additionalActions}\n        </BulkActionsContainer>\n      )}\n\n      {!shouldShowFilters &&\n        !bulkActionMenuItems &&\n        !hasRowSelection &&\n        additionalActions && (\n          <AdditionalActionsContainer odysseyDesignTokens={odysseyDesignTokens}>\n            {additionalActions}\n          </AdditionalActionsContainer>\n        )}\n\n      {currentLayout === \"table\" && tableLayoutOptions && (\n        <TableLayoutContent\n          columns={tableLayoutOptions.columns}\n          data={data}\n          draggingRow={draggingRow}\n          emptyState={emptyState}\n          enableVirtualization={enableVirtualization}\n          getRowId={getRowId}\n          hasRowReordering={hasRowReordering}\n          hasRowSelection={hasRowSelection}\n          isEmpty={isEmpty}\n          isLoading={isLoading}\n          isNoResults={isNoResults}\n          isRowReorderingDisabled={isRowReorderingDisabled}\n          onReorderRows={onReorderRows}\n          pagination={pagination}\n          rowReorderingUtilities={rowReorderingUtilities}\n          rowSelection={rowSelection}\n          setRowSelection={setRowSelection}\n          setTableState={setTableState}\n          tableLayoutOptions={tableLayoutOptions}\n          tableState={tableState}\n          totalRows={totalRows}\n        />\n      )}\n      {(currentLayout === \"list\" || currentLayout === \"grid\") &&\n        cardLayoutOptions && (\n          <CardLayoutContent\n            currentLayout={currentLayout}\n            data={data}\n            draggingRow={draggingRow}\n            emptyState={emptyState}\n            getRowId={getRowId}\n            hasRowReordering={hasRowReordering}\n            hasRowSelection={hasRowSelection}\n            isEmpty={isEmpty}\n            isLoading={isLoading}\n            isNoResults={isNoResults}\n            isRowReorderingDisabled={isRowReorderingDisabled}\n            onReorderRows={onReorderRows}\n            pagination={pagination}\n            rowReorderingUtilities={rowReorderingUtilities}\n            rowSelection={rowSelection}\n            setRowSelection={setRowSelection}\n            cardLayoutOptions={cardLayoutOptions}\n            totalRows={totalRows}\n          />\n        )}\n\n      {hasPagination && (\n        <Pagination\n          currentPageLabel={t(\"pagination.page\")}\n          isDisabled={isEmpty}\n          isMoreDisabled={isPaginationMoreDisabled}\n          lastRow={lastRowOnPage}\n          loadMoreLabel={t(\"pagination.loadmore\")}\n          maxPageIndex={maxPages}\n          maxPageSize={maxResultsPerPage}\n          nextLabel={t(\"pagination.next\")}\n          onPaginationChange={setPagination}\n          pageIndex={pagination.pageIndex}\n          pageSize={pagination.pageSize}\n          previousLabel={t(\"pagination.previous\")}\n          rowsPerPageLabel={t(\"pagination.rowsperpage\")}\n          totalRows={totalRows}\n          currentRowsCount={data.length}\n          variant={paginationType}\n        />\n      )}\n    </DataViewContainer>\n  );\n};\n\nconst MemoizedDataView = memo(DataView);\nMemoizedDataView.displayName = \"DataView\";\n\nexport { MemoizedDataView as DataView };\n"],"mappings":"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"}

package/dist/labs/DataView/TableLayoutContent.js

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useMemo, useRef, useState, useEffect } from "react";
 import styled from "@emotion/styled";
 import { MRT_TableContainer, useMaterialReactTable } from "material-react-table";
 import { useTranslation } from "react-i18next";
@@ -38,6 +38,7 @@ const TableLayoutContent = ({
   data,
   draggingRow,
   emptyState,
+  enableVirtualization,
   getRowId,
   hasRowReordering,
   hasRowSelection,
@@ -58,6 +59,7 @@ const TableLayoutContent = ({
   const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] = useState(true);
   const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] = useState(true);
   const [tableInnerContainerWidth, setTableInnerContainerWidth] = useState("100%");
+  const shouldUpdateScroll = useRef(false);
   const tableOuterContainerRef = useRef(null);
   const tableInnerContainerRef = useRef(null);
   const tableContentRef = useRef(null);
@@ -127,6 +129,17 @@ const TableLayoutContent = ({
     sx: innerWidthStyle,
     children: emptyState
   }), [innerWidthStyle, emptyState]);
+  useEffect(() => {
+    if (enableVirtualization) {
+      shouldUpdateScroll.current = true;
+    }
+  }, [enableVirtualization, pagination]);
+  useEffect(() => {
+    if (shouldUpdateScroll.current && tableContentRef.current && typeof tableInnerContainerRef.current?.scrollTo !== "undefined") {
+      tableInnerContainerRef.current?.scrollTo(0, tableContentRef.current.clientHeight);
+      shouldUpdateScroll.current = false;
+    }
+  }, [data]);
   const shouldDisplayRowActions = useMemo(() => hasRowReordering === true && onReorderRows || tableLayoutOptions.rowActionButtons || tableLayoutOptions.rowActionMenuItems ? true : false, [hasRowReordering, onReorderRows, tableLayoutOptions.rowActionButtons, tableLayoutOptions.rowActionMenuItems]);
   const dataTable = useMaterialReactTable({
     data: !isEmpty && !isNoResults ? data : [],
@@ -193,7 +206,8 @@ const TableLayoutContent = ({
       ref: tableInnerContainerRef
     },
     muiTableBodyProps: () => ({
-      className: rowDensityClassName
+      className: rowDensityClassName,
+      tabIndex: enableVirtualization ? 0 : undefined
     }),
     enableColumnResizing: tableLayoutOptions.hasColumnResizing,
     defaultColumn: {
@@ -249,7 +263,7 @@ const TableLayoutContent = ({
       ...dragHandleText
     }),
     renderDetailPanel: tableLayoutOptions.renderDetailPanel,
-    enableRowVirtualization: data.length >= 50,
+    enableRowVirtualization: enableVirtualization,
     muiTableHeadCellProps: ({
       column: currentColumn
     }) => ({