@prt-ts/fluent-react-table-v2 9.55.0-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

@@ -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"
     },
 });
 
@@ -129,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);
@@ -146,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);
@@ -218,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" });
                 } }) }) }));
 }
@@ -243,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) => {
@@ -265,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;
 };
 
@@ -1235,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) {
@@ -1247,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 });
             }
@@ -1296,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;

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.55.0-build-1.0",
+  "version": "9.66.2-build-2.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/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>;