@prt-ts/fluent-react-table-v2 9.46.8-build.5.0 → 9.46.8-build.6.0

package/index.cjs.js

@@ -7,11 +7,10 @@ var React = require('react');
 var reactComponents = require('@fluentui/react-components');
 var reactControlFlow = require('@prt-ts/react-control-flow');
 var reactTable = require('@tanstack/react-table');
-var reactVirtual = require('@tanstack/react-virtual');
+var reactVirtual = require('react-virtual');
 var reactDatepickerCompat = require('@fluentui/react-datepicker-compat');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
-var reactVirtual$1 = require('react-virtual');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 
@@ -45,7 +44,7 @@ const useTableStaticStyles = reactComponents.makeStyles({
         // height: "650px",
         width: "100%" }, reactComponents.shorthands.overflow("hidden", "auto")), { 
         /* width */
-        ":hover": Object.assign({}, reactComponents.shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "6px", height: "4px" }, reactComponents.shorthands.borderRadius("50%")), 
+        ":hover": Object.assign({}, reactComponents.shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "8px", height: "4px" }, reactComponents.shorthands.borderRadius("50%")), 
         /* Track */
         "::-webkit-scrollbar-track": {
             "background-color": "#f1f1f1",
@@ -1173,11 +1172,11 @@ const GridHeader = (props) => {
                                                 return null;
                                             if (column.id === 'id')
                                                 return null;
-                                            return (jsxRuntime.jsx(reactComponents.Switch, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsxRuntime.jsx("span", { children: column.columnDef.id }) }, column.id));
-                                        })] }) })] }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { className: styles.popoverSurface, children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Toggle Columns" }), jsxRuntime.jsx(reactComponents.Switch, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsxRuntime.jsx(reactComponents.Divider, {}), table.getAllLeafColumns().map((column) => {
+                                            return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsxRuntime.jsx("span", { children: column.columnDef.id }) }, column.id));
+                                        })] }) })] }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { className: styles.popoverSurface, children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Toggle Columns" }), jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsxRuntime.jsx(reactComponents.Divider, {}), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
                                                 return null;
-                                            return (jsxRuntime.jsx(reactComponents.Switch, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
+                                            return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
                                         })] }) })] }), jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Table Views Management', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { onClick: () => {
                                 dispatch({ type: "TOGGLE_VIEW_DRAWER" });
                             }, icon: jsxRuntime.jsx(Album24Regular, {}), "aria-label": "View Menu" }) }), jsxRuntime.jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", drawerState: drawerState, dispatch: dispatch })] })] }));
@@ -1511,7 +1510,7 @@ const useCheckboxFilterStyles = reactComponents.makeStyles({
         marginLeft: '10px',
         marginRight: '10px',
     },
-    searchContainer: Object.assign(Object.assign(Object.assign({ maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), reactComponents.shorthands.padding('0px', "0px", "2px", '0px')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')), 
+    searchContainer: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), reactComponents.shorthands.padding('0px', "0px", "2px", '0px')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')), 
         /* Track */
         '::-webkit-scrollbar-track': {
             'background-color': '#f1f1f1',
@@ -1526,7 +1525,7 @@ const useCheckboxFilterStyles = reactComponents.makeStyles({
         } }),
 });
 const FilterMultiSelectCheckbox = ({ column, table, }) => {
-    var _a;
+    var _a, _b, _c;
     const firstValue = (_a = table
         .getPreFilteredRowModel()
         .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
@@ -1549,45 +1548,45 @@ const FilterMultiSelectCheckbox = ({ column, table, }) => {
             return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
         });
     }, [localColumnFilterValue, filterOptions]);
