@linzjs/step-ag-grid 3.0.2 → 4.0.1

package/src/components/gridForm/GridFormTextInput.tsx

@@ -4,37 +4,25 @@ import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
+import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
 
-export interface GridFormTextInputProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormTextInputProps<RowType extends GridBaseRow> extends TextInputValidatorProps, CellEditorCommon {
   placeholder?: string;
   units?: string;
-  required?: boolean;
-  maxLength?: number;
   width?: string | number;
-  // Return null for ok, otherwise an error string
-  validate?: (value: string, data: RowType) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
+  helpText?: string;
 }
 
 export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTextInputProps<RowType>) => {
-  const { field, data, value: initialVale } = useGridPopoverContext<RowType>();
+  const { field, value: initialVale } = useGridPopoverContext<RowType>();
+
+  const helpText = props.helpText ?? "Press enter or tab to save";
 
   const initValue = initialVale == null ? "" : `${initialVale}`;
   const [value, setValue] = useState(initValue);
 
-  const invalid = useCallback(() => {
-    const trimmedValue = value.trim();
-    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.validate) {
-      return props.validate(trimmedValue, data);
-    }
-    return null;
-  }, [data, props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
@@ -57,7 +45,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
     },
     [invalid, value, initValue, props, field],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
 
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>
@@ -66,11 +54,10 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
         formatted={props.units}
-        inputProps={{
-          style: { width: "100%" },
-          placeholder: props.placeholder,
-          onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
-        }}
+        style={{ width: "100%" }}
+        placeholder={props.placeholder}
+        {...onlyInputKeyboardEventHandlers}
+        helpText={helpText}
       />
     </div>,
   );

package/src/contexts/GridPopoverContextProvider.tsx

@@ -11,7 +11,7 @@ interface GridPopoverContextProps {
 }
 
 export const GridPopoverContextProvider = ({ props, children }: GridPopoverContextProps) => {
-  const { getSelectedRows, updatingCells } = useContext(GridContext);
+  const { getSelectedRows, updatingCells, stopEditing } = useContext(GridContext);
   const anchorRef = useRef<Element>(props.eGridCell);
 
   const [saving, setSaving] = useState(false);
@@ -27,9 +27,16 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
   const field = props.colDef?.field ?? "";
 
   const updateValue = useCallback(
-    async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> =>
-      !saving && (await updatingCells({ selectedRows, field }, saveFn, setSaving)),
-    [field, saving, selectedRows, updatingCells],
+    async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> => {
+      let result = false;
+      if (!saving) {
+        result = await updatingCells({ selectedRows, field }, saveFn, setSaving);
+        if (result) stopEditing();
+      }
+
+      return result;
+    },
+    [field, saving, selectedRows, stopEditing, updatingCells],
   );
 
   return (

package/src/index.ts

@@ -39,7 +39,7 @@ export { GridHeaderSelect } from "./components/gridHeader/GridHeaderSelect";
 
 export { TextAreaInput } from "./lui/TextAreaInput";
 export { TextInputFormatted } from "./lui/TextInputFormatted";
-export { GridSubComponentTextArea } from "./components/GridSubComponentTextArea";
+export { GridFormSubComponentTextArea } from "./components/gridForm/GridFormSubComponentTextArea";
 
 export * from "./lui/ActionButton";
 

package/src/lui/TextAreaInput.tsx

@@ -1,52 +1,58 @@
-import { ChangeEventHandler, InputHTMLAttributes, useState } from "react";
+import { InputHTMLAttributes, useState } from "react";
 import clsx from "clsx";
 import { LuiIcon } from "@linzjs/lui";
-import { v4 as uuidv4 } from "uuid";
+import { v4 as uuidVersion4 } from "uuid";
+import { omit } from "lodash-es";
 
 export const useGenerateOrDefaultId = (idFromProps?: string) => {
-  const [id] = useState(idFromProps ? idFromProps : uuidv4());
+  const [id] = useState(idFromProps ? idFromProps : uuidVersion4());
   return id;
 };
 
-export interface LuiTextAreaInputProps {
+export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
+  // overrides value in base class to be string type only
+  value: string;
+
+  // Custom fields
   label?: JSX.Element | string;
   mandatory?: boolean;
-  inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
-  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-  value: string;
+  helpText?: string;
   error?: string | boolean | null;
 }
 
 export const TextAreaInput = (props: LuiTextAreaInputProps) => {
-  const id = useGenerateOrDefaultId(props.inputProps?.id);
+  const id = useGenerateOrDefaultId(props?.id);
 
   return (
     <div
       className={clsx(
         "LuiTextAreaInput Grid-popoverContainer",
-        props.inputProps?.disabled ? "isDisabled" : "",
-        props?.error ? "hasError" : "",
+        props.disabled ? "isDisabled" : "",
+        props.error ? "hasError" : "",
+        props.className,
       )}
     >
       <label htmlFor={id}>
-        {props.mandatory && <span className="LuiTextAreaInput-mandatory">*</span>}
-        {props.label && <span className="LuiTextAreaInput-label">{props.label}</span>}
+        {props.mandatory != null && <span className="LuiTextAreaInput-mandatory">*</span>}
+        {props.label != null && <span className="LuiTextAreaInput-label">{props.label}</span>}
         <div className="LuiTextAreaInput-wrapper">
-          {" "}
           {/* wrapper div used for error styling */}
           <textarea
-            id={id}
-            value={props.value}
-            onChange={props.onChange}
             rows={5}
-            {...props.inputProps}
+            {...omit(props, ["error", "value", "helpText", "formatted", "className"])}
+            id={id}
+            value={props.value ?? ""}
+            spellCheck={true}
             onMouseEnter={(e) => {
               if (document.activeElement != e.currentTarget) {
                 e.currentTarget.focus();
                 e.currentTarget.selectionStart = e.currentTarget.value.length;
               }
+              props.onMouseEnter && props.onMouseEnter(e);
             }}
-          />
+          >
+            {props.value}
+          </textarea>
         </div>
       </label>
 
@@ -57,6 +63,16 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
           {props.error}
         </span>
       )}
+
+      {props.helpText && !props.error && (
+        <span
+          style={{
+            fontSize: "0.7rem",
+          }}
+        >
+          {props.helpText}
+        </span>
+      )}
     </div>
   );
 };

