@prt-ts/fluent-react-table-v2 9.40.0-build.2.0 → 9.40.0-build.3.0

package/index.js

@@ -3,7 +3,7 @@ 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, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, Divider, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, RadioGroup, Radio, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, MenuButton, MenuGroup, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger } from '@fluentui/react-components';
+import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, Divider, MenuList, MenuItem, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, Menu, MenuTrigger, MenuButton, MenuPopover, MenuGroup, MenuDivider, 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 { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
@@ -177,18 +177,16 @@ const GridHeader = (props) => {
                                                 return null;
                                             if (column.id === 'id')
                                                 return null;
-                                            return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup(), label: jsx("span", { children: column.id }) }, column.id));
+                                            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) => {
                                             if (column.id === 'select')
                                                 return null;
-                                            if (column.id === 'id')
-                                                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
+                                        })] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, 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(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 })] }))] })));
+                                    icon: jsx(TextGrammarDismissRegular, {}), "aria-label": "View Menu" }) })), jsx(PopoverSurface, { 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(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, }) {
@@ -202,7 +200,7 @@ 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", icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
+    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);
             } }) }));
 }
@@ -212,10 +210,19 @@ const arrIncludesSome = (row, columnId, value) => {
     const rowValue = row.getValue(columnId);
     const passed = Array.isArray(value) &&
         ((value === null || value === void 0 ? void 0 : value.length) === 0 || value.includes(`${rowValue}`));
-    // console.log("rowValue", rowValue, "value", value, "passed", passed, "columnId", columnId)
-    // Return if the item should be filtered in/out
     return passed;
 };
+const getLeafColumns = (columns) => {
+    if (!columns || !columns.length) {
+        return [];
+    }
+    return columns.reduce((totalItems, col) => {
+        if (!col.columns) {
+            totalItems.push(col);
+        }
+        return totalItems.concat(getLeafColumns(col.columns));
+    }, []);
+};
 const useGridContainer = (props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { columns, data, rowSelectionMode } = props;
@@ -225,11 +232,17 @@ const useGridContainer = (props, ref) => {
     });
     const [sorting, setSorting] = React.useState((_a = props.sortingState) !== null && _a !== void 0 ? _a : []);
     const [columnFilters, setColumnFilters] = React.useState((_b = props.columnFilterState) !== null && _b !== void 0 ? _b : []);
-    const [globalFilter, setGlobalFilter] = React.useState((_c = props.defaultGlobalFilter) !== null && _c !== void 0 ? _c : "");
+    const [globalFilter, setGlobalFilter] = React.useState((_c = props.defaultGlobalFilter) !== null && _c !== void 0 ? _c : '');
     const [grouping, setGrouping] = React.useState((_d = props.groupingState) !== null && _d !== void 0 ? _d : []);
     const [rowSelection, setRowSelection] = React.useState((_e = props.rowSelectionState) !== null && _e !== void 0 ? _e : {});
     const [columnVisibility, setColumnVisibility] = React.useState((_f = props.columnVisibility) !== null && _f !== void 0 ? _f : {});
