@commonsku/styles 1.17.3 → 1.17.4

package/dist/index.cjs

@@ -6634,6 +6634,8 @@ var VirtualTable = function (props) {
     var _m = reactTable.useTable(__assign({ columns: columns, data: data, defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), reactTable.useFlexLayout, reactTable.useSortBy, reactTable.useExpanded), getTableProps = _m.getTableProps, getTableBodyProps = _m.getTableBodyProps, headerGroups = _m.headerGroups, footerGroups = _m.footerGroups, totalColumnsWidth = _m.totalColumnsWidth, prepareRow = _m.prepareRow, toggleAllRowsExpanded = _m.toggleAllRowsExpanded, tableData = __rest(_m, ["getTableProps", "getTableBodyProps", "headerGroups", "footerGroups", "totalColumnsWidth", "prepareRow", "toggleAllRowsExpanded"]);
     var rows = React.useMemo(function () { return tableData.rows; }, [tableData.rows]);
     var windowSize = useWindowSize();
+    var _o = React.useState(false), scrolledToTop = _o[0], setScrolledToTop = _o[1];
+    var _p = React.useState(false), scrolledToBottom = _p[0], setScrolledToBottom = _p[1];
     var headerRef = React.useRef(null);
     var footerRef = React.useRef(null);
     var rowsRef = React.useRef(null);
@@ -6722,17 +6724,35 @@ var VirtualTable = function (props) {
         ], (headerGroupProps.className || "").split(' '), true), (headerGroup.className || "").split(' '), true).filter(function (v) { return v; }).join(' ');
         return __assign(__assign({}, headerGroupProps), { style: headerStyles, className: headerClassNames });
     };
+    var handleScroll = React.useCallback(function (props) {
+        if (onScroll != null) {
+            onScroll(props);
+        }
+        var rows = rowsRef.current;
+        if (rows != null) {
+            setScrolledToTop(rows.scrollTop === 0);
+            setScrolledToBottom(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); } }),
             column.render("Header"),
-            React__default.default.createElement("span", null, column.isSorted ? React__default.default.createElement(FilledChevronIcon, { direction: sortDirection(column), size: "medium", style: { verticalAlign: 'middle' } }) : null))); }))); })),
+            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("div", __assign({ className: "tbody" }, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React__default.default.createElement(NoRowsFound, null) :
-            React__default.default.createElement(reactWindow.VariableSizeList, { useIsScrolling: true, className: "table-list-rows", height: height, itemCount: rows.length, itemSize: function (i) {
-                    if (itemSize) {
-                        return itemSize({ row: rows[i], index: i });
-                    }
-                    return (rows[i] && rows[i].isExpanded ? 300 : 50) + gutterSize;
-                }, width: tableWidth, onScroll: onScroll, ref: listRef, outerRef: rowsRef }, RenderRow)),
+            React__default.default.createElement("div", { className: "scroll-container" },
+                !scrolledToTop &&
+                    React__default.default.createElement("div", { className: "scroll-decoration-top" },
+                        React__default.default.createElement(DoubleArrowIcon, { direction: "up" })),
+                React__default.default.createElement(reactWindow.VariableSizeList, { useIsScrolling: true, className: "table-list-rows", height: height, itemCount: rows.length, itemSize: function (i) {
+                        if (itemSize) {
+                            return itemSize({ row: rows[i], index: i });
+                        }
+                        return (rows[i] && rows[i].isExpanded ? 300 : 50) + gutterSize;
+                    }, width: tableWidth, onScroll: handleScroll, ref: listRef, outerRef: rowsRef }, RenderRow),
+                !scrolledToBottom &&
+                    React__default.default.createElement("div", { className: "scroll-decoration-bottom" },
+                        React__default.default.createElement(DoubleArrowIcon, { direction: "down" })))),
         !hideFooter ? React__default.default.createElement("div", __assign({}, tableFooterProps, { className: "table-footer-wrapper ".concat(tableFooterProps.className || '') }), footerGroups.map(function (footerGroup) { return (React__default.default.createElement("div", __assign({}, getHeaderGroupProps(footerGroup, true), { className: "table-footer tr", ref: footerRef }), footerGroup.headers.map(function (column) { return (React__default.default.createElement("div", __assign({}, getHeaderProps(column, true)), column.render("Footer"))); }))); })) : null,
         TableFooter ? React__default.default.createElement(TableFooter, __assign({}, customTableFooterProps)) : null));
 };
@@ -6746,9 +6766,57 @@ function sortDirection(col) {
     return "updown";
 }
 
