@commonsku/styles 1.17.22 → 1.17.23

package/dist/index.cjs

@@ -7175,7 +7175,7 @@ function InputStepper(props) {
 var templateObject_1$c, templateObject_2$1, templateObject_3, templateObject_4;
 
 var VirtualTable = function (props) {
-    var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? '' : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent, onSort = props.onSort; props.onResize; var rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter;
+    var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? '' : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent; props.onResize; var rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter, onSortChange = props.onSortChange;
     var defaultColumn = React.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
@@ -7190,6 +7190,7 @@ var VirtualTable = function (props) {
     var footerRef = React.useRef(null);
     var rowsRef = React.useRef(null);
     var listRef = React.useRef(null);
+    var sortBy = tableData.state.sortBy;
     function resetList(index) {
         if (index === void 0) { index = 0; }
         listRef.current && listRef.current.resetAfterIndex(index);
@@ -7205,8 +7206,7 @@ var VirtualTable = function (props) {
         var _a;
         listRef.current && listRef.current.resetAfterIndex(0);
         (_a = column.toggleSortBy) === null || _a === void 0 ? void 0 : _a.call(column);
-        onSort && onSort({ column: column });
-    }, [onSort]);
+    }, []);
     function onListScroll(e) {
         if (headerRef.current && e && e.target) {
             var target = e.target;
@@ -7284,11 +7284,27 @@ var VirtualTable = function (props) {
             setScrolledToBottom(Math.round(rows.scrollTop) >= rows.scrollHeight - rows.offsetHeight);
         }
     }, [onScroll]);
-    return (React__default.default.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
-        React__default.default.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ''), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: 'none' } : {})) }), headerGroups.map(function (headerGroup) { return (React__default.default.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth, } }), headerGroup.headers.map(function (column) { return (React__default.default.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
+    var renderTableHeader = React.useCallback(function () {
+        var sortIconDirection = function (column) { return column.isSorted
+            ? sortDirection(column)
+            : "updown"; };
+        return (React__default.default.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ""), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: "none" } : {})) }), headerGroups.map(function (headerGroup) { return (React__default.default.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth } }), headerGroup.headers.map(function (column) { return (React__default.default.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
             column.render("Header"),
-            React__default.default.createElement("span", null, column.canSort &&
-                React__default.default.createElement(FilledChevronIcon, { direction: column.isSorted ? sortDirection(column) : 'updown', size: "medium", style: { verticalAlign: 'middle' } })))); }))); })),
+            React__default.default.createElement("span", null, column.canSort && (React__default.default.createElement(FilledChevronIcon, { direction: sortIconDirection(column), size: "medium", style: { verticalAlign: "middle" } }))))); }))); })));
+    }, [
+        getHeaderGroupProps,
+        getHeaderProps,
+        handleSort,
+        headerGroups,
+        hideHeader,
+        tableHeaderProps,
+        tableWidth,
+    ]);
+    React.useEffect(function () {
+        onSortChange && onSortChange({ sortBy: sortBy });
+    }, [sortBy]);
+    return (React__default.default.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
+        renderTableHeader(),
         React__default.default.createElement("div", __assign({ className: "tbody" }, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React__default.default.createElement(NoRowsFound, null) :
             React__default.default.createElement("div", { className: "scroll-container" },
                 !scrolledToTop &&