-    const parentRef = React__namespace.useRef(null);
-    const virtualizer = reactVirtual.useVirtualizer({
-        count: (filterOptionsFiltered === null || filterOptionsFiltered === void 0 ? void 0 : filterOptionsFiltered.length) || 0,
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => 30,
-        overscan: 5,
+    const filterContainer = React__namespace.useRef(null);
+    const rowVirtualizer = reactVirtual.useVirtual({
+        parentRef: filterContainer,
+        size: filterOptionsFiltered.length,
+        overscan: 15,
     });
-    const virtualItems = virtualizer.getVirtualItems();
+    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
+    const paddingBottom = virtualRows.length > 0
+        ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
+        : 0;
     const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
         (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length)
         ? 'mixed'
         : (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
             (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
     const styles = useCheckboxFilterStyles();
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsx("div", { ref: parentRef, className: styles.searchContainer, children: jsxRuntime.jsxs("div", { style: { height: `${virtualizer.getTotalSize()}px` }, children: [jsxRuntime.jsx(reactComponents.Checkbox, { checked: allOptionChecked, onChange: () => {
-                                if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
-                                    column.setFilterValue(undefined);
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && (jsxRuntime.jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsxRuntime.jsx(reactComponents.Checkbox, { checked: allOptionChecked, onChange: () => {
+                            if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
+                                column.setFilterValue(undefined);
+                                return;
+                            }
+                            column.setFilterValue([
+                                ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
+                            ]);
+                        }, label: '(Toggle All)' }, `toggle-all-${column.id}`), virtualRows.map((row) => {
+                        var _a;
+                        const value = `${filterOptionsFiltered[row.index]}`;
+                        return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
+                                if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
+                                    column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
                                     return;
                                 }
-                                column.setFilterValue([
-                                    ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
+                                column.setFilterValue((old) => [
+                                    ...(old || []),
+                                    value,
                                 ]);
-                            }, label: '(Toggle All)' }, `toggle-all-${column.id}`), (virtualItems || []).map((row, index) => {
-                            var _a;
-                            const value = `${filterOptionsFiltered[row.index]}`;
-                            return (jsxRuntime.jsx("div", { style: {
-                                    height: `${row.size}px`,
-                                    transform: `translateY(${row.start - index * row.size}px)`,
-                                }, children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
-                                        if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
-                                            column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
-                                            return;
-                                        }
-                                        column.setFilterValue((old) => [
-                                            ...(old || []),
-                                            value,
-                                        ]);
-                                    }, label: value }) }, `${column.id}-${row.index}`));
-                        })] }) })] }));
+                            }, label: value }, `${column.id}-${row.index}`));
+                    }), paddingBottom > 0 && (jsxRuntime.jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }, 'filter-multi-select-checkbox')] }));
 };
 
 const useRadioFilterStyles = reactComponents.makeStyles({
@@ -1597,7 +1596,7 @@ const useRadioFilterStyles = reactComponents.makeStyles({
         marginLeft: '10px',
         marginRight: '10px',
     },
-    searchContainer: Object.assign(Object.assign({ maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')), 
+    searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')), 
         /* Track */
         '::-webkit-scrollbar-track': {
             'background-color': '#f1f1f1',
@@ -1612,7 +1611,7 @@ const useRadioFilterStyles = reactComponents.makeStyles({
         } }),
 });
 const FilterSelectRadio = ({ column, table, }) => {
-    var _a;
+    var _a, _b, _c;
     const firstValue = (_a = table
         .getPreFilteredRowModel()
         .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
@@ -1635,28 +1634,28 @@ const FilterSelectRadio = ({ column, table, }) => {
             return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
         });
     }, [localColumnFilterValue, filterOptions]);
-    const parentRef = React__namespace.useRef(null);
-    const virtualizer = reactVirtual.useVirtualizer({
-        count: (filterOptionsFiltered === null || filterOptionsFiltered === void 0 ? void 0 : filterOptionsFiltered.length) || 0,
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => 30,
-        overscan: 5,
+    const filterContainer = React__namespace.useRef(null);
+    const rowVirtualizer = reactVirtual.useVirtual({
+        parentRef: filterContainer,
+        size: filterOptionsFiltered.length,
+        overscan: 15,
     });
-    const virtualItems = virtualizer.getVirtualItems();
+    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
+    const paddingBottom = virtualRows.length > 0
+        ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
+        : 0;
     const styles = useRadioFilterStyles();
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsx("div", { ref: parentRef, className: styles.searchContainer, children: jsxRuntime.jsx("div", { style: { height: `${virtualizer.getTotalSize()}px` }, children: jsxRuntime.jsxs(reactComponents.RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && jsxRuntime.jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxRuntime.jsxs(reactComponents.RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
                             if (data.value === '') {
                                 column.setFilterValue([]);
                                 return;
                             }
                             column.setFilterValue([data.value]);
-                        }, children: [jsxRuntime.jsx(reactComponents.Radio, { value: '', label: 'None' }), (virtualItems || []).map((row, index) => {
+                        }, children: [jsxRuntime.jsx(reactComponents.Radio, { value: '', label: 'None' }), virtualRows.map((row) => {
                                 const value = filterOptionsFiltered[row.index];
-                                return (jsxRuntime.jsx("div", { style: {
-                                        height: `${row.size}px`,
-                                        transform: `translateY(${row.start - index * row.size}px)`,
-                                    }, children: jsxRuntime.jsx(reactComponents.Radio, { value: value, label: value }, value) }, `${column.id}-${row.index}`));
-                            })] }) }) })] }));
+                                return jsxRuntime.jsx(reactComponents.Radio, { value: value, label: value }, value);
+                            })] }), paddingBottom > 0 && (jsxRuntime.jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] })] }));
 };
 
 const useNumberRangeFilterStyles$2 = reactComponents.makeStyles({
@@ -2157,7 +2156,7 @@ function TableBody(props) {
         topRows = [];
         bottomRows = [];
     }
-    const rowVirtualizer = reactVirtual$1.useVirtual({
+    const rowVirtualizer = reactVirtual.useVirtual({
         parentRef: tableContainerRef,
         size: rows.length,
         overscan: 10,

package/index.esm.js

@@ -1,15 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Switch, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Accordion, AccordionItem, AccordionHeader, Caption1Stronger, AccordionPanel, DrawerFooter, mergeClasses as mergeClasses$1, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio } from '@fluentui/react-components';
-import { Show, For, Switch as Switch$1, Case } from '@prt-ts/react-control-flow';
+import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Accordion, AccordionItem, AccordionHeader, Caption1Stronger, AccordionPanel, DrawerFooter, mergeClasses as mergeClasses$1, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio } from '@fluentui/react-components';
+import { Show, For, Switch, Case } from '@prt-ts/react-control-flow';
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtual } from 'react-virtual';
 import { DatePicker } from '@fluentui/react-datepicker-compat';
 import { useSortable, SortableContext, horizontalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { useVirtual } from 'react-virtual';
 import { useSensor, PointerSensor, MouseSensor, TouchSensor, KeyboardSensor, useSensors, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 
@@ -23,7 +22,7 @@ const useTableStaticStyles = makeStyles({
         // height: "650px",
         width: "100%" }, shorthands.overflow("hidden", "auto")), { 
         /* width */
-        ":hover": Object.assign({}, shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "6px", height: "4px" }, shorthands.borderRadius("50%")), 
+        ":hover": Object.assign({}, shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "8px", height: "4px" }, shorthands.borderRadius("50%")), 
         /* Track */
         "::-webkit-scrollbar-track": {
             "background-color": "#f1f1f1",
@@ -1151,11 +1150,11 @@ const GridHeader = (props) => {
                                                 return null;
                                             if (column.id === 'id')
                                                 return null;
-                                            return (jsx(Switch, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsx("span", { children: column.columnDef.id }) }, column.id));
-                                        })] }) })] }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsx(PopoverSurface, { className: styles.popoverSurface, children: jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Switch, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
+                                            return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsx("span", { children: column.columnDef.id }) }, column.id));
+                                        })] }) })] }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsx(PopoverSurface, { className: styles.popoverSurface, children: jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
                                                 return null;
-                                            return (jsx(Switch, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
+                                            return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
                                         })] }) })] }), jsx(Tooltip, { content: 'Table Views Management', relationship: "label", children: jsx(Button, { onClick: () => {
                                 dispatch({ type: "TOGGLE_VIEW_DRAWER" });
                             }, icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }) }), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", drawerState: drawerState, dispatch: dispatch })] })] }));
