@linzjs/step-ag-grid 13.3.1 → 13.4.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "13.3.1",
+  "version": "13.4.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -187,6 +187,9 @@ export const Grid = ({
             colId: "selection",
             editable: false,
             minWidth: 42,
+            headerComponentParams: {
+              exportable: false,
+            },
             maxWidth: 42,
             suppressSizeToFit: true,
             checkboxSelection: true,
@@ -344,6 +347,7 @@ export const Grid = ({
           alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
           isExternalFilterPresent={isExternalFilterPresent}
           doesExternalFilterPass={doesExternalFilterPass}
+          maintainColumnOrder={true}
         />
       </div>
     </div>

package/src/components/GridCell.tsx

@@ -114,6 +114,9 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
   // This is so that e.g. bearings can be searched for by DMS or raw number.
   const valueFormatter = props.valueFormatter;
   const filterValueGetter = generateFilterGetter(props.field, props.filterValueGetter, valueFormatter);
+  const exportable = props.exportable;
+  // Can't leave this here ag-grid will complain
+  delete props.exportable;
 
   return {
     colId: props.field,
@@ -144,6 +147,10 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
       originalCellRenderer: props.cellRenderer,
       ...props.cellRendererParams,
     },
+    headerComponentParams: {
+      exportable,
+      ...props.headerComponentParams,
+    },
   };
 };
 

package/src/components/gridFilter/GridFilterDownloadCsvButton.tsx

@@ -0,0 +1,43 @@
+import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
+import { delay } from "lodash-es";
+import { useContext } from "react";
+
+import { LuiMiniSpinner } from "@linzjs/lui";
+
+import { GridContext } from "../../contexts/GridContext";
+import { useStateDeferred } from "../../lui/stateDeferredHook";
+import { GridFilterHeaderIconButton } from "./GridFilterHeaderIconButton";
+
+export const GridFilterDownloadCsvButton = (csvExportParams: CsvExportParams) => {
+  const { downloadCsv } = useContext(GridContext);
+
+  const [downloading, setDownloading, setDownloadingDeferred] = useStateDeferred(false);
+
+  const handleDownloadClick = () => {
+    setDownloading(true);
+    // Defer the download such that the component disabled state can update
+    delay(() => {
+      downloadCsv(csvExportParams);
+      // Defer re-enablement as the browser takes time to process the download
+      setDownloadingDeferred(false, 4000);
+    }, 100);
+  };
+
+  return downloading ? (
+    <LuiMiniSpinner
+      size={22}
+      divProps={{
+        role: "status",
+        ["aria-label"]: "Downloading...",
+        style: { width: 42, display: "flex", justifyContent: "center" },
+      }}
+    />
+  ) : (
+    <GridFilterHeaderIconButton
+      icon={"ic_save_download"}
+      title={"Download CSV"}
+      onClick={handleDownloadClick}
+      disabled={downloading}
+    />
+  );
+};

package/src/components/gridFilter/GridFilterHeaderIconButton.tsx

@@ -19,7 +19,7 @@ export const GridFilterHeaderIconButton = forwardRef<HTMLButtonElement, GridFilt
         {...buttonProps}
         type={"button"}
         level={"tertiary"}
-        className={"GridFilterHeaderIconButton lui-button-icon-only"}
+        className={"lui-button-icon-only"}
         ref={ref}
         aria-label={title}
         title={title}

package/src/components/gridFilter/GridFilterQuick.tsx

@@ -16,15 +16,17 @@ export const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }: GridFi
   }, [quickFilterValue, setQuickFilter]);
 
   return (
-    <input
-      aria-label="Search"
-      className="Grid-quickFilterBox"
-      type="text"
-      placeholder={quickFilterPlaceholder ?? "Search..."}
-      value={quickFilterValue}
-      onChange={(event) => {
-        setQuickFilterValue(event.target.value);
-      }}
-    />
+    <div className="GridFilterQuick-container">
+      <input
+        aria-label="Search"
+        className="GridFilterQuick-input"
+        type="text"
+        placeholder={quickFilterPlaceholder ?? "Search..."}
+        value={quickFilterValue}
+        onChange={(event) => {
+          setQuickFilterValue(event.target.value);
+        }}
+      />
+    </div>
   );
 };

