@linzjs/step-ag-grid 2.2.2 → 2.3.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "2.2.2",
+  "version": "2.3.1",
   "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,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/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/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;
             },