@prt-ts/fluent-react-table-v2 9.41.0-build.2.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, 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 { 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';
@@ -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',

package/package.json

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