@linzjs/step-ag-grid 8.3.1 → 8.4.0

package/package.json

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

package/src/components/GridCell.tsx

@@ -3,7 +3,7 @@ import { GridBaseRow } from "./Grid";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
 import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
 import { GenericCellColDef, GenericCellRendererParams } from "./gridRender/GridRenderGenericCell";
-import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
+import { ColDef, ICellEditorParams, ICellRendererParams, ValueGetterFunc } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
 import { GridIcon } from "./GridIcon";
 import { SuppressKeyboardEventParams, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
@@ -22,15 +22,19 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
 
   const rendererParams = colDef.cellRendererParams as GenericCellRendererParams<any> | undefined;
   const warningFn = rendererParams?.warning;
-  const warningText = warningFn ? warningFn(props) : undefined;
+  let warningText = warningFn ? warningFn(props) : undefined;
   const infoFn = rendererParams?.info;
-  const infoText = infoFn ? infoFn(props) : undefined;
+  let infoText = infoFn ? infoFn(props) : undefined;
+  if (Array.isArray(warningText)) warningText = warningText.join("\n");
+  if (Array.isArray(infoText)) infoText = infoText.join("\n");
 
   return (
     <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
       <>
-        {typeof warningText === "string" && <GridIcon icon={"ic_warning_outline"} title={warningText} />}
-        {typeof infoText === "string" && <GridIcon icon={"ic_info_outline"} title={infoText} />}
+        {!!warningText && (
+          <GridIcon icon={"ic_warning_outline"} title={typeof warningText === "string" ? warningText : "Warning"} />
+        )}
+        {!!infoText && <GridIcon icon={"ic_info_outline"} title={typeof infoText === "string" ? infoText : "Info"} />}
         <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
           {colDef?.cellRendererParams?.originalCellRenderer ? (
             <colDef.cellRendererParams.originalCellRenderer {...props} />
@@ -91,6 +95,11 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     ...(custom?.editorParams && {
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },
     }),
+    // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
+    ...(props.valueFormatter &&
+      !props.filterValueGetter && {
+        filterValueGetter: props.valueFormatter as string | ValueGetterFunc,
+      }),
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
       if (params.value == null) return "–";

package/src/components/GridPopoverHook.tsx

@@ -16,6 +16,7 @@ export interface GridPopoverHookProps<RowType> {
     | null
     | undefined;
   save?: (selectedRows: RowType[]) => Promise<boolean>;
+  dontSaveOnExternalClick?: boolean;
 }
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
@@ -96,7 +97,11 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
                 ref={saveButtonRef}
                 data-reason={""}
                 onClick={(e) => {
-                  triggerSave(e.currentTarget.getAttribute("data-reason") ?? undefined).then();
+                  let reason = e.currentTarget.getAttribute("data-reason") ?? undefined;
+                  if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
+                    reason = CloseReason.CANCEL;
+                  }
+                  triggerSave(reason).then();
                 }}
                 style={{ display: "none" }}
               />
@@ -105,7 +110,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
         </>
       );
     },
-    [anchorRef, isOpen, props.className, saving, triggerSave],
+    [anchorRef, isOpen, props.className, props.dontSaveOnExternalClick, saving, triggerSave],
   );
 
   return {

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,5 +1,5 @@
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { isEmpty } from "lodash-es";
@@ -188,27 +188,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
     return true;
   }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
 
-  const onMouseEnterFocus = useCallback((item: FinalSelectOption) => {
-    setSelectedItem(item);
-    if (item.subComponent) {
-      subComponentIsValid.current = true;
-      subComponentInitialValue.current = null;
-    } else {
-      setSubSelectedValue(null);
-      subComponentIsValid.current = true;
-    }
-  }, []);
-
-  const onMouseLeaveFocus = useCallback(() => {
-    setSelectedItem(null);
-    setSubSelectedValue(null);
-    subComponentIsValid.current = true;
-  }, []);
-
   const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
     invalid: () => !!(selectedItem && !subComponentIsValid.current),
     save,
+    dontSaveOnExternalClick: true,
   });
 
   let lastHeader: JSX.Element | null = null;
@@ -277,7 +261,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
             }
             return (
               (!filteredValues || filteredValues.includes(item)) && (
-                <>
+                <Fragment key={`${index}`}>
                   {showHeader}
                   <div key={`menu-wrapper-${index}`}>
                     <MenuItem
@@ -285,9 +269,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                       disabled={!!item.disabled}
                       title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                       value={item.value}
-                      onFocus={() => onMouseEnterFocus(item)}
-                      onMouseEnter={() => onMouseEnterFocus(item)}
-                      onMouseLeave={onMouseLeaveFocus}
+                      onFocus={() => {
+                        setSelectedItem(item);
+                        if (item.subComponent) {
+                          subComponentIsValid.current = true;
+                          subComponentInitialValue.current = null;
+                        } else {
+                          setSubSelectedValue(null);
+                          subComponentIsValid.current = true;
+                        }
+                      }}
                       onClick={(e: ClickEvent) => {
                         if (item.subComponent) {
                           e.keepOpen = true;
@@ -309,7 +300,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                               setValue: (value: any) => {
                                 setSubSelectedValue(value);
                                 if (subComponentInitialValue.current === null) {
-                                  // copy the default value of the subcomponent so we can change detect on save
+                                  // copy the default value of the subcomponent, so we can change detect on save
                                   subComponentInitialValue.current = JSON.stringify(value);
                                 }
                               },
@@ -331,7 +322,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                       </FocusableItem>
                     )}
                   </div>
-                </>
+                </Fragment>
               )
             );
           })}

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -37,6 +37,6 @@ export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   rightHoverElement?: JSX.Element | undefined;
   editAction?: (selectedRows: RowType[]) => void;
   shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
-  warning?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
-  info?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
+  warning?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;
+  info?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;
 }

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

@@ -100,7 +100,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         headerName: "Custom edit",
         maxWidth: 100,
         editable: true,
-        valueFormatter: () => "Double click me!",
+        valueFormatter: () => "Press E",
         cellRendererParams: {
           rightHoverElement: (
             <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />