@linzjs/step-ag-grid 2.2.1 → 2.3.0

package/package.json

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

package/src/components/GridPopoverHook.tsx

@@ -3,6 +3,7 @@ import { GridContext } from "../contexts/GridContext";
 import { GridBaseRow } from "./Grid";
 import { ControlledMenu } from "../react-menu3";
 import { GridPopoverContext } from "../contexts/GridPopoverContext";
+import { MenuCloseEvent } from "../react-menu3/types";
 
 export interface GridPopoverHookProps<RowType> {
   className: string | undefined;
@@ -45,7 +46,10 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
               anchorRef={anchorRef}
               saveButtonRef={saveButtonRef}
               menuClassName={"step-ag-grid-react-menu"}
-              onClose={(event: { reason: string }) => triggerSave(event.reason).then()}
+              onClose={(event: MenuCloseEvent) => {
+                if (event.reason === "blur") return;
+                triggerSave(event.reason).then();
+              }}
               viewScroll={"auto"}
               dontShrinkIfDirectionIsTop={true}
               className={props.className}

package/src/components/GridSubComponentTextArea.tsx

@@ -1,25 +1,55 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
+import { GridSubComponentProps } from "./gridForm/GridSubComponentProps";
+import { TextInputFormatted } from "../lui/TextInputFormatted";
 
-export interface GridSubComponentTextAreaProps {
-  setValue: (value: string) => void;
+export interface GridSubComponentTextAreaProps extends GridSubComponentProps {
+  placeholder?: string;
+  required?: boolean;
+  maxlength?: number;
+  width?: string | number;
+  validate: (value: string) => string | null;
 }
 
-export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps) => {
-  const [value, setValue] = useState("");
+export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps): JSX.Element => {
+  const { value, setValue, setValid, triggerSave } = props;
+  const validate = useCallback(
+    (value: string) => {
+      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.validate) {
+        return props.validate(value);
+      }
+      return null;
+    },
+    [props],
+  );
 
   useEffect(() => {
-    props.setValue(value);
-  }, [props, value]);
+    setValid(validate(value) == null);
+  }, [setValid, validate, value]);
 
   return (
     <div className={"FreeTextInput LuiDeprecatedForms"}>
-      <textarea
-        autoFocus
-        maxLength={10000}
-        spellCheck={true}
+      <TextInputFormatted
         className={"free-text-input"}
+        value={value}
+        onMouseEnter={(e) => {
+          if (document.activeElement != e.currentTarget) {
+            e.currentTarget.focus();
+            e.currentTarget.selectionStart = e.currentTarget.value.length;
+          }
+        }}
         onChange={(e) => setValue(e.target.value)}
-        defaultValue={value}
+        error={validate(value)}
+        inputProps={{
+          autoFocus: true,
+          placeholder: props.placeholder,
+          onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
+        }}
       />
     </div>
   );

package/src/components/gridForm/GridFormDropDown.tsx

@@ -38,6 +38,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
     | "GridPopoverEditDropDown-containerSmall"
     | "GridPopoverEditDropDown-containerMedium"
     | "GridPopoverEditDropDown-containerLarge"
+    | "GridPopoverEditDropDown-containerUnlimited"
     | string
     | undefined;
   filtered?: "local" | "reload";

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,27 +1,27 @@
 import "../../styles/GridFormMultiSelect.scss";
 
 import { MenuItem, MenuDivider, FocusableItem } from "../../react-menu3";
-import { useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
+import { useCallback, useEffect, useRef, useState, KeyboardEvent, useMemo } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { delay, fromPairs } from "lodash-es";
+import { delay, pick, pickBy } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { MenuSeparatorString } from "./GridFormDropDown";
 import { CellEditorCommon, CellParams } from "../GridCell";
 import { ClickEvent } from "../../react-menu3/types";
+import { GridSubComponentProps } from "./GridSubComponentProps";
 
 interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
   label?: JSX.Element | string;
-  subComponent?: (props: any, ref: any) => any;
+  subComponent?: (props: any) => JSX.Element;
 }
 
 export type MultiSelectOption<ValueType> = ValueType | MultiFinalSelectOption<ValueType>;
 
-export interface MultiSelectResult<RowType> {
-  selectedRows: RowType[];
-  values: Record<string, any>;
+export interface SelectedOptionResult<ValueType> extends MultiFinalSelectOption<ValueType> {
+  subValue: any;
 }
 
 export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
@@ -30,41 +30,63 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
     | "GridMultiSelect-containerSmall"
     | "GridMultiSelect-containerMedium"
     | "GridMultiSelect-containerLarge"
+    | "GridMultiSelect-containerUnlimited"
     | string
     | undefined;
   filtered?: boolean;
   filterPlaceholder?: string;
-  onSave?: (props: MultiSelectResult<RowType>) => Promise<boolean>;
+  onSave?: (selectedRows: RowType[], selectedOptions: SelectedOptionResult<ValueType>[]) => Promise<boolean>;
   options:
     | MultiSelectOption<ValueType>[]
     | ((selectedRows: RowType[]) => Promise<MultiSelectOption<ValueType>[]> | MultiSelectOption<ValueType>[]);
-  initialSelectedValues?: (selectedRows: RowType[]) => any[];
+  initialSelectedValues?: (selectedRows: RowType[]) => any[] | Record<string, any>;
 }
 
 export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
   props: GridFormMultiSelectProps<RowType, ValueType>,
 ) => {
   const { selectedRows } = props as unknown as CellParams<RowType>;
+
+  const initialiseValues = useMemo(
+    () => props.initialSelectedValues && props.initialSelectedValues(selectedRows),
+    [props, selectedRows],
+  );
+
+  const subComponentIsValid = useRef<Record<string, boolean>>({});
+  const [subSelectedValues, setSubSelectedValues] = useState<Record<string, any>>(
+    initialiseValues && !Array.isArray(initialiseValues)
+      ? pickBy(initialiseValues, (value) => typeof value !== "boolean")
+      : {},
+  );
+  const [selectedValues, setSelectedValues] = useState<any[]>(() =>
+    initialiseValues ? (Array.isArray(initialiseValues) ? initialiseValues : Object.keys(initialiseValues)) : [],
+  );
+
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MultiFinalSelectOption<ValueType>[]>();
-  const subSelectedValues = useRef<Record<string, any>>({});
-  const [selectedValues, setSelectedValues] = useState<any[]>(() =>
-    props.initialSelectedValues ? props.initialSelectedValues(selectedRows) : [],
-  );
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
-      const values: Record<string, any> = fromPairs(
-        selectedValues.map((value) => [value, subSelectedValues.current[value] ?? true]),
-      );
       if (props.onSave) {
-        return await props.onSave({ selectedRows, values });
+        const validations = pick(subComponentIsValid.current, selectedValues);
+        const notValid = Object.values(validations).some((v) => !v);
+        if (notValid) return false;
+
+        const selectedOptions = selectedValues.map((row) => (options ?? []).find((opt) => opt.value == row)) ?? [];
+        const selectedResults = selectedOptions.map(
+          (selectedOption) =>
+            ({
+              ...selectedOption,
+              subValue: subSelectedValues[`${selectedOption?.value}`],
+            } as SelectedOptionResult<ValueType>),
+        );
+        return await props.onSave(selectedRows, selectedResults);
       }
       return true;
     },
-    [props, selectedValues],
+    [options, props, selectedValues, subSelectedValues],
   );
 
   // Load up options list if it's async function
@@ -188,14 +210,18 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
                   <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
                     {(ref: any) =>
                       item.subComponent &&
-                      item.subComponent(
-                        {
-                          setValue: (value: any) => {
-                            subSelectedValues.current[item.value as string] = value;
-                          },
-                        },
+                      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)
                     }
                   </FocusableItem>
                 )}

package/src/components/gridForm/GridFormTextInput.tsx

@@ -63,6 +63,12 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormT
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
         formatted={props.units}
+        onMouseEnter={(e) => {
+          if (document.activeElement != e.currentTarget) {
+            e.currentTarget.focus();
+            e.currentTarget.selectionStart = e.currentTarget.value.length;
+          }
+        }}
         inputProps={{
           style: { width: "100%" },
           placeholder: props.placeholder,

package/src/components/gridForm/GridSubComponentProps.ts

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

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -7,18 +7,11 @@ export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormMultiSelectProps<RowType, ValueType>>,
 ): ColDefT<RowType> =>
-  GridCell(
-    {
-      initialWidth: 65,
-      maxWidth: 150,
-      ...colDef,
+  GridCell(colDef, {
+    editor: GridFormMultiSelect,
+    ...props,
+    editorParams: {
+      className: "GridMultiSelect-containerMedium",
+      ...(props.editorParams as GridFormMultiSelectProps<RowType, ValueType>),
     },
-    {
-      editor: GridFormMultiSelect,
-      ...props,
-      editorParams: {
-        className: "GridMultiSelect-containerMedium",
-        ...(props.editorParams as GridFormMultiSelectProps<RowType, ValueType>),
-      },
-    },
-  );
+  });

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -7,8 +7,8 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
-): ColDefT<RowType> => {
-  return GridCell(
+): ColDefT<RowType> =>
+  GridCell(
     {
       initialWidth: 65,
       maxWidth: 150,
@@ -20,13 +20,12 @@ export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
       ...props,
     },
   );
-};
 
 export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
-): ColDefT<RowType> => {
-  return GridPopoverEditBearingLike(
+): ColDefT<RowType> =>
+  GridPopoverEditBearingLike(
     { valueFormatter: bearingValueFormatter, ...colDef },
     {
       multiEdit: !!props.multiEdit,
@@ -42,13 +41,12 @@ export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
       },
     },
   );
-};
 
 export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
-): ColDefT<RowType> => {
-  return GridPopoverEditBearingLike(
+): ColDefT<RowType> =>
+  GridPopoverEditBearingLike(
     { valueFormatter: bearingCorrectionValueFormatter, ...colDef },
     {
       multiEdit: !!props.multiEdit,
@@ -64,4 +62,3 @@ export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(
       },
     },
   );
-};

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -7,19 +7,12 @@ export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType, ValueType>>,
 ): ColDefT<RowType> =>
-  GridCell(
-    {
-      initialWidth: 65,
-      maxWidth: 150,
-      ...colDef,
+  GridCell(colDef, {
+    editor: GridFormDropDown,
+    ...props,
+    editorParams: {
+      // Defaults to medium size container
+      className: "GridPopoverEditDropDown-containerMedium",
+      ...(props.editorParams as GridFormPopoutDropDownProps<RowType, ValueType>),
     },
-    {
-      editor: GridFormDropDown,
-      ...props,
-      editorParams: {
-        // Defaults to medium size container
-        className: "GridPopoverEditDropDown-containerMedium",
-        ...(props.editorParams as GridFormPopoutDropDownProps<RowType, ValueType>),
-      },
-    },
-  );
+  });

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

@@ -6,10 +6,9 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export const GridPopoverMessage = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormMessageProps<RowType>>,
-): ColDefT<RowType> => {
-  return GridCell(
+): ColDefT<RowType> =>
+  GridCell(
     {
-      maxWidth: 140,
       ...colDef,
       cellRendererParams: {
         singleClickEdit: true,
@@ -21,4 +20,3 @@ export const GridPopoverMessage = <RowType extends GridBaseRow>(
       ...props,
     },
   );
-};

package/src/components/gridPopoverEdit/GridPopoverTextArea.ts

@@ -6,11 +6,4 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export const GridPopoverTextArea = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   params: GenericCellEditorProps<GridFormTextAreaProps<RowType>>,
-): ColDefT<RowType> =>
-  GridCell(
-    {
-      maxWidth: 260,
-      ...colDef,
-    },
-    { editor: GridFormTextArea, ...params },
-  );
+): ColDefT<RowType> => GridCell(colDef, { editor: GridFormTextArea, ...params });

package/src/components/gridPopoverEdit/GridPopoverTextInput.ts

@@ -6,15 +6,8 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export const GridPopoverTextInput = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   params: GenericCellEditorProps<GridFormTextInputProps<RowType>>,
-): ColDefT<RowType> => {
-  return GridCell(
-    {
-      maxWidth: 140,
-      ...colDef,
-    },
-    {
-      editor: GridFormTextInput,
-      ...params,
-    },
-  );
-};
+): ColDefT<RowType> =>
+  GridCell(colDef, {
+    editor: GridFormTextInput,
+    ...params,
+  });

package/src/lui/TextInputFormatted.tsx

@@ -16,6 +16,8 @@ export interface LuiTextInputProps {
 
   placeholder?: string;
   formatted?: string;
+
+  onMouseEnter?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
 }
 
 export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
@@ -33,7 +35,8 @@ export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
           type={"text"}
           className={"LuiTextInput-input"}
           min="0"
-          value={props.value}
+          spellCheck={true}
+          defaultValue={props.value}
           onChange={props.onChange}
           {...props.inputProps}
         />

package/src/stories/grid/FormTest.tsx

@@ -1,7 +1,7 @@
 import "./FormTest.scss";
 
 import { useCallback, useState } from "react";
-import { LuiTextInput } from "@linzjs/lui";
+import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
 import { wait } from "../../utils/util";
 import { CellEditorCommon, CellParams } from "../../components/GridCell";
 import { useGridPopoverHook } from "../../components/GridPopoverHook";