-var VirtualTableStyles = styled__default.default.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}"], ["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}"])), function (p) { return p.rowClickable ? "\n    .tr {\n      cursor: pointer;\n    }\n  " : ''; }, function (p) { return p.bordered ? "\n    border-spacing: 0;\n    border: 1px solid black;\n  " : ''; }, function (p) { return p.tableHeight ? "height: ".concat(p.tableHeight).concat(typeof p.tableHeight === 'number' ? 'px' : '', ";") : ''; }, function (p) { return p.bordered ? 'border-bottom: 1px solid #000;' : ''; }, function (p) { return p.bordered ? "\n      :last-child {\n        .td {\n          border-bottom: 0;\n        }\n      }\n    " : ''; }, function (p) { return p.bordered ? "\n      border-bottom: 1px solid black;\n      border-right: 1px solid black;\n      :last-child {\n        border-right: 0;\n      }\n    " : ''; });
+var VirtualTableStyles = styled__default.default.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}\n\n.scroll-container {\n  position: relative;\n}\n\n.scroll-decoration-top, .scroll-decoration-bottom {\n", "\n}\n\n.scroll-decoration-top {\n  background: linear-gradient(180deg, #DFEEF4 0%, rgba(166, 194, 198, 0.00) 100%);\n  top: 0;\n}\n\n.scroll-decoration-bottom {\n  background: linear-gradient(0deg, #DFEEF4 0%, rgba(166, 194, 198, 0.00) 100%);\n  bottom: 0;\n}"], ["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}\n\n.scroll-container {\n  position: relative;\n}\n\n.scroll-decoration-top, .scroll-decoration-bottom {\n", "\n}\n\n.scroll-decoration-top {\n  background: linear-gradient(180deg, #DFEEF4 0%, rgba(166, 194, 198, 0.00) 100%);\n  top: 0;\n}\n\n.scroll-decoration-bottom {\n  background: linear-gradient(0deg, #DFEEF4 0%, rgba(166, 194, 198, 0.00) 100%);\n  bottom: 0;\n}"])), function (p) { return p.rowClickable ? "\n    .tr {\n      cursor: pointer;\n    }\n  " : ''; }, function (p) { return p.bordered ? "\n    border-spacing: 0;\n    border: 1px solid black;\n  " : ''; }, function (p) { return p.tableHeight ? "height: ".concat(p.tableHeight).concat(typeof p.tableHeight === 'number' ? 'px' : '', ";") : ''; }, function (p) { return p.bordered ? 'border-bottom: 1px solid #000;' : ''; }, function (p) { return p.bordered ? "\n      :last-child {\n        .td {\n          border-bottom: 0;\n        }\n      }\n    " : ''; }, function (p) { return p.bordered ? "\n      border-bottom: 1px solid black;\n      border-right: 1px solid black;\n      :last-child {\n        border-right: 0;\n      }\n    " : ''; }, function (p) { return p.scrollDecoration ? "\n  position: absolute;\n  height: 48px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000000000;\n  pointer-events: none;\n" : "\n  display: none;\n"; });
 var templateObject_1$a;
 
+var SelectionTable = function (props) {
+    var columns = props.columns, onSelectRow = props.onSelectRow;
+    var _a = React.useState(props.data.map(function (row) { return (__assign({ selected: false }, row)); })), data = _a[0], setData = _a[1];
+    var selectionState = React.useMemo(function () {
+        return !data.some(function (row) { return row.selected === false; })
+            ? 'all'
+            : data.some(function (row) { return row.selected === true; })
+                ? 'indeterminate'
+                : 'none';
+    }, [data]);
+    var handleSelectHeader = React.useCallback(function () {
+        switch (selectionState) {
+            case 'none':
+                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: true })); }));
+                break;
+            case 'all':
+            case 'indeterminate':
+                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: false })); }));
+                break;
+        }
+    }, [data, selectionState]);
+    var handleSelectRow = React.useCallback(function (rowIndex) {
+        setData(function (prev) { return prev.map(function (row, index) {
+            if (rowIndex !== index)
+                return row;
+            if (onSelectRow != null) {
+                onSelectRow(row, rowIndex);
+            }
+            return __assign(__assign({}, row), { selected: rowIndex === index
+                    ? !row.selected
+                    : row.selected });
+        }); });
+    }, [onSelectRow]);
+    var selectionHeader = React.useMemo(function () { return (React__default.default.createElement(LabeledCheckbox, { label: "", checked: selectionState === 'all', indeterminate: selectionState === 'indeterminate', onChange: handleSelectHeader })); }, [selectionState, handleSelectHeader]);
+    var selectionColumn = React.useMemo(function () { return ({
+        Header: selectionHeader,
+        accessor: 'selected',
+        Cell: function (cellObj) {
+            return (React__default.default.createElement(LabeledCheckbox, { label: "", checked: cellObj.row.original.selected, onChange: function () { return handleSelectRow(cellObj.row.index); } }));
+        },
+        sticky: 'left',
+        noDrag: true,
+        width: 40,
+        disableSortBy: true,
+    }); }, [handleSelectRow, selectionHeader]);
+    return (React__default.default.createElement(VirtualTable, __assign({}, props, { columns: __spreadArray([selectionColumn], columns, true), data: data, minWidth: 40 })));
+};
+
 var psuedoSelectors = {
     __after: '&:after',
     __before: '&:before',
@@ -7979,6 +8047,7 @@ exports.SalesArrowIcon = SalesArrowIcon;
 exports.SalesOrderCircleIcon = SalesOrderCircleIcon;
 exports.SearchIcon = SearchIcon;
 exports.Select = SKUSelect;
+exports.SelectionTable = SelectionTable;
 exports.SharedStyles = SharedStyles;
 exports.ShopIcon = ShopIcon;
 exports.ShoppingCartIcon = ShoppingCartIcon;