package/src/components/gridFilter/index.ts

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

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -17,6 +17,7 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
       maxWidth: 48,
       width: 40,
       editable: colDef.editable != null ? colDef.editable : true,
+      exportable: false,
       cellStyle: { justifyContent: "center" },
       cellRenderer: GridRenderPopoutMenuCell,
       ...colDef,

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -35,6 +35,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> {

package/src/contexts/GridContext.tsx

@@ -1,4 +1,5 @@
 import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { createContext, useContext } from "react";
 
 import { ColDefT, GridBaseRow } from "../components";
@@ -43,6 +44,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   getColumns: () => ColDefT<RowType>[];
   invisibleColumnIds: string[];
   setInvisibleColumnIds: (colIds: string[]) => void;
+  downloadCsv: (csvExportParams?: CsvExportParams) => void;
 }
 
 export const GridContext = createContext<GridContextType<any>>({
@@ -146,6 +148,9 @@ export const GridContext = createContext<GridContextType<any>>({
     console.error("no context provider for doesExternalFilterPass");
     return true;
   },
+  downloadCsv: () => {
+    console.error("no context provider for downloadCsv");
+  },
 });
 
 export const useGridContext = <RowType extends GridBaseRow>() => useContext<GridContextType<RowType>>(GridContext);

package/src/contexts/GridContextProvider.test.tsx

@@ -0,0 +1,39 @@
+import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+
+import { downloadCsvUseValueFormattersProcessCellCallback as Dpcc } from "./GridContextProvider";
+
+describe("downloadCsvUseValueFormattersProcessCellCallback", () => {
+  test("each type of value for conversion to string", async () => {
+    expect(Dpcc({ value: undefined } as any)).toBe("");
+    expect(Dpcc({ value: "-" } as any)).toBe("");
+    expect(Dpcc({ value: "–" } as any)).toBe("");
+    expect(Dpcc({ value: null } as any)).toBe("");
+    expect(Dpcc({ value: false } as any)).toBe("false");
+    expect(Dpcc({ value: "x" } as any)).toBe("x");
+    expect(Dpcc({ value: 123 } as any)).toBe("123");
+    expect(Dpcc({ value: { a: 2 } } as any)).toBe('{"a":2}');
+    expect(Dpcc({ value: { a: 2 }, column: { getColDef: () => undefined } } as any)).toBe('{"a":2}');
+    expect(Dpcc({ value: { a: 2 }, column: { getColDef: () => ({ valueFormatter: undefined }) } } as any)).toBe(
+      '{"a":2}',
+    );
+    expect(
+      Dpcc({
+        value: { a: 2 },
+        column: { getColDef: () => ({ valueFormatter: "registeredValueFormatter" }) },
+      } as any),
+    ).toBe('{"a":2}');
+
+    expect(
+      Dpcc({
+        value: { a: 2 },
+        column: {
+          getColDef: () => ({
+            valueFormatter: (params: ValueFormatterParams) => {
+              return "xxx" + params.value.a;
+            },
+          }),
+        },
+      } as any),
+    ).toBe("xxx2");
+  });
+});

package/src/contexts/GridContextProvider.tsx

@@ -1,5 +1,7 @@
 import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
 import { CellPosition } from "ag-grid-community/dist/lib/entities/cellPosition";
+import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { CsvExportParams, ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { compact, debounce, defer, delay, difference, isEmpty, last, remove, sortBy } from "lodash-es";
 import { ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
@@ -418,12 +420,18 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     [gridApiOp],
   );
 
+  // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
+  const externallySelectedItemsAreInSyncRef = useRef(false);
+  useEffect(() => {
+    externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
+  }, [externallySelectedItemsAreInSync]);
+
   const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
     // Wait for up to 5 seconds
-    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSync; i++) {
+    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
       await wait(200);
     }
-  }, [externallySelectedItemsAreInSync]);
+  }, []);
 
   const onFilterChanged = useMemo(
     () =>
@@ -467,6 +475,26 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     }
   }, [invisibleColumnIds, columnApi, getColumns]);
 
