@commonsku/styles 1.17.21 → 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 &&
@@ -7464,7 +7480,7 @@ var inputStyles = {
     cursor: 'pointer',
     position: 'absolute',
     top: '8px',
-    right: '36px',
+    right: '4px',
 };
 var formatDateRange = function (_a, dateFormat) {
     var startDate = _a.startDate, endDate = _a.endDate;
@@ -7481,8 +7497,8 @@ var formatDateRange = function (_a, dateFormat) {
 };
 var DateRangeInput = function (_a) {
     var value = _a.value, error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable; _a.selected; _a.dateFormat; var onInputSelect = _a.onInputSelect, props = __rest(_a, ["value", "error", "noMargin", "onClick", "isClearable", "selected", "dateFormat", "onInputSelect"]);
-    return (React__default.default.createElement("div", { style: { position: 'relative', display: 'inline-block' } },
-        React__default.default.createElement(Input, __assign({ readOnly: true, onFocus: onInputSelect, value: value, onClick: onClick, noMargin: noMargin, error: error, style: { marginRight: '2rem', display: 'inline-block', width: '250px' }, type: "text", autoComplete: "off" }, props)),
+    return (React__default.default.createElement("div", { style: { position: 'relative' } },
+        React__default.default.createElement(Input, __assign({ readOnly: true, onFocus: onInputSelect, value: value, onClick: onClick, noMargin: noMargin, error: error, type: "text", autoComplete: "off" }, props)),
         React__default.default.createElement("span", { style: inputStyles, onClick: onClick }, !isClearable &&
             React__default.default.createElement(CalendarIcon, { style: { width: '1.9rem', verticalAlign: 'middle' } }))));
 };