@prt-ts/fluent-react-table-v2 9.40.0-build.8.0 → 9.41.0-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.js

@@ -1,10 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuDivider, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, MenuButton, MenuGroup, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger } from '@fluentui/react-components';
-import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, TextGrammarDismissRegular, Search24Regular, FilterDismissFilled, Dismiss24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular } from '@fluentui/react-icons';
+import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio, DrawerFooter } from '@fluentui/react-components';
+import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, Album24Regular, Search24Regular, FilterDismissFilled, Dismiss24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular, Save20Filled, ViewDesktop20Filled, ViewDesktop20Regular } from '@fluentui/react-icons';
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
 import { useVirtual } from 'react-virtual';
@@ -161,35 +161,23 @@ const useGridHeaderStyles = makeStyles({
 });
 
 const GridHeader = (props) => {
-    const { table, gridTitle, globalFilter, setGlobalFilter, applyTableState, tableViews } = props;
+    const { table, gridTitle, globalFilter, setGlobalFilter } = props;
     const styles = useGridHeaderStyles();
-    const resetAllFilters = React.useCallback(() => {
-        table.setGlobalFilter('');
-        table.resetColumnFilters();
-    }, [table]);
-    const resetAllGrouping = React.useCallback(() => {
-        table.resetGrouping();
-    }, [table]);
-    const clearAllSelection = React.useCallback(() => {
-        table.toggleAllRowsSelected(false);
-    }, [table]);
-    return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
+    return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Tooltip, Object.assign({ content: 'Toggle Group Column', relationship: "label" }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
                                                 return null;
                                             if (column.id === 'id')
                                                 return null;
                                             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, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ 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) => {
+                                        })] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Tooltip, Object.assign({ content: 'Toggle Column Visibility', relationship: "label" }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) })) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ 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(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
-                                        })] })) })] })), jsxs(Menu, { children: [jsx(MenuTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button
-                                // appearance="subtle"
-                                , { 
-                                    // appearance="subtle"
-                                    icon: jsx(TextGrammarDismissRegular, {}), "aria-label": "View Menu" }) })), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" })), jsx(MenuDivider, {}), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: props.resetToGridDefaultView }, { children: "Reset to Default View" })), tableViews.length > 0 && jsx(MenuDivider, {}), tableViews.map((view) => {
-                                            return (jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: () => applyTableState(view.tableState) }, { children: view.viewName }), view.id));
-                                        })] }) })] }), 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...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
+                                        })] })) })] })), jsx(Tooltip, Object.assign({ content: 'Table Views Management', relationship: "label" }, { children: jsx(Button
+                        // appearance="subtle"
+                        , { 
+                            // appearance="subtle"
+                            onClick: () => props.setViewsDrawerOpen((value) => !value), 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...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
 };
 // A debounced input react component
 function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
@@ -203,9 +191,9 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFil
         }, 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(Button, { appearance: "subtle", title: 'Ad', icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
-                setFilterDrawerOpen((open) => !open);
-            } }) }));
+    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, Object.assign({ content: openFilterDrawer ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label" }, { children: jsx(Button, { appearance: "subtle", icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
+                    setFilterDrawerOpen((open) => !open);
+                } }) })) }));
 }
 
 const arrIncludesSome = (row, columnId, value) => {
@@ -225,12 +213,15 @@ const dateRange = (row, columnId, value) => {
     if (!value || value.length === 0) {
         return true;
     }
-    if (value.length === 2 && value[0] && !value[1]) {
+    else if (value.length === 2 && value[0] && !value[1]) {
         return typeof rowValue.getMonth === 'function' && rowValue >= value[0];
     }
-    if (value.length === 2 && !value[0] && value[1]) {
+    else if (value.length === 2 && !value[0] && value[1]) {
         return typeof 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];
     return passed;
 };
@@ -289,9 +280,9 @@ const useGridContainer = (props, ref) => {
         columns: columns,
         data,
         filterFns: {
-            includeArray: arrIncludesSome,
-            dateRange,
-            date
+            arrIncludesSome: arrIncludesSome,
+            inDateRange: dateRange,
+            matchDate: date,
         },
         initialState: {
             expanded: true,
@@ -460,6 +451,7 @@ const useGridContainer = (props, ref) => {
         setGlobalFilter,
         resetToDefaultView,
         applyTableState,
+        getTableState
     };
 };
 
@@ -678,13 +670,17 @@ const FilterDateRange = (props) => {
     const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
     const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
     const handleMinChange = (date) => {
-        if (!date)
+        if (!date) {
+            column.setFilterValue((old) => [undefined, old === null || old === void 0 ? void 0 : old[1]]);
             return;
+        }
         column.setFilterValue((old) => [date, old === null || old === void 0 ? void 0 : old[1]]);
     };
     const handleMaxChange = (date) => {
-        if (!date)
+        if (!date) {
+            column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], undefined]);
             return;
+        }
         column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
     };
     const styles = useNumberRangeFilterStyles$1();
@@ -714,8 +710,10 @@ const FilterDate = (props) => {
     const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
     const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
     const onDateSelect = (date) => {
-        if (!date)
+        if (!date) {
+            column.setFilterValue(undefined);
             return;
+        }
         column.setFilterValue(date);
     };
     const styles = useNumberRangeFilterStyles();
@@ -742,14 +740,14 @@ const Filter = ({ column, table, }) => {
     const filterFunctionName = column.columnDef.filterFn;
     const styles = useFilterStyles();
     switch (filterFunctionName) {
-        case 'includeArray':
+        case 'arrIncludesSome':
             return jsx(FilterMultiSelectCheckbox, { column: column, table: table });
         case 'arrIncludesAll':
         case 'arrIncludes':
             return jsx(FilterSelectRadio, { column: column, table: table });
         case 'inNumberRange':
             return jsx(FilterNumberRange, { column: column, table: table });
-        case 'dateRange': {
+        case 'inDateRange': {
             const firstValue = (_a = table
                 .getPreFilteredRowModel()
                 .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
@@ -758,7 +756,7 @@ const Filter = ({ column, table, }) => {
             }
             break;
         }
-        case 'date': {
+        case 'matchDate': {
             const firstValue = (_b = table
                 .getPreFilteredRowModel()
                 .flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
@@ -773,7 +771,7 @@ const Filter = ({ column, table, }) => {
                 }, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) })) })));
 };
 
-const useFilterDrawerStyles = makeStyles({
+const useFilterDrawerStyles$1 = makeStyles({
     drawerBody: Object.assign(Object.assign({}, shorthands.overflow('hidden', 'auto')), { 
         /* width */
         ':hover': Object.assign({}, shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
@@ -792,8 +790,8 @@ const useFilterDrawerStyles = makeStyles({
 });
 const FilterDrawer = ({ open, setOpen, table }) => {
     const headerGroups = table.getHeaderGroups();
-    const styles = useFilterDrawerStyles();
-    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Advance Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
+    const styles = useFilterDrawerStyles$1();
+    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Advanced Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
                     const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
                     if (!canApplyFilter)
                         return null;
@@ -1020,11 +1018,97 @@ const TableContainer = (props) => {
                                             : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) })), jsxs("td", Object.assign({ colSpan: 20 }, { children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] }))] }) })))] })), isLoading && jsx(Loading, {}), noItems && jsx(NoItemGrid, { message: props.noItemPage }), noSearchResult && jsx(NoSearchResult, { message: props.noFilterMatchPage })] })));
 };
 
