@lightsparkdev/ui 1.1.6 → 1.1.8

package/dist/{chunk-MVZC5RCO.cjs → chunk-WRNS2LMW.cjs}

@@ -1,79 +1,88 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkJGC6NTZUcjs = require('./chunk-JGC6NTZU.cjs');
+var _chunkM7NXFRWIcjs = require('./chunk-M7NXFRWI.cjs');
 
 
+var _chunkTTEGFKKUcjs = require('./chunk-TTEGFKKU.cjs');
 
 
-var _chunkKP4MPADHcjs = require('./chunk-KP4MPADH.cjs');
 
+var _chunk3DKIHTSYcjs = require('./chunk-3DKIHTSY.cjs');
 
 
 
-var _chunkSZHRF7JEcjs = require('./chunk-SZHRF7JE.cjs');
 
+var _chunkMHB5FZHOcjs = require('./chunk-MHB5FZHO.cjs');
 
 
 
-var _chunkOTBZYOXScjs = require('./chunk-OTBZYOXS.cjs');
 
+var _chunkT24XLKO4cjs = require('./chunk-T24XLKO4.cjs');
 
 
-var _chunkEZHADRU2cjs = require('./chunk-EZHADRU2.cjs');
 
 
+var _chunkWUPRBHVCcjs = require('./chunk-WUPRBHVC.cjs');
 
-var _chunkPVF4JCMFcjs = require('./chunk-PVF4JCMF.cjs');
 
 
+var _chunkASYEQ7SWcjs = require('./chunk-ASYEQ7SW.cjs');
 