-    const [columnOrder, setColumnOrder] = React.useState(() => { var _a; return (_a = props.columnOrderState) !== null && _a !== void 0 ? _a : columns.map((column) => column.id); });
+    const [columnOrder, setColumnOrder] = React.useState(() => {
+        if (props.columnOrderState) {
+            return props.columnOrderState;
+        }
+        const leafColumns = getLeafColumns(columns);
+        return leafColumns.map((col) => col.id);
+    });
     const [expanded, setExpanded] = React.useState((_g = props.expandedState) !== null && _g !== void 0 ? _g : {});
     const [columnPinning, setColumnPinning] = React.useState((_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {});
     const table = useReactTable({
@@ -305,6 +318,51 @@ const useGridContainer = (props, ref) => {
         columnVisibility,
         columnPinning,
     ]);
+    const resetToDefaultView = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        setSorting((_a = props.sortingState) !== null && _a !== void 0 ? _a : []);
+        setColumnFilters((_b = props.columnFilterState) !== null && _b !== void 0 ? _b : []);
+        setGlobalFilter((_c = props.defaultGlobalFilter) !== null && _c !== void 0 ? _c : '');
+        setGrouping((_d = props.groupingState) !== null && _d !== void 0 ? _d : []);
+        setExpanded((_e = props.expandedState) !== null && _e !== void 0 ? _e : {});
+        setRowSelection((_f = props.rowSelectionState) !== null && _f !== void 0 ? _f : {});
+        setColumnOrder(() => {
+            if (props.columnOrderState) {
+                return props.columnOrderState;
+            }
+            const leafColumns = getLeafColumns(columns);
+            return leafColumns.map((col) => col.id);
+        });
+        setColumnVisibility((_g = props.columnVisibility) !== null && _g !== void 0 ? _g : {});
+        setColumnPinning((_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {});
+        setTimeout(() => {
+            setPagination({
+                pageSize: props.pageSize || 10,
+                pageIndex: 0,
+            });
+        }, 10);
+        return true;
+    };
+    const applySavedView = (viewName) => {
+        const tableStateString = localStorage.getItem(viewName);
+        if (tableStateString) {
+            const tableState = JSON.parse(tableStateString);
+            setSorting(tableState.sorting);
+            setColumnFilters(tableState.columnFilters);
+            setGlobalFilter(tableState.globalFilter);
+            setGrouping(tableState.grouping);
+            setExpanded(tableState.expanded);
+            setRowSelection(tableState.rowSelection);
+            setColumnOrder(tableState.columnOrder);
+            setColumnVisibility(tableState.columnVisibility);
+            setColumnPinning(tableState.columnPinning);
+            setTimeout(() => {
+                setPagination(tableState.pagination);
+            }, 10);
+            return true;
+        }
+        return false;
+    };
     React.useImperativeHandle(ref, () => {
         return {
             table,
@@ -315,28 +373,12 @@ const useGridContainer = (props, ref) => {
                 localStorage.setItem(viewName, tableStateString);
                 return true;
             },
-            applySavedView: (viewName) => {
-                const tableStateString = localStorage.getItem(viewName);
-                if (tableStateString) {
-                    const tableState = JSON.parse(tableStateString);
-                    setSorting(tableState.sorting);
-                    setColumnFilters(tableState.columnFilters);
-                    setGlobalFilter(tableState.globalFilter);
-                    setGrouping(tableState.grouping);
-                    setExpanded(tableState.expanded);
-                    setRowSelection(tableState.rowSelection);
-                    setColumnOrder(tableState.columnOrder);
-                    setColumnVisibility(tableState.columnVisibility);
-                    setColumnPinning(tableState.columnPinning);
-                    setTimeout(() => {
-                        setPagination(tableState.pagination);
-                    }, 10);
-                    return true;
-                }
-                return false;
-            },
+            applySavedView: applySavedView,
+            resetToDefaultView: resetToDefaultView,
         };
-    }, [table, getTableState]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [table, getTableState]);
     return {
         table,
         globalFilter,
@@ -406,7 +448,7 @@ const FilterMultiSelectCheckbox = ({ column, table, }) => {
         : (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, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", Object.assign({ ref: filterContainer, className: styles.searchContainer }, { children: [paddingTop > 0 && (jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsx(Checkbox, { checked: allOptionChecked, onChange: () => {
+    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", Object.assign({ 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;
@@ -451,7 +493,7 @@ const useRadioFilterStyles = makeStyles({
             'background-color': '#555',
         } }),
 });
-const FilterMultiSelectRadio = ({ column, table }) => {
+const FilterSelectRadio = ({ column, table, }) => {
     var _a, _b, _c;
     const firstValue = (_a = table
         .getPreFilteredRowModel()
@@ -459,8 +501,8 @@ const FilterMultiSelectRadio = ({ column, table }) => {
     const columnFilterValue = column.getFilterValue();
     const [filterOptions, setFilterOptions] = React.useState([]);
     React.useEffect(() => {
-        const uniqueSortedOptions = typeof firstValue === "number" || !isNaN(firstValue) ?
-            Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
+        const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
+            ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
             : Array.from(column.getFacetedUniqueValues().keys()).sort();
         setFilterOptions(uniqueSortedOptions);
     }, 
@@ -499,9 +541,57 @@ const FilterMultiSelectRadio = ({ column, table }) => {
                             })] })), paddingBottom > 0 && (jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] }))] }));
 };
 
