@prt-ts/fluent-react-table-v2 9.47.1-build-3.0 → 9.47.1-build-4.0

package/index.cjs.js

@@ -1614,7 +1614,7 @@ const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular)
 const GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
 const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
 function HeaderCell({ header, table, tabAttributes }) {
-    var _a, _b, _c;
+    var _a;
     const { column, id } = header;
     const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({
         id: id
@@ -1624,7 +1624,11 @@ function HeaderCell({ header, table, tabAttributes }) {
         transition
     };
     const styles = useTableHeaderStyles();
-    const isLeafHeaders = ((_b = (_a = `${id}`) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b.length) === 1;
+    const isLeafHeaders = React.useMemo(() => {
+        const leafCols = table.getAllLeafColumns();
+        console.log("isLeafHeader");
+        return !!(leafCols === null || leafCols === void 0 ? void 0 : leafCols.find(col => col.id === header.column.id));
+    }, [table, header.column.id]);
     const headerCellCombinedStyles = getHeaderCellPinningStyles(column, isDragging, dndStyle);
     if (header.isPlaceholder) {
         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) }) }) })));
@@ -1645,10 +1649,10 @@ function HeaderCell({ header, table, tabAttributes }) {
                                         if (!header.column.getCanGroup())
                                             return;
                                         header.column.getToggleGroupingHandler()();
-                                    }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_c = {
+                                    }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
                                         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(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 }) })] })));
+                                    }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : 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 } = props;
@@ -1726,18 +1730,20 @@ const useLoadingStyles = reactComponents.makeStyles({
     invertedWrapper: {
         backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     },
-    row: Object.assign(Object.assign({ alignItems: "center", display: "grid", paddingBottom: "10px", position: "relative" }, reactComponents.shorthands.gap("10px")), { gridTemplateColumns: "min-content 20% 15% 30% 29%" }),
+    row: Object.assign({ width: "100%", alignItems: "center", justifyContent: "space-between", display: "flex", position: "relative", paddingBottom: "10px", paddingTop: "10px" }, reactComponents.shorthands.gap("20px")),
 });
 
 const Loading = (props) => {
-    const { numberOfItems = 16, numberOfColumns = 5 } = props;
+    var _a;
+    const { numberOfItems = 16, visibleColumns, table } = props;
+    const selectionMode = ((_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.rowSelectionMode) || "none";
     const styles = useLoadingStyles();
-    return (jsxRuntime.jsx("div", { className: styles.invertedWrapper, children: jsxRuntime.jsx(reactComponents.Skeleton, { children: [...Array(numberOfItems)].map((_, i) => (jsxRuntime.jsx("div", { className: styles.row, children: [...Array(numberOfColumns)].map((_, i) => {
-                    if (i === 0) {
-                        return jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "circle", size: 24 }, i);
-                    }
-                    return jsxRuntime.jsx(reactComponents.SkeletonItem, { size: 16 }, i);
-                }) }, i))) }) }));
+    return (jsxRuntime.jsx("div", { style: { width: "100%" }, children: jsxRuntime.jsx(reactControlFlow.For, { each: [...Array(numberOfItems)], children: (rowIndex, index) => {
+                return (jsxRuntime.jsxs(reactComponents.Skeleton, { className: styles.row, style: { width: "100%" }, children: [jsxRuntime.jsx(reactControlFlow.Show, { when: ["single", "multiple"].includes(selectionMode), children: jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "circle", size: 24, style: { width: "40px" } }, `${index}_select_row`) }), jsxRuntime.jsx(reactControlFlow.For, { each: visibleColumns || [], children: (column, i) => (jsxRuntime.jsx(reactComponents.SkeletonItem, { style: {
+                                    minWidth: column.getSize(),
+                                    width: "100%"
+                                } }, i)) })] }, `${rowIndex}_${index}`));
+            } }) }));
 };
 
 const useNoItemGridStyles = reactComponents.makeStyles({
@@ -1943,7 +1949,7 @@ const TableContainer = (props) => {
     const isLoading = props.isLoading && itemLength === 0;
     const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
     const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) > 0 && itemLength === 0;
-    return (jsxRuntime.jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxRuntime.jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsxRuntime.jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsxRuntime.jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxRuntime.jsxs(reactControlFlow.Switch, { when: true, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: isLoading, children: jsxRuntime.jsx(Loading, {}) }), jsxRuntime.jsx(reactControlFlow.Case, { value: noItems, children: jsxRuntime.jsx(NoItemGrid, { message: props.noItemPage }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: noSearchResult, children: jsxRuntime.jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
+    return (jsxRuntime.jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxRuntime.jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsxRuntime.jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsxRuntime.jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxRuntime.jsxs(reactControlFlow.Switch, { when: true, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: isLoading, children: jsxRuntime.jsx(Loading, { visibleColumns: table.getVisibleLeafColumns(), table: table }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: noItems, children: jsxRuntime.jsx(NoItemGrid, { message: props.noItemPage }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: noSearchResult, children: jsxRuntime.jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
 };
 
 const useCheckboxFilterStyles = reactComponents.makeStyles({

package/index.esm.js

@@ -1592,7 +1592,7 @@ const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular)
 const GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
 const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
 function HeaderCell({ header, table, tabAttributes }) {
-    var _a, _b, _c;
+    var _a;
     const { column, id } = header;
     const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = useSortable({
         id: id
@@ -1602,7 +1602,11 @@ function HeaderCell({ header, table, tabAttributes }) {
         transition
     };
     const styles = useTableHeaderStyles();
-    const isLeafHeaders = ((_b = (_a = `${id}`) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b.length) === 1;
+    const isLeafHeaders = useMemo(() => {
+        const leafCols = table.getAllLeafColumns();
+        console.log("isLeafHeader");
+        return !!(leafCols === null || leafCols === void 0 ? void 0 : leafCols.find(col => col.id === header.column.id));
+    }, [table, header.column.id]);
     const headerCellCombinedStyles = getHeaderCellPinningStyles(column, isDragging, dndStyle);
     if (header.isPlaceholder) {
         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) }) }) })));
@@ -1623,10 +1627,10 @@ function HeaderCell({ header, table, tabAttributes }) {
                                         if (!header.column.getCanGroup())
                                             return;
                                         header.column.getToggleGroupingHandler()();
-                                    }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_c = {
+                                    }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
                                         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(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 }) })] })));