-var _chunkVYXSWIANcjs = require('./chunk-VYXSWIAN.cjs');
 
 
-var _chunk5LPJSI3Mcjs = require('./chunk-5LPJSI3M.cjs');
+var _chunkG32OGRLKcjs = require('./chunk-G32OGRLK.cjs');
 
 
-var _chunkN62ESZMPcjs = require('./chunk-N62ESZMP.cjs');
+var _chunkDSG76UY6cjs = require('./chunk-DSG76UY6.cjs');
 
 
-var _chunkJSZRRGB2cjs = require('./chunk-JSZRRGB2.cjs');
+var _chunkERYX2E23cjs = require('./chunk-ERYX2E23.cjs');
 
 
-var _chunkPA23GNGOcjs = require('./chunk-PA23GNGO.cjs');
+var _chunk2BMPLV5Ccjs = require('./chunk-2BMPLV5C.cjs');
 
 
-var _chunkCBLCAH6Ocjs = require('./chunk-CBLCAH6O.cjs');
+var _chunkLKPOBVNOcjs = require('./chunk-LKPOBVNO.cjs');
 
 
-var _chunk7WEODYP2cjs = require('./chunk-7WEODYP2.cjs');
+var _chunkWJMVZDWRcjs = require('./chunk-WJMVZDWR.cjs');
 
 
-var _chunkHAA6KFGNcjs = require('./chunk-HAA6KFGN.cjs');
+var _chunkIDFM6UQ2cjs = require('./chunk-IDFM6UQ2.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
+var _chunkGYFYOAO2cjs = require('./chunk-GYFYOAO2.cjs');
 
 
-var _chunkXZO7WVZPcjs = require('./chunk-XZO7WVZP.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+
+
+var _chunkQBFCQQX5cjs = require('./chunk-QBFCQQX5.cjs');
+
+
+var _chunk5R7OENS4cjs = require('./chunk-5R7OENS4.cjs');
 
 
 
-var _chunkJPVQC3NYcjs = require('./chunk-JPVQC3NY.cjs');
+var _chunkUL22WLXRcjs = require('./chunk-UL22WLXR.cjs');
 
 
 
 
-var _chunk4NC6INKXcjs = require('./chunk-4NC6INKX.cjs');
+var _chunkLPTWQ2KPcjs = require('./chunk-LPTWQ2KP.cjs');
 
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
+var _chunk2J2ZDWLFcjs = require('./chunk-2J2ZDWLF.cjs');
+
+
 
 
 var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
@@ -85,17 +94,17 @@ var _jsxruntime = require('@emotion/react/jsx-runtime');
 function getDefaultFilterState(filter) {
   switch (filter.type) {
     case "date" /* DATE */:
-      return _chunkVYXSWIANcjs.getDefaultDateFilterState.call(void 0, );
+      return _chunk3DKIHTSYcjs.getDefaultDateFilterState.call(void 0, );
     case "enum" /* ENUM */:
-      return _chunkKP4MPADHcjs.getDefaultEnumFilterState.call(void 0, );
+      return _chunkMHB5FZHOcjs.getDefaultEnumFilterState.call(void 0, );
     case "string" /* STRING */:
-      return _chunkOTBZYOXScjs.getDefaultStringFilterState.call(void 0, );
+      return _chunkWUPRBHVCcjs.getDefaultStringFilterState.call(void 0, );
     case "id" /* ID */:
-      return _chunkSZHRF7JEcjs.getDefaultIdFilterState.call(void 0, filter.allowedEntities);
+      return _chunkT24XLKO4cjs.getDefaultIdFilterState.call(void 0, filter.allowedEntities);
     case "boolean" /* BOOLEAN */:
-      return _chunkEZHADRU2cjs.getDefaultBooleanFilterState.call(void 0, );
+      return _chunkASYEQ7SWcjs.getDefaultBooleanFilterState.call(void 0, );
     case "currency" /* CURRENCY */:
-      return _chunkPVF4JCMFcjs.getDefaultCurrencyFilterState.call(void 0, );
+      return _chunkG32OGRLKcjs.getDefaultCurrencyFilterState.call(void 0, );
     default:
       throw new Error("Invalid filter type");
   }
@@ -110,11 +119,13 @@ function initialFilterState(filters) {
   return state;
 }
 function DataManagerTable(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const isCardPageFullWidth = typeof props.cardPageFullWidth === "boolean" ? props.cardPageFullWidth : true;
   const cardPageMt = typeof props.cardPageMt === "undefined" ? 24 : props.cardPageMt;
+  const showPaginationPreviousNext = typeof ((_a = props.paginationDisplayOptions) == null ? void 0 : _a.showPaginationPreviousNext) === "boolean" ? props.paginationDisplayOptions.showPaginationPreviousNext : true;
+  const pageSizeString = typeof ((_b = props.paginationDisplayOptions) == null ? void 0 : _b.pageSizeStringTemplate) === "string" ? props.paginationDisplayOptions.pageSizeStringTemplate : "Show {pageSize} items";
   const breakPoint = _chunkKW3JYLRIcjs.useBreakpoints.call(void 0, );
-  const [pageSize, setPageSize] = _react.useState.call(void 0, ((_a = props.pageSizes) == null ? void 0 : _a[0]) || 20);
+  const [pageSize, setPageSize] = _react.useState.call(void 0, ((_c = props.pageSizes) == null ? void 0 : _c[0]) || 20);
   const [pageCursorState, setPageCursorState] = _react.useState.call(void 0, {
     startResult: void 0,
     nextPageCursor: props.nextPageCursor,
@@ -122,12 +133,12 @@ function DataManagerTable(props) {
   });
   const [isLoading, setIsLoading] = _react.useState.call(void 0, props.loading || false);
   const [numFiltersApplied, setNumFiltersApplied] = _react.useState.call(void 0, 0);
-  const [showFilters, setShowFilters] = _react.useState.call(void 0, false);
+  const [showFilterEditor, setShowFilterEditor] = _react.useState.call(void 0, false);
   const [filterStates, setFilterStates] = _react.useState.call(void 0, 
     props.filterOptions ? initialFilterState(props.filterOptions.filters) : {}
   );
   const [fetchVariables, setFetchVariables] = _react.useState.call(void 0, 
-    ((_b = props.filterOptions) == null ? void 0 : _b.initialQueryVariables) || {}
+    ((_d = props.filterOptions) == null ? void 0 : _d.initialQueryVariables) || {}
   );
   const isSm = breakPoint.isSm();
   _react.useEffect.call(void 0, () => {
@@ -184,7 +195,7 @@ function DataManagerTable(props) {
         );
         if (validResult) {
           appliedFilterStates[filter.accessorKey] = validResult;
-          if (_chunkSZHRF7JEcjs.isIdFilterState.call(void 0, filterState)) {
+          if (_chunkT24XLKO4cjs.isIdFilterState.call(void 0, filterState)) {
             const appliedValues = validResult.appliedValues;
             const isApplied = !!(appliedValues == null ? void 0 : appliedValues.length);
             updateFilterState(filter)(_chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, filterStates2[filter.accessorKey]), {
@@ -208,7 +219,7 @@ function DataManagerTable(props) {
       const filterState = filterStatesArray[i];
       if (!filterState.isApplied) continue;
       const filter = filters2[i];
-      if (_chunkOTBZYOXScjs.isStringFilterState.call(void 0, filterState)) {
+      if (_chunkWUPRBHVCcjs.isStringFilterState.call(void 0, filterState)) {
         if (filterState.value) {
           const value = filterState.value;
           let updatedAppliedValues = [];
@@ -226,10 +237,10 @@ function DataManagerTable(props) {
           appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
         } else if (((_b2 = filterState.appliedValues) == null ? void 0 : _b2.length) === 0) {
-          updateFilterState(filter)(_chunkOTBZYOXScjs.getDefaultStringFilterState.call(void 0, ));
+          updateFilterState(filter)(_chunkWUPRBHVCcjs.getDefaultStringFilterState.call(void 0, ));
           filterState.isApplied = false;
         }
-      } else if (_chunkKP4MPADHcjs.isEnumFilterState.call(void 0, filterState)) {
+      } else if (_chunkMHB5FZHOcjs.isEnumFilterState.call(void 0, filterState)) {
         if (filterState.value) {
           const newFilterState = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, filterStates2[filter.accessorKey]), {
             value: "",
@@ -239,7 +250,7 @@ function DataManagerTable(props) {
           appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
         } else if (((_d2 = filterState.appliedValues) == null ? void 0 : _d2.length) === 0) {
-          updateFilterState(filter)(_chunkKP4MPADHcjs.getDefaultEnumFilterState.call(void 0, ));
+          updateFilterState(filter)(_chunkMHB5FZHOcjs.getDefaultEnumFilterState.call(void 0, ));
           filterState.isApplied = false;
         }
       }
@@ -248,7 +259,7 @@ function DataManagerTable(props) {
       return state.isApplied ? acc + 1 : acc;
     }, 0);
     setNumFiltersApplied(numFiltersApplied2);
-    setShowFilters(false);
+    setShowFilterEditor(false);
     setIsLoading(true);
     const newFetchVariables = getFilterQueryVariables(
       filters2,
@@ -311,6 +322,27 @@ function DataManagerTable(props) {
     }
     setIsLoading(false);
   });
+  const currentPage = Math.floor((pageCursorState.startResult || 0) / pageSize) + 1;
+  const handleChangePage = (page) => _chunkZ6EUSUADcjs.__async.call(void 0, this, null, function* () {
+    const pageCursorIndex = (page - 1) * pageSize + 1 - pageSize;
+    const cachedCursorState = pageCursorState.cursorCache[pageSize][pageCursorIndex];
+    if (!props.filterOptions || pageCursorIndex > 0 && !cachedCursorState || page === currentPage) {
+      return;
+    }
+    const { refetch } = props.filterOptions;
+    setIsLoading(true);
+    const newFetchVariables = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, fetchVariables), {
+      after: cachedCursorState
+    });
+    setFetchVariables(newFetchVariables);
+    try {
+      yield refetch(newFetchVariables);
+    } catch (e) {
+      setIsLoading(false);
+      throw e;
+    }
+    setIsLoading(false);
+  });
   const handleChangePageSize = (size) => _chunkZ6EUSUADcjs.__async.call(void 0, this, null, function* () {
     setPageSize(size);
     if (props.showMoreOptions) {
@@ -342,7 +374,7 @@ function DataManagerTable(props) {
     switch (filter.type) {
       case "date" /* DATE */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkVYXSWIANcjs.DateFilter,
+          _chunk3DKIHTSYcjs.DateFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -354,7 +386,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "enum" /* ENUM */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkKP4MPADHcjs.EnumFilter,
+          _chunkMHB5FZHOcjs.EnumFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -370,7 +402,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "string" /* STRING */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkOTBZYOXScjs.StringFilter,
+          _chunkWUPRBHVCcjs.StringFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -384,7 +416,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "id" /* ID */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkSZHRF7JEcjs.IdFilter,
+          _chunkT24XLKO4cjs.IdFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -398,7 +430,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "boolean" /* BOOLEAN */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkEZHADRU2cjs.BooleanFilter,
+          _chunkASYEQ7SWcjs.BooleanFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -411,7 +443,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "currency" /* CURRENCY */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkPVF4JCMFcjs.CurrencyFilter,
+          _chunkG32OGRLKcjs.CurrencyFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -443,10 +475,10 @@ function DataManagerTable(props) {
       children: [
         filterSections,
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FilterContentFooter, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZO7WVZPcjs.Button, { text: "Clear", onClick: handleClearFilters }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, { text: "Clear", onClick: handleClearFilters }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FilterContentFooterRight, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZO7WVZPcjs.Button, { text: "Cancel", onClick: () => setShowFilters(false) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZO7WVZPcjs.Button, { text: "Apply", kind: "primary", onClick: onApply })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, { text: "Cancel", onClick: () => setShowFilterEditor(false) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, { text: "Apply", kind: "primary", onClick: onApply })
           ] })
         ] })
       ]
@@ -462,45 +494,48 @@ function DataManagerTable(props) {
     text: !isFilterButtonSmall ? `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}` : void 0
   };
   if (props.filterOptions) {
-    filters = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataManagerTableFilterContainer, { children: isSm ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+    const FilterContainerComponent = ((_e = props.customComponents) == null ? void 0 : _e.filterContainerComponent) || DataManagerTableFilterContainer;
+    filters = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterContainerComponent, { children: isSm ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkXZO7WVZPcjs.Button,
-        _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonButtonProps), {
-          onClick: () => setShowFilters(!showFilters)
+        _chunkGYFYOAO2cjs.Button,
+        _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonButtonProps), props.filterButtonProps), {
+          onClick: () => setShowFilterEditor(!showFilterEditor)
         })
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkJSZRRGB2cjs.Modal,
+        _chunk2BMPLV5Ccjs.Modal,
         {
-          visible: showFilters,
-          onClose: () => setShowFilters(false),
+          visible: showFilterEditor,
+          onClose: () => setShowFilterEditor(false),
           smKind: "fullscreen",
           children: filterContent
         }
       )
     ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkPA23GNGOcjs.Dropdown,
+      _chunkLKPOBVNOcjs.Dropdown,
       {
         borderRadius: 12,
         maxDropdownItemsWidth: 400,
-        dropdownContent: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterDropdownContent, { children: filterContent }),
-        isOpen: showFilters,
+        dropdownContent: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterDropdownContent, { visible: showFilterEditor, children: filterContent }),
+        isOpen: showFilterEditor,
         onOpen: () => {
-          setShowFilters(true);
+          setShowFilterEditor(true);
         },
         onClose: () => {
-          setShowFilters(false);
+          setShowFilterEditor(false);
         },
-        button: commonButtonProps,
-        align: "right"
+        button: _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonButtonProps), props.filterButtonProps),
+        align: props.filterDropdownAlign || "right"
       }
-    ) }) });
+    ) });
   }
   let showMoreDropdown;
