@servicetitan/anvil2 1.48.0 → 1.49.0

package/dist/{DataTable-BHI2ONJ-.js → DataTable-BkNCMaVu.js}

@@ -1,38 +1,50 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { C as Chip } from './Chip-BGa1Inb8.js';
-import { F as Flex } from './Flex-GLF5XRJg.js';
+import { C as Chip } from './Chip-X2EwdZ97.js';
+import { F as Flex } from './Flex-CjPHUTeq.js';
 import * as React from 'react';
 import { useRef, useState, useLayoutEffect, createContext, useContext, forwardRef, useCallback, useMemo, useEffect, memo as memo$1, Fragment as Fragment$1 } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { C as Checkbox } from './Checkbox-BJnt8TFk.js';
-import { B as Button } from './Button-DzcOa6iJ.js';
+import { C as Checkbox } from './Checkbox-C5Qjq_tU.js';
+import { B as Button } from './Button-92_FKAyV.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
-import { I as Icon } from './Icon-TcJbUdTz.js';
+import { I as Icon } from './Icon-BSuTVNaa.js';
 import { S as SrOnly } from './SrOnly-CTsYSuby.js';
-import { M as Menu } from './Menu-CBbUK_sX.js';
-import { P as Popover } from './Popover--c9PXAVi.js';
-import { S as SearchField } from './SearchField-DLqva3o3.js';
-import { L as ListView } from './ListView-kfwvU4Z-.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-C7FVYB8F.js';
+import { M as Menu } from './Menu-DUAfSImY.js';
+import { P as Popover } from './Popover-CIPg_ZgX.js';
+import { S as SearchField } from './SearchField-DrgNbG3I.js';
+import { L as ListView } from './ListView-CZ5T8bR1.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
+import './anvil-fonts.css';import './DataTable.css';/* empty css                     */
+import { P as Pagination } from './Pagination-BHEEnNas.js';
+import { S as Spinner } from './Spinner-xEFwsq8_.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 
-import './DataTable.css';const styles$d = {
-	"table-header-cell": "_table-header-cell_nr4wx_2",
-	"table-body-cell": "_table-body-cell_nr4wx_3",
-	"table-footer-cell": "_table-footer-cell_nr4wx_4",
-	"last-pinned-left-column": "_last-pinned-left-column_nr4wx_33",
-	"first-pinned-right-column": "_first-pinned-right-column_nr4wx_33",
-	"empty-cell": "_empty-cell_nr4wx_54",
-	"table-cell-internal-select": "_table-cell-internal-select_nr4wx_71",
-	"table-cell-internal-expand": "_table-cell-internal-expand_nr4wx_72",
-	"table-header-cell-group": "_table-header-cell-group_nr4wx_83",
-	"table-header-cell-sortable": "_table-header-cell-sortable_nr4wx_92"};
+function createColumnHelper$1() {
+  return function createColumn(id, column) {
+    if (typeof id === "object" && "group" in id) {
+      return { id: id.group, ...column };
+    }
+    return { id, ...column };
+  };
+}
+
+const styles$e = {
+	"table-header-cell": "_table-header-cell_1ffr7_2",
+	"table-body-cell": "_table-body-cell_1ffr7_3",
+	"table-footer-cell": "_table-footer-cell_1ffr7_4",
+	"last-pinned-left-column": "_last-pinned-left-column_1ffr7_33",
+	"first-pinned-right-column": "_first-pinned-right-column_1ffr7_33",
+	"empty-cell": "_empty-cell_1ffr7_54",
+	"table-cell-internal-select": "_table-cell-internal-select_1ffr7_71",
+	"table-cell-internal-expand": "_table-cell-internal-expand_1ffr7_72",
+	"table-header-cell-group": "_table-header-cell-group_1ffr7_91",
+	"table-header-cell-sortable": "_table-header-cell-sortable_1ffr7_100"};
 
 const TableEmptyCellContent = () => {
-  return /* @__PURE__ */ jsx("span", { "aria-label": "empty table cell", className: styles$d["empty-cell"], children: "—" });
+  return /* @__PURE__ */ jsx("span", { "aria-label": "empty table cell", className: styles$e["empty-cell"], children: "—" });
 };
 
