@linzjs/step-ag-grid 17.3.0 → 17.4.0

package/dist/GridTheme.scss

@@ -47,9 +47,19 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
-// Fix that when you click below checkbox it doesn't process a click
+
 .ag-cell[col-id="selection"] {
-  display: flex;
+  display: flex;// Fix that when you click below checkbox it doesn't process a click
+  justify-content: end; // fix alignment of cell content when grabber is present
+
+  .ag-selection-checkbox {
+    margin-right:0;
+  }
+}
+
+// fix alignment of cell content when grabber is present
+.ag-header-cell-comp-wrapper {
+  justify-content: end;
 }
 
 // Fix that when you click below checkbox it doesn't process a click

package/dist/index.css

@@ -397,6 +397,22 @@
   visibility: visible;
 }
 
+.ag-drag-handle.ag-row-drag {
+  opacity: 0;
+}
+.ag-drag-handle.ag-row-drag .ag-icon-grip {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239999B3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z' /%3E%3C/svg%3E");
+  background-repeat: no-repeat no-repeat;
+  background-position: center center;
+  background-size: cover;
+  color: transparent;
+}
+
+.ag-row:hover .ag-drag-handle.ag-row-drag {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+
 .GridFormMessage-container {
   padding: 4px 8px;
   max-width: 400px;

package/dist/src/components/Grid.d.ts

@@ -21,13 +21,14 @@ export interface GridProps {
      */
     selectColumnPinned?: ColDef["pinned"];
     noRowsOverlayText?: string;
-    postSortRows?: GridOptions["postSortRows"];
     animateRows?: boolean;
     rowHeight?: number;
     rowClassRules?: GridOptions["rowClassRules"];
     rowSelection?: "single" | "multiple";
     autoSelectFirstRow?: boolean;
     onColumnMoved?: GridOptions["onColumnMoved"];
+    rowDragText?: GridOptions["rowDragText"];
+    onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => void;
     alwaysShowVerticalScroll?: boolean;
     suppressColumnVirtualization?: GridOptions["suppressColumnVirtualisation"];
     /**

package/dist/step-ag-grid.cjs.js

@@ -2527,20 +2527,24 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                 },
             };
         });
-        return params.selectable
+        return params.selectable || params.onRowDragEnd
             ? [
                 {
                     colId: "selection",
                     editable: false,
-                    minWidth: 48,
-                    maxWidth: 48,
+                    rowDrag: !!params.onRowDragEnd,
+                    minWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
+                    maxWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
                     pinned: selectColumnPinned,
                     headerComponentParams: {
                         exportable: false,
                     },
-                    checkboxSelection: true,
+                    checkboxSelection: params.selectable,
                     headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
+                    //headerCheckboxSelection:true,
                     suppressHeaderKeyboardEvent: (e) => {
+                        if (!params.selectable)
+                            return false;
                         if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
                             if (lodashEs.isEmpty(e.api.getSelectedRows())) {
                                 e.api.selectAllFiltered();
@@ -2560,6 +2564,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     }, [
         params.columnDefs,
         params.selectable,
+        params.onRowDragEnd,
         params.readOnly,
         params.defaultColDef?.editable,
         selectColumnPinned,
@@ -2752,6 +2757,14 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         }
     }, []);
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
+    const onRowDragEnd = React.useCallback((event) => {
+        const moved = event.node.data;
+        const target = event.overNode?.data;
+        moved.id != target.id &&
+            event.node.rowIndex != null &&
+            params.onRowDragEnd &&
+            params.onRowDragEnd(moved, target, event.node.rowIndex);
+    }, [params]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
     return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
@@ -2760,7 +2773,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsxRuntime.jsx(GridNoRowsOverlay, { rowCount: rowCount, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
-                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.postSortRows ?? postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu }) })] }));
+                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, rowDragManaged: !!params.onRowDragEnd, suppressMoveWhenRowDragging: true, onRowDragEnd: onRowDragEnd }) })] }));
 };
 
 const GridPopoverContext = React.createContext({