-  if (((_c = props.pageSizes) == null ? void 0 : _c.length) > 1) {
+  if (((_f = props.pageSizes) == null ? void 0 : _f.length) > 1) {
     showMoreDropdown = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkPA23GNGOcjs.Dropdown,
+      _chunkLKPOBVNOcjs.Dropdown,
       {
+        align: "right",
+        verticalPlacement: "top",
         getCSS: ({ isOpen }) => ({
           height: "fit-content",
           alignSelf: "center"
@@ -513,9 +548,9 @@ function DataManagerTable(props) {
             width: "100%"
           }),
           getContent: ({ isOpen }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkCBLCAH6Ocjs.TextIconAligner,
+            _chunkQBFCQQX5cjs.TextIconAligner,
             {
-              content: `Show ${pageSize} items`,
+              content: pageSizeString.replace("{pageSize}", `${pageSize}`),
               typography: { size: "ExtraSmall" },
               rightIcon: {
                 name: "Chevron",
@@ -539,7 +574,7 @@ function DataManagerTable(props) {
   if (props.showMoreOptions) {
     footer = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableFooter, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkXZO7WVZPcjs.Button,
+        _chunkGYFYOAO2cjs.Button,
         {
           text: "Show more",
           paddingY: "short",
@@ -554,24 +589,106 @@ function DataManagerTable(props) {
   } else if (props.resultCount) {
     const startResult = pageCursorState.startResult || 1;
     const endResult = Math.min(props.resultCount, startResult + pageSize - 1);
-    const isFullCount = (_d = props.isFullCount) != null ? _d : true;
+    const isFullCount = (_g = props.isFullCount) != null ? _g : true;
     const countString = isFullCount ? props.resultCount : props.resultCount + "+";
-    const resultsString = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN62ESZMPcjs.Label, { children: "Viewing " }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5LPJSI3Mcjs.LabelModerate, { children: `${startResult}-${endResult}` }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN62ESZMPcjs.Label, { children: " of " }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5LPJSI3Mcjs.LabelModerate, { children: `${countString}` }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN62ESZMPcjs.Label, { children: " results" })
+    const resultsString = ((_h = props.paginationDisplayOptions) == null ? void 0 : _h.showPageNumberButtons) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkERYX2E23cjs.Label, { children: "Viewing " }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSG76UY6cjs.LabelModerate, { children: `${startResult}-${endResult}` }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkERYX2E23cjs.Label, { children: " of " }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDSG76UY6cjs.LabelModerate, { children: `${countString}` }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkERYX2E23cjs.Label, { children: " results" })
     ] });
     const hasNext = props.resultCount ? startResult + pageSize - 1 < props.resultCount : false;
     const hasPrev = startResult > 1;
+    const pageNumbers = Array.from(
+      { length: Math.ceil(props.resultCount / pageSize) },
+      (_, i) => i
+    );
+    const pageNumberButtons = ((_i = props.paginationDisplayOptions) == null ? void 0 : _i.showPageNumberButtons) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PageNumberPaginationButtonsContainer, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkGYFYOAO2cjs.Button,
+        {
+          icon: {
+            name: "CentralChevronLeftSmall",
+            width: 24,
+            color: "text"
+          },
+          kind: "ghost",
+          paddingY: "short",
+          onClick: () => void handlePrev(),
+          disabled: !hasPrev
+        }
+      ),
+      pageNumbers.slice(0, 2).map((pageNumber) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PageNumberButton,
+        {
+          onClick: () => void handleChangePage(pageNumber + 1),
+          isCurrentPage: currentPage === pageNumber + 1,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7NXFRWIcjs.Body, { content: `${pageNumber + 1}` })
+        },
+        pageNumber
+      )),
+      pageNumbers.length > 4 && currentPage - 2 > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk5R7OENS4cjs.Icon,
+        {
+          name: "CentralDotGrid1x3Horizontal",
+          width: 18,
+          ml: 7,
+          mr: 7,
+          color: "text"
+        }
+      ),
+      currentPage - 1 > 1 && currentPage < pageNumbers.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PageNumberButton,
+        {
+          isCurrentPage: true,
+          onClick: () => void handleChangePage(currentPage),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7NXFRWIcjs.Body, { content: `${currentPage}` })
+        },
+        currentPage
+      ),
+      pageNumbers.length > 4 && currentPage + 1 < pageNumbers.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk5R7OENS4cjs.Icon,
+        {
+          name: "CentralDotGrid1x3Horizontal",
+          width: 18,
+          ml: 7,
+          mr: 7,
+          color: "text"
+        }
+      ),
+      pageNumbers.length > 4 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PageNumberButton,
+        {
+          isCurrentPage: currentPage === pageNumbers.length,
+          onClick: () => void handleChangePage(pageNumbers.length),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7NXFRWIcjs.Body, { content: `${pageNumbers.length}` })
+        },
+        pageNumbers.length
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkGYFYOAO2cjs.Button,
+        {
+          icon: {
+            name: "CentralChevronRightSmall",
+            width: 24,
+            color: "text"
+          },
+          kind: "ghost",
+          paddingY: "short",
+          onClick: () => void handleNext(),
+          disabled: !hasNext
+        }
+      )
+    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {});
     footer = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableFooter, { children: [
       resultsString,
+      pageNumberButtons,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PaginationContainer, { children: [
         showMoreDropdown,
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PaginationButtonsContainer, { children: [
+        showPaginationPreviousNext && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PaginationButtonsContainer, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkXZO7WVZPcjs.Button,
+            _chunkGYFYOAO2cjs.Button,
             {
               text: "Previous",
               paddingY: "short",
@@ -582,7 +699,7 @@ function DataManagerTable(props) {
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkXZO7WVZPcjs.Button,
+            _chunkGYFYOAO2cjs.Button,
             {
               text: "Next",
               paddingY: "short",
@@ -596,29 +713,32 @@ function DataManagerTable(props) {
       ] })
     ] });
   }
+  const DataManagerTableHeaderComponent = ((_j = props.customComponents) == null ? void 0 : _j.dataManagerTableHeaderComponent) || DataManagerTableHeader;
   const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    props.showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableHeader, { children: [
+    props.showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableHeaderComponent, { children: [
       props.header,
       filters
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJGC6NTZUcjs.Table, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), { loading: isLoading })),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTTEGFKKUcjs.Table, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), { loading: isLoading })),
     footer
   ] });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledDataManagerTable, { children: isCardPageFullWidth ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7WEODYP2cjs.CardPageFullWidth, { css: { marginTop: `${cardPageMt}px` }, children: content }) : content });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledDataManagerTable, { children: isCardPageFullWidth ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWJMVZDWRcjs.CardPageFullWidth, { css: { marginTop: `${cardPageMt}px` }, children: content }) : content });
 }