+  /**
+   * Download visible columns as a CSV
+   */
+  const downloadCsv = useCallback(
+    (csvExportParams?: CsvExportParams) => {
+      if (!gridApi || !columnApi) return;
+
+      const columnKeys = columnApi
+        ?.getColumnState()
+        .filter((cs) => !cs.hide && gridApi.getColumnDef(cs.colId)?.headerComponentParams?.exportable !== false)
+        .map((cs) => cs.colId);
+      gridApi.exportDataAsCsv({
+        columnKeys,
+        processCellCallback: downloadCsvUseValueFormattersProcessCellCallback,
+        ...csvExportParams,
+      });
+    },
+    [columnApi, gridApi],
+  );
+
   return (
     <GridContext.Provider
       value={{
@@ -502,9 +530,58 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         removeExternalFilter,
         isExternalFilterPresent,
         doesExternalFilterPass,
+        downloadCsv,
       }}
     >
       {props.children}
     </GridContext.Provider>
   );
 };
+
+/**
+ * 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 const downloadCsvUseValueFormattersProcessCellCallback = (params: ProcessCellForExportParams): string => {
+  const encodeToString = (value: any): string => {
+    // 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
+  const colDef = params?.column?.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
+  const 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: ${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: ${colDef.colId}`,
+    );
+    return encodeToString(params.value);
+  }
+
+  const result = valueFormatter({ ...params, data: params.node?.data, colDef } as ValueFormatterParams);
+  if (params.value != null && typeof result !== "string") {
+    console.error(`downloadCsv: valueFormatter is returning non string values, colDef:", colId: ${colDef.colId}`);
+  }
+  // We add an extra encodeToString here just in case valueFormatter is returning non string values
+  return encodeToString(result);
+};

package/src/react-menu3/components/Menu.tsx

@@ -10,7 +10,7 @@ import {
 } from "react";
 
 import { useCombinedRef, useMenuChange, useMenuStateAndFocus } from "../hooks";
-import { MenuButtonModifiers, RenderProp, RootMenuProps, UncontrolledMenuProps } from "../types";
+import { MenuButtonModifiers, MenuCloseEvent, RenderProp, RootMenuProps, UncontrolledMenuProps } from "../types";
 import { FocusPositions, Keys, getName, isMenuOpen, mergeProps, safeCall } from "../utils";
 import { ControlledMenu } from "./ControlledMenu";
 
@@ -40,7 +40,7 @@ export function MenuFr(
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   const handleClose = useCallback(
-    (e) => {
+    (e: MenuCloseEvent) => {
       toggleMenu(false);
       if (e.key) buttonRef.current && buttonRef.current.focus();
     },

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -9,10 +9,15 @@ import {
   Grid,
   GridCell,
   GridContextProvider,
+  GridFilterColumnsToggle,
+  GridFilterDownloadCsvButton,
+  GridFilterQuick,
+  GridFilters,
   GridPopoverEditBearing,
   GridPopoverEditBearingCorrection,
   GridProps,
   GridUpdatingContextProvider,
+  GridWrapper,
   wait,
 } from "../..";
 import "../../styles/GridTheme.scss";
@@ -97,16 +102,23 @@ const GridPopoverEditBearingTemplate: ComponentStory<typeof Grid> = (props: Grid
   ] as ITestRow[]);
 
   return (
-    <Grid
-      data-testid={"bearingsTestTable"}
-      {...props}
-      readOnly={false}
-      externalSelectedItems={externalSelectedItems}
-      setExternalSelectedItems={setExternalSelectedItems}
-      columnDefs={columnDefs}
-      rowData={rowData}
-      domLayout={"autoHeight"}
-    />
+    <GridWrapper maxHeight={300}>
+      <GridFilters>
+        <GridFilterQuick />
+        <GridFilterColumnsToggle />
+        <GridFilterDownloadCsvButton fileName={"customFilename"} />
+      </GridFilters>
+      <Grid
+        data-testid={"bearingsTestTable"}
+        {...props}
+        readOnly={false}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={"autoHeight"}
+      />
+    </GridWrapper>
   );
 };
 

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -9,12 +9,17 @@ import {
   Grid,
   GridCell,
   GridContextProvider,
+  GridFilterColumnsToggle,
+  GridFilterDownloadCsvButton,
+  GridFilterQuick,
+  GridFilters,
   GridFormSubComponentTextArea,
   GridFormSubComponentTextInput,
   GridPopoverEditDropDown,
   GridPopoverMenu,
   GridProps,
   GridUpdatingContextProvider,
+  GridWrapper,
   MenuHeaderItem,
   MenuSeparator,
   MenuSeparatorString,
@@ -299,14 +304,21 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
   ] as ITestRow[]);
 
   return (
-    <Grid
-      {...props}
-      externalSelectedItems={externalSelectedItems}
-      setExternalSelectedItems={setExternalSelectedItems}
-      columnDefs={columnDefs}
-      rowData={rowData}
-      domLayout={"autoHeight"}
-    />
+    <GridWrapper maxHeight={300}>
+      <GridFilters>
+        <GridFilterQuick />
+        <GridFilterColumnsToggle />
+        <GridFilterDownloadCsvButton fileName={"customFilename"} />
+      </GridFilters>
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={"autoHeight"}
+      />
+    </GridWrapper>
   );
 };
 

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

@@ -24,6 +24,7 @@ import {
   wait,
 } from "../..";
 import { GridFilterColumnsToggle } from "../../components";
+import { GridFilterDownloadCsvButton } from "../../components/gridFilter/GridFilterDownloadCsvButton";
 import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 
@@ -96,6 +97,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           headerName: "Popout message",
           maxWidth: 150,
           cellRenderer: () => <>Single Click me!</>,
+          exportable: false,
         },
         {
           multiEdit: true,
@@ -214,7 +216,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   return (
     <GridWrapper maxHeight={300}>
       <GridFilters>
-        <GridFilterQuick quickFilterPlaceholder={"Custom placeholder..."} />
+        <GridFilterQuick />
         <GridFilterLessThan text="Age <" field={"age"} />
         <GridFilterButtons<ITestRow>
           luiButtonProps={{ style: { whiteSpace: "nowrap" } }}
@@ -229,6 +231,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           ]}
         />
         <GridFilterColumnsToggle />
+        <GridFilterDownloadCsvButton />
       </GridFilters>
       <Grid
         data-testid={"readonly"}
@@ -263,7 +266,7 @@ const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): JSX
   };
 
   return (
-    <div className={"flex-row-center"}>
+    <div className={"GridFilter-container flex-row-center"}>
       <div style={{ whiteSpace: "nowrap" }}>{props.text}</div>
       &#160;
       <input type={"text"} defaultValue={value} onChange={(e) => updateValue(e.target.value)} style={{ width: 64 }} />

package/src/styles/Grid.scss

@@ -27,17 +27,36 @@
 
 .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: colors.$hint;
+  border-bottom: 1px solid colors.$silver;
+  border-top: 2px solid colors.$lily;
 }
 
+.Grid-container-filters button {
+  margin-left: 0 !important;
+}
+
+%GridFilter-container {
+  &:not(:last-child) {
+    margin-right: 8px;
+  }
+}
+
+.GridFilter-container {
+  @extend %GridFilter-container;
+}
+
+.GridFilterQuick-container {
+  @extend %GridFilter-container;
+  flex: 1;
+}
 
-.Grid-quickFilterBox {
+.GridFilterQuick-input {
   width: 100%;
   height: 40px;
   border: 0.06rem solid colors.$silver;