+const useNumberRangeFilterStyles = makeStyles({
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    }
+});
+const FilterNumberRange = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { column } = props;
+    const columnFilterValue = column.getFilterValue();
+    const min = Number((_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
+    const max = Number((_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
+    const handleMinChange = (e, data) => {
+        const value = Number(data.value);
+        column.setFilterValue((old) => [value, old === null || old === void 0 ? void 0 : old[1]]);
+    };
+    const handleMaxChange = (e, data) => {
+        const value = Number(data.value);
+        column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], value]);
+    };
+    const styles = useNumberRangeFilterStyles();
+    return (jsxs("div", Object.assign({ className: styles.searchContainer }, { children: [jsx(Field, Object.assign({ label: 'Min:', size: "small", className: styles.searchInputField }, { children: jsx(Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || ''}`, min: min, max: max, onChange: handleMinChange, className: styles.searchInput, placeholder: `Min ${((_e = column.getFacetedMinMaxValues()) === null || _e === void 0 ? void 0 : _e[0])
+                        ? `(${(_f = column.getFacetedMinMaxValues()) === null || _f === void 0 ? void 0 : _f[0]})`
+                        : ''}` }) })), jsx(Field, Object.assign({ label: 'Max:', size: "small", className: styles.searchInputField }, { children: jsx(Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || ''}`, min: min, max: max, onChange: handleMaxChange, className: styles.searchInput, placeholder: `Max ${((_g = column.getFacetedMinMaxValues()) === null || _g === void 0 ? void 0 : _g[1])
+                        ? `(${(_h = column.getFacetedMinMaxValues()) === null || _h === void 0 ? void 0 : _h[1]})`
+                        : ''}` }) }))] })));
+};
+
 const useFilterStyles = makeStyles({
-    root: Object.assign(Object.assign({}, shorthands.padding('10px')), { width: '100%' }),
-    defaultInput: Object.assign(Object.assign({}, shorthands.padding('10px')), { width: '100%' }),
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
 });
 const Filter = ({ column, table, }) => {
     const filterFunctionName = column.columnDef.filterFn;
@@ -511,13 +601,14 @@ const Filter = ({ column, table, }) => {
         case 'arrIncludesSome':
             return jsx(FilterMultiSelectCheckbox, { column: column, table: table });
         case 'arrIncludesAll':
-            return jsx(FilterMultiSelectRadio, { column: column, table: table });
         case 'arrIncludes':
-            return jsx(FilterMultiSelectRadio, { column: column, table: table });
+            return jsx(FilterSelectRadio, { column: column, table: table });
+        case 'inNumberRange':
+            return jsx(FilterNumberRange, { column: column, table: table });
     }
-    return (jsx("div", Object.assign({ className: styles.root }, { children: jsx(Input, { type: "search", value: (column.getFilterValue() || ''), onChange: (_, data) => {
-                column.setFilterValue(data.value);
-            }, placeholder: "Search...", size: "small", className: styles.defaultInput }) })));
+    return (jsx("div", Object.assign({ className: styles.searchContainer }, { children: jsx(Field, Object.assign({ size: 'small', className: styles.searchInputField }, { children: jsx(Input, { value: (column.getFilterValue() || ''), onChange: (_, data) => {
+                    column.setFilterValue(data.value);
+                }, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) })) })));
 };
 
 const useFilterDrawerStyles = makeStyles({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.40.0-build.2.0",
+  "version": "9.40.0-build.3.0",
   "main": "./index.js",
   "types": "./src\\index.d.ts",
   "peerDependencies": {

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

@@ -0,0 +1,7 @@
+import { Column, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends object> = {
+    column: Column<TItem, unknown>;
+    table: Table<TItem>;
+};
+export declare const FilterNumberRange: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/filters/{FilterMultiSelectRadio.d.ts → FilterSelectRadio.d.ts}

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

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

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

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

@@ -4,4 +4,5 @@ export type TableRef<TItem extends object> = {
     getTableState: () => Record<string, unknown>;
     saveCurrentTableState: (viewName: string) => boolean;
     applySavedView: (viewName: string) => boolean;
+    resetToDefaultView: () => boolean;
 };