@linzjs/step-ag-grid 29.1.5 → 29.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/Grid.d.ts +1 -1
- package/dist/src/contexts/GridContext.d.ts +5 -4
- package/dist/step-ag-grid.cjs +20 -32
- package/dist/step-ag-grid.cjs.map +1 -1
- package/dist/step-ag-grid.esm.js +20 -32
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Grid.tsx +13 -4
- package/src/components/GridCell.tsx +5 -24
- package/src/contexts/GridContext.tsx +6 -1
- package/src/contexts/GridContextProvider.tsx +3 -5
- package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx +4 -6
package/dist/step-ag-grid.esm.js
CHANGED
|
@@ -2760,7 +2760,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
|
|
|
2760
2760
|
/**
|
|
2761
2761
|
* Wrapper for AgGrid to add commonly used functionality.
|
|
2762
2762
|
*/
|
|
2763
|
-
const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, ...params }) => {
|
|
2763
|
+
const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, onCellFocused: paramsOnCellFocused, ...params }) => {
|
|
2764
2764
|
const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing, } = useGridContext();
|
|
2765
2765
|
const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
|
|
2766
2766
|
const gridDivRef = useRef(null);
|
|
@@ -3156,7 +3156,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
|
|
|
3156
3156
|
}
|
|
3157
3157
|
}, [clearHighlightRowClasses]);
|
|
3158
3158
|
const onCellFocused = useCallback((event) => {
|
|
3159
|
-
if (!
|
|
3159
|
+
if (!paramsOnCellFocused || event.rowIndex == null) {
|
|
3160
3160
|
return;
|
|
3161
3161
|
}
|
|
3162
3162
|
const api = event.api;
|
|
@@ -3170,8 +3170,16 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
|
|
|
3170
3170
|
if (!colDef || typeof colDef === 'string') {
|
|
3171
3171
|
return;
|
|
3172
3172
|
}
|
|
3173
|
-
|
|
3174
|
-
|
|
3173
|
+
// Prevent repeated callbacks to cell focus when it focus didn't change
|
|
3174
|
+
const { sourceEvent } = event;
|
|
3175
|
+
if (sourceEvent) {
|
|
3176
|
+
if (window.__stepaggrid_lastfocuseventtarget === sourceEvent.target) {
|
|
3177
|
+
return;
|
|
3178
|
+
}
|
|
3179
|
+
window.__stepaggrid_lastfocuseventtarget = sourceEvent.target;
|
|
3180
|
+
}
|
|
3181
|
+
paramsOnCellFocused({ colDef, data });
|
|
3182
|
+
}, [paramsOnCellFocused]);
|
|
3175
3183
|
const onRowDragEnd = useCallback((event) => {
|
|
3176
3184
|
clearHighlightRowClasses();
|
|
3177
3185
|
gridElementRef.current = undefined;
|
|
@@ -3254,7 +3262,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
|
|
|
3254
3262
|
enableClickSelection: params.enableClickSelection ?? false,
|
|
3255
3263
|
mode: rowSelection == 'single' ? 'singleRow' : 'multiRow',
|
|
3256
3264
|
}
|
|
3257
|
-
: undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, 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, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked }) })] }));
|
|
3265
|
+
: undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, 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, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
|
|
3258
3266
|
};
|
|
3259
3267
|
const quickFilterParser = (filterStr) => {
|
|
3260
3268
|
// filter is exact matches exactly groups separated by commas
|
|
@@ -3399,14 +3407,10 @@ const GridCell = (props, custom) => {
|
|
|
3399
3407
|
resizable: true,
|
|
3400
3408
|
valueSetter: custom?.editor ? blockValueSetter : undefined,
|
|
3401
3409
|
editable: props.editable ?? !!custom?.editor,
|
|
3402
|
-
...(custom?.editor
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
}
|
|
3407
|
-
: {
|
|
3408
|
-
cellEditor: CellEditorToBlockEditing,
|
|
3409
|
-
}),
|
|
3410
|
+
...(custom?.editor && {
|
|
3411
|
+
cellClassRules: GridCellMultiSelectClassRules,
|
|
3412
|
+
cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
|
|
3413
|
+
}),
|
|
3410
3414
|
suppressKeyboardEvent: suppressCellKeyboardEvents,
|
|
3411
3415
|
...(custom?.editorParams
|
|
3412
3416
|
? {
|
|
@@ -3433,19 +3437,6 @@ const GridCell = (props, custom) => {
|
|
|
3433
3437
|
},
|
|
3434
3438
|
};
|
|
3435
3439
|
};
|
|
3436
|
-
/**
|
|
3437
|
-
* Ag-grid will start its own editor if editable is true and there is no cell editor
|
|
3438
|
-
* like in the case of a cell that is editable because it triggers a modal.
|
|
3439
|
-
* This will block that editor.
|
|
3440
|
-
*/
|
|
3441
|
-
const CellEditorToBlockEditing = ({ stopEditing }) => {
|
|
3442
|
-
useEffect(() => {
|
|
3443
|
-
defer(() => {
|
|
3444
|
-
stopEditing();
|
|
3445
|
-
});
|
|
3446
|
-
}, [stopEditing]);
|
|
3447
|
-
return jsx(Fragment, {});
|
|
3448
|
-
};
|
|
3449
3440
|
const GenericCellEditorComponentWrapper = (editor) => {
|
|
3450
3441
|
const obj = { editor };
|
|
3451
3442
|
return forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
|
|
@@ -5539,12 +5530,9 @@ const GridContextProvider = (props) => {
|
|
|
5539
5530
|
const preRow = gridApi.getFocusedCell();
|
|
5540
5531
|
// If we don't do this ag-grid will do its own continuation of an edit on tab, we don't want that as
|
|
5541
5532
|
// we are managing it ourselves
|
|
5542
|
-
gridApi.
|
|
5543
|
-
if (
|
|
5544
|
-
|
|
5545
|
-
}
|
|
5546
|
-
else {
|
|
5547
|
-
gridApi.tabToPreviousCell();
|
|
5533
|
+
const didTab = tabDirection === 1 ? gridApi.tabToNextCell() : gridApi.tabToPreviousCell();
|
|
5534
|
+
if (!didTab) {
|
|
5535
|
+
break;
|
|
5548
5536
|
}
|
|
5549
5537
|
if (gridApi.isDestroyed()) {
|
|
5550
5538
|
return true;
|