@prt-ts/fluent-react-table-v2 9.40.0-build.9.0 → 9.41.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, Divider, Popover, PopoverTrigger, 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 { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, mergeClasses, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, 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';
@@ -163,21 +163,21 @@ const useGridHeaderStyles = makeStyles({
 const GridHeader = (props) => {
     const { table, gridTitle, globalFilter, setGlobalFilter } = props;
     const styles = useGridHeaderStyles();
-    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));
-                                        })] })) })] })), jsx(Button
-                    // appearance="subtle"
-                    , { 
+                                        })] })) })] })), jsx(Tooltip, Object.assign({ content: 'Table Views Management', relationship: "label" }, { children: jsx(Button
                         // 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 })] }))] })));
+                        , { 
+                            // 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, }) {
@@ -191,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) => {
@@ -747,7 +747,7 @@ const Filter = ({ column, table, }) => {
             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);
@@ -756,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);
@@ -791,7 +791,7 @@ const useFilterDrawerStyles$1 = makeStyles({
 const FilterDrawer = ({ open, setOpen, table }) => {
     const headerGroups = table.getHeaderGroups();
     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: "Advance Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
+    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;
@@ -811,16 +811,26 @@ const reorderColumn = (draggedColumnId, targetColumnId, columnOrder) => {
     return [...columnOrder];
 };
 const useTableHeaderCellStyles = makeStyles({
-    tHeadCell: Object.assign(Object.assign(Object.assign(Object.assign({ position: "relative", fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightBold, minWidth: "1rem" }, shorthands.padding("2px", "4px")), shorthands.borderLeft("1px", "solid", tokens.colorNeutralStroke1)), shorthands.borderRight("1px", "solid", tokens.colorNeutralStroke1)), shorthands.borderBottom("1px", "solid", tokens.colorNeutralStroke1)),
-    tHeadCellContent: Object.assign({ display: "flex", alignContent: "space-between", alignItems: "center", justifyContent: "space-between", cursor: "pointer", width: "100%", minWidth: "1rem" }, shorthands.padding("3px", "4px")),
-    tHeadContentBtn: Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), { display: "flex" }), shorthands.gap("5px")), { alignContent: "space-between", alignItems: "center", justifyContent: "space-between", cursor: "pointer", width: "100%", height: "100%", minWidth: "1rem" }),
-    tHeadMenuPopover: Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), { width: "300px" }),
-    resizer: Object.assign(Object.assign({}, shorthands.borderRight("1px", "solid", tokens.colorNeutralBackground5)), { width: "8px", position: "absolute", top: 0, right: 0, bottom: 0, cursor: "col-resize", resize: "horizontal", ":hover": {
-            borderRightWidth: "4px",
+    tHeadCell: Object.assign({ zIndex: 99, position: 'relative', fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightBold, minWidth: '1rem' }, shorthands.padding('2px', '4px')),
+    tHeadNonLeafCell: Object.assign({}, shorthands.borderBottom('1px', 'solid', tokens.colorNeutralBackground5)),
+    tHeadCellDraggable: {
+        height: '100%',
+    },
+    tHeadCellDragging: {
+        opacity: 0.5,
+        cursor: 'grab',
+    },
+    tHeadCellOver: Object.assign({ backgroundColor: tokens.colorNeutralStroke1 }, shorthands.border(tokens.strokeWidthThin, 'dashed', tokens.colorNeutralBackground5)),
+    tLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
+    tNonLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', width: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
+    tHeadContentBtn: Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { display: 'flex' }), shorthands.gap('5px')), { alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }),
+    tHeadMenuPopover: Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { width: '300px' }),
+    resizer: Object.assign(Object.assign({}, shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground5)), { width: '8px', position: 'absolute', top: 0, right: 0, bottom: 0, cursor: 'col-resize', resize: 'horizontal', ':hover': {
+            borderRightWidth: '4px',
             borderRightColor: tokens.colorNeutralBackground2Pressed,
         } }),
     resizerActive: {
-        borderRightWidth: "4px",
+        borderRightWidth: '4px',
         borderRightColor: tokens.colorNeutralBackground2Pressed,
     },
 });
@@ -847,14 +857,13 @@ const HeaderCell = ({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
         type: "column",
     });
     const styles = useTableHeaderCellStyles();
-    return (jsxs("th", Object.assign({ colSpan: header.colSpan, style: {
-            opacity: isDragging ? 0.5 : 1,
-            cursor: isDragging ? 'grabbing' : 'pointer',
-            alignItems: headerDepth === totalNumberOfHeaderDepth ? 'left' : 'center',
-            zIndex: 99,
-            backgroundColor: isOver ? '#0000000d' : 'transparent',
-            border: isOver ? '1px dashed #0000000d' : 'none',
-        }, className: styles.tHeadCell }, { children: [jsx("div", Object.assign({ ref: header.isPlaceholder ? undefined : dragRef }, { children: jsxs("div", Object.assign({ className: styles.tHeadCellContent, ref: header.isPlaceholder ? undefined : dropRef }, { children: [jsx("div", Object.assign({ ref: header.isPlaceholder ? undefined : previewRef }, { children: header.isPlaceholder ? null : (jsxs(Button, Object.assign({ style: {
+    const canDragDrop = headerDepth === totalNumberOfHeaderDepth && !header.isPlaceholder;
+    const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
+    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses(styles.tHeadCell, isLeafHeaders || header.isPlaceholder
+            ? undefined
+            : styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver) }, { children: [jsx("div", Object.assign({ className: styles.tHeadCellDraggable, ref: canDragDrop ? dragRef : undefined }, { children: jsxs("div", Object.assign({ className: isLeafHeaders
+                        ? styles.tLeafHeadCellContent
+                        : styles.tNonLeafHeadCellContent, ref: canDragDrop ? dropRef : undefined }, { children: [jsx("div", Object.assign({ ref: canDragDrop ? previewRef : undefined }, { children: header.isPlaceholder ? null : (jsxs(Button, Object.assign({ style: {
                                     display: 'flex',
                                     alignItems: 'center',
                                     justifyContent: 'left',
@@ -1094,7 +1103,12 @@ const ViewsDrawer = (props) => {
         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 (jsx(MenuItemRadio, Object.assign({ name: 'table-views', value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}) }, { children: view.viewName }), view.id));
+                                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" }))] }) })] })));
 };
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.40.0-build.9.0",
+  "version": "9.41.0-build.3.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"
   },