widenarrow-ui 1.1.65 → 1.1.66

package/lib/components/SortableTable/SortableTable.types.d.ts

@@ -31,13 +31,15 @@ export interface SortableTableProps {
     className?: string;
     rowClassName?: string;
     headerClassName?: string;
+    bodyClassName?: string;
+    spinnerClassName?: string;
     caption?: string;
     loading?: boolean;
     skeletonRows?: number;
     withStickyHeader?: boolean;
     withIntersectionObserver?: boolean;
     minWidth?: string;
-    onSortCallback?: (keyName: string) => void;
+    onSortCallback?: (keyName: string, ascending: boolean) => void;
     pagination?: SearchResultInterface;
     noDataMessage?: {
         title?: string;

package/lib/index.d.ts

@@ -961,13 +961,15 @@ interface SortableTableProps {
     className?: string;
     rowClassName?: string;
     headerClassName?: string;
+    bodyClassName?: string;
+    spinnerClassName?: string;
     caption?: string;
     loading?: boolean;
     skeletonRows?: number;
     withStickyHeader?: boolean;
     withIntersectionObserver?: boolean;
     minWidth?: string;
-    onSortCallback?: (keyName: string) => void;
+    onSortCallback?: (keyName: string, ascending: boolean) => void;
     pagination?: SearchResultInterface;
     noDataMessage?: {
         title?: string;

package/lib/index.esm.js

@@ -3400,16 +3400,18 @@ var SortableTableRow = function (_a) {
     return (jsx("tr", { ref: ref, className: s$3('row', (_b = { row_notInView: withIntersectionObserver && !inView }, _b[rowClassName] = !!rowClassName, _b)), children: !withIntersectionObserver || inView ? (children) : (jsx("div", { className: s$3('cell', { cell_fullWidth: true }), children: jsx("span", { className: s$3('cellData') }) })) }));
 };
 var SortableTable = function (_a) {
-    var _b, _c;
-    var cells = _a.cells, data = _a.data, _d = _a.sortBy, sortBy = _d === void 0 ? [{ keyName: 'name', ascending: true }] : _d, _e = _a.skeletonRows, skeletonRows = _e === void 0 ? 6 : _e, loading = _a.loading, caption = _a.caption, className = _a.className, headerClassName = _a.headerClassName, rowClassName = _a.rowClassName, withStickyHeader = _a.withStickyHeader, withIntersectionObserver = _a.withIntersectionObserver, noDataMessage = _a.noDataMessage, minWidth = _a.minWidth, onSortCallback = _a.onSortCallback;
-    var _f = useState(!is(Function, onSortCallback) ? sortBy : []), sortByLocalState = _f[0], setSortByLocalState = _f[1];
+    var _b, _c, _d, _e;
+    var cells = _a.cells, data = _a.data, _f = _a.sortBy, sortBy = _f === void 0 ? [{ keyName: 'name', ascending: true }] : _f, _g = _a.skeletonRows, skeletonRows = _g === void 0 ? 6 : _g, loading = _a.loading, caption = _a.caption, className = _a.className, headerClassName = _a.headerClassName, rowClassName = _a.rowClassName, bodyClassName = _a.bodyClassName, spinnerClassName = _a.spinnerClassName, withStickyHeader = _a.withStickyHeader, withIntersectionObserver = _a.withIntersectionObserver, noDataMessage = _a.noDataMessage, minWidth = _a.minWidth, onSortCallback = _a.onSortCallback;
+    var _h = useState(!is(Function, onSortCallback) ? sortBy : null), sortByLocalState = _h[0], setSortByLocalState = _h[1];
     var noData = !loading && isArrayWithContent(data) === false;
     var getTableHeaderCell = function (cell) {
         if (cell.customHeaderCellComponent && is(Function, cell.customHeaderCellComponent)) {
             return cell.customHeaderCellComponent(cell);
         }
-        var optionIsActive = tableColumnIsActive({ state: sortByLocalState || sortBy, cellKey: cell.key });
-        var arrowIsAscending = optionIsActive && isSortingAscending(sortByLocalState);
+        // Use sortBy directly when onSortCallback is provided
+        var currentSortState = is(Function, onSortCallback) ? sortBy : sortByLocalState;
+        var optionIsActive = tableColumnIsActive({ state: currentSortState, cellKey: cell.key });
+        var arrowIsAscending = optionIsActive && isSortingAscending(currentSortState);
         var optionIsPrimaryColor = function () {
             if (!isArrayWithContent(data) || !optionIsActive) {
                 return false;
@@ -3420,14 +3422,15 @@ var SortableTable = function (_a) {
             return (jsx(Heading, { type: 'h6', marginBottom: '0', withEllipsis: true, children: cell.title }));
         }
         return (jsx(InlineButton, { className: s$3('headerButton'), toolTip: cell.toolTip ? cell.toolTip : cell.title, text: cell.icon ? '' : cell.title, type: optionIsPrimaryColor() ? HierarchyTypes.PRIMARY : HierarchyTypes.SECONDARY, onClickCallback: function () {
-                if (sortByLocalState) {
-                    var newSortOption = {
-                        keyName: cell.key
-                    };
+                var isAscending = optionIsActive ? !arrowIsAscending : true;
+                if (is(Function, onSortCallback)) {
+                    onSortCallback(cell.key, isAscending);
+                }
+                else if (sortByLocalState) {
+                    var newSortOption = { keyName: cell.key };
                     var newState = getSortableTableState(sortByLocalState, newSortOption);
-                    return setSortByLocalState(newState);
+                    setSortByLocalState(newState);
                 }
-                is(Function, onSortCallback) && onSortCallback(cell.key);
             }, icon: optionIsActive && !cell.disableSort ? IconTypes.CHEVRON_DOWN : undefined, rotateIcon: optionIsActive && arrowIsAscending, withIconRight: !cell.alignRight, size: SizeTypes.SMALL, disabled: noData || loading }));
     };
     var getCellValue = function (value) {
@@ -3482,11 +3485,13 @@ var SortableTable = function (_a) {
         }
         return null;
     };
-    return (jsxs("div", { className: s$3('container', (_b = {}, _b[className] = className, _b.container_withMinWidth = !!minWidth, _b)), children: [loading ? jsx(SolidSpinner, { className: s$3('spinner'), type: HierarchyTypes.PRIMARY, size: SizeTypes.MEDIUM }) : null, jsxs("table", { className: s$3('table', { table_loading: loading }), style: { minWidth: minWidth || 'auto' }, children: [jsx("caption", { children: caption }), jsx("thead", { children: jsx("tr", { className: s$3('row', (_c = { row_header: true, row_stickyHeader: withStickyHeader }, _c[headerClassName] = headerClassName, _c)), children: cells.map(function (cell, i) { return (jsx("th", { className: s$3('cell', {
+    return (jsxs("div", { className: s$3('container', (_b = {}, _b[className] = className, _b.container_withMinWidth = !!minWidth, _b)), children: [loading ? (jsx(SolidSpinner, { className: s$3('spinner', (_c = {}, _c[spinnerClassName] = spinnerClassName, _c)), type: HierarchyTypes.PRIMARY, size: SizeTypes.MEDIUM })) : null, jsxs("table", { className: s$3('table', { table_loading: loading }), style: { minWidth: minWidth || 'auto' }, children: [jsx("caption", { children: caption }), jsx("thead", { children: jsx("tr", { className: s$3('row', (_d = { row_header: true, row_stickyHeader: withStickyHeader }, _d[headerClassName] = headerClassName, _d)), children: cells.map(function (cell, i) { return (jsx("th", { className: s$3('cell', {
                                     cell_alignRight: cell.alignRight,
                                     cell_alignCenter: cell.alignCenter,
                                     cell_header: true
-                                }), style: { width: cell.width }, children: getTableHeaderCell(cell) }, i)); }) }) }), jsx("tbody", { children: getTableContent() })] }), getNoDataMessage()] }));
+                                }), style: { width: cell.width }, children: getTableHeaderCell(cell) }, i)); }) }) }), jsx("tbody", { className: s$3((_e = {},
+                            _e[bodyClassName] = bodyClassName,
+                            _e)), children: getTableContent() })] }), getNoDataMessage()] }));
 };
 
 var styles$2 = {"body":"SwitchButton-module_BSiKOl","container":"SwitchButton-module_-PGMDB","disabled":"SwitchButton-module_rKEoCC","label":"SwitchButton-module_9KVBdB","notChecked":"SwitchButton-module_CYvDs9","line":"SwitchButton-module_Eo7WUJ","circle":"SwitchButton-module_mXNj6-","checked":"SwitchButton-module_hyzBhV","container_withInlineLabel":"SwitchButton-module_92nx60","container_marginBottom":"SwitchButton-module_reV59e","button":"SwitchButton-module_rWRqQV","button_alignCenter":"SwitchButton-module_7wItwm","button_right":"SwitchButton-module_z7K2PJ","input":"SwitchButton-module_NDqU17","label_disabled":"SwitchButton-module_EYRA5X","label_hidden":"SwitchButton-module_sbDjVv","label_withInlineLabel":"SwitchButton-module_Pcd4mV","label_alignCenter":"SwitchButton-module_Ir2644"};