@@ -35,19 +35,59 @@ export const FormTest = <RowType extends GridBaseRow>(_props: CellEditorCommon):
     // Close form
     return true;
   }, [nameType, numba, plan, props.selectedRows]);
+
+  const [showModal, setShowModal] = useState<boolean>(false);
+
   const { popoverWrapper } = useGridPopoverHook({ className: _props.className, save });
 
   return popoverWrapper(
-    <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>
-      <div className={"FormTest-textInput"}>
-        <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
-      </div>
-      <div className={"FormTest-textInput"}>
-        <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
-      </div>
-      <div className={"FormTest-textInput"}>
-        <LuiTextInput label={"Plan"} value={plan} onChange={(e) => setPlan(e.target.value)} />
+    <>
+      {showModal && (
+        <LuiAlertModal
+          data-testid="WarningAlertWithButtons-modal"
+          level="warning"
+          // If panel is popped out, append modal to poppped out window DOM, otherwise use default
+          //appendToElement={() => (poppedOut && popoutElement) || document.body}
+        >
+          <h2>Header</h2>
+          <p className="WarningAlertWithButtons-new-line">
+            This modal was added to help fix a bug where the onBlur for the context menu was prematurely closing the
+            editor and therefore this modal.
+          </p>
+          <LuiAlertModalButtons>
+            <LuiButton
+              level="secondary"
+              onClick={() => {
+                setShowModal(false);
+              }}
+              data-testid="WarningAlertWithButtons-cancel"
+            >
+              Cancel
+            </LuiButton>
+
+            <LuiButton
+              level="primary"
+              onClick={() => {
+                setShowModal(false);
+              }}
+              data-testid="WarningAlertWithButtons-ok"
+            >
+              OK
+            </LuiButton>
+          </LuiAlertModalButtons>
+        </LuiAlertModal>
+      )}
+      <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>
+        <div className={"FormTest-textInput"}>
+          <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
+        </div>
+        <div className={"FormTest-textInput"}>
+          <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+        </div>
+        <div className={"FormTest-textInput"}>
+          <LuiButton onClick={() => setShowModal(true)}>Show Modal</LuiButton>
+        </div>
       </div>
-    </div>,
+    </>,
   );
 };

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

@@ -10,7 +10,6 @@ import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
 import { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
 import { wait } from "../../utils/util";
-import { MultiSelectResult } from "../../components/gridForm/GridFormMultiSelect";
 import { GridSubComponentTextArea } from "../../components/GridSubComponentTextArea";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
@@ -70,6 +69,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
           editorParams: {
             filtered: true,
             filterPlaceholder: "Filter position",
+            className: "GridMultiSelect-containerUnlimited",
             options: [
               { value: "a", label: "Architect" },
               { value: "b", label: "Developer" },
@@ -78,15 +78,24 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               { value: "e", label: "Tester" },
               MenuSeparator,
               {
-                value: "f",
+                value: "other",
                 label: "Other",
-                subComponent: (props) => <GridSubComponentTextArea {...props} />,
+                subComponent: (props) => <GridSubComponentTextArea {...props} maxlength={2} />,
               },
             ],
-            onSave: async (result: MultiSelectResult<ITestRow>) => {
+            initialSelectedValues: () => ({
+              other: "Hello",
+            }),
+            onSave: async (selectedRows, selectedOptions) => {
               // eslint-disable-next-line no-console
-              console.log(result);
+              console.log("multiSelect result", { selectedRows, selectedOptions });
+
               await wait(1000);
+              const normalValues = selectedOptions.filter((o) => !o.subComponent).map((o) => o.label);
+              const subValues = selectedOptions.filter((o) => o.subComponent).map((o) => o.subValue);
+              selectedRows.forEach((row) => {
+                row.position = [...normalValues, ...subValues].join(", ");
+              });
               return true;
             },
           },
@@ -107,9 +116,9 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
             filterPlaceholder: "Filter position",
             initialSelectedValues: (selectedRows) => [selectedRows[0].position2],
             options: Object.entries(positionTwoMap).map(([k, v]) => ({ value: k, label: v })),
-            onSave: async (result: MultiSelectResult<ITestRow>) => {
+            onSave: async (selectedRows, selectedOptions) => {
               // eslint-disable-next-line no-console
-              console.log(result);
+              console.log("multiSelect result", { selectedRows, selectedOptions });
               await wait(1000);
               return true;
             },