@@ -1489,7 +1488,7 @@ const useCheckboxFilterStyles = makeStyles({
         marginLeft: '10px',
         marginRight: '10px',
     },
-    searchContainer: Object.assign(Object.assign(Object.assign({ maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), shorthands.padding('0px', "0px", "2px", '0px')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
+    searchContainer: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), shorthands.padding('0px', "0px", "2px", '0px')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
         /* Track */
         '::-webkit-scrollbar-track': {
             'background-color': '#f1f1f1',
@@ -1504,7 +1503,7 @@ const useCheckboxFilterStyles = makeStyles({
         } }),
 });
 const FilterMultiSelectCheckbox = ({ column, table, }) => {
-    var _a;
+    var _a, _b, _c;
     const firstValue = (_a = table
         .getPreFilteredRowModel()
         .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
@@ -1527,45 +1526,45 @@ const FilterMultiSelectCheckbox = ({ column, table, }) => {
             return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
         });
     }, [localColumnFilterValue, filterOptions]);
-    const parentRef = React.useRef(null);
-    const virtualizer = useVirtualizer({
-        count: (filterOptionsFiltered === null || filterOptionsFiltered === void 0 ? void 0 : filterOptionsFiltered.length) || 0,
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => 30,
-        overscan: 5,
+    const filterContainer = React.useRef(null);
+    const rowVirtualizer = useVirtual({
+        parentRef: filterContainer,
+        size: filterOptionsFiltered.length,
+        overscan: 15,
     });
-    const virtualItems = virtualizer.getVirtualItems();
+    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
+    const paddingBottom = virtualRows.length > 0
+        ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
+        : 0;
     const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
         (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length)
         ? 'mixed'
         : (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
             (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
     const styles = useCheckboxFilterStyles();
-    return (jsxs("div", { children: [jsx(Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsx("div", { ref: parentRef, className: styles.searchContainer, children: jsxs("div", { style: { height: `${virtualizer.getTotalSize()}px` }, children: [jsx(Checkbox, { checked: allOptionChecked, onChange: () => {
-                                if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
-                                    column.setFilterValue(undefined);
+    return (jsxs("div", { children: [jsx(Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && (jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsx(Checkbox, { checked: allOptionChecked, onChange: () => {
+                            if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
+                                column.setFilterValue(undefined);
+                                return;
+                            }
+                            column.setFilterValue([
+                                ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
+                            ]);
+                        }, label: '(Toggle All)' }, `toggle-all-${column.id}`), virtualRows.map((row) => {
+                        var _a;
+                        const value = `${filterOptionsFiltered[row.index]}`;
+                        return (jsx(Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
+                                if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
+                                    column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
                                     return;
                                 }
-                                column.setFilterValue([
-                                    ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
+                                column.setFilterValue((old) => [
+                                    ...(old || []),
+                                    value,
                                 ]);
-                            }, label: '(Toggle All)' }, `toggle-all-${column.id}`), (virtualItems || []).map((row, index) => {
-                            var _a;
-                            const value = `${filterOptionsFiltered[row.index]}`;
-                            return (jsx("div", { style: {
-                                    height: `${row.size}px`,
-                                    transform: `translateY(${row.start - index * row.size}px)`,
-                                }, children: jsx(Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
-                                        if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
-                                            column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
-                                            return;
-                                        }
-                                        column.setFilterValue((old) => [
-                                            ...(old || []),
-                                            value,
-                                        ]);
-                                    }, label: value }) }, `${column.id}-${row.index}`));
-                        })] }) })] }));
+                            }, label: value }, `${column.id}-${row.index}`));
+                    }), paddingBottom > 0 && (jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }, 'filter-multi-select-checkbox')] }));
 };
 
 const useRadioFilterStyles = makeStyles({
@@ -1575,7 +1574,7 @@ const useRadioFilterStyles = makeStyles({
         marginLeft: '10px',
         marginRight: '10px',
     },
-    searchContainer: Object.assign(Object.assign({ maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
+    searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
         /* Track */
         '::-webkit-scrollbar-track': {
             'background-color': '#f1f1f1',
@@ -1590,7 +1589,7 @@ const useRadioFilterStyles = makeStyles({
         } }),
 });
 const FilterSelectRadio = ({ column, table, }) => {
-    var _a;
+    var _a, _b, _c;
     const firstValue = (_a = table
         .getPreFilteredRowModel()
         .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
@@ -1613,28 +1612,28 @@ const FilterSelectRadio = ({ column, table, }) => {
             return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
         });
     }, [localColumnFilterValue, filterOptions]);
-    const parentRef = React.useRef(null);
-    const virtualizer = useVirtualizer({
-        count: (filterOptionsFiltered === null || filterOptionsFiltered === void 0 ? void 0 : filterOptionsFiltered.length) || 0,
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => 30,
-        overscan: 5,
+    const filterContainer = React.useRef(null);
+    const rowVirtualizer = useVirtual({
+        parentRef: filterContainer,
+        size: filterOptionsFiltered.length,
+        overscan: 15,
     });
-    const virtualItems = virtualizer.getVirtualItems();
+    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
+    const paddingBottom = virtualRows.length > 0
+        ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
+        : 0;
     const styles = useRadioFilterStyles();
-    return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsx("div", { ref: parentRef, className: styles.searchContainer, children: jsx("div", { style: { height: `${virtualizer.getTotalSize()}px` }, children: jsxs(RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
+    return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxs(RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
                             if (data.value === '') {
                                 column.setFilterValue([]);
                                 return;
                             }
                             column.setFilterValue([data.value]);
-                        }, children: [jsx(Radio, { value: '', label: 'None' }), (virtualItems || []).map((row, index) => {
+                        }, children: [jsx(Radio, { value: '', label: 'None' }), virtualRows.map((row) => {
                                 const value = filterOptionsFiltered[row.index];
-                                return (jsx("div", { style: {
-                                        height: `${row.size}px`,
-                                        transform: `translateY(${row.start - index * row.size}px)`,
-                                    }, children: jsx(Radio, { value: value, label: value }, value) }, `${column.id}-${row.index}`));
-                            })] }) }) })] }));
+                                return jsx(Radio, { value: value, label: value }, value);
+                            })] }), paddingBottom > 0 && (jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] })] }));
 };
 
 const useNumberRangeFilterStyles$2 = makeStyles({
@@ -2093,7 +2092,7 @@ function TableRow({ row, rowSelectionMode, style }) {
     const styles = useTableBodyStyles();
     return (jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
             ? styles.tBodySelectedRow
-            : styles.tBodyRow, style: style, children: [jsxs(Switch$1, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Checkbox, { checked: row.getIsSomeSelected()
+            : styles.tBodyRow, style: style, children: [jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Checkbox, { checked: row.getIsSomeSelected()
                                     ? 'mixed'
                                     : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) }), jsx(Case, { value: 'single', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) })] }), row.getVisibleCells().map((cell) => (jsx(TableCell, { cell: cell, row: row }, cell.id)))] }, row.id));
 }
