@prt-ts/fluent-react-table-v2 9.55.0-build-1.0 → 9.66.2-build-3.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

@@ -106,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"
     },
 });
 
@@ -124,19 +132,25 @@ const DEFAULT_NUMBER_OF_PAGE_BTN = 5;
 const Pagination = (props) => {
     const { table } = props;
     const { pageSizeOptions } = table.options.meta || {};
-    const pageSizeSelectionId = reactComponents.useId("page-size-selector");
+    const pageSizeSelectionId = reactComponents.useId('page-size-selector');
     const styles = usePaginationStyle();
     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 startNumber = currentPage * pageSize + 1;
+    const endNumber = Math.min(startNumber + numberOfItemsInCurrentPage - 1, totalItemCount);
     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);
         if (start < 1) {
             start = 1;
-            end = totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
-                ? DEFAULT_NUMBER_OF_PAGE_BTN
-                : totalNumberOfPage;
+            end =
+                totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
+                    ? DEFAULT_NUMBER_OF_PAGE_BTN
+                    : totalNumberOfPage;
         }
         else if (end > totalNumberOfPage) {
             const possibleStart = totalNumberOfPage - DEFAULT_NUMBER_OF_PAGE_BTN + 1;
@@ -146,12 +160,12 @@ 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', style: { minWidth: 80 }, 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 ", startNumber, " through ", endNumber, " 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);
                                                 }
-                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsxRuntime.jsx(reactIcons.PreviousRegular, {}), "aria-label": "Go to first page" }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsxRuntime.jsx(reactIcons.ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), jsxRuntime.jsx(reactControlFlow.For, { each: pageSelectionOptions, children: (option, index) => (jsxRuntime.jsx(reactComponents.Button, { shape: "circular", appearance: option - 1 === currentPage ? "primary" : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index)) }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsxRuntime.jsx(reactIcons.ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsxRuntime.jsx(reactComponents.Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsxRuntime.jsx(reactIcons.NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
+                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: 'off', autoCorrect: 'off' })] })] }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsxRuntime.jsx(reactIcons.PreviousRegular, {}), "aria-label": "Go to first page" }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsxRuntime.jsx(reactIcons.ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), jsxRuntime.jsx(reactControlFlow.For, { each: pageSelectionOptions, children: (option, index) => (jsxRuntime.jsx(reactComponents.Button, { shape: "circular", appearance: option - 1 === currentPage ? 'primary' : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index)) }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsxRuntime.jsx(reactIcons.ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsxRuntime.jsx(reactComponents.Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsxRuntime.jsx(reactIcons.NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
 };
 
 reactIcons.bundleIcon(reactIcons.SaveFilled, reactIcons.SaveRegular);
@@ -218,7 +232,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" });
                 } }) }) }));
 }
@@ -243,15 +257,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) => {
@@ -265,7 +279,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;
 };
 
@@ -1235,7 +1249,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) {
@@ -1247,18 +1261,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 });
             }
@@ -1296,7 +1310,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;

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"
     },
 });
 
@@ -105,19 +113,25 @@ const DEFAULT_NUMBER_OF_PAGE_BTN = 5;
 const Pagination = (props) => {
     const { table } = props;
     const { pageSizeOptions } = table.options.meta || {};
-    const pageSizeSelectionId = useId("page-size-selector");
+    const pageSizeSelectionId = useId('page-size-selector');
     const styles = usePaginationStyle();
     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 startNumber = currentPage * pageSize + 1;
+    const endNumber = Math.min(startNumber + numberOfItemsInCurrentPage - 1, totalItemCount);
     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);
         if (start < 1) {
             start = 1;
-            end = totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
-                ? DEFAULT_NUMBER_OF_PAGE_BTN
-                : totalNumberOfPage;
+            end =
+                totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
+                    ? DEFAULT_NUMBER_OF_PAGE_BTN
+                    : totalNumberOfPage;
         }
         else if (end > totalNumberOfPage) {
             const possibleStart = totalNumberOfPage - DEFAULT_NUMBER_OF_PAGE_BTN + 1;
@@ -127,12 +141,12 @@ 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', style: { minWidth: 80 }, 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 ", startNumber, " through ", endNumber, " 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);
                                                 }
-                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), jsx(For, { each: pageSelectionOptions, children: (option, index) => (jsx(Button, { shape: "circular", appearance: option - 1 === currentPage ? "primary" : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index)) }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
+                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: 'off', autoCorrect: 'off' })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), jsx(For, { each: pageSelectionOptions, children: (option, index) => (jsx(Button, { shape: "circular", appearance: option - 1 === currentPage ? 'primary' : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index)) }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
 };
 
 bundleIcon(SaveFilled, SaveRegular);
@@ -199,7 +213,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 +238,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 +260,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 +1230,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 +1242,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 +1291,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.55.0-build-1.0",
+  "version": "9.66.2-build-3.0",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@fluentui/react-components": ">=9.55.0",
+    "@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",

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

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

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>;