@linzjs/step-ag-grid 7.13.0 → 7.13.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "7.13.0",
+  "version": "7.13.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -12,7 +12,8 @@
     "react",
     "react-component"
   ],
-  "main": "dist/index.js",
+  "main": "dist/step-ag-grid.esm.js",
+  "type": "module",
   "typings": "dist/src/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
   "files": [

package/src/components/GridCellMultiEditor.tsx

@@ -15,12 +15,16 @@ export const Editor = <FN extends (param: any) => JSX.Element>(props: {
   params: { ...props.editorParams, multiEdit: props.multiEdit },
 });
 
+export interface RowCellEditorParams<RowType extends GridBaseRow> extends ICellEditorParams {
+  data: RowType;
+}
+
 /*
  * All cells should use this
  */
 export const GridCellMultiEditor = <RowType extends GridBaseRow>(
   props: GenericCellColDef<RowType>,
-  cellEditorSelector: (params: ICellEditorParams) => CellEditorSelectorResult,
+  cellEditorSelector: (params: RowCellEditorParams<RowType>) => CellEditorSelectorResult,
 ): ColDefT<RowType> => {
   return {
     colId: props.colId ?? props.field,

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,8 +1,8 @@
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { delay, isEmpty } from "lodash-es";
+import { isEmpty } from "lodash-es";
 import debounce from "debounce-promise";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
@@ -49,10 +49,13 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extend
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
   filterHelpText?: string;
+  noOptionsMessage?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
   onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
-  options: SelectOption[] | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[]> | SelectOption[]);
-  optionsRequestCancel?: () => void;
+  options:
+    | SelectOption[]
+    | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
+    | undefined;
 }
 
 const fieldToString = (field: any) => {
@@ -65,7 +68,6 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>();
-  const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
   const subComponentIsValid = useRef(false);
   const subComponentInitialValue = useRef<string | null>(null);
@@ -92,33 +94,33 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
 
   // Load up options list if it's async function
   useEffect(() => {
-    if (options || optionsInitialising.current) return;
-    optionsInitialising.current = true;
-    let optionsConf = props.options ?? [];
+    if (options) return;
+    let optionsConf = props.options;
 
     (async () => {
       if (typeof optionsConf == "function") {
         optionsConf = await optionsConf(selectedRows, filter);
       }
+      if (optionsConf !== undefined) {
+        const optionsList = optionsConf?.map((item) =>
+          item == null || typeof item == "string"
+            ? ({
+                value: item,
+                label: item,
+                disabled: false,
+              } as FinalSelectOption)
+            : item,
+        );
 
-      const optionsList = optionsConf?.map((item) =>
-        item == null || typeof item == "string"
-          ? ({
-              value: item,
-              label: item,
-              disabled: false,
-            } as FinalSelectOption)
-          : item,
-      );
-
-      if (props.filtered) {
-        // This is needed otherwise when filter input is rendered and sets autofocus
-        // the mouse up of the double click edit triggers the cell to cancel editing
-        delay(() => setOptions(optionsList), 100);
-      } else {
-        setOptions(optionsList);
+        if (props.filtered) {
+          // This is needed otherwise when filter input is rendered and sets autofocus
+          // the mouse up of the double click edit triggers the cell to cancel editing
+          setOptions(optionsList);
+          //delay(() => setOptions(optionsList), 100);
+        } else {
+          setOptions(optionsList);
+        }
       }
-      optionsInitialising.current = false;
     })();
   }, [filter, options, props, selectedRows]);
 
@@ -141,11 +143,12 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
     }
   }, [props.filtered, filter, options]);
 
-  const researchOnFilterChange = debounce(
-    useCallback(() => {
-      setOptions(null);
-    }, []),
-    500,
+  const researchOnFilterChange = useMemo(
+    () =>
+      debounce(() => {
+        setOptions(null);
+      }, 500),
+    [],
   );
 
   const previousFilter = useRef<string>(filter);
@@ -154,7 +157,6 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   useEffect(() => {
     if (previousFilter.current != filter && props.filtered == "reload") {
       previousFilter.current = filter;
-      props.optionsRequestCancel && props.optionsRequestCancel();
       researchOnFilterChange().then();
     }
   }, [filter, props, researchOnFilterChange]);
@@ -232,7 +234,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
         <>
           {options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (
             <MenuItem key={`${fieldToString(field)}-empty`} className={"GridPopoverEditDropDown-noOptions"}>
-              No Options
+              {props.noOptionsMessage ?? "No Options"}
             </MenuItem>
           )}
           {options?.map((item: FinalSelectOption, index) =>

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,14 +1,19 @@
 import { ICellRendererParams } from "ag-grid-community";
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
-import { SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { EditableCallbackParams, SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
 
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
   data: RowType;
 }
 
+export interface RowEditableCallbackParams<RowType extends GridBaseRow> extends EditableCallbackParams {
+  data: RowType;
+}
+
 export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<RowType> {
   cellRendererParams?: GenericCellRendererParams<RowType>;
+  editable?: boolean | ((params: RowEditableCallbackParams<RowType>) => boolean);
 }
 
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {

package/src/index.ts

@@ -12,6 +12,8 @@ export * from "./contexts/GridSubComponentContext";
 export type { GridBaseRow } from "./components/Grid";
 export { Grid } from "./components/Grid";
 export * from "./components/GridCell";
+export * from "./components/GridCellMultiEditor";
+
 export { GridIcon } from "./components/GridIcon";
 export { ComponentLoadingWrapper } from "./components/ComponentLoadingWrapper";
 export { GridCellMultiSelectClassRules } from "./components/GridCellMultiSelectClassRules";
@@ -34,6 +36,10 @@ export { GridFormSubComponentTextInput } from "./components/gridForm/GridFormSub
 export * from "./components/gridForm/GridFormDropDown";
 export * from "./components/gridForm/GridFormMultiSelect";
 export * from "./components/gridForm/GridFormPopoverMenu";
+export * from "./components/gridForm/GridFormTextInput";
+export * from "./components/gridForm/GridFormTextArea";
+export * from "./components/gridForm/GridFormMessage";
+export * from "./components/gridForm/GridFormEditBearing";
 
 export { GridHeaderSelect } from "./components/gridHeader/GridHeaderSelect";
 

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -18,7 +18,6 @@ import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMen
 import { GridContext } from "../../contexts/GridContext";
 import { Editor, GridCellMultiEditor } from "../../components/GridCellMultiEditor";
 import { GridFormTextArea } from "../../components/gridForm/GridFormTextArea";
-import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
 import { GridFormDropDown } from "../../components/gridForm/GridFormDropDown";
 
 export default {
@@ -142,7 +141,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           headerName: "Multi-editor",
           maxWidth: 140,
         },
-        (_params: ICellEditorParams) =>
+        (_params) =>
           _params.rowIndex == 0
             ? Editor({
                 multiEdit: true,