-var StyledDataManagerTable = _styled2.default.div``;
+var StyledDataManagerTable = _styled2.default.div`
+  width: 100%;
+`;
 var commonPadding = `
   ${_chunkKW3JYLRIcjs.bp.lg(`
-  padding-left: ${_chunkJPVQC3NYcjs.standardContentInset.lgPx}px;
-  padding-right: ${_chunkJPVQC3NYcjs.standardContentInset.lgPx}px;
+  padding-left: ${_chunkUL22WLXRcjs.standardContentInset.lgPx}px;
+  padding-right: ${_chunkUL22WLXRcjs.standardContentInset.lgPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.sm(`
-  padding-left: ${_chunkJPVQC3NYcjs.standardContentInset.smPx}px;
-  padding-right: ${_chunkJPVQC3NYcjs.standardContentInset.smPx}px;
+  padding-left: ${_chunkUL22WLXRcjs.standardContentInset.smPx}px;
+  padding-right: ${_chunkUL22WLXRcjs.standardContentInset.smPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.minSmMaxLg(`
-  padding-left: ${_chunkJPVQC3NYcjs.standardContentInset.minSmMaxLgPx}px;
-  padding-right: ${_chunkJPVQC3NYcjs.standardContentInset.minSmMaxLgPx}px;
+  padding-left: ${_chunkUL22WLXRcjs.standardContentInset.minSmMaxLgPx}px;
+  padding-right: ${_chunkUL22WLXRcjs.standardContentInset.minSmMaxLgPx}px;
   `)}
 `;
 var DataManagerTableHeader = _styled2.default.div`
@@ -639,7 +759,7 @@ var DataManagerTableFooter = _styled2.default.div`
   padding-top: ${_chunkZUAO4DW3cjs.Spacing.px.md};
   padding-bottom: ${_chunkZUAO4DW3cjs.Spacing.px.md};
 
-  ${_chunkXZO7WVZPcjs.StyledButton} {
+  ${_chunkGYFYOAO2cjs.StyledButton} {
     align-self: end;
   }
 `;
@@ -653,16 +773,39 @@ var PaginationButtonsContainer = _styled2.default.div`
   margin-left: ${_chunkZUAO4DW3cjs.Spacing.px.md};
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
 `;
+var PageNumberPaginationButtonsContainer = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+var PageNumberButton = _styled2.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  cursor: pointer;
+  ${_chunkUL22WLXRcjs.standardBorderRadius.call(void 0, 8)}
+  border: none;
+  background-color: transparent;
+  &:hover {
+    border: 0.5px solid ${_chunk2J2ZDWLFcjs.colors["black-10"]};
+  }
+  ${({ isCurrentPage }) => isCurrentPage ? `
+      border: 0.5px solid ${_chunk2J2ZDWLFcjs.colors["black-10"]};
+    ` : ""}
+`;
 var DataManagerTableFilterContainer = _styled2.default.div`
   position: absolute;
   z-index: 3;
   right: 0;
-  ${_chunkHAA6KFGNcjs.StyledButtonRow} + & {
+  ${_chunkIDFM6UQ2cjs.StyledButtonRow} + & {
     background: linear-gradient(
       to right,
-      ${({ theme }) => _chunk4NC6INKXcjs.themeOr.call(void 0, "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)")({ theme })}
+      ${({ theme }) => _chunkLPTWQ2KPcjs.themeOr.call(void 0, "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)")({ theme })}
         0%,
-      ${({ theme }) => _chunk4NC6INKXcjs.getColor.call(void 0, theme, "bg")} 15%
+      ${({ theme }) => _chunkLPTWQ2KPcjs.getColor.call(void 0, theme, "bg")} 15%
     );
   }
   ${commonPadding}
@@ -671,11 +814,12 @@ var FilterDropdownContent = _styled2.default.div`
   width: 400px;
   background: ${({ theme }) => theme.bg};
   border: 0.5px solid
-    ${({ theme }) => _chunk4NC6INKXcjs.themeOrWithKey.call(void 0, "c1Neutral", "c4Neutral")({ theme })};
-  ${_chunkJPVQC3NYcjs.standardBorderRadius.call(void 0, 12)}
+    ${({ theme }) => _chunkLPTWQ2KPcjs.themeOrWithKey.call(void 0, "c1Neutral", "c4Neutral")({ theme })};
+  ${_chunkUL22WLXRcjs.standardBorderRadius.call(void 0, 12)}
   box-shadow:
     0px 1px 4px 0px rgba(0, 0, 0, 0.1),
     0px 4px 8px 0px rgba(0, 0, 0, 0.08);
+  ${({ visible }) => !visible && "display: none;"}
 `;
 var FilterContentInner = _styled2.default.div`
   display: flex;

package/dist/{chunk-OTBZYOXS.cjs → chunk-WUPRBHVC.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk4NOTKSI7cjs = require('./chunk-4NOTKSI7.cjs');
+var _chunkU2OBO5TYcjs = require('./chunk-U2OBO5TY.cjs');
 
 
-var _chunk4COTW37Xcjs = require('./chunk-4COTW37X.cjs');
+var _chunk7EJGVZAAcjs = require('./chunk-7EJGVZAA.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkGYFYOAO2cjs = require('./chunk-GYFYOAO2.cjs');
 
 
-var _chunkXZO7WVZPcjs = require('./chunk-XZO7WVZP.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
 
@@ -39,7 +39,7 @@ var StringFilter = ({
   };
   const appliedValueButtons = (_a = state.appliedValues) == null ? void 0 : _a.map((value) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkXZO7WVZPcjs.Button,
+      _chunkGYFYOAO2cjs.Button,
       {
         kind: "primary",
         size: "ExtraSmall",
@@ -59,8 +59,8 @@ var StringFilter = ({
     );
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4NOTKSI7cjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk4COTW37Xcjs.TextInput,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2OBO5TYcjs.Filter, { label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk7EJGVZAAcjs.TextInput,
       {
         placeholder: placeholder || "",
         onChange: handleChange,