+                                    }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : 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 } = props;
@@ -1704,18 +1708,20 @@ const useLoadingStyles = makeStyles({
     invertedWrapper: {
         backgroundColor: tokens.colorNeutralBackground1,
     },
-    row: Object.assign(Object.assign({ alignItems: "center", display: "grid", paddingBottom: "10px", position: "relative" }, shorthands.gap("10px")), { gridTemplateColumns: "min-content 20% 15% 30% 29%" }),
+    row: Object.assign({ width: "100%", alignItems: "center", justifyContent: "space-between", display: "flex", position: "relative", paddingBottom: "10px", paddingTop: "10px" }, shorthands.gap("20px")),
 });
 
 const Loading = (props) => {
-    const { numberOfItems = 16, numberOfColumns = 5 } = props;
+    var _a;
+    const { numberOfItems = 16, visibleColumns, table } = props;
+    const selectionMode = ((_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.rowSelectionMode) || "none";
     const styles = useLoadingStyles();
-    return (jsx("div", { className: styles.invertedWrapper, children: jsx(Skeleton, { children: [...Array(numberOfItems)].map((_, i) => (jsx("div", { className: styles.row, children: [...Array(numberOfColumns)].map((_, i) => {
-                    if (i === 0) {
-                        return jsx(SkeletonItem, { shape: "circle", size: 24 }, i);
-                    }
-                    return jsx(SkeletonItem, { size: 16 }, i);
-                }) }, i))) }) }));
+    return (jsx("div", { style: { width: "100%" }, children: jsx(For, { each: [...Array(numberOfItems)], children: (rowIndex, index) => {
+                return (jsxs(Skeleton, { className: styles.row, style: { width: "100%" }, children: [jsx(Show, { when: ["single", "multiple"].includes(selectionMode), children: jsx(SkeletonItem, { shape: "circle", size: 24, style: { width: "40px" } }, `${index}_select_row`) }), jsx(For, { each: visibleColumns || [], children: (column, i) => (jsx(SkeletonItem, { style: {
+                                    minWidth: column.getSize(),
+                                    width: "100%"
+                                } }, i)) })] }, `${rowIndex}_${index}`));
+            } }) }));
 };
 
 const useNoItemGridStyles = makeStyles({
@@ -1921,7 +1927,7 @@ const TableContainer = (props) => {
     const isLoading = props.isLoading && itemLength === 0;
     const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
     const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) > 0 && itemLength === 0;
-    return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxs(Switch, { when: true, children: [jsx(Case, { value: isLoading, children: jsx(Loading, {}) }), jsx(Case, { value: noItems, children: jsx(NoItemGrid, { message: props.noItemPage }) }), jsx(Case, { value: noSearchResult, children: jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
+    return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxs(Switch, { when: true, children: [jsx(Case, { value: isLoading, children: jsx(Loading, { visibleColumns: table.getVisibleLeafColumns(), table: table }) }), jsx(Case, { value: noItems, children: jsx(NoItemGrid, { message: props.noItemPage }) }), jsx(Case, { value: noSearchResult, children: jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
 };
 
 const useCheckboxFilterStyles = makeStyles({

package/package.json

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

package/src/lib/components/loading/Loading.d.ts

@@ -1,7 +1,8 @@
-import * as React from "react";
-type LoadingProps = {
+import { Column, RowData, Table } from "@tanstack/react-table";
+type LoadingProps<TItem extends RowData> = {
     numberOfItems?: number;
-    numberOfColumns?: number;
+    visibleColumns: Column<TItem, unknown>[];
+    table: Table<TItem>;
 };
-export declare const Loading: React.FC<LoadingProps>;
+export declare const Loading: <TItem extends unknown>(props: LoadingProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};