@@ -2110,7 +2109,7 @@ function PinnedRow({ row, rowSelectionMode, style, bottomRowLength }) {
             bottom: row.getIsPinned() === 'bottom'
                 ? `${((bottomRowLength || 0) - 1 - row.getPinnedIndex()) * 35}px`
                 : undefined
-        }, children: [jsxs(Switch$1, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Checkbox, { checked: row.getIsSomeSelected()
+        }, children: [jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Checkbox, { checked: row.getIsSomeSelected()
                                     ? 'mixed'
                                     : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) }), jsx(Case, { value: 'single', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) })] }), row.getVisibleCells().map(cell => {
                 return (jsx(TableCell, { cell: cell, row: row }, cell.id));
@@ -2177,7 +2176,7 @@ const TableContainer = (props) => {
     const isLoading = props.isLoading && itemLength === 0;
     const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
     const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) > 0 && itemLength === 0;
-    return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxs(Switch$1, { when: true, children: [jsx(Case, { value: isLoading, children: jsx(Loading, {}) }), jsx(Case, { value: noItems, children: jsx(NoItemGrid, { message: props.noItemPage }) }), jsx(Case, { value: noSearchResult, children: jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
+    return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxs(Switch, { when: true, children: [jsx(Case, { value: isLoading, children: jsx(Loading, {}) }), jsx(Case, { value: noItems, children: jsx(NoItemGrid, { message: props.noItemPage }) }), jsx(Case, { value: noSearchResult, children: jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
 };
 
 const ViewSaveForm = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.46.8-build.5.0",
+  "version": "9.46.8-build.6.0",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@tanstack/react-table": ">=8.10.7",
-    "@tanstack/react-virtual": ">=3.0.0",
     "@dnd-kit/core": ">6.0.0",
     "@dnd-kit/modifiers": ">=7.0.0",
     "@dnd-kit/sortable": ">=8.0.0",

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, }: {
+export declare const FilterMultiSelectCheckbox: <TItem extends object>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

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, }: {
+export declare const FilterSelectRadio: <TItem extends object>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;