@linzjs/step-ag-grid 2.3.0 → 2.4.0

package/package.json

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

package/src/components/GridPopoverHook.tsx

@@ -47,7 +47,6 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
               saveButtonRef={saveButtonRef}
               menuClassName={"step-ag-grid-react-menu"}
               onClose={(event: MenuCloseEvent) => {
-                if (event.reason === "blur") return;
                 triggerSave(event.reason).then();
               }}
               viewScroll={"auto"}

package/src/components/GridSubComponentTextArea.tsx

@@ -1,24 +1,36 @@
-import { useCallback, useEffect } from "react";
-import { GridSubComponentProps } from "./gridForm/GridSubComponentProps";
+import { useCallback, useContext, useEffect } from "react";
 import { TextInputFormatted } from "../lui/TextInputFormatted";
+import { GridSubComponentContext } from "../contexts/GridSubComponentContext";
 
-export interface GridSubComponentTextAreaProps extends GridSubComponentProps {
+export interface GridSubComponentTextAreaProps {
   placeholder?: string;
   required?: boolean;
-  maxlength?: number;
+  maxLength?: number;
   width?: string | number;
-  validate: (value: string) => string | null;
+  validate?: (value: string) => string | null;
+  defaultValue: string;
 }
 
 export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps): JSX.Element => {
-  const { value, setValue, setValid, triggerSave } = props;
+  const { value, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+
+  // If is not initialised yet as it's just been created then set the default value
+  useEffect(() => {
+    if (value == null) setValue(props.defaultValue);
+  }, [props.defaultValue, setValue, value]);
+
   const validate = useCallback(
-    (value: string) => {
+    (value: string | null) => {
+      if (value == null) return null;
+      // This can happen because subcomponent is invoked without type safety
+      if (typeof value !== "string") {
+        console.error("Value is not a string", value);
+      }
       if (props.required && value.length === 0) {
         return `Some text is required`;
       }
-      if (props.maxlength && value.length > props.maxlength) {
-        return `Text must be no longer than ${props.maxlength} characters`;
+      if (props.maxLength && value.length > props.maxLength) {
+        return `Text must be no longer than ${props.maxLength} characters`;
       }
       if (props.validate) {
         return props.validate(value);
@@ -29,7 +41,7 @@ export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps):
   );
 
   useEffect(() => {
-    setValid(validate(value) == null);
+    setValid(value != null && validate(value) == null);
   }, [setValid, validate, value]);
 
   return (

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -10,7 +10,7 @@ import { useGridPopoverHook } from "../GridPopoverHook";
 import { MenuSeparatorString } from "./GridFormDropDown";
 import { CellEditorCommon, CellParams } from "../GridCell";
 import { ClickEvent } from "../../react-menu3/types";
-import { GridSubComponentProps } from "./GridSubComponentProps";
+import { GridSubComponentContext } from "contexts/GridSubComponentContext";
 
 interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
@@ -208,20 +208,24 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
 
                 {selectedValues.includes(item.value) && item.subComponent && (
                   <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
-                    {(ref: any) =>
-                      item.subComponent &&
-                      item.subComponent({
-                        ref,
-                        value: subSelectedValues[`${item.value}`],
-                        setValue: (value: any) => {
-                          subSelectedValues[`${item.value}`] = value;
-                          setSubSelectedValues({ ...subSelectedValues });
-                        },
-                        setValid: (valid: boolean) => {
-                          subComponentIsValid.current[`${item.value}`] = valid;
-                        },
-                        triggerSave,
-                      } as GridSubComponentProps)
+                    {(_: any) =>
+                      item.subComponent && (
+                        <GridSubComponentContext.Provider
+                          value={{
+                            value: subSelectedValues[`${item.value}`],
+                            setValue: (value: any) => {
+                              subSelectedValues[`${item.value}`] = value;
+                              setSubSelectedValues({ ...subSelectedValues });
+                            },
+                            setValid: (valid: boolean) => {
+                              subComponentIsValid.current[`${item.value}`] = valid;
+                            },
+                            triggerSave,
+                          }}
+                        >
+                          <item.subComponent />
+                        </GridSubComponentContext.Provider>
+                      )
                     }
                   </FocusableItem>
                 )}

package/src/components/gridForm/GridFormTextArea.tsx

@@ -7,7 +7,7 @@ import { CellEditorCommon, CellParams } from "../GridCell";
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
   required?: boolean;
-  maxlength?: number;
+  maxLength?: number;
   width?: string | number;
   validate?: (value: string) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
@@ -21,8 +21,8 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(_props: GridFormTe
     if (props.required && value.length == 0) {
       return `Some text is required`;
     }
-    if (props.maxlength && value.length > props.maxlength) {
-      return `Text must be no longer than ${props.maxlength} characters`;
+    if (props.maxLength && value.length > props.maxLength) {
+      return `Text must be no longer than ${props.maxLength} characters`;
     }
     if (props.validate) {
       return props.validate(value);

package/src/components/gridForm/GridFormTextInput.tsx

@@ -8,7 +8,7 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Cel
   placeholder?: string;
   units?: string;
   required?: boolean;
-  maxlength?: number;
+  maxLength?: number;
   width?: string | number;
   // Return null for ok, otherwise an error string
   validate?: (value: string, data: RowType) => string | null;
@@ -25,8 +25,8 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormT
     if (props.required && trimmedValue.length == 0) {
       return `Some text is required`;
     }
-    if (props.maxlength && trimmedValue.length > props.maxlength) {
-      return `Text must be no longer than ${props.maxlength} characters`;
+    if (props.maxLength && trimmedValue.length > props.maxLength) {
+      return `Text must be no longer than ${props.maxLength} characters`;
     }
     if (props.validate) {
       return props.validate(trimmedValue, props.data);

package/src/contexts/GridSubComponentContext.ts

@@ -0,0 +1,21 @@
+import { createContext } from "react";
+
+export interface GridSubComponentContextType {
+  value: any;
+  setValue: (value: string) => void;
+  setValid: (valid: boolean) => void;
+  triggerSave: () => Promise<void>;
+}
+
+export const GridSubComponentContext = createContext<GridSubComponentContextType>({
+  value: "GridSubComponentContext value no context",
+  setValue: () => {
+    console.error("GridSubComponentContext setValue no context");
+  },
+  setValid: () => {
+    console.error("GridSubComponentContext setValid no context");
+  },
+  triggerSave: async () => {
+    console.error("GridSubComponentContext triggerSave no context");
+  },
+});

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

@@ -76,16 +76,16 @@ export const ControlledMenuFr = (
     ],
   );
 
-  const clickIsWithinMenu = useCallback(
-    (ev: MouseEvent) =>
-      hasParentClass("szh-menu--state-open", ev.target as Node) ||
-      (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, ev.target as Node)),
+  const isWithinMenu = useCallback(
+    (target: EventTarget | null) =>
+      hasParentClass("szh-menu--state-open", target as Node) ||
+      (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, target as Node)),
     [closeMenuExclusionClassName],
   );
 
   const handleScreenEventForSave = useCallback(
     (ev: MouseEvent) => {
-      if (!clickIsWithinMenu(ev)) {
+      if (!isWithinMenu(ev.target)) {
         ev.preventDefault();
         ev.stopPropagation();
         // FIXME There's an issue in React17
@@ -107,17 +107,17 @@ export const ControlledMenuFr = (
         }
       }
     },
-    [clickIsWithinMenu, onClose, saveButtonRef, skipOpen],
+    [isWithinMenu, onClose, saveButtonRef, skipOpen],
   );
 
   const handleScreenEventForCancel = useCallback(
     (ev: MouseEvent) => {
-      if (!clickIsWithinMenu(ev)) {
+      if (!isWithinMenu(ev.target)) {
         ev.preventDefault();
         ev.stopPropagation();
       }
     },
-    [clickIsWithinMenu],
+    [isWithinMenu],
   );
 
   useEffect(() => {
@@ -183,7 +183,11 @@ export const ControlledMenuFr = (
   };
 
   const onBlur = (e: FocusEvent) => {
-    if (isMenuOpen(state) && !e.currentTarget.contains(e.relatedTarget || document.activeElement)) {
+    if (
+      isMenuOpen(state) &&
+      !e.currentTarget.contains(e.relatedTarget || document.activeElement) &&
+      !isWithinMenu(e.relatedTarget)
+    ) {
       safeCall(onClose, { reason: CloseReason.BLUR });
 
       // If a user clicks on the menu button when a menu is open, we need to close the menu.

package/src/stories/components/ActionButton.stories.tsx

@@ -7,7 +7,7 @@ import { useCallback, useState } from "react";
 import { wait } from "../../utils/util";
 
 export default {
-  title: "Components / ButtonTextWithIcon",
+  title: "Components / ActionButton",
   component: ActionButton,
   args: {},
 } as ComponentMeta<typeof ActionButton>;

package/src/stories/grid/FormTest.tsx

@@ -18,23 +18,22 @@ export interface IFormTestRow {
 
 export const FormTest = <RowType extends GridBaseRow>(_props: CellEditorCommon): JSX.Element => {
   const props = _props as CellParams<RowType>;
-  const [v1, v2, ...v3] = props.value.split(" ");
+  const [v1, ...v2] = props.value.split(" ");
 
   const [nameType, setNameType] = useState(v1);
-  const [numba, setNumba] = useState(v2);
-  const [plan, setPlan] = useState(v3.join(" "));
+  const [numba, setNumba] = useState(v2.join(" "));
 
   const save = useCallback(async (): Promise<boolean> => {
     // eslint-disable-next-line no-console
-    console.log("onSave", props.selectedRows, nameType, numba, plan);
+    console.log("onSave", props.selectedRows, nameType, numba);
 
     // @ts-ignore
-    props.selectedRows.forEach((row) => (row["name"] = [nameType, numba, plan].join(" ")));
+    props.selectedRows.forEach((row) => (row["name"] = [nameType, numba].join(" ")));
     await wait(1000);
 
     // Close form
     return true;
-  }, [nameType, numba, plan, props.selectedRows]);
+  }, [nameType, numba, props.selectedRows]);
 
   const [showModal, setShowModal] = useState<boolean>(false);
 

package/src/stories/grid/GridPopoutBearing.stories.tsx

@@ -83,7 +83,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
     { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
     { id: 1002, bearing1: null, bearingCorrection: 355.1 },

package/src/stories/grid/GridPopoutEditDropDown.stories.tsx

@@ -245,7 +245,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
     [optionsFn, optionsObjects],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     {
       id: 1000,
       position: "Tester",

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -57,7 +57,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
     [],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
     { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
   ] as IFormTestRow[]);

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

@@ -61,7 +61,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           multiEdit: true,
           editorParams: {
             required: true,
-            maxlength: 12,
+            maxLength: 12,
             placeholder: "Enter some text...",
             validate: (value: string) => {
               if (value === "never") return "The value 'never' is not allowed";
@@ -88,7 +88,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         {
           multiEdit: true,
           editorParams: {
-            maxlength: 12,
+            maxLength: 12,
             placeholder: "Enter distance...",
             units: "m",
             validate: (value: string) => {
@@ -115,7 +115,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           multiEdit: true,
           editorParams: {
             required: true,
-            maxlength: 32,
+            maxLength: 32,
             placeholder: "Enter some text...",
 
             validate: (value: string) => {

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

@@ -80,7 +80,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               {
                 value: "other",
                 label: "Other",
-                subComponent: (props) => <GridSubComponentTextArea {...props} maxlength={2} />,
+                subComponent: () => <GridSubComponentTextArea maxLength={2} defaultValue={""} />,
               },
             ],
             initialSelectedValues: () => ({
@@ -128,7 +128,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
     ];
   }, []);
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
     { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
   ] as ITestRow[]);

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

@@ -151,7 +151,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
     { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
   ]);

package/dist/src/components/gridForm/GridSubComponentProps.d.ts

@@ -1,6 +0,0 @@
-export interface GridSubComponentProps {
-    value: string;
-    setValue: (value: string) => void;
-    setValid: (valid: boolean) => void;
-    triggerSave: () => Promise<void>;
-}

package/src/components/gridForm/GridSubComponentProps.ts

@@ -1,6 +0,0 @@
-export interface GridSubComponentProps {
-  value: string;
-  setValue: (value: string) => void;
-  setValid: (valid: boolean) => void;
-  triggerSave: () => Promise<void>;
-}