@linzjs/step-ag-grid 13.4.0 → 13.5.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "13.4.0",
+  "version": "13.5.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -36,14 +36,15 @@
   },
   "dependencies": {
     "@linzjs/lui": ">=17",
-    "ag-grid-community": "27.3.0",
-    "ag-grid-react": "^27.3.0",
+    "ag-grid-community": ">=27",
+    "ag-grid-react": ">=27",
     "debounce-promise": "^3.1.2",
     "lodash-es": ">=4",
     "matcher": "^5.0.0",
     "react": ">=17",
     "react-dom": ">=17",
     "react-transition-state": "^2.0.2",
+    "sanitize-filename": "^1.6.3",
     "uuid": "^9.0.0"
   },
   "scripts": {

package/src/contexts/GridContextProvider.tsx

@@ -6,7 +6,7 @@ import { compact, debounce, defer, delay, difference, isEmpty, last, remove, sor
 import { ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { ColDefT, GridBaseRow } from "../components";
-import { isNotEmpty, wait } from "../utils/util";
+import { isNotEmpty, sanitiseFileName, wait } from "../utils/util";
 import { GridContext, GridFilterExternal } from "./GridContext";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 
@@ -482,6 +482,8 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     (csvExportParams?: CsvExportParams) => {
       if (!gridApi || !columnApi) return;
 
+      const fileName = csvExportParams?.fileName && sanitiseFileName(csvExportParams.fileName);
+
       const columnKeys = columnApi
         ?.getColumnState()
         .filter((cs) => !cs.hide && gridApi.getColumnDef(cs.colId)?.headerComponentParams?.exportable !== false)
@@ -490,6 +492,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         columnKeys,
         processCellCallback: downloadCsvUseValueFormattersProcessCellCallback,
         ...csvExportParams,
+        fileName,
       });
     },
     [columnApi, gridApi],

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -231,7 +231,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           ]}
         />
         <GridFilterColumnsToggle />
-        <GridFilterDownloadCsvButton />
+        <GridFilterDownloadCsvButton fileName={"readOnlyGrid"} />
       </GridFilters>
       <Grid
         data-testid={"readonly"}

package/src/styles/Grid.scss

@@ -31,7 +31,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  padding: 16px;
+  padding: 12px;
   background-color: colors.$hint;
   border-bottom: 1px solid colors.$silver;
   border-top: 2px solid colors.$lily;
@@ -59,6 +59,7 @@
 .GridFilterQuick-input {
   width: 100%;
   height: 40px;
+  min-height: 40px;
   border: 0.06rem solid colors.$silver;
   border-radius: 3px;
   padding-left: 0.75rem;

package/src/utils/util.test.ts

@@ -0,0 +1,8 @@
+import { sanitiseFileName } from "./util";
+
+describe("sanitiseFileName", () => {
+  test("sanitiseFileName", () => {
+    expect(sanitiseFileName(" LT 1235/543 &%//*$ ")).toBe("LT_1235-543_&%-$");
+    expect(sanitiseFileName(" @filename here!!! ")).toBe("@filename_here!!!");
+  });
+});

package/src/utils/util.ts

@@ -1,4 +1,5 @@
 import { isEmpty, negate } from "lodash-es";
+import sanitize from "sanitize-filename";
 
 export const isNotEmpty = negate(isEmpty);
 
@@ -36,3 +37,12 @@ export const stringByteLengthIsInvalid = (str: string, maxBytes: number) =>
   new TextEncoder().encode(str).length > maxBytes;
 
 export const fnOrVar = (fn: any, param: any) => (typeof fn === "function" ? fn(param) : fn);
+
+/**
+ * Trim filename and replaces troublesome characters.
+ *
+ * e.g. " LT 1235/543 &%//*$ " => "LT_1235-543_&%-$"
+ * e.g. " @filename here!!!" => "@filename_here!!!"
+ */
+export const sanitiseFileName = (filename: string): string =>
+  sanitize(filename.trim().replaceAll(/(\/|\\)+/g, "-")).replaceAll(/\s+/g, "_");