@prt-ts/fluent-react-table-v2 9.54.4-build-1.0 → 9.66.2-build-2.0

package/README.md

@@ -1,7 +1,7 @@
-# fluent-react-table-v2
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test fluent-react-table-v2` to execute the unit tests via [Vitest](https://vitest.dev/).
+# fluent-react-table-v2
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test fluent-react-table-v2` to execute the unit tests via [Vitest](https://vitest.dev/).

package/index.cjs.d.ts

@@ -1 +1 @@
-export * from "./src\\index";
+export * from "./src/index";

package/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactComponents = require('@fluentui/react-components');
@@ -15,8 +13,7 @@ var reactDatepickerCompat = require('@fluentui/react-datepicker-compat');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -29,11 +26,11 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const disableAllShorthand = {
     enableGrouping: false,
@@ -109,13 +106,21 @@ const usePaginationStyle = reactComponents.makeStyles({
     },
     pageSelectionWrapper: {
         minWidth: "1.5rem",
+        display: "flex",
+        alignItems: "center",
+        gap: "1rem",
     },
     pageSelectionDropdown: {
         minWidth: "100%",
     },
     pageSizeInput: {
         minWidth: "1.5rem",
-        width: "4rem",
+        width: "3rem",
+    },
+    pageSizeText: {
+        flex: 1,
+        minWidth: "100%",
+        fontSize: "0.8rem"
     },
 });
 
@@ -132,6 +137,9 @@ const Pagination = (props) => {
     const totalNumberOfPage = table.getPageCount();
     const currentPage = table.getState().pagination.pageIndex;
     const pageSize = table.getState().pagination.pageSize;
+    // get total item count and number of item in current page
+    const totalItemCount = table.getFilteredRowModel().rows.length;
+    const numberOfItemsInCurrentPage = table.getRowModel().rows.length;
     const pageSelectionOptions = React.useMemo(() => {
         let start = currentPage - Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
         let end = currentPage + Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
@@ -149,7 +157,7 @@ const Pagination = (props) => {
         const currentPageOptions = end - start >= 0 ? range(start, end) : [];
         return (currentPageOptions === null || currentPageOptions === void 0 ? void 0 : currentPageOptions.length) ? [...currentPageOptions] : [1];
     }, [totalNumberOfPage, currentPage]);
-    return (jsxRuntime.jsx("div", { className: styles.paginationContainer, children: jsxRuntime.jsxs("div", { className: styles.wrapper, children: [jsxRuntime.jsx("div", { className: styles.pageSelectionWrapper, children: jsxRuntime.jsx(reactComponents.Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: jsxRuntime.jsx(reactControlFlow.Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0, children: jsxRuntime.jsx(reactControlFlow.For, { each: pageSizeOptions, children: (option) => (jsxRuntime.jsx(reactComponents.Option, { value: `${option}`, children: `${option}` }, option)) }) }) }) }), jsxRuntime.jsxs("div", { className: styles.pageBtnContainer, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("span", { children: ["Page", " ", jsxRuntime.jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxRuntime.jsxs("span", { children: [" ", "| Go to page:", " ", jsxRuntime.jsx(reactComponents.Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
+    return (jsxRuntime.jsx("div", { className: styles.paginationContainer, children: jsxRuntime.jsxs("div", { className: styles.wrapper, children: [jsxRuntime.jsxs("div", { className: styles.pageSelectionWrapper, children: [jsxRuntime.jsx(reactComponents.Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: jsxRuntime.jsx(reactControlFlow.Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0, children: jsxRuntime.jsx(reactControlFlow.For, { each: pageSizeOptions, children: (option) => (jsxRuntime.jsx(reactComponents.Option, { value: `${option}`, children: `${option}` }, option)) }) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0 && totalItemCount > 0, children: jsxRuntime.jsxs("span", { className: styles.pageSizeText, children: ["Showing ", numberOfItemsInCurrentPage, " of ", totalItemCount, " items"] }) })] }), jsxRuntime.jsxs("div", { className: styles.pageBtnContainer, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("span", { children: ["Page", " ", jsxRuntime.jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxRuntime.jsxs("span", { children: [" ", "| Go to page:", " ", jsxRuntime.jsx(reactComponents.Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
                                                 const page = data.value ? Number(e.target.value) - 1 : 0;
                                                 if (page >= 0 && page < table.getPageCount()) {
                                                     table.setPageIndex(page);
@@ -221,7 +229,7 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerS
         }, debounce);
         return () => clearTimeout(timeout);
     }, [value, onChange, debounce]);
-    return (jsxRuntime.jsx(reactComponents.Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsxRuntime.jsx(reactIcons.Search24Regular, {}), style: { width: '300px' }, contentAfter: jsxRuntime.jsx(reactComponents.Tooltip, { content: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", icon: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? jsxRuntime.jsx(reactIcons.FilterDismissFilled, {}) : jsxRuntime.jsx(reactIcons.FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
+    return (jsxRuntime.jsx(reactComponents.Input, { "aria-label": "Search keyword", placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsxRuntime.jsx(reactIcons.Search24Regular, {}), style: { width: '300px' }, contentAfter: jsxRuntime.jsx(reactComponents.Tooltip, { content: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", icon: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? jsxRuntime.jsx(reactIcons.FilterDismissFilled, {}) : jsxRuntime.jsx(reactIcons.FilterFilled, {}), "aria-label": (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? 'Close filter panel' : 'Open advanced filter', onClick: () => {
                     dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: "TOGGLE_FILTER_DRAWER" });
                 } }) }) }));
 }
@@ -246,15 +254,15 @@ const dateRange = (row, columnId, value) => {
         return true;
     }
     else if (value.length === 2 && value[0] && !value[1]) {
-        return typeof rowValue.getMonth === 'function' && rowValue >= value[0];
+        return typeof (rowValue === null || rowValue === void 0 ? void 0 : rowValue.getMonth) === 'function' && rowValue >= value[0];
     }
     else if (value.length === 2 && !value[0] && value[1]) {
-        return typeof rowValue.getMonth === 'function' && rowValue <= value[1];
+        return typeof (rowValue === null || rowValue === void 0 ? void 0 : rowValue.getMonth) === 'function' && rowValue <= value[1];
     }
     else if (value.length === 2 && !value[0] && !value[1]) {
         return true;
     }
-    const passed = typeof rowValue.getMonth === 'function' && value[0] <= rowValue && rowValue <= value[1];
+    const passed = typeof (rowValue === null || rowValue === void 0 ? void 0 : rowValue.getMonth) === 'function' && value[0] <= rowValue && rowValue <= value[1];
     return passed;
 };
 const date = (row, columnId, value) => {
@@ -268,7 +276,7 @@ const date = (row, columnId, value) => {
     if (!value) {
         return true;
     }
-    const passed = typeof rowValue.getMonth === 'function' && ((_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toDateString()) === (rowValue === null || rowValue === void 0 ? void 0 : rowValue.toDateString());
+    const passed = typeof (rowValue === null || rowValue === void 0 ? void 0 : rowValue.getMonth) === 'function' && ((_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toDateString()) === (rowValue === null || rowValue === void 0 ? void 0 : rowValue.toDateString());
     return passed;
 };
 
@@ -1238,7 +1246,7 @@ const useFilterStyles = reactComponents.makeStyles({
     },
 });
 const Filter = ({ column, table, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const filterFunctionName = column.columnDef.filterFn;
     const styles = useFilterStyles();
     switch (filterFunctionName) {
@@ -1250,18 +1258,18 @@ const Filter = ({ column, table, }) => {
         case 'inNumberRange':
             return jsxRuntime.jsx(FilterNumberRange, { column: column, table: table });
         case 'inDateRange': {
-            const firstValue = (_a = table
+            const firstValue = (_b = (_a = table
                 .getPreFilteredRowModel()
-                .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
-            if (typeof firstValue.getMonth === 'function') {
+                .flatRows) === null || _a === void 0 ? void 0 : _a.find(x => Boolean(x.getValue(column.id)))) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
+            if (typeof (firstValue === null || firstValue === void 0 ? void 0 : firstValue.getMonth) === 'function') {
                 return jsxRuntime.jsx(FilterDateRange, { column: column, table: table });
             }
             break;
         }
         case 'matchDate': {
-            const firstValue = (_b = table
+            const firstValue = (_c = table
                 .getPreFilteredRowModel()
-                .flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
+                .flatRows[0]) === null || _c === void 0 ? void 0 : _c.getValue(column.id);
             if (typeof firstValue.getMonth === 'function') {
                 return jsxRuntime.jsx(FilterDate, { column: column, table: table });
             }
@@ -1299,7 +1307,7 @@ const FilterDrawer = ({ table }) => {
     }, [table]);
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
     const { dispatchDrawerAction, drawerState } = table.options.meta;
-    return (jsxRuntime.jsxs(reactComponents.InlineDrawer, { position: "end", open: drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen, separator: true, children: [jsxRuntime.jsx(reactComponents.DrawerHeader, { children: jsxRuntime.jsx(reactComponents.DrawerHeaderTitle, { action: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(reactIcons.Dismiss24Regular, {}), onClick: () => dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Column Filters" }) }), jsxRuntime.jsx(reactComponents.DrawerBody, { className: styles.drawerBody, children: jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: headerGroups.map((headerGroup) => {
+    return (jsxRuntime.jsxs(reactComponents.InlineDrawer, { position: "end", open: drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen, separator: true, size: 'medium', children: [jsxRuntime.jsx(reactComponents.DrawerHeader, { children: jsxRuntime.jsx(reactComponents.DrawerHeaderTitle, { action: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(reactIcons.Dismiss24Regular, {}), onClick: () => dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Column Filters" }) }), jsxRuntime.jsx(reactComponents.DrawerBody, { className: styles.drawerBody, children: jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: headerGroups.map((headerGroup) => {
                         const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
                         if (!canApplyFilter)
                             return null;
@@ -1449,7 +1457,7 @@ const getTableData = (table) => {
     return data;
 };
 
-Object.defineProperty(exports, 'createColumnHelper', {
+Object.defineProperty(exports, "createColumnHelper", {
     enumerable: true,
     get: function () { return reactTable.createColumnHelper; }
 });

package/index.esm.d.ts

@@ -1 +1 @@
-export * from "./src\\index";
+export * from "./src/index";

package/index.esm.js

@@ -87,13 +87,21 @@ const usePaginationStyle = makeStyles({
     },
     pageSelectionWrapper: {
         minWidth: "1.5rem",
+        display: "flex",
+        alignItems: "center",
+        gap: "1rem",
     },
     pageSelectionDropdown: {
         minWidth: "100%",
     },
     pageSizeInput: {
         minWidth: "1.5rem",
-        width: "4rem",
+        width: "3rem",
+    },
+    pageSizeText: {
+        flex: 1,
+        minWidth: "100%",
+        fontSize: "0.8rem"
     },
 });
 
@@ -110,6 +118,9 @@ const Pagination = (props) => {
     const totalNumberOfPage = table.getPageCount();
     const currentPage = table.getState().pagination.pageIndex;
     const pageSize = table.getState().pagination.pageSize;
+    // get total item count and number of item in current page
+    const totalItemCount = table.getFilteredRowModel().rows.length;
+    const numberOfItemsInCurrentPage = table.getRowModel().rows.length;
     const pageSelectionOptions = useMemo(() => {
         let start = currentPage - Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
         let end = currentPage + Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
@@ -127,7 +138,7 @@ const Pagination = (props) => {
         const currentPageOptions = end - start >= 0 ? range(start, end) : [];
         return (currentPageOptions === null || currentPageOptions === void 0 ? void 0 : currentPageOptions.length) ? [...currentPageOptions] : [1];
     }, [totalNumberOfPage, currentPage]);
-    return (jsx("div", { className: styles.paginationContainer, children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.pageSelectionWrapper, children: jsx(Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: jsx(Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0, children: jsx(For, { each: pageSizeOptions, children: (option) => (jsx(Option, { value: `${option}`, children: `${option}` }, option)) }) }) }) }), jsxs("div", { className: styles.pageBtnContainer, children: [jsxs("div", { children: [jsxs("span", { children: ["Page", " ", jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxs("span", { children: [" ", "| Go to page:", " ", jsx(Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
+    return (jsx("div", { className: styles.paginationContainer, children: jsxs("div", { className: styles.wrapper, children: [jsxs("div", { className: styles.pageSelectionWrapper, children: [jsx(Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: jsx(Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0, children: jsx(For, { each: pageSizeOptions, children: (option) => (jsx(Option, { value: `${option}`, children: `${option}` }, option)) }) }) }), jsx(Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0 && totalItemCount > 0, children: jsxs("span", { className: styles.pageSizeText, children: ["Showing ", numberOfItemsInCurrentPage, " of ", totalItemCount, " items"] }) })] }), jsxs("div", { className: styles.pageBtnContainer, children: [jsxs("div", { children: [jsxs("span", { children: ["Page", " ", jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxs("span", { children: [" ", "| Go to page:", " ", jsx(Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
                                                 const page = data.value ? Number(e.target.value) - 1 : 0;
                                                 if (page >= 0 && page < table.getPageCount()) {
                                                     table.setPageIndex(page);
@@ -199,7 +210,7 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerS
         }, debounce);
         return () => clearTimeout(timeout);
     }, [value, onChange, debounce]);
-    return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Tooltip, { content: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsx(Button, { appearance: "subtle", icon: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
+    return (jsx(Input, { "aria-label": "Search keyword", placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Tooltip, { content: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsx(Button, { appearance: "subtle", icon: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? 'Close filter panel' : 'Open advanced filter', onClick: () => {
                     dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: "TOGGLE_FILTER_DRAWER" });
                 } }) }) }));
 }
@@ -224,15 +235,15 @@ const dateRange = (row, columnId, value) => {
         return true;
     }
     else if (value.length === 2 && value[0] && !value[1]) {
-        return typeof rowValue.getMonth === 'function' && rowValue >= value[0];
+        return typeof (rowValue === null || rowValue === void 0 ? void 0 : rowValue.getMonth) === 'function' && rowValue >= value[0];
     }
     else if (value.length === 2 && !value[0] && value[1]) {
-        return typeof rowValue.getMonth === 'function' && rowValue <= value[1];
+        return typeof (rowValue === null || rowValue === void 0 ? void 0 : rowValue.getMonth) === 'function' && rowValue <= value[1];
     }
     else if (value.length === 2 && !value[0] && !value[1]) {
         return true;
     }
-    const passed = typeof rowValue.getMonth === 'function' && value[0] <= rowValue && rowValue <= value[1];
+    const passed = typeof (rowValue === null || rowValue === void 0 ? void 0 : rowValue.getMonth) === 'function' && value[0] <= rowValue && rowValue <= value[1];
     return passed;
 };
 const date = (row, columnId, value) => {
@@ -246,7 +257,7 @@ const date = (row, columnId, value) => {
     if (!value) {
         return true;
     }
-    const passed = typeof rowValue.getMonth === 'function' && ((_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toDateString()) === (rowValue === null || rowValue === void 0 ? void 0 : rowValue.toDateString());
+    const passed = typeof (rowValue === null || rowValue === void 0 ? void 0 : rowValue.getMonth) === 'function' && ((_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toDateString()) === (rowValue === null || rowValue === void 0 ? void 0 : rowValue.toDateString());
     return passed;
 };
 
@@ -1216,7 +1227,7 @@ const useFilterStyles = makeStyles({
     },
 });
 const Filter = ({ column, table, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const filterFunctionName = column.columnDef.filterFn;
     const styles = useFilterStyles();
     switch (filterFunctionName) {
@@ -1228,18 +1239,18 @@ const Filter = ({ column, table, }) => {
         case 'inNumberRange':
             return jsx(FilterNumberRange, { column: column, table: table });
         case 'inDateRange': {
-            const firstValue = (_a = table
+            const firstValue = (_b = (_a = table
                 .getPreFilteredRowModel()
-                .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
-            if (typeof firstValue.getMonth === 'function') {
+                .flatRows) === null || _a === void 0 ? void 0 : _a.find(x => Boolean(x.getValue(column.id)))) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
+            if (typeof (firstValue === null || firstValue === void 0 ? void 0 : firstValue.getMonth) === 'function') {
                 return jsx(FilterDateRange, { column: column, table: table });
             }
             break;
         }
         case 'matchDate': {
-            const firstValue = (_b = table
+            const firstValue = (_c = table
                 .getPreFilteredRowModel()
-                .flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
+                .flatRows[0]) === null || _c === void 0 ? void 0 : _c.getValue(column.id);
             if (typeof firstValue.getMonth === 'function') {
                 return jsx(FilterDate, { column: column, table: table });
             }
@@ -1277,7 +1288,7 @@ const FilterDrawer = ({ table }) => {
     }, [table]);
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
     const { dispatchDrawerAction, drawerState } = table.options.meta;
-    return (jsxs(InlineDrawer, { position: "end", open: drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen, separator: true, children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, { action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Column Filters" }) }), jsx(DrawerBody, { className: styles.drawerBody, children: jsx(Accordion, { multiple: true, collapsible: true, children: headerGroups.map((headerGroup) => {
+    return (jsxs(InlineDrawer, { position: "end", open: drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen, separator: true, size: 'medium', children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, { action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Column Filters" }) }), jsx(DrawerBody, { className: styles.drawerBody, children: jsx(Accordion, { multiple: true, collapsible: true, children: headerGroups.map((headerGroup) => {
                         const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
                         if (!canApplyFilter)
                             return null;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.54.4-build-1.0",
+  "version": "9.66.2-build-2.0",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@fluentui/react-components": ">=9.54.4",
-    "@fluentui/react-icons": ">=2.0.247",
+    "@fluentui/react-components": ">=9.66.2",
+    "@fluentui/react-icons": ">=2.0.260",
     "@fluentui/react-datepicker-compat": ">=0.4.32"
   },
   "dependencies": {
-    "@tanstack/react-table": ">=8.10.7",
+    "@tanstack/react-table": ">=8.21.3",
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
@@ -29,4 +29,4 @@
   "types": "./index.cjs.d.ts",
   "module": "./index.esm.js",
   "main": "./index.cjs.js"
-}
+}

package/src/lib/components/GridContainer.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { TableProps, TableRef } from "../types";
 import { RowData } from "@tanstack/react-table";
 export declare function AdvancedTable<TItem extends RowData>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>): import("react/jsx-runtime").JSX.Element;
-export declare const ForwardedAdvancedTable: <TItem extends unknown>(props: TableProps<TItem> & {
+export declare const ForwardedAdvancedTable: <TItem extends RowData>(props: TableProps<TItem> & {
     ref?: React.ForwardedRef<TableRef<TItem>>;
 }) => React.ReactElement<TableProps<TItem> & {
     ref?: React.ForwardedRef<TableRef<TItem>>;

package/src/lib/components/extensions/PinRowAction.d.ts

@@ -2,5 +2,5 @@ import { Row, RowData } from "@tanstack/react-table";
 type PinRowActionProps<TData extends RowData> = {
     row: Row<TData>;
 };
-export declare const PinRowAction: <TData extends unknown>({ row }: PinRowActionProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const PinRowAction: <TData extends RowData>({ row }: PinRowActionProps<TData>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/extensions/SelectRowCheckbox.d.ts

@@ -2,5 +2,5 @@ import { Row, RowData } from "@tanstack/react-table";
 type SelectRowCheckboxProps<TData extends RowData> = {
     row: Row<TData>;
 };
-export declare const SelectRowCheckbox: <TData extends unknown>({ row }: SelectRowCheckboxProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectRowCheckbox: <TData extends RowData>({ row }: SelectRowCheckboxProps<TData>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/extensions/SelectRowRadio.d.ts

@@ -2,5 +2,5 @@ import { Row, RowData } from "@tanstack/react-table";
 type SelectRowRadioProps<TData extends RowData> = {
     row: Row<TData>;
 };
-export declare const SelectRowRadio: <TData extends unknown>({ row }: SelectRowRadioProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectRowRadio: <TData extends RowData>({ row }: SelectRowRadioProps<TData>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/Filter.d.ts

@@ -1,5 +1,5 @@
 import { Column, RowData, Table } from '@tanstack/react-table';
-export declare const Filter: <TItem extends unknown>({ column, table, }: {
+export declare const Filter: <TItem extends RowData>({ column, table, }: {
     column: Column<TItem, RowData>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/FilterDate.d.ts

@@ -3,5 +3,5 @@ type FilterNumberRangeProps<TItem extends RowData> = {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 };
-export declare const FilterDate: <TItem extends unknown>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterDate: <TItem extends RowData>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/FilterDateRange.d.ts

@@ -3,5 +3,5 @@ type FilterNumberRangeProps<TItem extends RowData> = {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 };
-export declare const FilterDateRange: <TItem extends unknown>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterDateRange: <TItem extends RowData>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/FilterDrawer.d.ts

@@ -2,5 +2,5 @@ import { RowData, Table } from '@tanstack/react-table';
 type FilterDrawerProps<TItem extends RowData> = {
     table: Table<TItem>;
 };
-export declare const FilterDrawer: <TItem extends unknown>({ table }: FilterDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterDrawer: <TItem extends RowData>({ table }: FilterDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/FilterMultiSelectCheckbox.d.ts

@@ -1,5 +1,5 @@
-import { Column, Table } from '@tanstack/react-table';
-export declare const FilterMultiSelectCheckbox: <TItem extends unknown>({ column, table, }: {
+import { Column, RowData, Table } from '@tanstack/react-table';
+export declare const FilterMultiSelectCheckbox: <TItem extends RowData>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/FilterNumberRange.d.ts

@@ -3,5 +3,5 @@ type FilterNumberRangeProps<TItem extends RowData> = {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 };
-export declare const FilterNumberRange: <TItem extends unknown>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterNumberRange: <TItem extends RowData>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/FilterSelectRadio.d.ts

@@ -1,5 +1,5 @@
-import { Column, Table } from "@tanstack/react-table";
-export declare const FilterSelectRadio: <TItem extends unknown>({ column, table, }: {
+import { Column, RowData, Table } from "@tanstack/react-table";
+export declare const FilterSelectRadio: <TItem extends RowData>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/grid-header/GridHeader.d.ts

@@ -8,5 +8,5 @@ type GridHeaderProps<TItem extends RowData> = {
     setGlobalFilter: (value: string) => void;
     applyTableState: (tableState: TableState) => boolean;
 };
-export declare const GridHeader: <TItem extends unknown>(props: GridHeaderProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridHeader: <TItem extends RowData>(props: GridHeaderProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/loading/Loading.d.ts

@@ -4,5 +4,5 @@ type LoadingProps<TItem extends RowData> = {
     visibleColumns: Column<TItem, unknown>[];
     table: Table<TItem>;
 };
-export declare const Loading: <TItem extends unknown>(props: LoadingProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const Loading: <TItem extends RowData>(props: LoadingProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/pagination/Pagination.d.ts

@@ -2,5 +2,5 @@ import { RowData, Table } from "@tanstack/react-table";
 type PaginationProps<TItem extends RowData> = {
     table: Table<TItem>;
 };
-export declare const Pagination: <TItem extends unknown>(props: PaginationProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: <TItem extends RowData>(props: PaginationProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/pagination/usePaginationStyles.d.ts

@@ -1 +1 @@
-export declare const usePaginationStyle: () => Record<"paginationContainer" | "wrapper" | "pageBtnContainer" | "pageBtn" | "pageSelectionWrapper" | "pageSelectionDropdown" | "pageSizeInput", string>;
+export declare const usePaginationStyle: () => Record<"paginationContainer" | "wrapper" | "pageBtnContainer" | "pageBtn" | "pageSelectionWrapper" | "pageSelectionDropdown" | "pageSizeInput" | "pageSizeText", string>;

package/src/lib/components/table/Table.d.ts

@@ -7,5 +7,5 @@ type TableContainerProps<TItem extends RowData> = {
     isLoading: boolean;
     data: TItem[];
 };
-export declare const TableContainer: <TItem extends unknown>(props: TableContainerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableContainer: <TItem extends RowData>(props: TableContainerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/tbody/TableBody.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RowData, Table } from '@tanstack/react-table';
 type TableBodyProps<TItem extends RowData> = {
     table: Table<TItem>;

package/src/lib/components/tbody/TableRow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Row, RowData, Table } from '@tanstack/react-table';
 type TableRowProps<TItem extends RowData> = {
     table: Table<TItem>;

package/src/lib/components/useGridContainer.d.ts

@@ -1,7 +1,7 @@
-import { TableState } from '@tanstack/react-table';
+import { RowData, TableState } from '@tanstack/react-table';
 import { TableProps, TableRef, TableView } from '../types';
 import * as React from 'react';
-export declare const useGridContainer: <TItem extends unknown>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>) => {
+export declare const useGridContainer: <TItem extends RowData>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>) => {
     table: import("@tanstack/react-table").Table<TItem>;
     globalFilter: string;
     tableViews: TableView[];

package/src/lib/components/views/ViewSaveForm.d.ts

@@ -5,5 +5,5 @@ type ViewSaveFormProps<TItem extends RowData> = {
     onSave: TableProps<TItem>['onTableViewSave'];
     getTableState: () => TableState;
 };
-export declare const ViewSaveForm: <TItem extends unknown>(props: ViewSaveFormProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewSaveForm: <TItem extends RowData>(props: ViewSaveFormProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/views/ViewsDrawer.d.ts

@@ -6,5 +6,5 @@ type ViewsDrawerProps<TItem extends RowData> = {
     applyTableState: (tableView: TableState) => boolean;
     resetToGridDefaultView: () => boolean;
 };
-export declare const ViewsDrawer: <TItem extends unknown>(props: ViewsDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewsDrawer: <TItem extends RowData>(props: ViewsDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/helpers/Helpers.d.ts

@@ -1,2 +1,2 @@
-import { Column } from "@tanstack/react-table";
-export declare const getLeafColumns: <TItem extends unknown>(columns: Column<TItem>[]) => Column<TItem>[];
+import { Column, RowData } from "@tanstack/react-table";
+export declare const getLeafColumns: <TItem extends RowData>(columns: Column<TItem>[]) => Column<TItem>[];

package/src/lib/helpers/StylesHelper.d.ts

@@ -1,5 +1,5 @@
-import { Column, Row } from "@tanstack/react-table";
+import { Column, Row, RowData } from "@tanstack/react-table";
 import { CSSProperties } from "react";
-export declare const getHeaderCellPinningStyles: <TItem extends unknown>(column: Column<TItem, unknown>, isDragging: boolean, additionalStyles: CSSProperties) => CSSProperties;
-export declare const getBodyCellPinningStyles: <TItem extends unknown>(column: Column<TItem, unknown>, isDragging: boolean, additionalStyles: CSSProperties) => CSSProperties;
-export declare const getRowPinningStyles: <TItem extends unknown>(row: Row<TItem>, bottomRowLength: number, headerGroupLength: number, additionalStyles: CSSProperties) => CSSProperties;
+export declare const getHeaderCellPinningStyles: <TItem extends RowData>(column: Column<TItem, unknown>, isDragging: boolean, additionalStyles: CSSProperties) => CSSProperties;
+export declare const getBodyCellPinningStyles: <TItem extends RowData>(column: Column<TItem, unknown>, isDragging: boolean, additionalStyles: CSSProperties) => CSSProperties;
+export declare const getRowPinningStyles: <TItem extends RowData>(row: Row<TItem>, bottomRowLength: number, headerGroupLength: number, additionalStyles: CSSProperties) => CSSProperties;

package/src/lib/helpers/TableExportDataHelper.d.ts

@@ -1,3 +1,3 @@
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 export type TableExportData = Record<string, unknown>[];
-export declare const getTableData: <TItem extends unknown>(table: Table<TItem>) => TableExportData;
+export declare const getTableData: <TItem extends RowData>(table: Table<TItem>) => TableExportData;

package/src/lib/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, ExpandedState, FilterFn, GroupingState, PaginationState, RowData, RowPinningState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { TableProps, TableSettings } from "./types";
 import { ActionType, DrawerTableState } from "./components/reducer";