@linzjs/step-ag-grid 26.0.0 → 26.1.0

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

@@ -13,6 +13,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
     readOnly?: boolean;
     defaultPostSort?: boolean;
     selectable?: boolean;
+    hideSelectColumn?: boolean;
     theme?: string;
     ['data-testid']?: string;
     domLayout?: GridOptions['domLayout'];

package/dist/step-ag-grid.cjs

@@ -3138,6 +3138,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             el.classList.remove('ag-row-highlight-below');
         });
     }, []);
+    const gridElementRef = React.useRef();
     const onRowDragMove = React.useCallback((event) => {
         if (startDragYRef.current === null) {
             startDragYRef.current = event.y;
@@ -3146,13 +3147,23 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         const data = event.overNode?.data;
         if (data) {
             clearHighlightRowClasses();
-            document.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
+            // Find the grid element, this can only be found on start drag.
+            // Once dragging is no progress the event target is the drag element not the start drag column.
+            const targetEl = event.event.target;
+            if (targetEl) {
+                const gridElement = targetEl.closest('.ag-body');
+                if (gridElement) {
+                    gridElementRef.current = gridElement;
+                }
+            }
+            gridElementRef.current?.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
                 el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
             });
         }
     }, [clearHighlightRowClasses]);
     const onRowDragEnd = React.useCallback((event) => {
         clearHighlightRowClasses();
+        gridElementRef.current = undefined;
         if (!params.onRowDragEnd || startDragYRef.current === null) {
             return;
         }
@@ -3169,6 +3180,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     }, [params, clearHighlightRowClasses]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
+    const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
     const headerRowCount = columnDefs.some((c) => c.children) ? 2 : 1;
     return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { theme: 'legacy', rowSelection: selectable
                         ? {
@@ -3180,9 +3192,10 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                         event.api.forEachNode(() => rowCount++);
                         return (jsxRuntime.jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText, noRowsMatchingOverlayText: params.noRowsMatchingOverlayText }));
                     }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, selectionColumnDef: {
+                        suppressNavigable: params.hideSelectColumn,
                         rowDrag: !!params.onRowDragEnd,
-                        minWidth: selectable && params.onRowDragEnd ? 76 : 48,
-                        maxWidth: selectable && params.onRowDragEnd ? 76 : 48,
+                        minWidth: selectWidth,
+                        maxWidth: selectWidth,
                         pinned: selectColumnPinned,
                         headerComponentParams: {
                             exportable: false,