+const ViewSaveForm = (props) => {
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const [isFormOpen, setIsFormOpen] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const checkboxRef = React.useRef(null);
+    if (!isFormOpen) {
+        return (jsxs(Fragment, { children: [jsx(MenuList, { children: jsx(MenuItemRadio, Object.assign({ name: 'view-manager', value: 'View Manager', onClick: () => setIsFormOpen(true), icon: jsx(Save20Filled, {}) }, { children: "Save Current View" })) }), jsx(Divider, {})] }));
+    }
+    return (jsxs("div", Object.assign({ style: {
+            boxSizing: 'border-box',
+            padding: '0.4rem',
+            border: '1px solid #ccc',
+            marginBottom: '0.5rem'
+        } }, { children: [jsx(Caption1Stronger, { children: "Enter View Details" }), jsx(Field, Object.assign({ label: "View Name", validationMessage: errorMessage, validationState: errorMessage ? "error" : undefined, hint: jsx(Fragment, { children: "Give your view a name and save it." }) }, { children: jsx(Input, { ref: inputRef, placeholder: "View Name" }) })), jsx(Field, Object.assign({ hint: jsx(Fragment, { children: "Global view is accessible to everybody in the system." }) }, { children: jsx(Checkbox, { ref: checkboxRef, label: "Set as global view" }) })), jsxs("div", Object.assign({ style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '0.5rem'
+                } }, { children: [jsx(Button, Object.assign({ onClick: () => {
+                            setIsFormOpen(false);
+                            setErrorMessage('');
+                        } }, { children: "Cancel" })), jsx(Button, Object.assign({ appearance: 'primary', onClick: () => {
+                            var _a, _b, _c;
+                            if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
+                                setErrorMessage('View name is required');
+                                return;
+                            }
+                            const viewName = inputRef.current.value;
+                            const isGlobal = (_b = checkboxRef.current) === null || _b === void 0 ? void 0 : _b.checked;
+                            const tableView = {
+                                id: Math.random() * 100,
+                                viewName: viewName,
+                                tableState: props.getTableState(),
+                                isGlobal: isGlobal,
+                                isViewOwner: true
+                            };
+                            (_c = props === null || props === void 0 ? void 0 : props.onSave) === null || _c === void 0 ? void 0 : _c.call(props, tableView);
+                            setErrorMessage('');
+                            setIsFormOpen(false);
+                        } }, { children: "Save" }))] }))] })));
+};
+
+const useFilterDrawerStyles = makeStyles({
+    drawerBody: Object.assign(Object.assign({}, shorthands.overflow('hidden', 'auto')), { 
+        /* width */
+        ':hover': Object.assign({}, shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
+        /* Track */
+        '::-webkit-scrollbar-track': {
+            'background-color': '#f1f1f1',
+        }, 
+        /* Handle */
+        '::-webkit-scrollbar-thumb': {
+            'background-color': '#888',
+        }, 
+        /* Handle on hover */
+        '::-webkit-scrollbar-thumb:hover': {
+            'background-color': '#555',
+        } }),
+});
+const ViewsDrawer = (props) => {
+    const { open, setOpen, table, tableViews, applyTableState, resetToGridDefaultView, getTableState, onTableViewSave } = props;
+    const styles = useFilterDrawerStyles();
+    const [checkedValues, setCheckedValues] = React.useState({ font: ["calibri"] });
+    const onChange = (e, { name, checkedItems }) => {
+        setCheckedValues((s) => (Object.assign(Object.assign({}, s), { [name]: checkedItems })));
+    };
+    const resetAllFilters = React.useCallback(() => {
+        table.setGlobalFilter('');
+        table.resetColumnFilters();
+    }, [table]);
+    const resetAllGrouping = React.useCallback(() => {
+        table.resetGrouping();
+    }, [table]);
+    const clearAllSelection = React.useCallback(() => {
+        table.toggleAllRowsSelected(false);
+    }, [table]);
+    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Table Views" })) }), jsxs(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: [onTableViewSave && jsx(ViewSaveForm, { mode: 'create', getTableState: getTableState, onSave: onTableViewSave }), jsxs(MenuList, Object.assign({ checkedValues: checkedValues, onCheckedValueChange: onChange }, { children: [jsx(MenuItemRadio, Object.assign({ name: 'table-views', value: 'Default View', icon: jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView }, { children: "Default View" })), tableViews.length > 0 && jsx(MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
+                                return (jsxs("div", Object.assign({ style: {
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                        width: '100%',
+                                    } }, { children: [jsx(MenuItemRadio, Object.assign({ name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}) }, { children: view.viewName })), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }), view.id + view.viewName));
+                            })] }))] })), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" }))] }) })] })));
+};
+
 function AdvancedTable(props, ref) {
     useStaticStyles();
-    const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState } = useGridContainer(props, ref);
+    const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState, getTableState } = useGridContainer(props, ref);
     const [isFilterDrawerOpen, setIsFilterDrawerOpen] = React.useState(false);
