@prt-ts/fluent-react-table-v2 9.47.1-build-1.0 → 9.47.1-build-2.0

package/index.cjs.js

@@ -1560,6 +1560,7 @@ const useTableHeaderStyles = reactComponents.makeStyles({
         height: '100%',
         cursor: 'grab',
     },
+    tHeadCellDraggableDragging: Object.assign(Object.assign({}, reactComponents.shorthands.borderLeft(reactComponents.tokens.strokeWidthThin, 'solid', reactComponents.tokens.colorBrandBackgroundInverted)), reactComponents.shorthands.padding(0, reactComponents.tokens.spacingHorizontalXS)),
     tHeadCellDragging: {
         opacity: 0.5,
         cursor: 'grabbing',
@@ -1617,7 +1618,7 @@ function HeaderCell({ header, table, tabAttributes }) {
     var _a, _b, _c;
     const { column, id } = header;
     const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({
-        id: column.id
+        id: id
     });
     const dndStyle = {
         transform: utilities.CSS.Translate.toString(transform),
@@ -1627,10 +1628,10 @@ function HeaderCell({ header, table, tabAttributes }) {
     const isLeafHeaders = ((_b = (_a = `${id}`) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b.length) === 1;
     const headerCellCombinedStyles = getHeaderCellPinningStyles(column, isDragging, dndStyle);
     if (header.isPlaceholder) {
-        return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef, children: jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) }));
+        return (jsxRuntime.jsx("th", Object.assign({ colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef }, attributes, listeners, { children: jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) })));
     }
     const columnName = reactTable.flexRender(header.column.columnDef.header, header.getContext());
-    return (jsxRuntime.jsxs("th", Object.assign({ colSpan: header.colSpan, className: reactComponents.mergeClasses(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef }, tabAttributes, { tabIndex: 0, children: [jsxRuntime.jsx("div", Object.assign({ className: styles.tHeadCellDraggable }, attributes, listeners, { children: jsxRuntime.jsxs("div", { className: isLeafHeaders
+    return (jsxRuntime.jsxs("th", Object.assign({ colSpan: header.colSpan, className: reactComponents.mergeClasses(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef }, tabAttributes, { tabIndex: 0, children: [jsxRuntime.jsx("div", Object.assign({ className: reactComponents.mergeClasses(styles.tHeadCellDraggable, isDragging && styles.tHeadCellDraggableDragging) }, attributes, listeners, { children: jsxRuntime.jsxs("div", { className: isLeafHeaders
                         ? styles.tLeafHeadCellContent
                         : styles.tNonLeafHeadCellContent, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactControlFlow.Show, { when: !header.isPlaceholder, children: jsxRuntime.jsxs(reactComponents.Button, { style: {
                                         display: 'flex',
@@ -1648,18 +1649,14 @@ function HeaderCell({ header, table, tabAttributes }) {
                                     }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_c = {
                                         asc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortAscIcon, {}) })),
                                         desc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortDescIcon, {}) })),
-                                    }[header.column.getIsSorted()]) !== null && _c !== void 0 ? _c : undefined, iconPosition: "after", children: [jsxRuntime.jsx("strong", { children: columnName }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(GroupListRegular, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsFiltered(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(FilterFilled, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsPinned(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(PinRegular, {}) }) })] }) }) }), jsxRuntime.jsx(HeaderMenu, { header: header, table: table, hideMenu: !isLeafHeaders })] }) })), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: !isLeafHeaders, children: jsxRuntime.jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] })));
+                                    }[header.column.getIsSorted()]) !== null && _c !== void 0 ? _c : undefined, iconPosition: "after", children: [jsxRuntime.jsx("strong", { children: columnName }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(GroupListRegular, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsFiltered(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(FilterFilled, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsPinned(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(PinRegular, {}) }) })] }) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: isLeafHeaders, children: jsxRuntime.jsx(HeaderMenu, { header: header, table: table }) })] }) })), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: !isLeafHeaders, children: jsxRuntime.jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] })));
 }
 function HeaderMenu(props) {
-    const { header, table, hideMenu } = props;
+    const { header, table } = props;
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
     const { dispatchDrawerAction, drawerState } = table.options.meta;
     const styles = useTableHeaderStyles();
-    if (hideMenu || header.isPlaceholder)
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
-    const canHavePopOver = header.column.getCanSort() ||
-        header.column.getCanGroup() ||
-        header.column.getCanFilter();
+    const canHavePopOver = header.column.getCanSort() || header.column.getCanGroup() || header.column.getCanFilter();
     if (!canHavePopOver)
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
     const columnName = reactTable.flexRender(header.column.columnDef.header, header.getContext());

package/index.esm.js

@@ -1538,6 +1538,7 @@ const useTableHeaderStyles = makeStyles({
         height: '100%',
         cursor: 'grab',
     },
+    tHeadCellDraggableDragging: Object.assign(Object.assign({}, shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorBrandBackgroundInverted)), shorthands.padding(0, tokens.spacingHorizontalXS)),
     tHeadCellDragging: {
         opacity: 0.5,
         cursor: 'grabbing',
@@ -1595,7 +1596,7 @@ function HeaderCell({ header, table, tabAttributes }) {
     var _a, _b, _c;
     const { column, id } = header;
     const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = useSortable({
-        id: column.id
+        id: id
     });
     const dndStyle = {
         transform: CSS.Translate.toString(transform),
@@ -1605,10 +1606,10 @@ function HeaderCell({ header, table, tabAttributes }) {
     const isLeafHeaders = ((_b = (_a = `${id}`) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b.length) === 1;
     const headerCellCombinedStyles = getHeaderCellPinningStyles(column, isDragging, dndStyle);
     if (header.isPlaceholder) {
-        return (jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef, children: jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) }));
+        return (jsx("th", Object.assign({ colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef }, attributes, listeners, { children: jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) })));
     }
     const columnName = flexRender(header.column.columnDef.header, header.getContext());
-    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef }, tabAttributes, { tabIndex: 0, children: [jsx("div", Object.assign({ className: styles.tHeadCellDraggable }, attributes, listeners, { children: jsxs("div", { className: isLeafHeaders
+    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef }, tabAttributes, { tabIndex: 0, children: [jsx("div", Object.assign({ className: mergeClasses$1(styles.tHeadCellDraggable, isDragging && styles.tHeadCellDraggableDragging) }, attributes, listeners, { children: jsxs("div", { className: isLeafHeaders
                         ? styles.tLeafHeadCellContent
                         : styles.tNonLeafHeadCellContent, children: [jsx("div", { children: jsx(Show, { when: !header.isPlaceholder, children: jsxs(Button, { style: {
                                         display: 'flex',
@@ -1626,18 +1627,14 @@ function HeaderCell({ header, table, tabAttributes }) {
                                     }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_c = {
                                         asc: (jsx("strong", { children: jsx(SortAscIcon, {}) })),
                                         desc: (jsx("strong", { children: jsx(SortDescIcon, {}) })),
-                                    }[header.column.getIsSorted()]) !== null && _c !== void 0 ? _c : undefined, iconPosition: "after", children: [jsx("strong", { children: columnName }), jsx(Show, { when: header.column.getIsGrouped(), children: jsx("strong", { children: jsx(GroupListRegular, {}) }) }), jsx(Show, { when: header.column.getIsFiltered(), children: jsx("strong", { children: jsx(FilterFilled, {}) }) }), jsx(Show, { when: header.column.getIsPinned(), children: jsx("strong", { children: jsx(PinRegular, {}) }) })] }) }) }), jsx(HeaderMenu, { header: header, table: table, hideMenu: !isLeafHeaders })] }) })), jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsx(Show, { when: !isLeafHeaders, children: jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] })));
+                                    }[header.column.getIsSorted()]) !== null && _c !== void 0 ? _c : undefined, iconPosition: "after", children: [jsx("strong", { children: columnName }), jsx(Show, { when: header.column.getIsGrouped(), children: jsx("strong", { children: jsx(GroupListRegular, {}) }) }), jsx(Show, { when: header.column.getIsFiltered(), children: jsx("strong", { children: jsx(FilterFilled, {}) }) }), jsx(Show, { when: header.column.getIsPinned(), children: jsx("strong", { children: jsx(PinRegular, {}) }) })] }) }) }), jsx(Show, { when: isLeafHeaders, children: jsx(HeaderMenu, { header: header, table: table }) })] }) })), jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsx(Show, { when: !isLeafHeaders, children: jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] })));
 }
 function HeaderMenu(props) {
-    const { header, table, hideMenu } = props;
+    const { header, table } = props;
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
     const { dispatchDrawerAction, drawerState } = table.options.meta;
     const styles = useTableHeaderStyles();
-    if (hideMenu || header.isPlaceholder)
-        return (jsx(Fragment, { children: " " }));
-    const canHavePopOver = header.column.getCanSort() ||
-        header.column.getCanGroup() ||
-        header.column.getCanFilter();
+    const canHavePopOver = header.column.getCanSort() || header.column.getCanGroup() || header.column.getCanFilter();
     if (!canHavePopOver)
         return (jsx(Fragment, { children: " " }));
     const columnName = flexRender(header.column.columnDef.header, header.getContext());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.47.1-build-1.0",
+  "version": "9.47.1-build-2.0",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",

package/src/lib/components/thead/useTableHeaderStyles.d.ts

@@ -1 +1 @@
-export declare const useTableHeaderStyles: () => Record<"tHead" | "tHeadRow" | "tHeadCell" | "tHeadNonLeafCell" | "tHeadNonLeafCellFakeBorder" | "tHeadCellDraggable" | "tHeadCellDragging" | "tHeadCellOver" | "tLeafHeadCellContent" | "tNonLeafHeadCellContent" | "tHeadContentBtn" | "tHeadMenuPopover" | "resizer" | "resizerActive", string>;
+export declare const useTableHeaderStyles: () => Record<"tHead" | "tHeadRow" | "tHeadCell" | "tHeadNonLeafCell" | "tHeadNonLeafCellFakeBorder" | "tHeadCellDraggable" | "tHeadCellDraggableDragging" | "tHeadCellDragging" | "tHeadCellOver" | "tLeafHeadCellContent" | "tNonLeafHeadCellContent" | "tHeadContentBtn" | "tHeadMenuPopover" | "resizer" | "resizerActive", string>;