@linzjs/step-ag-grid 29.12.0 → 29.13.0

package/dist/step-ag-grid.cjs

@@ -428,147 +428,53 @@ function useInterval(callback, delay) {
   }, [delay]);
 }
 
+const NoContext = () => {
+    console.error('Missing GridContextProvider');
+    return null;
+};
 const GridContext = React.createContext({
     gridReady: false,
     gridRenderState: () => null,
-    getColDef: () => {
-        console.error('no context provider for getColDef');
-        return undefined;
-    },
-    getColumns: () => {
-        console.error('no context provider for getColumns');
-        return [];
-    },
-    getColumnIds: () => {
-        console.error('no context provider for getColumnIds');
-        return [];
-    },
+    getColDef: NoContext,
+    getColumns: NoContext,
+    getColumnIds: NoContext,
     invisibleColumnIds: undefined,
-    setInvisibleColumnIds: () => {
-        console.error('no context provider for setInvisibleColumnIds');
-    },
-    prePopupOps: () => {
-        console.error('no context provider for prePopupOps');
-    },
+    setInvisibleColumnIds: NoContext,
+    prePopupOps: NoContext,
     externallySelectedItemsAreInSync: false,
-    setApis: () => {
-        console.error('no context provider for setApis');
-    },
-    setQuickFilter: () => {
-        console.error('no context provider for setQuickFilter');
-    },
-    selectRowsById: () => {
-        console.error('no context provider for selectRows');
-    },
-    getSelectedRows: () => {
-        console.error('no context provider for getSelectedRows');
-        return [];
-    },
-    getFilteredSelectedRows: () => {
-        console.error('no context provider for getFilteredSelectedRows');
-        return [];
-    },
-    getSelectedRowIds: () => {
-        console.error('no context provider for getSelectedRowIds');
-        return [];
-    },
-    getFilteredSelectedRowIds: () => {
-        console.error('no context provider for getFilteredSelectedRowIds');
-        return [];
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    selectRowsDiff: async () => {
-        console.error('no context provider for selectRowsDiff');
-    },
-    selectRowsByIdWithFlash: () => {
-        console.error('no context provider for selectRowsWithFlash');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    selectRowsWithFlashDiff: async () => {
-        console.error('no context provider for selectRowsWithFlashDiff');
-    },
-    flashRows: () => {
-        console.error('no context provider for flashRows');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    flashRowsDiff: async () => {
-        console.error('no context provider for flashRows');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await,@typescript-eslint/no-misused-promises
-    focusByRowById: async () => {
-        console.error('no context provider for focusByRowById');
-    },
-    ensureRowVisible: () => {
-        console.error('no context provider for ensureRowVisible');
-        return true;
-    },
-    ensureSelectedRowIsVisible: () => {
-        console.error('no context provider for ensureSelectedRowIsVisible');
-    },
-    getFirstRowId: () => {
-        console.error('no context provider for getFirstRowId');
-        return -1;
-    },
-    autoSizeColumns: async () => {
-        console.error('no context provider for autoSizeColumns');
-        return Promise.resolve(null);
-    },
-    sizeColumnsToFit: () => {
-        console.error('no context provider for autoSizeAllColumns');
-        return null;
-    },
-    editingCells: () => {
-        console.error('no context provider for editingCells');
-        return false;
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    startCellEditing: async () => {
-        console.error('no context provider for startCellEditing');
-    },
-    resetFocusedCellAfterCellEditing: () => {
-        console.error('no context provider for resetFocusedCellAfterCellEditing');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    updatingCells: async () => {
-        console.error('no context provider for modifyUpdating');
-        return false;
-    },
-    redrawRows: () => {
-        console.error('no context provider for redrawRows');
-    },
-    setExternallySelectedItemsAreInSync: () => {
-        console.error('no context provider for setExternallySelectedItemsAreInSync');
-    },
-    // eslint-disable-next-line @typescript-eslint/require-await
-    waitForExternallySelectedItemsToBeInSync: async () => {
-        console.error('no context provider for waitForExternallySelectedItemsToBeInSync');
-    },
-    addExternalFilter: () => {
-        console.error('no context provider for addExternalFilter');
-    },
-    removeExternalFilter: () => {
-        console.error('no context provider for removeExternalFilter');
-    },
-    isExternalFilterPresent: () => {
-        console.error('no context provider for isExternalFilterPresent');
-        return false;
-    },
-    doesExternalFilterPass: () => {
-        console.error('no context provider for doesExternalFilterPass');
-        return true;
-    },
-    downloadCsv: () => {
-        console.error('no context provider for downloadCsv');
-    },
-    onBulkEditingComplete: () => {
-        console.error('no context provider for onBulkEditingComplete');
-    },
-    setOnBulkEditingComplete: () => {
-        console.error('no context provider for setOnBulkEditingComplete');
-    },
-    showNoRowsOverlay: () => {
-        console.error('no context provider for showLoadingOverlay');
-    },
+    setApis: NoContext,
+    setQuickFilter: NoContext,
+    selectRowsById: NoContext,
+    getSelectedRows: NoContext,
+    getFilteredSelectedRows: NoContext,
+    getSelectedRowIds: NoContext,
+    getFilteredSelectedRowIds: NoContext,
+    selectRowsDiff: NoContext,
+    selectRowsByIdWithFlash: NoContext,
+    selectRowsWithFlashDiff: NoContext,
+    flashRows: NoContext,
+    flashRowsDiff: NoContext,
+    focusByRowById: NoContext,
+    ensureRowVisible: NoContext,
+    ensureSelectedRowIsVisible: NoContext,
+    getFirstRowId: NoContext,
+    autoSizeColumns: NoContext,
+    sizeColumnsToFit: NoContext,
+    editingCells: NoContext,
+    startCellEditing: NoContext,
+    resetFocusedCellAfterCellEditing: NoContext,
+    updatingCells: NoContext,
+    redrawRows: NoContext,
+    setExternallySelectedItemsAreInSync: NoContext,
+    waitForExternallySelectedItemsToBeInSync: NoContext,
+    addExternalFilter: NoContext,
+    removeExternalFilter: NoContext,
+    isExternalFilterPresent: NoContext,
+    doesExternalFilterPass: NoContext,
+    downloadCsv: NoContext,
+    onBulkEditingComplete: NoContext,
+    setOnBulkEditingComplete: NoContext,
+    showNoRowsOverlay: NoContext,
 });
 const useGridContext = () => React.useContext(GridContext);
 
@@ -2902,7 +2808,7 @@ agGridCommunity.ModuleRegistry.registerModules([agGridCommunity.AllCommunityModu
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-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, maxInitialWidth, suppressReadOnlyStyle = false, ...params }) => {
+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, autoSelectFirstRow, onCellFocused: paramsOnCellFocused, maxInitialWidth, suppressReadOnlyStyle = false, externalSelectedItems, setExternalSelectedItems, externalSelectedIds, setExternalSelectedIds, ...params }) => {
     const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing: propStartCellEditing, } = useGridContext();
     // CellEditingStop event happens too much for one edit
     const startedEditRef = React.useRef(false);
@@ -2912,7 +2818,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     }, [propStartCellEditing]);
     const { updatedDep, anyUpdating, updatingCols } = React.useContext(GridUpdatingContext);
     const gridDivRef = React.useRef(null);
-    const lastSelectedIds = React.useRef([]);
+    const lastSelectedIds = React.useRef();
     const [staleGrid, setStaleGrid] = React.useState(false);
     const [autoSized, setAutoSized] = React.useState(false);
     const postSortRows = usePostSortRowsHook({ setStaleGrid });
@@ -3038,12 +2944,13 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      */
     const hasSelectedFirstItem = React.useRef(false);
     React.useEffect(() => {
-        if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync)
+        if (!gridReady || hasSelectedFirstItem.current || !rowData || !externallySelectedItemsAreInSync) {
             return;
+        }
         hasSelectedFirstItem.current = true;
-        if (isNotEmpty(rowData) && lodashEs.isEmpty(params.externalSelectedItems)) {
+        if (isNotEmpty(rowData) && lodashEs.isEmpty(externalSelectedItems)) {
             const firstRowId = getFirstRowId();
-            if (params.autoSelectFirstRow) {
+            if (autoSelectFirstRow && selectable) {
                 selectRowsById([firstRowId]);
             }
             else {
@@ -3054,31 +2961,51 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         externallySelectedItemsAreInSync,
         focusByRowById,
         gridReady,
-        params.externalSelectedItems,
-        params.autoSelectFirstRow,
+        externalSelectedItems,
+        autoSelectFirstRow,
         rowData,
         selectRowsById,
         getFirstRowId,
+        selectable,
     ]);
     /**
      * Ensure external selected items list is in sync with panel.
      */
     const synchroniseExternalStateToGridSelection = React.useCallback(({ api }) => {
-        if (!params.externalSelectedItems || !params.setExternalSelectedItems) {
-            setExternallySelectedItemsAreInSync(true);
-            return;
+        if (externalSelectedIds && setExternalSelectedIds) {
+            const selectedRowsIds = api.getSelectedRows().map((row) => row.id);
+            // We don't want to update selected Items if it hasn't changed to prevent excess renders
+            if (externalSelectedIds.length !== selectedRowsIds.length ||
+                isNotEmpty(lodashEs.xorBy(selectedRowsIds, externalSelectedIds))) {
+                setExternallySelectedItemsAreInSync(false);
+                setExternalSelectedIds([...selectedRowsIds]);
+            }
+            else {
+                setExternallySelectedItemsAreInSync(true);
+            }
         }
-        const selectedRows = api.getSelectedRows();
-        // We don't want to update selected Items if it hasn't changed to prevent excess renders
-        if (params.externalSelectedItems.length !== selectedRows.length ||
-            isNotEmpty(lodashEs.xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))) {
-            setExternallySelectedItemsAreInSync(false);
-            params.setExternalSelectedItems([...selectedRows]);
+        else if (externalSelectedItems && setExternalSelectedItems) {
+            const selectedRows = api.getSelectedRows();
+            // We don't want to update selected Items if it hasn't changed to prevent excess renders
+            if (externalSelectedItems.length !== selectedRows.length ||
+                isNotEmpty(lodashEs.xorBy(selectedRows, externalSelectedItems, (row) => row.id))) {
+                setExternallySelectedItemsAreInSync(false);
+                setExternalSelectedItems([...selectedRows]);
+            }
+            else {
+                setExternallySelectedItemsAreInSync(true);
+            }
         }
         else {
             setExternallySelectedItemsAreInSync(true);
         }
-    }, [params, setExternallySelectedItemsAreInSync]);
+    }, [
+        externalSelectedIds,
+        externalSelectedItems,
+        setExternalSelectedIds,
+        setExternalSelectedItems,
+        setExternallySelectedItemsAreInSync,
+    ]);
     /**
      * Synchronise externally selected items to grid.
      * If new ids are selected scroll them into view.
@@ -3086,19 +3013,26 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const synchroniseExternallySelectedItemsToGrid = React.useCallback(() => {
         if (!gridReady)
             return;
-        if (!params.externalSelectedItems) {
+        if (!externalSelectedItems && !externalSelectedIds) {
             setExternallySelectedItemsAreInSync(true);
             return;
         }
-        const selectedIds = params.externalSelectedItems.map((row) => row.id);
-        const lastNewId = lodashEs.last(lodashEs.difference(selectedIds, lastSelectedIds.current));
+        const selectedIds = externalSelectedIds ?? externalSelectedItems?.map((row) => row.id);
+        const lastNewId = lodashEs.last(lodashEs.difference(selectedIds, lastSelectedIds.current ?? []));
         if (lastNewId != null) {
             ensureRowVisible(lastNewId);
         }
         lastSelectedIds.current = selectedIds;
         selectRowsById(selectedIds);
         setExternallySelectedItemsAreInSync(true);
-    }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
+    }, [
+        gridReady,
+        externalSelectedItems,
+        externalSelectedIds,
+        selectRowsById,
+        setExternallySelectedItemsAreInSync,
+        ensureRowVisible,
+    ]);
     /**
      * Combine grid and cell editable into one function
      */
@@ -3140,7 +3074,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const columnDefs = React.useMemo(() => {
         return params.columnDefs.map(mapColDef);
     }, [params.columnDefs, mapColDef]);
-    const hasExternallySelectedItems = !!params.setExternalSelectedItems;
+    const hasExternallySelectedItems = !!setExternalSelectedItems || !!setExternalSelectedIds;
     /**
      * When grid is ready set the apis to the grid context and sync selected items to grid.
      */
@@ -3270,7 +3204,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             let comparator = colDef.comparator;
             if (sortable && !comparator) {
                 comparator = (value1, value2, node1, node2) => {
-                    let r = 0;
+                    let r;
                     if (typeof valueFormatter === 'function') {
                         r = compareNaturalInsensitive(valueFormatter({
                             data: node1.data,
@@ -3467,11 +3401,14 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, [params, clearHighlightRowClasses]);
     React.useEffect(() => {
-        if (params.setExternalSelectedItems && selectable == null) {
-            console.warn('<Grid/> has setExternalSelectedItems parameter, but is missing selectable parameter,' +
+        if ((setExternalSelectedItems || setExternalSelectedIds) && selectable == null) {
+            console.warn('<Grid/> has setExternalSelectedItems/setExternalSelectedIds parameter, but is missing selectable parameter,' +
                 'this will cause weird delays in editing.\nIf you need to hide selection column use hideSelectColumn=true');
         }
-    }, [params.setExternalSelectedItems, selectable]);
+    }, 
+    // Only needs to run on startup
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectable]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnBulkEditingComplete(params.onBulkEditingComplete);
     const getRowId = React.useCallback((params) => `${params.data.id}`, []);
@@ -3515,19 +3452,9 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 }
                 return false;
             },
-            onCellClicked: params.enableSelectionWithoutKeys || params.enableClickSelection
-                ? undefined
-                : clickInputWhenContainingCellClicked,
+            onCellClicked: clickInputWhenContainingCellClicked,
         };
-    }, [
-        params.enableClickSelection,
-        params.enableSelectionWithoutKeys,
-        params.hideSelectColumn,
-        params.onRowDragEnd,
-        rowSelection,
-        selectColumnPinned,
-        selectable,
-    ]);
+    }, [params.hideSelectColumn, params.onRowDragEnd, rowSelection, selectColumnPinned, selectable]);
     const onGridSizeChanged = React.useCallback((event) => {
         if (sizeColumns === 'fit' || (['auto', 'auto-skip-headers'].includes(sizeColumns) && hasSetContentSize.current)) {
             event.api.sizeColumnsToFit();