-    return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, openFilterDrawer: isFilterDrawerOpen, setGlobalFilter: setGlobalFilter, setFilterDrawerOpen: setIsFilterDrawerOpen, resetToGridDefaultView: resetToDefaultView, tableViews: tableViews, applyTableState: applyTableState }), jsxs("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { open: isFilterDrawerOpen, setOpen: setIsFilterDrawerOpen, table: table })] })), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
+    const [isViewsDrawerOpen, setIsViewsDrawerOpen] = React.useState(false);
+    return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, openFilterDrawer: isFilterDrawerOpen, openViewsDrawer: isViewsDrawerOpen, setGlobalFilter: setGlobalFilter, setFilterDrawerOpen: setIsFilterDrawerOpen, setViewsDrawerOpen: setIsViewsDrawerOpen, applyTableState: applyTableState }), jsxs("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { open: isFilterDrawerOpen, setOpen: setIsFilterDrawerOpen, table: table }), jsx(ViewsDrawer, { table: table, open: isViewsDrawerOpen, setOpen: setIsViewsDrawerOpen, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, getTableState: getTableState, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] })), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
 }
 const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.40.0-build.8.0",
+  "version": "9.41.0-build.2.0",
   "main": "./index.js",
   "types": "./src\\index.d.ts",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@fluentui/react-components": ">=9.40.0",