package/src/lui/TextInputFormatted.tsx

@@ -1,55 +1,36 @@
 import "./TextInputFormatted.scss";
 
-import {
-  ChangeEventHandler,
-  DetailedHTMLProps,
-  FocusEventHandler,
-  InputHTMLAttributes,
-  MouseEventHandler,
-} from "react";
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 
 import clsx from "clsx";
 import { LuiIcon } from "@linzjs/lui";
+import { omit } from "lodash-es";
 
-export interface LuiTextInputProps {
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-  onClick?: MouseEventHandler<HTMLInputElement>;
-  inputProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-  error?: string | boolean | null;
-  warning?: string | boolean | null;
-
-  className?: string;
+export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  // overrides value in base class to be string type only
   value: string;
 
-  placeholder?: string;
+  // Custom fields
+  helpText?: string;
+  error?: string | boolean | null;
   formatted?: string;
 }
 
 export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
   return (
-    <div
-      className={clsx(
-        "LuiTextInput Grid-popoverContainer",
-        props.error && "hasError",
-        props.warning && "hasWarning",
-        props.className,
-      )}
-    >
+    <div className={clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className)}>
       <span className="LuiTextInput-inputWrapper">
+        {/* wrapper div used for error styling */}
         <input
           type={"text"}
-          className={"LuiTextInput-input"}
-          min="0"
           spellCheck={true}
           defaultValue={props.value}
-          onChange={props.onChange}
-          onFocus={props.onFocus}
-          onClick={props.onClick}
+          {...omit(props, ["error", "value", "helpText", "formatted", "className"])}
+          className={"LuiTextInput-input"}
           onMouseEnter={(e) => {
             e.currentTarget.focus();
+            props.onMouseEnter && props.onMouseEnter(e);
           }}
-          {...props.inputProps}
         />
         <span className={"LuiTextInput-formatted"}>{props.formatted}</span>
       </span>
@@ -61,10 +42,13 @@ export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
         </span>
       )}
 
