@linzjs/step-ag-grid 12.1.2 → 13.1.0

package/README.md

@@ -1,5 +1,7 @@
 # step-ag-grid
 
+[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
+
 > Reusable [ag-grid](https://www.ag-grid.com/) component for LINZ / Toitū te whenua.
 
 ## Features
@@ -44,21 +46,25 @@ Storybook demo deployed at: https://linz.github.io/step-ag-grid/
 Check `src\stories` for more usage examples
 
 ```tsx
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "@linzjs/step-ag-grid/dist/index.css";
-// Only required for LINZ themes otherwise import the default theme from ag-grid
-import "@linzjs/step-ag-grid/dist/GridTheme.scss";
-
 import { useMemo } from "react";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
 import {
-  GridUpdatingContextProvider,
-  GridContextProvider,
   ColDefT,
   GridCell,
-  GridPopoverMessage,
+  GridContextProvider,
   GridPopoverEditDropDown,
+  GridPopoverMessage,
+  GridUpdatingContextProvider,
+  GridWrapper,
+  GridFilters,
+  GridFilterQuick,
+  GridFilterButtons
 } from "@linzjs/step-ag-grid";
+// 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";
 
 const GridDemo = () => {
   interface ITestRow {
@@ -81,8 +87,8 @@ const GridDemo = () => {
         initialWidth: 65,
         maxWidth: 150,
         cellRendererParams: {
-          warning: ({value}) => value === "Tester" && "Testers are testing",
-          info: ({value}) => value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       GridPopoverEditDropDown(
@@ -107,7 +113,7 @@ const GridDemo = () => {
         {
           multiEdit: true,
           editorParams: {
-            message: async ({selectedRows}) => {
+            message: async ({ selectedRows }) => {
               return `There are ${selectedRows.length} row(s) selected`;
             },
           },
@@ -128,7 +134,28 @@ const GridDemo = () => {
   return (
     <GridUpdatingContextProvider>
       <GridContextProvider>
-        <Grid selectable={true} columnDefs={columnDefs} rowData={rowData} />
+        <GridWrapper>
+          <GridFilters>
+            <GridFilterQuick quickFilterPlaceholder={"Search..."} />
+            <GridFilterButtons<ITestRow>
+                    options={[
+                      {
+                        label: "All",
+                      },
+                      {
+                        label: "Developers",
+                        filter: (row) => row.position === "Developer",
+                      },
+                      {
+                        label: "Testers",
+                        filter: (row) => row.position === "Tester",
+                      },
+                    ]}
+            />
+            <GridFilterColumnsToggle/>
+          </GridFilters>
+          <Grid selectable={true} columnDefs={columnDefs} rowData={rowData} />
+        </GridWrapper>
       </GridContextProvider>
     </GridUpdatingContextProvider>
   );
@@ -185,3 +212,13 @@ test("click Delete menu option removes row from the table", async () => {
   await waitFor(async () => expect((await queryRow(12345)).not.toBeDefined());
 });
 ```
+
+## Playwright support
+
+If your grid has a data-testid a global will be exposed in window with the helper scrollRowIntoViewById.
+This will throw an exception if the row id is not found.
+
+```tsx
+window.__stepAgGrid.grids[dataTestId].scrollRowIntoViewById("1000")
+```
+

package/dist/GridTheme.scss

@@ -13,8 +13,8 @@
   @include ag-theme-alpine(
     (
       alpine-active-color: lui.$sea,
-      foreground-color: lui.$grey-80,
-      data-color: lui.$grey-80,
+      foreground-color: lui.$charcoal,
+      data-color: lui.$charcoal,
       // ag-grid-community >=28
       selected-row-background-color: lui.$polar,
       header-foreground-color: lui.$surfie,

package/dist/index.css

@@ -342,17 +342,20 @@
   margin-bottom: 16px;
   flex: 0;
   display: flex;
+  align-items: center;
   flex-direction: row;
   grid-column-gap: 1em;
+  padding: 0.25rem 0;
 }
 
 .Grid-quickFilterBox {
   width: 100%;
-  height: 48px;
+  height: 40px;
   border: 0.06rem solid #beb9b4;
   border-radius: 3px;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
+  font-family: "Open Sans", system-ui, sans-serif;
 }
 
 .Grid-popoverContainer {
@@ -374,7 +377,7 @@
 }
 
 .GridCell-readonly {
-  color: #989189;
+  color: #6b6966;
 }
 
 .Grid-container.ag-theme-alpine .ag-cell {
@@ -393,6 +396,18 @@
   width: 100%;
 }
 
+.flex-col-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-row-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .GridPopoverEditDropDown-containerSmall .GridFormDropDown-options {
   max-height: 120px;
   overflow-y: auto;
@@ -492,3 +507,12 @@
 .GridPopoutMenu-burgerDisabled svg {
   fill: #989189;
 }
+
+.GridFilterColumnsToggle-container {
+  max-height: 280px;
+  overflow: auto;
+}
+
+.MenuItem-icon {
+  margin-right: 8px;
+}

package/dist/src/components/Grid.d.ts

@@ -14,6 +14,7 @@ export interface GridProps {
     defaultColDef?: GridOptions["defaultColDef"];
     columnDefs: ColDef[];
     rowData: GridOptions["rowData"];
+    noRowsOverlayText?: string;
     postSortRows?: GridOptions["postSortRows"];
     animateRows?: boolean;
     rowClassRules?: GridOptions["rowClassRules"];

package/dist/src/components/GridCell.d.ts

@@ -2,7 +2,7 @@
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridBaseRow } from "./Grid";
-import { GenericCellColDef, RowValueFormatterParams, RowValueGetterParams } from "./gridRender/GridRenderGenericCell";
+import { GenericCellColDef, RowValueFormatterParams, RowValueGetterParams } from "./gridRender";
 export interface GenericCellEditorProps<E> {
     multiEdit?: boolean;
     editor?: (editorProps: E) => JSX.Element;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface GridFilterColumnsToggleProps {
+    saveState?: boolean;
+}
+export declare const GridFilterColumnsToggle: ({ saveState }: GridFilterColumnsToggleProps) => JSX.Element;

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

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes, MouseEvent } from "react";
+import { IconName, IconSize } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+export interface GridFilterHeaderIconButtonProps {
+    icon: IconName;
+    onClick?: (e: MouseEvent) => void;
+    buttonProps?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>;
+    disabled?: boolean;
+    size?: IconSize;
+    title: string;
+}
+export declare const GridFilterHeaderIconButton: import("react").ForwardRefExoticComponent<GridFilterHeaderIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,3 +1,6 @@
+export * from "./GridFilterHeaderIconButton";
+export * from "./GridFilterColumnsToggle";
 export * from "./GridFilterButtons";
 export * from "./GridFilterQuick";
 export * from "./GridFilters";
+export * from "./useGridFilter";

package/dist/src/components/{GridFilter.d.ts → gridFilter/useGridFilter.d.ts}

@@ -1,3 +1,3 @@
-import { GridFilterExternal } from "../contexts/GridContext";
-import { GridBaseRow } from "./Grid";
+import { GridFilterExternal } from "../../contexts/GridContext";
+import { GridBaseRow } from "../Grid";
 export declare const useGridFilter: <RowType extends GridBaseRow>(filter: GridFilterExternal<RowType> | undefined) => void;

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

@@ -4,7 +4,6 @@ export * from "./GridCell";
 export * from "./GridCellMultiEditor";
 export * from "./GridCellMultiSelectClassRules";
 export * from "./gridFilter";
-export * from "./GridFilter";
 export * from "./gridForm";
 export * from "./gridHeader";
 export * from "./GridIcon";

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

@@ -1,15 +1,17 @@
 /// <reference types="react" />
-import { GridApi, RowNode } from "ag-grid-community";
-import { GridBaseRow } from "../components/Grid";
+import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { ColDefT, GridBaseRow } from "../components";
 export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
 export interface GridContextType<RowType extends GridBaseRow> {
     gridReady: boolean;
-    setGridApi: (gridApi: GridApi | undefined) => void;
+    setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
     prePopupOps: () => void;
     setQuickFilter: (quickFilter: string) => void;
     editingCells: () => boolean;
     getSelectedRows: <T extends GridBaseRow>() => T[];
+    getFilteredSelectedRows: <T extends GridBaseRow>() => T[];
     getSelectedRowIds: () => number[];
+    getFilteredSelectedRowIds: () => number[];
     selectRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
     selectRowsWithFlashDiff: (updateFn: () => Promise<any>) => Promise<void>;
     selectRowsById: (rowIds?: number[]) => void;
@@ -33,6 +35,9 @@ export interface GridContextType<RowType extends GridBaseRow> {
     removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
     isExternalFilterPresent: () => boolean;
     doesExternalFilterPass: (node: RowNode) => boolean;
+    getColumns: () => ColDefT<RowType>[];
+    invisibleColumnIds: string[];
+    setInvisibleColumnIds: (colIds: string[]) => 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,5 +1,5 @@
 import { ReactElement, ReactNode } from "react";
-import { GridBaseRow } from "../components/Grid";
+import { GridBaseRow } from "../components";
 interface GridContextProps {
     children: ReactNode;
 }