@commonsku/styles 1.17.22 → 1.17.23

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import { GroupBase, StylesConfig, SelectInstance } from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
 import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
 import { ReactDatePickerProps } from 'react-datepicker';
-import { HeaderGroup, UseSortByColumnProps, UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column as Column$1, SortingRule, Cell } from 'react-table';
+import { UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column as Column$1, SortingRule, Cell, UseSortByState } from 'react-table';
 import { ListOnScrollProps } from 'react-window';
 import * as react_tooltip from 'react-tooltip';
 
@@ -2938,12 +2938,6 @@ type InputStepperStyledProps = Omit<NumberInputProps, 'onChange'> & {
 declare function InputStepperStyled(props: InputStepperStyledProps): React__default.JSX.Element;
 declare function InputStepper(props: InputStepperProps): React__default.JSX.Element;
 
-interface BaseSortByHeaderGroup<D extends object = {}> extends HeaderGroup<D>, UseSortByColumnProps<D> {
-    containerProps?: object;
-    style?: React__default.CSSProperties;
-    className?: string;
-}
-
 interface Row<D extends Record<string, unknown> = Record<string, unknown>> extends UseTableRowProps<D>, UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseRowStateRowProps<D> {
 }
 
@@ -2984,9 +2978,6 @@ type VirtualTableProps<RowType extends Record<string, unknown>, TableProps, Tabl
         [key: string]: any;
     }>) => React__default.ReactElement;
     renderRowSubComponent?: <P = unknown>(props: React__default.PropsWithChildren<P>) => React__default.ReactElement;
-    onSort?: (value: {
-        column: BaseSortByHeaderGroup<RowType>;
-    }) => void;
     onResize?: VoidFunction;
     rowGroupStyles?: (value: {
         row: Row<RowType>;
@@ -2997,6 +2988,7 @@ type VirtualTableProps<RowType extends Record<string, unknown>, TableProps, Tabl
         style: React__default.CSSProperties;
     }) => React__default.CSSProperties;
     gutterSize?: number;
+    onSortChange?: (sortState: UseSortByState<RowType>) => void;
 };
 declare const VirtualTable: <RowType extends Record<string, unknown>, TableProps, TableFooterProps>(props: VirtualTableProps<RowType, TableProps, TableFooterProps>) => React__default.JSX.Element;
 

package/dist/index.mjs

@@ -7144,7 +7144,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 = useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
@@ -7159,6 +7159,7 @@ var VirtualTable = function (props) {
     var footerRef = useRef(null);
     var rowsRef = useRef(null);
     var listRef = useRef(null);
+    var sortBy = tableData.state.sortBy;
     function resetList(index) {
         if (index === void 0) { index = 0; }
         listRef.current && listRef.current.resetAfterIndex(index);
@@ -7174,8 +7175,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;
@@ -7253,11 +7253,27 @@ var VirtualTable = function (props) {
             setScrolledToBottom(Math.round(rows.scrollTop) >= rows.scrollHeight - rows.offsetHeight);
         }
     }, [onScroll]);
-    return (React.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
-        React.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ''), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: 'none' } : {})) }), headerGroups.map(function (headerGroup) { return (React.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth, } }), headerGroup.headers.map(function (column) { return (React.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
+    var renderTableHeader = useCallback(function () {
+        var sortIconDirection = function (column) { return column.isSorted
+            ? sortDirection(column)
+            : "updown"; };
+        return (React.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ""), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: "none" } : {})) }), headerGroups.map(function (headerGroup) { return (React.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth } }), headerGroup.headers.map(function (column) { return (React.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
             column.render("Header"),
-            React.createElement("span", null, column.canSort &&
-                React.createElement(FilledChevronIcon, { direction: column.isSorted ? sortDirection(column) : 'updown', size: "medium", style: { verticalAlign: 'middle' } })))); }))); })),
+            React.createElement("span", null, column.canSort && (React.createElement(FilledChevronIcon, { direction: sortIconDirection(column), size: "medium", style: { verticalAlign: "middle" } }))))); }))); })));
+    }, [
+        getHeaderGroupProps,
+        getHeaderProps,
+        handleSort,
+        headerGroups,
+        hideHeader,
+        tableHeaderProps,
+        tableWidth,
+    ]);
+    useEffect(function () {
+        onSortChange && onSortChange({ sortBy: sortBy });
+    }, [sortBy]);
+    return (React.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
+        renderTableHeader(),
         React.createElement("div", __assign({ className: "tbody" }, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React.createElement(NoRowsFound, null) :
             React.createElement("div", { className: "scroll-container" },
                 !scrolledToTop &&