-      {props.warning && (
-        <span className="LuiTextInput-warning">
-          <LuiIcon alt="warning" name="ic_warning" className="LuiTextInput-warning-icon" size="sm" status="warning" />
-          {props.warning}
+      {props.helpText && !props.error && (
+        <span
+          style={{
+            fontSize: "0.7rem",
+          }}
+        >
+          {props.helpText}
         </span>
       )}
     </div>

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

@@ -114,7 +114,10 @@ const MenuItemFr = ({
     eventHandlers.handleClick(event, isCheckBox || isRadio);
   };
 
-  const handleKeyDown = (e: KeyboardEvent) => {
+  /**
+   * Keyboard events are triggered on up, otherwise sub-components get spaces and enters typed in them
+   */
+  const handleKeyUp = (e: KeyboardEvent) => {
     if (!isHovering) return;
 
     switch (e.key) {
@@ -144,7 +147,7 @@ const MenuItemFr = ({
     {
       ...restStateProps,
       onPointerDown: setHover,
-      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
       onClick: handleClick,
     },
     restProps,

package/src/stories/grid/FormTest.tsx

@@ -39,7 +39,10 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
 
   const [showModal, setShowModal] = useState<boolean>(false);
 
-  const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, firstInputKeyboardEventHandlers, lastInputKeyboardEventHandlers } = useGridPopoverHook({
+    className: props.className,
+    save,
+  });
 
   return popoverWrapper(
     <>
@@ -80,10 +83,20 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
       )}
       <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)} />
+          <LuiTextInput
+            label={"Name type"}
+            value={nameType}
+            onChange={(e) => setNameType(e.target.value)}
+            inputProps={firstInputKeyboardEventHandlers}
+          />
         </div>
         <div className={"FormTest-textInput"}>
-          <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+          <LuiTextInput
+            label={"Number"}
+            value={numba}
+            onChange={(e) => setNumba(e.target.value)}
+            inputProps={lastInputKeyboardEventHandlers}
+          />
         </div>
         <div className={"FormTest-textInput"}>
           <LuiButton onClick={() => setShowModal(true)}>Show Modal</LuiButton>

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

@@ -258,26 +258,29 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           editorParams: {
             filtered: "local",
             filterPlaceholder: "Filter this",
-            options: [
-              {
-                value: "one",
-                label: "One",
-              },
-              {
-                value: "two",
-                label: "Two",
-              },
-              {
-                value: "oth",
-                label: "Other",
-                subComponent: (props) => (
-                  <GridFormSubComponentTextInput {...props} placeholder={"Subcomponent value"} />
-                ),
-              },
-            ],
+            options: () => {
+              return [
+                {
+                  value: "one",
+                  label: "One",
+                },
+                {
+                  value: "two",
+                  label: "Two",
+                },
+                {
+                  value: "oth",
+                  label: "Other",
+                  subComponent: () => (
+                    <GridFormSubComponentTextInput placeholder={"Other..."} defaultValue={""} required={true} />
+                  ),
+                },
+              ];
+            },
             onSelectedItem: async (selected) => {
               // eslint-disable-next-line no-console
               console.log("onSelectedItem", selected);
+              selected.selectedRows.forEach((row) => (row.sub = selected.subComponentValue ?? selected.value));
             },
           },
         },

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

@@ -10,7 +10,7 @@ import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
 import { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
 import { wait } from "../../utils/util";
-import { GridSubComponentTextArea } from "../../components/GridSubComponentTextArea";
+import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
 import { partition } from "lodash-es";
@@ -81,7 +81,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               {
                 value: "other",
                 label: "Other",
-                subComponent: () => <GridSubComponentTextArea maxLength={5} defaultValue={""} />,
+                subComponent: () => <GridFormSubComponentTextArea maxLength={5} defaultValue={""} />,
               },
             ],
             initialSelectedValues: () => ({

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

@@ -12,8 +12,9 @@ import { wait } from "../../utils/util";
 import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopoverMessage";
-import { GridSubComponentTextArea } from "../../components/GridSubComponentTextArea";
 import { MenuOption } from "../../components/gridForm/GridFormPopoverMenu";
+import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
+import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
 
 export default {
   title: "Components / Grids",
@@ -129,13 +130,23 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                   supportsMultiEdit: true,
                 },
                 {
-                  label: "Other",
+                  label: "Other (TextInput)",
                   supportsMultiEdit: true,
                   action: (_, menuOptionResult) => {
                     alert(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
                   },
                   subComponent: () => (
-                    <GridSubComponentTextArea placeholder={"Other"} maxLength={2} required defaultValue={""} />
+                    <GridFormSubComponentTextInput placeholder={"Other"} maxLength={2} required defaultValue={""} />
+                  ),
+                },
+                {
+                  label: "Other (TextArea)",
+                  supportsMultiEdit: true,
+                  action: (_, menuOptionResult) => {
+                    alert(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                  },
+                  subComponent: () => (
+                    <GridFormSubComponentTextArea placeholder={"Other"} maxLength={2} required defaultValue={""} />
                   ),
                 },
               ] as MenuOption<ITestRow>[];
@@ -162,6 +173,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   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" },
+    { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
   ]);
 
   return (

package/src/utils/textValidator.ts

@@ -0,0 +1,24 @@
+export interface TextInputValidatorProps {
+  required?: boolean;
+  maxLength?: number;
+  validate?: (value: string) => string | null;
+}
+
+export const TextInputValidator = (props: TextInputValidatorProps, 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.validate) {
+    return props.validate(value);
+  }
+  return null;
+};

package/dist/src/components/GridSubComponentTextArea.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export interface GridSubComponentTextAreaProps {
-    placeholder?: string;
-    required?: boolean;
-    maxLength?: number;
-    width?: string | number;
-    validate?: (value: string) => string | null;
-    defaultValue: string;
-}
-export declare const GridSubComponentTextArea: (props: GridSubComponentTextAreaProps) => JSX.Element;

package/src/components/GridSubComponentTextArea.tsx

@@ -1,62 +0,0 @@
-import { useCallback, useContext, useEffect } from "react";
-import { TextInputFormatted } from "../lui/TextInputFormatted";
-import { GridSubComponentContext } from "../contexts/GridSubComponentContext";
-
-export interface GridSubComponentTextAreaProps {
-  placeholder?: string;
-  required?: boolean;
-  maxLength?: number;
-  width?: string | number;
-  validate?: (value: string) => string | null;
-  defaultValue: string;
-}
-
-export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps): JSX.Element => {
-  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 | 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.validate) {
-        return props.validate(value);
-      }
-      return null;
-    },
-    [props],
-  );
-
-  useEffect(() => {
-    setValid(value != null && validate(value) == null);
-  }, [setValid, validate, value]);
-
-  return (
-    <div className={"FreeTextInput LuiDeprecatedForms"}>
-      <TextInputFormatted
-        className={"free-text-input"}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        error={validate(value)}
-        inputProps={{
-          autoFocus: true,
-          placeholder: props.placeholder,
-          onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
-        }}
-      />
-    </div>
-  );
-};