-const styles$c = {
+const styles$d = {
 	"truncate-chips": "_truncate-chips_1lgyk_2"
 };
 
@@ -118,7 +130,7 @@ const TruncateChips = ({
     "div",
     {
       ref: containerRef,
-      className: cx(styles$c["truncate-chips"], className),
+      className: cx(styles$d["truncate-chips"], className),
       style: {
         marginInlineEnd: plusChipWidth
       },
@@ -3472,7 +3484,7 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
-const styles$b = {
+const styles$c = {
 	"table-base": "_table-base_wtnhx_2"
 };
 
@@ -3481,7 +3493,7 @@ const SimpleTableBase = ({
   className,
   ...rest
 }) => {
-  const tableBaseClassNames = cx(className, styles$b["table-base"]);
+  const tableBaseClassNames = cx(className, styles$c["table-base"]);
   return /* @__PURE__ */ jsx(
     "table",
     {
@@ -3500,7 +3512,7 @@ const DataTableBase = ({
   hasSubRows,
   ...rest
 }) => {
-  const tableBaseClassNames = cx(className, styles$b["table-base"]);
+  const tableBaseClassNames = cx(className, styles$c["table-base"]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3546,19 +3558,19 @@ const getCommonPinningClasses = (column) => {
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   if (isLastLeftPinnedColumn) {
-    return styles$d["last-pinned-left-column"];
+    return styles$e["last-pinned-left-column"];
   }
   if (isFirstRightPinnedColumn) {
-    return styles$d["first-pinned-right-column"];
+    return styles$e["first-pinned-right-column"];
   }
 };
 
-const styles$a = {
-	"table-body": "_table-body_1kprt_2"
+const styles$b = {
+	"table-body": "_table-body_zs2gj_2"
 };
 
 function TableBody({ type, children, ...rest }) {
-  const classes = cx(styles$a["table-body"], rest.className);
+  const classes = cx(styles$b["table-body"], rest.className);
   const Element = type === "simple" ? "tbody" : "div";
   return /* @__PURE__ */ jsx(
     Element,
@@ -3586,9 +3598,9 @@ function useDataTableContext() {
 }
 
 const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isSelectCell, ...rest }, ref) => {
-  const classes = cx(styles$d["table-body-cell"], className, {
-    [styles$d["table-cell-internal-expand"]]: isExpandCell,
-    [styles$d["table-cell-internal-select"]]: isSelectCell
+  const classes = cx(styles$e["table-body-cell"], className, {
+    [styles$e["table-cell-internal-expand"]]: isExpandCell,
+    [styles$e["table-cell-internal-select"]]: isSelectCell
   });
   const CellElement = type === "simple" ? "td" : "div";
   return /* @__PURE__ */ jsx(
@@ -3607,12 +3619,12 @@ TableBodyCell.displayName = "TableBodyCell";
 
 const SvgEdit = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }));
 
-const styles$9 = {
-	"data-table-body-cell-input": "_data-table-body-cell-input_q4fkq_2",
-	"data-table-body-cell-select-trigger": "_data-table-body-cell-select-trigger_q4fkq_3",
-	"data-table-body-select-cell": "_data-table-body-select-cell_q4fkq_34",
-	"data-table-body-cell-editable": "_data-table-body-cell-editable_q4fkq_52",
-	"data-table-body-cell-edit-icon": "_data-table-body-cell-edit-icon_q4fkq_52"
+const styles$a = {
+	"data-table-body-cell-input": "_data-table-body-cell-input_b0det_2",
+	"data-table-body-cell-select-trigger": "_data-table-body-cell-select-trigger_b0det_3",
+	"data-table-body-select-cell": "_data-table-body-select-cell_b0det_34",
+	"data-table-body-cell-editable": "_data-table-body-cell-editable_b0det_52",
+	"data-table-body-cell-edit-icon": "_data-table-body-cell-edit-icon_b0det_52"
 };
 
 const DataTableEditableCellEditIcon = () => {
@@ -3622,7 +3634,7 @@ const DataTableEditableCellEditIcon = () => {
       svg: SvgEdit,
       size: "small",
       color: "subtle",
-      className: styles$9["data-table-body-cell-edit-icon"],
+      className: styles$a["data-table-body-cell-edit-icon"],
       "aria-label": "Edit cell value"
     }
   );
@@ -3729,7 +3741,7 @@ const useEditCell = ({
   return returnValue;
 };
 
-const styles$8 = {
+const styles$9 = {
 	"data-table-body-cell": "_data-table-body-cell_1ub1i_2",
 	"data-table-body-cell-editing": "_data-table-body-cell-editing_1ub1i_32",
 	"data-table-header-cell": "_data-table-header-cell_1ub1i_33",
@@ -3764,8 +3776,8 @@ const DataTableEditableTextCell = ({
       inputRef.current?.focus();
     }
   }, [isEditing]);
-  const classes = cx(className, styles$9["data-table-body-cell-editable"], {
-    [styles$8["data-table-body-cell-editing"]]: isEditing
+  const classes = cx(className, styles$a["data-table-body-cell-editable"], {
+    [styles$9["data-table-body-cell-editing"]]: isEditing
   });
   return /* @__PURE__ */ jsxs(
     TableBodyCell,
@@ -3779,7 +3791,7 @@ const DataTableEditableTextCell = ({
           "input",
           {
             type: "text",
-            className: styles$9["data-table-body-cell-input"],
+            className: styles$a["data-table-body-cell-input"],
             ref: inputRef,
             value: editValue,
             onChange: handleChange,
@@ -3819,10 +3831,10 @@ const DataTableEditableSelectCell = ({
   });
   const { className, ...restCellProps } = cellProps;
   const cellClasses = cx(
-    styles$9["data-table-body-cell-editable"],
-    styles$9["data-table-body-select-cell"],
+    styles$a["data-table-body-cell-editable"],
+    styles$a["data-table-body-select-cell"],
     className,
-    { [styles$8["data-table-body-cell-editing"]]: isEditing }
+    { [styles$9["data-table-body-cell-editing"]]: isEditing }
   );
   const handleKeyDown = (e, triggerFn) => {
     if (e.key === "ArrowDown" && !isEditing) {
@@ -3855,7 +3867,7 @@ const DataTableEditableSelectCell = ({
                   {
                     ...rest,
                     ref: triggerRef,
-                    className: styles$9["data-table-body-cell-select-trigger"],
+                    className: styles$a["data-table-body-cell-select-trigger"],
                     onKeyDown: (e) => handleKeyDown(e, () => triggerOnKeyDown?.(e)),
                     children
                   }
@@ -3916,8 +3928,8 @@ const DataTableEditableMultiselectCell = ({
   const [searchValue, setSearchValue] = useState("");
   const listViewRef = useRef(null);
   const { className, ...restCellProps } = cellProps;
-  const cellClasses = cx(styles$9["data-table-body-select-cell"], className, {
-    [styles$8["data-table-body-cell-editing"]]: isEditing
+  const cellClasses = cx(styles$a["data-table-body-select-cell"], className, {
+    [styles$9["data-table-body-cell-editing"]]: isEditing
   });
   const selectedValues = options.filter(
     (item) => editValue.includes(item.value)
@@ -4016,7 +4028,7 @@ const DataTableEditableMultiselectCell = ({
                   {
                     ...rest,
                     ref: popoverRef,
-                    className: styles$9["data-table-body-cell-select-trigger"],
+                    className: styles$a["data-table-body-cell-select-trigger"],
                     onKeyDown: (e) => handleTriggerKeyDown(e, () => triggerOnKeyDown?.(e)),
                     children
                   }
@@ -4088,8 +4100,8 @@ function DataTableBodyCellElement(props) {
     }
   }, [tableContext, cellPosition, isEditable]);
   const tabIndex = tableContext.getCellTabIndex(cellPosition);
-  const classes = cx(styles$8["data-table-body-cell"], rest.className, {
-    [styles$8["data-table-body-cell-hovered"]]: tableContext?.hoveredColumnId === columnId
+  const classes = cx(styles$9["data-table-body-cell"], rest.className, {
+    [styles$9["data-table-body-cell-hovered"]]: tableContext?.hoveredColumnId === columnId
   });
   const commonCellProps = {
     type: "data-table",
@@ -4144,7 +4156,7 @@ function DataTableBodyCellElement(props) {
 }
 const DataTableBodyCell = memo$1(DataTableBodyCellElement);
 
-const styles$7 = {
+const styles$8 = {
 	"data-table-body-row": "_data-table-body-row_1vs3r_2",
 	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_1vs3r_20",
 	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_1vs3r_25",
@@ -4163,11 +4175,11 @@ const DataTableBodyContent = ({
         "aria-rowindex": sortedIndex + table.getHeaderGroups().length + 1,
         "aria-expanded": hasSubRows && row.getCanExpand() ? row.getIsExpanded() : void 0,
         "aria-level": hasSubRows && (row.getCanExpand() || row.getParentRow()?.getCanExpand()) ? row.depth + 1 : void 0,
-        className: styles$7["data-table-body-row"],
+        className: styles$8["data-table-body-row"],
         children: row.getVisibleCells().map((cell) => {
           const isLastInParentGroup = cell.column.parent ? cell.column.parent.getLeafColumns().slice(-1)[0] === cell.column : false;
           const cellClasses = cx(getCommonPinningClasses(cell.column), {
-            [styles$7["data-table-body-cell-group"]]: "columns" in cell.column.columnDef || cell.column.parent && isLastInParentGroup
+            [styles$8["data-table-body-cell-group"]]: "columns" in cell.column.columnDef || cell.column.parent && isLastInParentGroup
           });
           return /* @__PURE__ */ jsx(
             DataTableBodyCell,
@@ -4202,8 +4214,8 @@ const DataTableBodyContent = ({
       {
         id: `${row.id}-sub-component`,
         "aria-hidden": !row.getIsExpanded(),
-        className: styles$7["data-table-body-row"],
-        children: /* @__PURE__ */ jsx("div", { className: styles$7["data-table-body-sub-component-container"], children: /* @__PURE__ */ jsx(Flex, { className: styles$7["data-table-body-sub-component-content"], children: row.original.subComponent }) })
+        className: styles$8["data-table-body-row"],
+        children: /* @__PURE__ */ jsx("div", { className: styles$8["data-table-body-sub-component-container"], children: /* @__PURE__ */ jsx(Flex, { className: styles$8["data-table-body-sub-component-content"], children: row.original.subComponent }) })
       }
     )
   ] }, row.id));
@@ -4225,11 +4237,11 @@ const getColSpanWidth = (colSpan, cellIndex) => {
   return minWidth;
 };
 
-const styles$6 = {
-	"table-footer": "_table-footer_ecfhk_2"};
+const styles$7 = {
+	"table-footer": "_table-footer_hq77m_2"};
 
 function TableFooter({ type, children, ...rest }) {
-  const classes = cx(styles$6["table-footer"], rest.className);
+  const classes = cx(styles$7["table-footer"], rest.className);
   const Element = type === "simple" ? "tfoot" : "div";
   return /* @__PURE__ */ jsx(
     Element,
@@ -4244,7 +4256,7 @@ function TableFooter({ type, children, ...rest }) {
 
 const TableFooterCell = forwardRef((props, ref) => {
   const { type, children, className, ...rest } = props;
-  const classes = cx(styles$d["table-footer-cell"], className);
+  const classes = cx(styles$e["table-footer-cell"], className);
   const CellElement = type === "simple" ? "td" : "div";
   return /* @__PURE__ */ jsx(
     CellElement,
@@ -4291,13 +4303,13 @@ function DataTableFooterCell(props) {
       ref: footerCellRef,
       tabIndex,
       onFocus: handleFocus,
-      className: cx(styles$8["data-table-footer-cell"], className),
+      className: cx(styles$9["data-table-footer-cell"], className),
       children
     }
   );
 }
 
-const styles$5 = {
+const styles$6 = {
 	"data-table-footer-row": "_data-table-footer-row_1nmuq_2",
 	"data-table-footer": "_data-table-footer_1nmuq_2"
 };
@@ -4345,7 +4357,7 @@ function DefaultTableFooterRows({
     {
       role: "row",
       "data-anv": "table-footer-row",
-      className: styles$5["data-table-footer-row"],
+      className: styles$6["data-table-footer-row"],
       "aria-rowindex": rowIndex + table.getHeaderGroups().length + table.getRowModel().rows.length + 1,
       children: table.getFlatHeaders().filter((header) => {
         const column = findColumnById(columns, header.column.id);
@@ -4390,7 +4402,7 @@ function CustomTableFooterRows({
       {
         role: "row",
         "data-anv": "table-footer-row",
-        className: styles$5["data-table-footer-row"],
+        className: styles$6["data-table-footer-row"],
         "aria-rowindex": rowIndex + table.getHeaderGroups().length + table.getRowModel().rows.length + 1,
         children: (() => {
           let currentColumnIndex = 0;
@@ -4438,7 +4450,7 @@ function DataTableFooter({
   ...rest
 }) {
   const columnCount = table.getFlatHeaders().length;
-  const classes = cx(styles$5["data-table-footer"], rest.className);
+  const classes = cx(styles$6["data-table-footer"], rest.className);
   return /* @__PURE__ */ jsx(TableFooter, { type: "data-table", ...rest, className: classes, children: customFooter ? /* @__PURE__ */ jsx(
     CustomTableFooterRows,
     {
@@ -5070,12 +5082,12 @@ const SvgArrowUpward = (props) => /* @__PURE__ */ React.createElement("svg", { x
 
 const SvgArrowDownward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1z" }));
 
-const styles$4 = {
+const styles$5 = {
 	"table-header": "_table-header_1pe38_2"
 };
 
 function TableHeader({ type, children, ...rest }) {
-  const classes = cx(styles$4["table-header"], rest.className);
+  const classes = cx(styles$5["table-header"], rest.className);
   const Element = type === "simple" ? "thead" : "div";
   return /* @__PURE__ */ jsx(
     Element,
@@ -5099,11 +5111,11 @@ const TableHeaderCell = forwardRef(
     isExpandCell,
     ...rest
   }, ref) => {
-    const classes = cx(styles$d["table-header-cell"], className, {
-      [styles$d["table-header-cell-group"]]: isGroup,
-      [styles$d["table-header-cell-sortable"]]: isSortable,
-      [styles$d["table-cell-internal-expand"]]: isExpandCell,
-      [styles$d["table-cell-internal-select"]]: isSelectCell
+    const classes = cx(styles$e["table-header-cell"], className, {
+      [styles$e["table-header-cell-group"]]: isGroup,
+      [styles$e["table-header-cell-sortable"]]: isSortable,
+      [styles$e["table-cell-internal-expand"]]: isExpandCell,
+      [styles$e["table-cell-internal-select"]]: isSelectCell
     });
     const CellElement = type === "simple" ? "th" : "div";
     return /* @__PURE__ */ jsx(
@@ -5170,7 +5182,7 @@ function DataTableHeaderCell(props) {
       tabIndex,
       onFocus: handleFocus,
       onClick: handleClick,
-      className: cx(styles$8["data-table-header-cell"], className),
+      className: cx(styles$9["data-table-header-cell"], className),
       "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : void 0,
       children: [
         children,
@@ -5185,14 +5197,14 @@ function DataTableHeaderCell(props) {
 }
 
 const resizing = "_resizing_spw3o_35";
-const styles$3 = {
+const styles$4 = {
 	"resize-handle": "_resize-handle_spw3o_2",
 	resizing: resizing
 };
 
 function ResizeHandle({ header }) {
-  const classes = cx(styles$3["resize-handle"], {
-    [styles$3["resizing"]]: header.column.getIsResizing()
+  const classes = cx(styles$4["resize-handle"], {
+    [styles$4["resizing"]]: header.column.getIsResizing()
   });
   return /* @__PURE__ */ jsx(
     "div",
@@ -5210,7 +5222,7 @@ function ResizeHandle({ header }) {
   );
 }
 
-const styles$2 = {
+const styles$3 = {
 	"data-table-header-row": "_data-table-header-row_blxpc_17"
 };
 
@@ -5219,7 +5231,7 @@ function DataTableHeader({ table }) {
   return /* @__PURE__ */ jsx(TableHeader, { type: "data-table", children: table.getHeaderGroups().map((headerGroup, index) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$2["data-table-header-row"],
+      className: styles$3["data-table-header-row"],
       role: "row",
       "aria-rowindex": index + 1,
       children: headerGroup.headers.map((header) => {
@@ -5283,10 +5295,10 @@ function DataTableHeader({ table }) {
   )) });
 }
 
-const styles$1 = {
-	"table-container": "_table-container_aaag4_2",
-	"bg-strong": "_bg-strong_aaag4_52",
-	"table-scroll-container": "_table-scroll-container_aaag4_56"
+const styles$2 = {
+	"table-container": "_table-container_14h5l_2",
+	"bg-strong": "_bg-strong_14h5l_53",
+	"table-scroll-container": "_table-scroll-container_14h5l_57"
 };
 
 const TableContainer = forwardRef(
@@ -5299,8 +5311,8 @@ const TableContainer = forwardRef(
       background = "default",
       ...rest
     } = componentProps;
-    const tableContainerClassNames = cx(className, styles$1["table-container"], {
-      [styles$1[`bg-${background}`]]: !!background
+    const tableContainerClassNames = cx(className, styles$2["table-container"], {
+      [styles$2[`bg-${background}`]]: !!background
     });
     const styleCombined = {
       ...style,
@@ -5317,7 +5329,7 @@ const TableContainer = forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$1["table-scroll-container"],
+            className: styles$2["table-scroll-container"],
             "data-anv": "table-scroll-container",
             children
           }
@@ -5361,16 +5373,76 @@ const DataTableContainer = forwardRef(({ children, onFocus, onBlur, onKeyDown, t
 });
 DataTableContainer.displayName = "DataTableContainer";
 
-const expanded = "_expanded_j0sey_11";
+const pagination = "_pagination_d700v_2";
+const styles$1 = {
+	pagination: pagination
+};
+
+const DataTablePagination = ({
+  showCount = true,
+  ...props
+}) => {
+  const { setIsOffGridInteractionOccurring } = useDataTableContext();
+  const handleFocus = useCallback(() => {
+    setIsOffGridInteractionOccurring(true);
+  }, [setIsOffGridInteractionOccurring]);
+  const handleBlur = useCallback(() => {
+    setIsOffGridInteractionOccurring(false);
+  }, [setIsOffGridInteractionOccurring]);
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      className: styles$1["pagination"],
+      ...props,
+      showCount,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }
+  );
+};
+
+const expanded = "_expanded_1r902_17";
 const styles = {
-	"expand-button": "_expand-button_j0sey_2",
+	"container-with-pagination": "_container-with-pagination_1r902_2",
+	"footer-with-pagination": "_footer-with-pagination_1r902_5",
+	"expand-button": "_expand-button_1r902_8",
 	expanded: expanded
 };
 
+const useAsyncData = (dataOrPromise) => {
+  const [resolvedData, setResolvedData] = useState(null);
+  const [error, setError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    async function resolveData() {
+      if (dataOrPromise instanceof Promise) {
+        setIsLoading(true);
+        try {
+          const data = await dataOrPromise;
+          setResolvedData(data);
+          setIsLoading(false);
+        } catch (_error) {
+          setError(true);
+          setIsLoading(false);
+          setResolvedData(null);
+        }
+      } else {
+        setResolvedData(dataOrPromise);
+        setIsLoading(false);
+      }
+    }
+    resolveData();
+  }, [dataOrPromise]);
+  if (!(dataOrPromise instanceof Promise)) {
+    return { data: dataOrPromise, error: false, isLoading: false };
+  }
+  return { data: resolvedData, error, isLoading };
+};
+
 function DataTable(props) {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
-    data,
+    data: dataProp,
     columns: columnsProp,
     background = "default",
     customFooter,
@@ -5382,6 +5454,7 @@ function DataTable(props) {
     onSelectRow,
     onSort,
     onExpandRow,
+    pagination,
     selectedRowIds,
     sortedColumn,
     style,
@@ -5391,23 +5464,9 @@ function DataTable(props) {
     ...style,
     ...layoutStyles
   };
-  const hasSubRows = data.some((row) => row.subRows?.length ?? 0 > 0);
-  const hasSubComponent = data.some((row) => row.subComponent != null);
-  const isExpandable = hasSubRows || hasSubComponent;
-  const [expanded, setExpanded] = useOptionallyControlledState({
-    controlledValue: isExpandable && expandedRowIds ? expandedRowIds === "all" ? true : Object.fromEntries(expandedRowIds.map((id) => [id, true])) : void 0,
-    defaultValue: isExpandable ? defaultExpandedRowIds ? defaultExpandedRowIds === "all" ? true : Object.fromEntries(defaultExpandedRowIds.map((id) => [id, true])) : {} : void 0,
-    onChange: (newExpanded) => {
-      if (newExpanded === true) {
-        onExpandRow?.("all");
-      } else {
-        onExpandRow?.(Object.keys(newExpanded));
-      }
-    }
-  });
   const [rowSelection, setRowSelection] = useOptionallyControlledState({
     controlledValue: isSelectable && selectedRowIds ? Object.fromEntries(selectedRowIds.map((id) => [id, true])) : void 0,
-    defaultValue: isSelectable ? defaultSelectedRowIds ? Object.fromEntries(defaultSelectedRowIds.map((id) => [id, true])) : {} : void 0,
+    defaultValue: isSelectable ? defaultSelectedRowIds ? Object.fromEntries(defaultSelectedRowIds.map((id) => [id, true])) : {} : {},
     onChange: (newRowSelection) => {
       onSelectRow?.(Object.keys(newRowSelection));
     }
@@ -5419,6 +5478,75 @@ function DataTable(props) {
       onSort?.(newSorting[0]);
     }
   });
+  const isPaginated = !!pagination;
+  const paginationObject = typeof pagination === "object" ? pagination : void 0;
+  const rowsPerPage = paginationObject?.rowsPerPage ?? 25;
+  const [currentPageIndex, setCurrentPageIndex] = useOptionallyControlledState({
+    controlledValue: paginationObject?.currentPageIndex,
+    defaultValue: paginationObject?.defaultPageIndex ?? 0,
+    onChange: (newPageIndex) => {
+      paginationObject?.onPageChange?.(newPageIndex);
+    }
+  });
+  const pageLoader = paginationObject?.loadPageData;
+  const isAsyncPaginated = !!pageLoader && typeof pageLoader === "function";
+  const dataSource = useMemo(() => {
+    if (!isAsyncPaginated) {
+      return dataProp;
+    }
+    return pageLoader({
+      pageIndex: currentPageIndex ?? 0,
+      pageSize: rowsPerPage
+    });
+  }, [isAsyncPaginated, currentPageIndex, rowsPerPage, dataProp]);
+  const {
+    data: resolvedData,
+    //TODO: Table should represent error state
+    error: _error,
+    isLoading
+  } = useAsyncData(dataSource);
+  const totalItemCount = paginationObject?.totalRowCount ?? resolvedData?.length ?? 0;
+  const hasSubRows = !!resolvedData?.some(
+    (row) => row?.subRows?.length ?? 0 > 0
+  );
+  const hasSubComponent = !!resolvedData?.some(
+    (row) => row?.subComponent != null
+  );
+  const isExpandable = hasSubRows || hasSubComponent;
+  const [expanded, setExpanded] = useOptionallyControlledState({
+    controlledValue: isExpandable && expandedRowIds ? expandedRowIds === "all" ? true : Object.fromEntries(expandedRowIds.map((id) => [id, true])) : void 0,
+    defaultValue: isExpandable ? defaultExpandedRowIds ? defaultExpandedRowIds === "all" ? true : Object.fromEntries(defaultExpandedRowIds.map((id) => [id, true])) : {} : {},
+    onChange: (newExpanded) => {
+      if (newExpanded === true) {
+        onExpandRow?.("all");
+      } else {
+        onExpandRow?.(Object.keys(newExpanded));
+      }
+    }
+  });
+  const tableData = useMemo(() => {
+    if (isLoading) return [];
+    if (!isPaginated || isAsyncPaginated) return resolvedData;
+    const maxPageIndex = Math.max(
+      0,
+      Math.ceil(totalItemCount / rowsPerPage) - 1
+    );
+    const clampedPageIndex = Math.max(
+      0,
+      Math.min(currentPageIndex ?? 0, maxPageIndex)
+    );
+    const startIndex = clampedPageIndex * rowsPerPage;
+    const endIndex = startIndex + rowsPerPage;
+    return resolvedData?.slice(startIndex, endIndex) ?? [];
+  }, [
+    isLoading,
+    isPaginated,
+    isAsyncPaginated,
+    resolvedData,
+    totalItemCount,
+    rowsPerPage,
+    currentPageIndex
+  ]);
   const columnPinning = useMemo(() => {
     const { left, right } = {
       left: columnsProp.filter((column) => column.pinned === "left").map((c) => String(c.id)),
@@ -5527,7 +5655,7 @@ function DataTable(props) {
     return tableColumns;
   }, [columnsProp, hasSubComponent, isExpandable, isSelectable]);
   const table = useReactTable({
-    data,
+    data: tableData ?? [],
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -5604,37 +5732,83 @@ function DataTable(props) {
   const columnCount = useMemo(() => {
     return headers.filter((header) => header.subHeaders?.length === 0).length;
   }, [headers]);
-  return /* @__PURE__ */ jsx(DataTableContextProvider, { table, hasSubRows, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DataTableContextProvider, { table, hasSubRows, children: /* @__PURE__ */ jsxs(
     DataTableContainer,
     {
       ...rest,
       style: styleCombined,
       background,
-      children: /* @__PURE__ */ jsxs(
-        TableBase,
-        {
-          type: "data-table",
-          style: cssVars,
-          rowCount,
-          colCount: columnCount,
-          hasSubRows,
-          children: [
-            /* @__PURE__ */ jsx(DataTableHeader, { table }),
-            /* @__PURE__ */ jsx(DataTableBody, { table }),
-            hasFooters && /* @__PURE__ */ jsx(
-              DataTableFooter,
-              {
-                table,
-                columns: columnsProp,
-                customFooter
-              }
-            )
-          ]
-        }
-      )
+      className: pagination ? styles["container-with-pagination"] : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          TableBase,
+          {
+            type: "data-table",
+            style: cssVars,
+            rowCount,
+            colCount: columnCount,
+            hasSubRows,
+            children: [
+              /* @__PURE__ */ jsx(DataTableHeader, { table }),
+              /* @__PURE__ */ jsx(DataTableBody, { table }),
+              isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(SrOnly, { children: "Loading data. Please wait." }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      height: rowsPerPage ? `${rowsPerPage * 35}px` : "200px"
+                    },
+                    role: "presentation",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx(
+                      Flex,
+                      {
+                        justifyContent: "center",
+                        alignItems: "center",
+                        style: {
+                          position: "absolute",
+                          top: 0,
+                          bottom: 0,
+                          left: 0,
+                          right: 0,
+                          margin: "auto",
+                          zIndex: 3
+                        },
+                        children: /* @__PURE__ */ jsx(Spinner, {})
+                      }
+                    )
+                  }
+                )
+              ] }),
+              hasFooters && /* @__PURE__ */ jsx(
+                DataTableFooter,
+                {
+                  className: pagination ? styles["footer-with-pagination"] : void 0,
+                  table,
+                  columns: columnsProp,
+                  customFooter
+                }
+              )
+            ]
+          }
+        ),
+        pagination && /* @__PURE__ */ jsx(
+          DataTablePagination,
+          {
+            itemsPerPage: rowsPerPage,
+            showCount: paginationObject?.showCount ?? true,
+            page: (currentPageIndex ?? 0) + 1,
+            totalItemCount,
+            onPageChange: (page) => {
+              setCurrentPageIndex(page - 1);
+            }
+          }
+        )
+      ]
     }
   ) });
 }
 
-export { DataTable as D, currencyFormatter as a, chipsFormatter as c, percentFormatter as p };
-//# sourceMappingURL=DataTable-BHI2ONJ-.js.map
+export { DataTable as D, chipsFormatter as a, currencyFormatter as b, createColumnHelper$1 as c, percentFormatter as p };
+//# sourceMappingURL=DataTable-BkNCMaVu.js.map