@linzjs/step-ag-grid 13.3.1 → 13.4.0

package/README.md

@@ -65,6 +65,7 @@ import {
 // Only required for LINZ themes otherwise import the default theme from ag-grid
 import "@linzjs/step-ag-grid/dist/GridTheme.scss";
 import "@linzjs/step-ag-grid/dist/index.css";
+import { GridFilterDownloadCsvButton } from "./GridFilterDownloadCsvButton";
 
 const GridDemo = () => {
   interface ITestRow {
@@ -80,6 +81,7 @@ const GridDemo = () => {
         headerName: "Id",
         initialWidth: 65,
         maxWidth: 85,
+        export: false,
       }),
       GridCell({
         field: "name",
@@ -113,7 +115,7 @@ const GridDemo = () => {
         {
           multiEdit: true,
           editorParams: {
-            message: async ({ selectedRows }) => {
+            message: async ({selectedRows}) => {
               return `There are ${selectedRows.length} row(s) selected`;
             },
           },
@@ -136,25 +138,26 @@ const GridDemo = () => {
       <GridContextProvider>
         <GridWrapper>
           <GridFilters>
-            <GridFilterQuick quickFilterPlaceholder={"Search..."} />
+            <GridFilterQuick/>
             <GridFilterButtons<ITestRow>
-                    options={[
-                      {
-                        label: "All",
-                      },
-                      {
-                        label: "Developers",
-                        filter: (row) => row.position === "Developer",
-                      },
-                      {
-                        label: "Testers",
-                        filter: (row) => row.position === "Tester",
-                      },
-                    ]}
+              options={[
+                {
+                  label: "All",
+                },
+                {
+                  label: "Developers",
+                  filter: (row) => row.position === "Developer",
+                },
+                {
+                  label: "Testers",
+                  filter: (row) => row.position === "Tester",
+                },
+              ]}
             />
             <GridFilterColumnsToggle/>
+            <GridFilterDownloadCsvButton fileName={"exportFile"}/>
           </GridFilters>
-          <Grid selectable={true} columnDefs={columnDefs} rowData={rowData} />
+          <Grid selectable={true} columnDefs={columnDefs} rowData={rowData}/>
         </GridWrapper>
       </GridContextProvider>
     </GridUpdatingContextProvider>
@@ -162,6 +165,14 @@ const GridDemo = () => {
 };
 ```
 
+## CSV Download
+CSV download relies on column valueFormatters vs ag-grid's default valueGetter implementation.
+If you use a customRenderer for a column be sure to include a valueFormatter.
+To disable this behaviour pass undefined to processCellCallback.
+```<GridFilterDownloadCsvButton processCellCallback={undefined}/>```
+
+To exclude a column from CSV download add ```export: false``` to the GridCell definition. 
+
 ## Writing tests
 
 The following testing calls can be imported from step-ag-grid:

package/dist/index.css

@@ -339,16 +339,29 @@
 
 .Grid-container-filters {
   width: 100%;
-  margin-bottom: 16px;
   flex: 0;
   display: flex;
   align-items: center;
   flex-direction: row;
-  grid-column-gap: 1em;
-  padding: 0.25rem 0;
+  padding: 16px;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #beb9b4;
+  border-top: 2px solid #eaeaea;
 }
 
-.Grid-quickFilterBox {
+.Grid-container-filters button {
+  margin-left: 0 !important;
+}
+
+.GridFilterQuick-container:not(:last-child), .GridFilter-container:not(:last-child) {
+  margin-right: 8px;
+}
+
+.GridFilterQuick-container {
+  flex: 1;
+}
+
+.GridFilterQuick-input {
   width: 100%;
   height: 40px;
   border: 0.06rem solid #beb9b4;

package/dist/src/components/gridFilter/GridFilterDownloadCsvButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
+export declare const GridFilterDownloadCsvButton: (csvExportParams: CsvExportParams) => JSX.Element;

package/dist/src/components/gridFilter/index.d.ts

@@ -3,4 +3,5 @@ export * from "./GridFilterColumnsToggle";
 export * from "./GridFilterButtons";
 export * from "./GridFilterQuick";
 export * from "./GridFilters";
+export * from "./GridFilterDownloadCsvButton";
 export * from "./useGridFilter";

package/dist/src/components/gridRender/GridRenderGenericCell.d.ts

@@ -25,6 +25,7 @@ export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<
     valueFormatter?: string | ((params: RowValueFormatterParams<RowType>) => string);
     filterValueGetter?: string | ((params: RowValueGetterParams<RowType>) => string);
     editable?: boolean | ((params: RowEditableCallbackParams<RowType>) => boolean);
+    exportable?: boolean;
 }
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
     singleClickEdit?: boolean;

package/dist/src/contexts/GridContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { ColDefT, GridBaseRow } from "../components";
 export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
 export interface GridContextType<RowType extends GridBaseRow> {
@@ -38,6 +39,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
     getColumns: () => ColDefT<RowType>[];
     invisibleColumnIds: string[];
     setInvisibleColumnIds: (colIds: string[]) => void;
+    downloadCsv: (csvExportParams?: CsvExportParams) => void;
 }
 export declare const GridContext: import("react").Context<GridContextType<any>>;
 export declare const useGridContext: <RowType extends GridBaseRow>() => GridContextType<RowType>;

package/dist/src/contexts/GridContextProvider.d.ts

@@ -1,3 +1,4 @@
+import { ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { ReactElement, ReactNode } from "react";
 import { GridBaseRow } from "../components";
 interface GridContextProps {
@@ -9,4 +10,10 @@ interface GridContextProps {
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 export declare const GridContextProvider: <RowType extends GridBaseRow>(props: GridContextProps) => ReactElement;
+/**
+ * Aggrid defaults to using getters and ignores formatters.
+ * step-ag-grid by default has a valueFormatter for every column that defaults to the getter if no valueFormatter
+ * This function uses valueFormatter by default
+ */
+export declare const downloadCsvUseValueFormattersProcessCellCallback: (params: ProcessCellForExportParams) => string;
 export {};

package/dist/src/contexts/GridContextProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, xorBy, last, difference, sortBy, findIndex, debounce, partition, omit, pick, groupBy, fromPairs, toPairs, delay, defer as defer$1, compact, remove, castArray, flatten, isEqual } from 'lodash-es';
+import { negate, isEmpty, xorBy, last, difference, sortBy, findIndex, debounce, delay, partition, omit, pick, groupBy, fromPairs, toPairs, defer as defer$1, compact, remove, castArray, flatten, isEqual } from 'lodash-es';
 import * as React from 'react';
 import { createContext, useContext, useRef, useCallback, useState, useEffect, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
@@ -244,6 +244,9 @@ var GridContext = createContext({
     doesExternalFilterPass: function () {
         console.error("no context provider for doesExternalFilterPass");
         return true;
+    },
+    downloadCsv: function () {
+        console.error("no context provider for downloadCsv");
     }
 });
 var useGridContext = function () { return useContext(GridContext); };
@@ -619,6 +622,9 @@ var Grid = function (_a) {
                     colId: "selection",
                     editable: false,
                     minWidth: 42,
+                    headerComponentParams: {
+                        exportable: false
+                    },
                     maxWidth: 42,
                     suppressSizeToFit: true,
                     checkboxSelection: true,
@@ -713,7 +719,7 @@ var Grid = function (_a) {
             sizeColumnsToFit();
         }
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
-    return (jsx("div", __assign({ "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: jsx("div", __assign({ style: { flex: 1 } }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: (_c = params.onFirstDataRendered) !== null && _c !== void 0 ? _c : sizeColumnsToFit, onGridSizeChanged: (_d = params.onGridSizeChanged) !== null && _d !== void 0 ? _d : sizeColumnsToFit, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: { rowData: params.rowData, noRowsOverlayText: params.noRowsOverlayText }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_e = params.postSortRows) !== null && _e !== void 0 ? _e : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass }) })) })));
+    return (jsx("div", __assign({ "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: jsx("div", __assign({ style: { flex: 1 } }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: (_c = params.onFirstDataRendered) !== null && _c !== void 0 ? _c : sizeColumnsToFit, onGridSizeChanged: (_d = params.onGridSizeChanged) !== null && _d !== void 0 ? _d : sizeColumnsToFit, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: { rowData: params.rowData, noRowsOverlayText: params.noRowsOverlayText }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_e = params.postSortRows) !== null && _e !== void 0 ? _e : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true }) })) })));
 };
 
 var GridPopoverContext = createContext({
@@ -859,6 +865,9 @@ var GridCell = function (props, custom) {
     // This is so that e.g. bearings can be searched for by DMS or raw number.
     var valueFormatter = props.valueFormatter;
     var filterValueGetter = generateFilterGetter(props.field, props.filterValueGetter, valueFormatter);
+    var exportable = props.exportable;
+    // Can't leave this here ag-grid will complain
+    delete props.exportable;
     return __assign(__assign(__assign(__assign(__assign(__assign({ colId: props.field, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true, editable: (_a = props.editable) !== null && _a !== void 0 ? _a : false }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
         cellClassRules: GridCellMultiSelectClassRules,
         editable: (_b = props.editable) !== null && _b !== void 0 ? _b : true,
@@ -877,7 +886,7 @@ var GridCell = function (props, custom) {
                 return "".concat(params.value);
             else
                 return JSON.stringify(params.value);
-        } }), props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams) });
+        } }), props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams), headerComponentParams: __assign({ exportable: exportable }, props.headerComponentParams) });
 };
 var GenericCellEditorComponentWrapper = function (editor) {
     var obj = { editor: editor };
@@ -913,7 +922,7 @@ var GridCellMultiEditor = function (props, cellEditorSelector) {
 
 var GridFilterHeaderIconButton = forwardRef(function columnsButton(_a, ref) {
     var icon = _a.icon, title = _a.title, onClick = _a.onClick, buttonProps = _a.buttonProps, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "md" : _c;
-    return (jsx(LuiButton, __assign({}, buttonProps, { type: "button", level: "tertiary", className: "GridFilterHeaderIconButton lui-button-icon-only", ref: ref, "aria-label": title, title: title, onClick: onClick, disabled: disabled }, { children: jsx(LuiIcon, { name: icon, alt: "Menu", size: size }) })));
+    return (jsx(LuiButton, __assign({}, buttonProps, { type: "button", level: "tertiary", className: "lui-button-icon-only", ref: ref, "aria-label": title, title: title, onClick: onClick, disabled: disabled }, { children: jsx(LuiIcon, { name: icon, alt: "Menu", size: size }) })));
 });
 
 // Generate className following BEM methodology: http://getbem.com/naming/
@@ -2863,9 +2872,9 @@ var GridFilterQuick = function (_a) {
     useEffect(function () {
         setQuickFilter(quickFilterValue);
     }, [quickFilterValue, setQuickFilter]);
-    return (jsx("input", { "aria-label": "Search", className: "Grid-quickFilterBox", type: "text", placeholder: quickFilterPlaceholder !== null && quickFilterPlaceholder !== void 0 ? quickFilterPlaceholder : "Search...", value: quickFilterValue, onChange: function (event) {
-            setQuickFilterValue(event.target.value);
-        } }));
+    return (jsx("div", __assign({ className: "GridFilterQuick-container" }, { children: jsx("input", { "aria-label": "Search", className: "GridFilterQuick-input", type: "text", placeholder: quickFilterPlaceholder !== null && quickFilterPlaceholder !== void 0 ? quickFilterPlaceholder : "Search...", value: quickFilterValue, onChange: function (event) {
+                setQuickFilterValue(event.target.value);
+            } }) })));
 };
 
 var GridFilters = function (_a) {
@@ -2873,6 +2882,80 @@ var GridFilters = function (_a) {
     return jsx("div", __assign({ className: "Grid-container-filters" }, { children: children }));
 };
 
+/**
+ * Cancels timeouts on scope being destroyed.
+ *
+ * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
+ * This could have been implemented using debounce if the callers function was wrapped in useCallback,
+ * but there's no way to enforce that, so  it would lead to bugs.
+ */
+var useTimeoutHook = function () {
+    var timeout = useRef();
+    /**
+     * Clear any pending timeouts.
+     */
+    var clearTimeouts = function () {
+        if (timeout.current) {
+            var tc = timeout.current;
+            timeout.current = undefined;
+            clearTimeout(tc);
+        }
+    };
+    /**
+     * Call this when your action has completed.
+     */
+    var invoke = useCallback(function (fn, waitTimeMs) {
+        clearTimeouts();
+        timeout.current = setTimeout(fn, waitTimeMs);
+    }, []);
+    /**
+     * Clear timeout on loss of scope.
+     */
+    useEffect(function () {
+        return function () { return clearTimeouts(); };
+    }, []);
+    return invoke;
+};
+
+/**
+ * Defers state change up to a minimum time since last state change.
+ */
+var useStateDeferred = function (initialValue) {
+    var startTime = useRef(0);
+    var timeoutHook = useTimeoutHook();
+    var _a = useState(initialValue), value = _a[0], _setValue = _a[1];
+    var setValue = useCallback(function (newValue) {
+        startTime.current = Date.now();
+        _setValue(newValue);
+    }, []);
+    var setValueDeferred = useCallback(function (newValue, minimumWaitTimeMs) {
+        var waitTimeMs = Math.max(minimumWaitTimeMs - (Date.now() - startTime.current), 0);
+        timeoutHook(function () { return _setValue(newValue); }, waitTimeMs);
+    }, [timeoutHook]);
+    return [value, setValue, setValueDeferred];
+};
+
+var GridFilterDownloadCsvButton = function (csvExportParams) {
+    var _a;
+    var downloadCsv = useContext(GridContext).downloadCsv;
+    var _b = useStateDeferred(false), downloading = _b[0], setDownloading = _b[1], setDownloadingDeferred = _b[2];
+    var handleDownloadClick = function () {
+        setDownloading(true);
+        // Defer the download such that the component disabled state can update
+        delay(function () {
+            downloadCsv(csvExportParams);
+            // Defer re-enablement as the browser takes time to process the download
+            setDownloadingDeferred(false, 4000);
+        }, 100);
+    };
+    return downloading ? (jsx(LuiMiniSpinner, { size: 22, divProps: (_a = {
+                role: "status"
+            },
+            _a["aria-label"] = "Downloading...",
+            _a.style = { width: 42, display: "flex", justifyContent: "center" },
+            _a) })) : (jsx(GridFilterHeaderIconButton, { icon: "ic_save_download", title: "Download CSV", onClick: handleDownloadClick, disabled: downloading }));
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -4255,7 +4338,7 @@ var GridRenderPopoutMenuCell = function (props) {
  * Popout burger menu
  */
 var GridPopoverMenu = function (colDef, custom) {
-    return GridCell(__assign(__assign({ minWidth: 48, maxWidth: 48, width: 40, editable: colDef.editable != null ? colDef.editable : true, cellStyle: { justifyContent: "center" }, cellRenderer: GridRenderPopoutMenuCell }, colDef), { cellRendererParams: {
+    return GridCell(__assign(__assign({ minWidth: 48, maxWidth: 48, width: 40, editable: colDef.editable != null ? colDef.editable : true, exportable: false, cellStyle: { justifyContent: "center" }, cellRenderer: GridRenderPopoutMenuCell }, colDef), { cellRendererParams: {
             // Menus open on single click, this parameter is picked up in Grid.tsx
             singleClickEdit: true
         } }), __assign({ editor: GridFormPopoverMenu }, custom));
@@ -4652,6 +4735,11 @@ var GridContextProvider = function (props) {
             gridApi.redrawRows(rowNodes ? { rowNodes: rowNodes } : undefined);
         });
     }, [gridApiOp]);
+    // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
+    var externallySelectedItemsAreInSyncRef = useRef(false);
+    useEffect(function () {
+        externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
+    }, [externallySelectedItemsAreInSync]);
     var waitForExternallySelectedItemsToBeInSync = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var i;
         return __generator(this, function (_a) {
@@ -4660,7 +4748,7 @@ var GridContextProvider = function (props) {
                     i = 0;
                     _a.label = 1;
                 case 1:
-                    if (!(i < 5000 / 200 && !externallySelectedItemsAreInSync)) return [3 /*break*/, 4];
+                    if (!(i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current)) return [3 /*break*/, 4];
                     return [4 /*yield*/, wait$2(200)];
                 case 2:
                     _a.sent();
@@ -4671,7 +4759,7 @@ var GridContextProvider = function (props) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, [externallySelectedItemsAreInSync]);
+    }); }, []);
     var onFilterChanged = useMemo(function () {
         return debounce(function () {
             gridApi && gridApi.onFilterChanged();
@@ -4700,6 +4788,15 @@ var GridContextProvider = function (props) {
             columnApi.setColumnsVisible(invisibleColumnIds, false);
         }
     }, [invisibleColumnIds, columnApi, getColumns]);
+    /**
+     * Download visible columns as a CSV
+     */
+    var downloadCsv = useCallback(function (csvExportParams) {
+        if (!gridApi || !columnApi)
+            return;
+        var columnKeys = columnApi === null || columnApi === void 0 ? void 0 : columnApi.getColumnState().filter(function (cs) { var _a, _b; return !cs.hide && ((_b = (_a = gridApi.getColumnDef(cs.colId)) === null || _a === void 0 ? void 0 : _a.headerComponentParams) === null || _b === void 0 ? void 0 : _b.exportable) !== false; }).map(function (cs) { return cs.colId; });
+        gridApi.exportDataAsCsv(__assign({ columnKeys: columnKeys, processCellCallback: downloadCsvUseValueFormattersProcessCellCallback }, csvExportParams));
+    }, [columnApi, gridApi]);
     return (jsx(GridContext.Provider, __assign({ value: {
             getColumns: getColumns,
             invisibleColumnIds: invisibleColumnIds,
@@ -4732,8 +4829,52 @@ var GridContextProvider = function (props) {
             addExternalFilter: addExternalFilter,
             removeExternalFilter: removeExternalFilter,
             isExternalFilterPresent: isExternalFilterPresent,
-            doesExternalFilterPass: doesExternalFilterPass
+            doesExternalFilterPass: doesExternalFilterPass,
+            downloadCsv: downloadCsv
         } }, { children: props.children })));
+};
+/**
+ * Aggrid defaults to using getters and ignores formatters.
+ * step-ag-grid by default has a valueFormatter for every column that defaults to the getter if no valueFormatter
+ * This function uses valueFormatter by default
+ */
+var downloadCsvUseValueFormattersProcessCellCallback = function (params) {
+    var _a, _b;
+    var encodeToString = function (value) {
+        // Convert nullish values to blank
+        if (value === "-" || value === "–" || value == null) {
+            return "";
+        }
+        if (typeof value === "string") {
+            return value;
+        }
+        return JSON.stringify(value);
+    };
+    // Try to use valueFormatter
+    var colDef = (_a = params === null || params === void 0 ? void 0 : params.column) === null || _a === void 0 ? void 0 : _a.getColDef();
+    if (!colDef)
+        return encodeToString(params.value);
+    // All columns in step-ag-grid have a default valueFormatter
+    // If you have custom a renderer you need to define your own valueFormatter to produce the text value
+    var valueFormatter = colDef.valueFormatter;
+    // If no valueFormatter then value _must_ be a string
+    if (valueFormatter == null) {
+        if (params.value != null && typeof params.value !== "string") {
+            console.error("downloadCsv: valueFormatter missing and getValue is not a string, colId: ".concat(colDef.colId));
+        }
+        return encodeToString(params.value);
+    }
+    // We don't have access to registered functions, so we can't call them
+    if (typeof valueFormatter !== "function") {
+        console.error("downloadCsv: String type (registered) value formatters are unsupported in downloadCsv, colId: ".concat(colDef.colId));
+        return encodeToString(params.value);
+    }
+    var result = valueFormatter(__assign(__assign({}, params), { data: (_b = params.node) === null || _b === void 0 ? void 0 : _b.data, colDef: colDef }));
+    if (params.value != null && typeof result !== "string") {
+        console.error("downloadCsv: valueFormatter is returning non string values, colDef:\", colId: ".concat(colDef.colId));
+    }
+    // We add an extra encodeToString here just in case valueFormatter is returning non string values
+    return encodeToString(result);
 };
 
 var GridUpdatingContextProvider = function (props) {
@@ -4794,59 +4935,6 @@ var usePrevious = function (value) {
     return ref.current;
 };
 
-/**
- * Cancels timeouts on scope being destroyed.
- *
- * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
- * This could have been implemented using debounce if the callers function was wrapped in useCallback,
- * but there's no way to enforce that, so  it would lead to bugs.
- */
-var useTimeoutHook = function () {
-    var timeout = useRef();
-    /**
-     * Clear any pending timeouts.
-     */
-    var clearTimeouts = function () {
-        if (timeout.current) {
-            var tc = timeout.current;
-            timeout.current = undefined;
-            clearTimeout(tc);
-        }
-    };
-    /**
-     * Call this when your action has completed.
-     */
-    var invoke = useCallback(function (fn, waitTimeMs) {
-        clearTimeouts();
-        timeout.current = setTimeout(fn, waitTimeMs);
-    }, []);
-    /**
-     * Clear timeout on loss of scope.
-     */
-    useEffect(function () {
-        return function () { return clearTimeouts(); };
-    }, []);
-    return invoke;
-};
-
-/**
- * Defers state change up to a minimum time since last state change.
- */
-var useStateDeferred = function (initialValue) {
-    var startTime = useRef(0);
-    var timeoutHook = useTimeoutHook();
-    var _a = useState(initialValue), value = _a[0], _setValue = _a[1];
-    var setValue = useCallback(function (newValue) {
-        startTime.current = Date.now();
-        _setValue(newValue);
-    }, []);
-    var setValueDeferred = useCallback(function (newValue, minimumWaitTimeMs) {
-        var waitTimeMs = Math.max(minimumWaitTimeMs - (Date.now() - startTime.current), 0);
-        timeoutHook(function () { return _setValue(newValue); }, waitTimeMs);
-    }, [timeoutHook]);
-    return [value, setValue, setValueDeferred];
-};
-
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
 var minimumInProgressTimeMs = 950;
 var ActionButton = function (_a) {
@@ -25000,5 +25088,5 @@ var clickActionButton = function (text, container) { return __awaiter(void 0, vo
     });
 }); };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFilterButtons, GridFilterColumnsToggle, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, clickActionButton, clickMenuOption, clickMultiSelectOption, closeMenu, closePopover, convertDDToDMS, countRows, deselectRow, editCell, findActionButton, findCell, findCellContains, findMenuOption, findMultiSelectOption, findOpenPopover, findParentWithClass, findRow, fnOrVar, generateFilterGetter, getMultiSelectOptions, hasParentClass, isCellReadOnly, isFloat, isNotEmpty, openAndClickMenuOption, openAndFindMenuOption, queryMenuOption, queryRow, selectCell, selectRow, stringByteLengthIsInvalid, suppressCellKeyboardEvents, typeInputByLabel, typeInputByPlaceholder, typeOnlyInput, typeOtherInput, typeOtherTextArea, useDeferredPromise, useGenerateOrDefaultId, useGridContext, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, validateMenuOptions, wait$2 as wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFilterButtons, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, clickActionButton, clickMenuOption, clickMultiSelectOption, closeMenu, closePopover, convertDDToDMS, countRows, deselectRow, downloadCsvUseValueFormattersProcessCellCallback, editCell, findActionButton, findCell, findCellContains, findMenuOption, findMultiSelectOption, findOpenPopover, findParentWithClass, findRow, fnOrVar, generateFilterGetter, getMultiSelectOptions, hasParentClass, isCellReadOnly, isFloat, isNotEmpty, openAndClickMenuOption, openAndFindMenuOption, queryMenuOption, queryRow, selectCell, selectRow, stringByteLengthIsInvalid, suppressCellKeyboardEvents, typeInputByLabel, typeInputByPlaceholder, typeOnlyInput, typeOtherInput, typeOtherTextArea, useDeferredPromise, useGenerateOrDefaultId, useGridContext, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, validateMenuOptions, wait$2 as wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map