@linzjs/step-ag-grid 7.1.0 → 7.2.0

package/package.json

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

package/src/components/Grid.tsx

@@ -29,6 +29,8 @@ export interface GridProps {
   rowData: GridOptions["rowData"];
   noRowsOverlayText?: string;
   postSortRows?: GridOptions["postSortRows"];
+  animateRows?: boolean;
+  rowClassRules?: GridOptions["rowClassRules"];
 }
 
 /**
@@ -246,6 +248,9 @@ export const Grid = (params: GridProps): JSX.Element => {
         </div>
       )}
       <AgGridReact
+        animateRows={params.animateRows}
+        rowClassRules={params.rowClassRules}
+        defaultColDef={params.defaultColDef}
         getRowId={(params) => `${params.data.id}`}
         suppressRowClickSelection={true}
         rowSelection={"multiple"}

package/src/components/GridCell.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext } from "react";
 import { GridBaseRow } from "./Grid";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
-import { GenericMultiEditCellClass } from "./GenericCellClass";
+import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
 import {
   GenericCellColDef,
   GenericCellRendererParams,
@@ -64,7 +64,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(custom?.editor && {
-      cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
+      cellClassRules: GridCellMultiSelectClassRules,
       editable: props.editable ?? true,
       cellEditor: GenericCellEditorComponentWrapper(custom),
     }),

package/src/components/GridCellMultiSelectClassRules.tsx

@@ -0,0 +1,9 @@
+import { CellClassParams, CellClassRules } from "ag-grid-community/dist/lib/entities/colDef";
+
+export const GridCellMultiSelectClassRules: CellClassRules = {
+  "ag-selected-for-edit": ({ api, node, colDef }: CellClassParams) =>
+    api
+      .getSelectedNodes()
+      .map((row) => row.id)
+      .includes(node.id) && api.getEditingCells().some((cell) => cell.column.getColDef() === colDef),
+};

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -14,7 +14,7 @@ import {
 } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { groupBy, isEmpty, pick, toPairs } from "lodash-es";
+import { fromPairs, groupBy, isEmpty, pick, toPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { MenuSeparatorString } from "./GridFormDropDown";
@@ -24,6 +24,9 @@ import { GridSubComponentContext } from "contexts/GridSubComponentContext";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { FormError } from "../../lui/FormError";
 import { textMatch } from "../../utils/textMatcher";
+import { GridIcon } from "../GridIcon";
+
+type HeaderGroupType = Record<string, MultiSelectOption[]> | undefined;
 
 export interface MultiSelectOption {
   value: any;
@@ -32,6 +35,7 @@ export interface MultiSelectOption {
   subValue?: any;
   filter?: string;
   checked?: boolean;
+  warning?: string | undefined;
 }
 
 export interface GridFormMultiSelectGroup {
@@ -112,15 +116,34 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
   /**
    * Groups options into their header groups
    */
-  const headerGroups = useMemo(
-    () =>
-      options &&
-      groupBy(
-        options.filter((o) => textMatch(o.label, filter) && o.value),
-        "filter",
-      ),
-    [filter, options],
-  );
+  const headerGroups = useMemo(() => {
+    if (!options) return undefined;
+    const result = groupBy(
+      options.filter((o) => textMatch(o.label, filter) && o.value),
+      "filter",
+    );
+    // remove leading/trailing/duplicate dividers
+    return fromPairs(
+      toPairs(result).map(([key, arr]) => {
+        let lastWasDivider = true;
+        return [
+          key,
+          arr
+            .map((row, index) => {
+              if (row.value === MenuSeparatorString) {
+                if (lastWasDivider) return null;
+                if (index === arr.length - 1) return null;
+                lastWasDivider = true;
+              } else {
+                lastWasDivider = false;
+              }
+              return row;
+            })
+            .filter((r) => r),
+        ];
+      }),
+    ) as HeaderGroupType;
+  }, [filter, options]);
 
   const headers: GridFormMultiSelectGroup[] = useMemo(() => props.headers ?? [{ header: "" }], [props.headers]);
 