+    "@fluentui/react-components": ">=9.41.0",
     "@fluentui/react-datepicker-compat": ">=0.4.5",
     "@fluentui/react-icons": ">=2.0.221"
   },

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

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import { Table, TableState } from '@tanstack/react-table';
-import { TableView } from '../../types';
 type GridHeaderProps<TItem extends object> = {
     table: Table<TItem>;
     gridTitle: JSX.Element | React.ReactNode;
     headerMenu?: JSX.Element | React.ReactNode;
     globalFilter: string;
     setGlobalFilter: (value: string) => void;
-    tableViews: TableView[];
     applyTableState: (tableState: Partial<TableState>) => boolean;
     openFilterDrawer: boolean;
     setFilterDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    resetToGridDefaultView: () => boolean;
+    openViewsDrawer: boolean;
+    setViewsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export declare const GridHeader: <TItem extends object>(props: GridHeaderProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,4 +10,5 @@ export declare const useGridContainer: <TItem extends object>(props: TableProps<
     setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
     resetToDefaultView: () => boolean;
     applyTableState: (tableState: Partial<TableState>) => boolean;
+    getTableState: () => Partial<TableState>;
 };

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

@@ -0,0 +1,9 @@
+import { TableProps } from "../../types";
+import { TableState } from '@tanstack/react-table';
+type ViewSaveFormProps<TItem extends object> = {
+    mode: 'create' | 'edit';
+    onSave: TableProps<TItem>['onTableViewSave'];
+    getTableState: () => Partial<TableState>;
+};
+export declare const ViewSaveForm: <TItem extends object>(props: ViewSaveFormProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { TableProps, TableView } from '../../types';
+import { Table, TableState } from '@tanstack/react-table';
+type ViewsDrawerProps<TItem extends object> = {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    table: Table<TItem>;
+    tableViews: TableView[];
+    applyTableState: (tableView: Partial<TableState>) => void;
+    resetToGridDefaultView: () => boolean;
+    getTableState: () => Partial<TableState>;
+    onTableViewSave?: TableProps<TItem>['onTableViewSave'];
+    onTableViewDelete?: TableProps<TItem>['onTableViewDelete'];
+};
+export declare const ViewsDrawer: <TItem extends object>(props: ViewsDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/index.d.ts

@@ -1,9 +1,9 @@
 import { FilterFn } from "@tanstack/react-table";
 declare module '@tanstack/table-core' {
     interface FilterFns {
-        includeArray: FilterFn<unknown>;
-        date: FilterFn<unknown>;
-        dateRange: FilterFn<unknown>;
+        arrIncludesSome: FilterFn<unknown>;
+        matchDate: FilterFn<unknown>;
+        inDateRange: FilterFn<unknown>;
     }
 }
 export { Table } from "./components";

package/src/lib/types/TableProps.d.ts

@@ -84,4 +84,12 @@ export type TableProps<TItem extends object> = {
      * Table Views
      */
     views?: TableView[];
+    /**
+     * Callback when a table view is saved
+     */
+    onTableViewSave?: (tableView: TableView) => void;
+    /**
+     * Callback when a table view is deleted
+     */
+    onTableViewDelete?: (tableView: TableView) => void;
 };

package/src/lib/types/TableView.d.ts

@@ -3,5 +3,6 @@ export type TableView = {
     id: number;
     viewName: string;
     tableState: Partial<TableState>;
-    isDefault?: boolean;
+    isGlobal?: boolean;
+    isViewOwner?: boolean;
 };