@commonsku/styles 1.17.7 → 1.17.8

package/dist/index.d.ts

@@ -2891,26 +2891,26 @@ interface BaseSortByHeaderGroup<D extends object = {}> extends HeaderGroup<D>, U
 interface Row<D extends Record<string, unknown> = Record<string, unknown>> extends UseTableRowProps<D>, UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseRowStateRowProps<D> {
 }
 
-type VirtualTableProps = {
-    columns: Column$1<object>[];
-    data: object[];
+type VirtualTableProps<RowType extends Record<string, unknown>, TableProps, TableFooterProps> = {
+    columns: readonly Column$1<RowType>[];
+    data: RowType[];
     itemSize?: (value: {
         index: number;
-        row: Row;
+        row: Row<RowType>;
     }) => number;
     height?: number;
     minWidth?: number;
     maxWidth?: number;
     defaultSort?: SortingRule<string>;
-    onClickRow?: (row?: object, index?: number, data?: {
+    onClickRow?: (row?: RowType, index?: number, data?: {
         isScrolling?: boolean;
-        cell: Cell<Record<string, unknown>, any>;
+        cell: Cell<RowType>;
         resetList: (index?: number) => void;
         toggleAllRowsExpanded: (value?: boolean | undefined) => void;
     }) => void;
     onScroll?: ((props: ListOnScrollProps) => any);
     onUpdateData?: (...args: any) => void;
-    useTableProps?: object;
+    useTableProps?: TableProps;
     tableHeaderProps?: {
         className?: string;
         style?: React__default.CSSProperties;
@@ -2919,34 +2919,30 @@ type VirtualTableProps = {
         className?: string;
         style?: React__default.CSSProperties;
     };
-    TableFooter?: (props: React__default.PropsWithChildren<{
-        [key: string]: any;
-    }>) => React__default.ReactElement;
-    customTableFooterProps?: object;
+    TableFooter?: (props: React__default.PropsWithChildren<TableFooterProps>) => React__default.ReactElement;
+    customTableFooterProps?: TableFooterProps;
     className?: string;
     hideFooter?: boolean;
     hideHeader?: boolean;
     NoRowsFound?: (props: React__default.PropsWithChildren<{
         [key: string]: any;
     }>) => React__default.ReactElement;
-    renderRowSubComponent?: (props: React__default.PropsWithChildren<{
-        [key: string]: any;
-    }>) => React__default.ReactElement;
+    renderRowSubComponent?: <P = unknown>(props: React__default.PropsWithChildren<P>) => React__default.ReactElement;
     onSort?: (value: {
-        column: BaseSortByHeaderGroup<object>;
+        column: BaseSortByHeaderGroup<RowType>;
     }) => void;
     onResize?: VoidFunction;
     rowGroupStyles?: (value: {
-        row: Row;
+        row: Row<RowType>;
         style: React__default.CSSProperties;
     }) => React__default.CSSProperties;
     rowStyles?: (value: {
-        row: Row;
+        row: Row<RowType>;
         style: React__default.CSSProperties;
     }) => React__default.CSSProperties;
     gutterSize?: number;
 };
-declare const VirtualTable: (props: VirtualTableProps) => React__default.JSX.Element;
+declare const VirtualTable: <RowType extends Record<string, unknown>, TableProps, TableFooterProps>(props: VirtualTableProps<RowType, TableProps, TableFooterProps>) => React__default.JSX.Element;
 
 declare const VirtualTableStyles: styled_components.StyledComponent<"div", any, {
     tableHeight?: string | number | undefined;
@@ -2959,10 +2955,11 @@ declare const VirtualTableStyles: styled_components.StyledComponent<"div", any,
 }, never>;
 //# sourceMappingURL=VirtualTableStyles.d.ts.map
 
-type SelectionTableProps = VirtualTableProps & {
-    onSelectRow?: (row?: object, index?: number) => void;
+type SelectionTableProps<RowType extends Record<string, unknown>, TableProps, TableFooterProps> = VirtualTableProps<RowType, TableProps, TableFooterProps> & {
+    selectedRows?: RowType[];
+    onSelectionChange?: (selectedRows: RowType[]) => void;
 };
-declare const SelectionTable: (props: SelectionTableProps) => React__default.JSX.Element;
+declare const SelectionTable: <RowType extends Record<string, unknown>, TableProps, TableFooterProps>(props: SelectionTableProps<RowType, TableProps, TableFooterProps>) => React__default.JSX.Element;
 
 type ResponsiveValue<T = string | number> = T | Array<T | null> | {
     xs?: T;

package/dist/index.mjs

@@ -6769,50 +6769,51 @@ var VirtualTableStyles = styled.div(templateObject_1$a || (templateObject_1$a =
 var templateObject_1$a;
 
 var SelectionTable = function (props) {
-    var columns = props.columns, onSelectRow = props.onSelectRow;
-    var _a = useState(props.data.map(function (row) { return (__assign({ selected: false }, row)); })), data = _a[0], setData = _a[1];
+    var columns = props.columns, data = props.data, selectedRows = props.selectedRows, onSelectionChange = props.onSelectionChange;
     var selectionState = useMemo(function () {
-        return !data.some(function (row) { return row.selected === false; })
-            ? 'all'
-            : data.some(function (row) { return row.selected === true; })
-                ? 'indeterminate'
-                : 'none';
-    }, [data]);
+        if (selectedRows == null)
+            return "none";
+        switch (selectedRows.length) {
+            case 0:
+                return 'none';
+            case data.length:
+                return 'all';
+            default:
+                return 'some';
+        }
+    }, [data.length, selectedRows]);
+    var handleSelectRows = useCallback(function (rows) {
+        if (onSelectionChange == null)
+            return;
+        if (selectedRows == null) {
+            onSelectionChange(rows);
+            return;
+        }
+        var newSelection = selectedRows.filter(function (row) { return !rows.includes(row); });
+        newSelection.push.apply(newSelection, rows.filter(function (row) { return !selectedRows.includes(row); }));
+        onSelectionChange(newSelection);
+    }, [selectedRows, onSelectionChange]);
     var handleSelectHeader = useCallback(function () {
+        if (onSelectionChange == null)
+            return;
         switch (selectionState) {
             case 'none':
-                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: true })); }));
+                onSelectionChange(__spreadArray([], data, true));
                 break;
             case 'all':
-            case 'indeterminate':
-                setData(data.map(function (row) { return (__assign(__assign({}, row), { selected: false })); }));
+            case 'some':
+                onSelectionChange([]);
                 break;
         }
-    }, [data, selectionState]);
-    var handleSelectRow = 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 = useMemo(function () { return (React.createElement(LabeledCheckbox, { label: "", checked: selectionState === 'all', indeterminate: selectionState === 'indeterminate', onChange: handleSelectHeader })); }, [selectionState, handleSelectHeader]);
+    }, [selectionState, data, onSelectionChange]);
+    var selectionHeader = useMemo(function () { return (React.createElement(LabeledCheckbox, { label: "", checked: selectionState === 'all', indeterminate: selectionState === 'some', onChange: handleSelectHeader })); }, [selectionState, handleSelectHeader]);
     var selectionColumn = useMemo(function () { return ({
         Header: selectionHeader,
         accessor: 'selected',
-        Cell: function (cellObj) {
-            return (React.createElement(LabeledCheckbox, { label: "", checked: cellObj.row.original.selected, onChange: function () { return handleSelectRow(cellObj.row.index); } }));
-        },
-        sticky: 'left',
-        noDrag: true,
+        Cell: function (cell) { return (React.createElement(LabeledCheckbox, { label: "", checked: selectedRows != null && selectedRows.includes(cell.row.original), onChange: function () { return handleSelectRows([cell.row.original]); } })); },
         width: 40,
         disableSortBy: true,
-    }); }, [handleSelectRow, selectionHeader]);
+    }); }, [selectedRows, selectionHeader, handleSelectRows]);
     return (React.createElement(VirtualTable, __assign({}, props, { columns: __spreadArray([selectionColumn], columns, true), data: data, minWidth: 40 })));
 };