@@ -136,7 +159,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
         <>
           {props.filtered && (
             <FilterInput
-              {...{ headerGroups, options, setOptions, filter, setFilter }}
+              {...{ headerGroups, options, setOptions, filter, setFilter, triggerSave }}
               filterHelpText={props.filterHelpText}
               onSelectFilter={props.onSelectFilter}
               filterPlaceholder={props.filterPlaceholder}
@@ -185,12 +208,25 @@ const FilterInput = (props: {
   onSelectFilter?: (filter: string, options: MultiSelectOption[]) => void;
   filter: string;
   setFilter: Dispatch<SetStateAction<string>>;
-  headerGroups: Record<string, MultiSelectOption[]> | undefined;
+  headerGroups: HeaderGroupType;
   filterPlaceholder?: string;
   filterHelpText?: string | ((filter: string, options: MultiSelectOption[]) => string | undefined);
+  triggerSave: () => Promise<void>;
 }) => {
-  const { options, setOptions, onSelectFilter, filter, setFilter, headerGroups, filterPlaceholder, filterHelpText } =
-    props;
+  const {
+    options,
+    setOptions,
+    onSelectFilter,
+    filter,
+    setFilter,
+    headerGroups,
+    filterPlaceholder,
+    filterHelpText,
+    triggerSave,
+  } = props;
+
+  const enterHasBeenPressed = useRef(false);
+  const lastKeyWasEnter = useRef(false);
 
   const toggleSelectAllVisible = useCallback(() => {
     if (!options || !headerGroups) return;
@@ -198,7 +234,9 @@ const FilterInput = (props: {
     if (isEmpty(filter.trim())) {
       // Toggle off if any items are checked otherwise on
       const anyChecked = options.some((o) => o.checked);
-      options.forEach((o) => (o.checked = !anyChecked));
+      options.forEach((o) => {
+        if (o.label !== undefined) o.checked = !anyChecked;
+      });
     } else {
       // Toggle on if any filtered items are checked otherwise off
       const anyChecked = Object.values(headerGroups).some((headerOptions) =>
@@ -206,7 +244,7 @@ const FilterInput = (props: {
       );
       Object.values(headerGroups).forEach((headerOptions) => {
         headerOptions.forEach((o) => {
-          if (o.checked !== undefined) o.checked = anyChecked;
+          if (o.label !== undefined) o.checked = anyChecked;
         });
       });
     }
@@ -216,14 +254,26 @@ const FilterInput = (props: {
   const addCustomFilterValue = useCallback(() => {
     if (!options || !onSelectFilter) return;
 
+    const filterTrimmed = filter.trim();
+    if (isEmpty(filterTrimmed)) {
+      triggerSave().then();
+      return;
+    }
+
     const preFilterOptions = JSON.stringify(options);
-    onSelectFilter(filter.trim(), options);
+    onSelectFilter(filterTrimmed, options);
     // Detect if options list changed and update
     if (preFilterOptions === JSON.stringify(options)) return;
 
     setOptions([...options]);
     setFilter("");
-  }, [filter, onSelectFilter, options, setFilter, setOptions]);
+  }, [filter, onSelectFilter, options, setFilter, setOptions, triggerSave]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      enterHasBeenPressed.current = true;
+    }
+  }, []);
 
   const handleKeyUp = useCallback(
     (e: KeyboardEvent) => {
@@ -232,10 +282,23 @@ const FilterInput = (props: {
         e.preventDefault();
 
         if (e.ctrlKey) toggleSelectAllVisible();
-        else if (onSelectFilter) addCustomFilterValue();
+        else if (enterHasBeenPressed.current) {
+          const filterTrimmed = filter.trim();
+          if (isEmpty(filterTrimmed)) {
+            triggerSave().then();
+            return;
+          }
+          onSelectFilter && addCustomFilterValue();
+        }
+        lastKeyWasEnter.current = true;
+      } else if (e.key === "Control") {
+        lastKeyWasEnter.current && setFilter("");
+        lastKeyWasEnter.current = false;
+      } else {
+        lastKeyWasEnter.current = false;
       }
     },
-    [addCustomFilterValue, onSelectFilter, toggleSelectAllVisible],
+    [addCustomFilterValue, filter, onSelectFilter, setFilter, toggleSelectAllVisible, triggerSave],
   );
 
   return (
@@ -252,6 +315,7 @@ const FilterInput = (props: {
               data-disableenterautosave={true}
               data-allowtabtosave={true}
               onChange={(e) => setFilter(e.target.value)}
+              onKeyDown={handleKeyDown}
               onKeyUp={handleKeyUp}
             />
             {filterHelpText && (
@@ -267,7 +331,7 @@ const FilterInput = (props: {
       </FocusableItem>
       <MenuDivider key={`$$divider_filter`} />
       {headerGroups && !toPairs(headerGroups).some(([_, options]) => !isEmpty(options)) && (
-        <div className={"szh-menu__item"}>[No items match the filter]</div>
+        <div className={"szh-menu__item GridPopoverEditDropDown-noOptions"}>No Options</div>
       )}
     </>
   );
@@ -301,7 +365,12 @@ const MenuRadioItem = (props: {
       <LuiCheckboxInput
         isChecked={item.checked ?? false}
         value={`${item.value}`}
-        label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+        label={
+          <>
+            {item.warning && <GridIcon icon={"ic_warning"} title={item.warning} />}
+            {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+          </>
+        }
         inputProps={{
           onClick: (e) => {
             // Click is handled by MenuItem onClick

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -11,8 +11,8 @@ export const GridPopoverEditDropDown = <RowType extends GridBaseRow>(
     editor: GridFormDropDown,
     ...props,
     editorParams: {
-      // Defaults to medium size container
-      className: "GridPopoverEditDropDown-containerMedium",
+      // Defaults to large size container
+      className: "GridPopoverEditDropDown-containerLarge",
       ...(props.editorParams as GridFormPopoutDropDownProps<RowType>),
     },
   });

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -1,6 +1,5 @@
 import "./GridPopoverMenu.scss";
 
-import { GenericMultiEditCellClass } from "../GenericCellClass";
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormPopoverMenu, GridFormPopoutMenuProps } from "../gridForm/GridFormPopoverMenu";
@@ -18,9 +17,8 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
     {
       maxWidth: 40,
       editable: colDef.editable != null ? colDef.editable : true,
-      cellStyle: { justifyContent: "flex-end" },
+      cellStyle: { justifyContent: "center" },
       cellRenderer: GridRenderPopoutMenuCell,
-      cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
       ...colDef,
       cellRendererParams: {
         // Menus open on single click, this parameter is picked up in Grid.tsx

package/src/index.ts

@@ -14,7 +14,7 @@ export { Grid } from "./components/Grid";
 export * from "./components/GridCell";
 export { GridIcon } from "./components/GridIcon";
 export { ComponentLoadingWrapper } from "./components/ComponentLoadingWrapper";
-export { GenericMultiEditCellClass } from "./components/GenericCellClass";
+export { GridCellMultiSelectClassRules } from "./components/GridCellMultiSelectClassRules";
 export { GridLoadableCell } from "./components/GridLoadableCell";
 export { useGridPopoverHook } from "./components/GridPopoverHook";
 export { usePostSortRowsHook } from "./components/PostSortRowsHook";

package/src/stories/grid/GridPopoutEditMultiSelect.stories.tsx

@@ -8,7 +8,7 @@ import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextP
 import { GridContextProvider } from "../../contexts/GridContextProvider";
 import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
-import { MenuHeaderItem, MenuSeparator } from "../../components/gridForm/GridFormDropDown";
+import { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
 import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
@@ -85,8 +85,8 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
             filtered: true,
             filterPlaceholder: "Filter position",
             className: "GridMultiSelect-containerUnlimited",
+            headers: [{ header: "Header item" }],
             options: [
-              MenuHeaderItem("Header item"),
               { value: "lot1", label: "Lot 1" },
               { value: "lot2", label: "Lot 2" },
               { value: "lot3", label: "Lot 3" },
@@ -145,7 +145,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               const firstRow = selectedRows[0];
               const r: MultiSelectOption[] = [
                 { value: "lot1", label: "Lot 1" },
-                { value: "lot2", label: "Lot 2" },
+                { value: "lot2", label: "Lot 2", warning: "Don't select me" },
                 { value: "lot3", label: "Lot 3" },
                 { value: "lot11", label: "Lot 11" },
                 { value: "lot4", label: "Lot A 482392" },

package/src/utils/textMatcher.ts

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash-es";
+import { isEmpty, partition } from "lodash-es";
 import { isMatch } from "matcher";
 
 /**
@@ -10,8 +10,8 @@ import { isMatch } from "matcher";
  * "*L" => *L
  * "A B" => A* and B*
  * "A B, C" => (A* and B*) or C*
- *
- * Returns ture if there's a text match.
+ * "!A" => all values must not match A
+ * Returns true if there's a text match.
  */
 export const textMatch = (text: string | undefined | null, filter: string): boolean => {
   if (text == null) return true;
@@ -20,12 +20,15 @@ export const textMatch = (text: string | undefined | null, filter: string): bool
     .split(",")
     .map((sf) => sf.trim())
     .filter((sf) => sf);
+  const [negativeFilters, positiveFilters] = partition(superFilters, (superFilters) => superFilters.startsWith("!"));
   const values = text.replaceAll(",", " ").trim().split(/\s+/);
   return (
-    isEmpty(superFilters) || // Not filtered
-    superFilters.some((superFilter) => {
-      const subFilters = superFilter.split(/\s+/).map((s) => s.replaceAll(/([!?])/g, "\\$1"));
-      return subFilters.every((subFilter) => values.some((value) => isMatch(value, subFilter)));
-    })
+    (isEmpty(positiveFilters) || // Not filtered
+      positiveFilters.some((superFilter) => {
+        const subFilters = superFilter.split(/\s+/).map((s) => s.replaceAll(/([!?])/g, "\\$1"));
+        return subFilters.every((subFilter) => values.some((value) => isMatch(value, subFilter)));
+      })) &&
+    (isEmpty(negativeFilters) ||
+      negativeFilters.every((superFilter) => values.every((value) => isMatch(value, superFilter))))
   );
 };

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

@@ -1,2 +0,0 @@
-import { CellClassFunc } from "ag-grid-community";
-export declare const GenericMultiEditCellClass: CellClassFunc;

package/src/components/GenericCellClass.tsx

@@ -1,15 +0,0 @@
-import { CellClassFunc } from "ag-grid-community";
-
-export const GenericMultiEditCellClass: CellClassFunc = (props): string => {
-  const api = props.api;
-  if (api == null) return "";
-
-  const rowSelected = api
-    .getSelectedNodes()
-    .map((row) => row.id)
-    .includes(props.node.id);
-
-  return rowSelected && api.getEditingCells().some((cell) => cell.column.getColDef() === props.colDef)
-    ? "ag-selected-for-edit"
-    : "";
-};