@linzjs/step-ag-grid 8.4.2 → 8.4.3

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -8,7 +8,7 @@ import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
-import { ClickEvent, MenuInstance } from "../../react-menu3/types";
+import { ClickEvent } from "../../react-menu3/types";
 import { FormError } from "../../lui/FormError";
 import { isNotEmpty } from "../../utils/util";
 
@@ -270,19 +270,17 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                       title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                       value={item.value}
                       onFocus={() => {
-                        setSelectedItem(item);
-                        if (item.subComponent) {
-                          subComponentIsValid.current = true;
-                          subComponentInitialValue.current = null;
-                        } else {
+                        if (selectedItem !== item) {
+                          setSelectedItem(item);
                           setSubSelectedValue(null);
                           subComponentIsValid.current = true;
+                          if (item.subComponent) {
+                            subComponentInitialValue.current = null;
+                          }
                         }
                       }}
                       onClick={(e: ClickEvent) => {
-                        if (item.subComponent) {
-                          e.keepOpen = true;
-                        }
+                        e.keepOpen = !!item.subComponent;
                       }}
                     >
                       {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
@@ -291,7 +289,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
 
                     {item.subComponent && selectedItem === item && (
                       <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
-                        {(ref: MenuInstance) => (
+                        {() => (
                           <GridSubComponentContext.Provider
                             value={{
                               context: { options },
@@ -308,13 +306,13 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                                 subComponentIsValid.current = valid;
                               },
                               triggerSave: async () => {
-                                ref.closeMenu();
+                                // empty
                               },
                             }}
                           >
                             {item.subComponent && (
                               <div className={"subComponent"}>
-                                <item.subComponent key={`${fieldToString(field)}-${index}_subcomponent_inner`} />
+                                <item.subComponent />
                               </div>
                             )}
                           </GridSubComponentContext.Provider>

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -397,29 +397,25 @@ const MenuSubComponent = (props: {
   const { data, item, options, setOptions, subComponentIsValid, triggerSave } = props;
   return (
     <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
-      {(_: any) =>
-        item.subComponent && (
-          <GridSubComponentContext.Provider
-            value={{
-              context: { options },
-              data,
-              value: item.subValue,
-              setValue: (value: any) => {
-                item.subValue = value;
-                setOptions([...options]);
-              },
-              setValid: (valid: boolean) => {
-                subComponentIsValid[`${item.value}`] = valid;
-              },
-              triggerSave,
-            }}
-          >
-            <div className={"subComponent"}>
-              <item.subComponent />
-            </div>
-          </GridSubComponentContext.Provider>
-        )
-      }
+      {() => (
+        <GridSubComponentContext.Provider
+          value={{
+            context: { options },
+            data,
+            value: item.subValue,
+            setValue: (value: any) => {
+              item.subValue = value;
+              setOptions([...options]);
+            },
+            setValid: (valid: boolean) => {
+              subComponentIsValid[`${item.value}`] = valid;
+            },
+            triggerSave,
+          }}
+        >
+          <div className={"subComponent"}>{item.subComponent && <item.subComponent />}</div>
+        </GridSubComponentContext.Provider>
+      )}
     </FocusableItem>
   );
 };

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -143,28 +143,24 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                   </MenuItem>
                   {item.subComponent && subComponentSelected === item && (
                     <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
-                      {(_: any) =>
-                        item.subComponent && (
-                          <GridSubComponentContext.Provider
-                            value={{
-                              context: {},
-                              data,
-                              value: subSelectedValue,
-                              setValue: (value: any) => {
-                                setSubSelectedValue(value);
-                              },
-                              setValid: (valid: boolean) => {
-                                subComponentIsValid.current = valid;
-                              },
-                              triggerSave,
-                            }}
-                          >
-                            <div className={"subComponent"}>
-                              <item.subComponent />
-                            </div>
-                          </GridSubComponentContext.Provider>
-                        )
-                      }
+                      {() => (
+                        <GridSubComponentContext.Provider
+                          value={{
+                            context: {},
+                            data,
+                            value: subSelectedValue,
+                            setValue: (value: any) => {
+                              setSubSelectedValue(value);
+                            },
+                            setValid: (valid: boolean) => {
+                              subComponentIsValid.current = valid;
+                            },
+                            triggerSave,
+                          }}
+                        >
+                          <div className={"subComponent"}>{item.subComponent && <item.subComponent />}</div>
+                        </GridSubComponentContext.Provider>
+                      )}
                     </FocusableItem>
                   )}
                 </Fragment>

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -44,6 +44,7 @@ export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
         helpText={helpText}
         autoFocus={true}
         placeholder={props.placeholder}
+        allowTabToSave={true}
       />
     </div>
   );

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -41,6 +41,7 @@ export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
       autoFocus={true}
       placeholder={props.placeholder}
       style={{ width: "100%" }}
+      allowTabToSave={true}
     />
   );
 };

package/src/components/gridForm/GridFormTextArea.tsx

@@ -55,7 +55,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
-        placeholder={props.placeholder}
+        placeholder={props.placeholder ?? "Type here"}
         helpText={helpText}
       />
     </div>,

package/src/components/gridForm/GridFormTextInput.tsx

@@ -57,7 +57,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
         error={invalid()}
         formatted={props.units}
         style={{ width: props.width ?? 240 }}
-        placeholder={props.placeholder}
+        placeholder={props.placeholder ?? "Type here"}
         helpText={helpText}
       />
     </div>,

package/src/lui/TextAreaInput.tsx

@@ -18,6 +18,7 @@ export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaE
   mandatory?: boolean;
   helpText?: string;
   error?: JSX.Element | string | boolean | null;
+  allowTabToSave?: boolean;
 }
 
 export const TextAreaInput = (props: LuiTextAreaInputProps) => {
@@ -50,6 +51,7 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
               }
               props.onMouseEnter && props.onMouseEnter(e);
             }}
+            data-allowtabtosave={props.allowTabToSave}
           >
             {props.value}
           </textarea>

package/src/lui/TextInputFormatted.tsx

@@ -14,6 +14,7 @@ export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes
   helpText?: string;
   error?: JSX.Element | string | boolean | null;
   formatted?: string;
+  allowTabToSave?: boolean;
 }
 
 export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
@@ -31,6 +32,7 @@ export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
             e.currentTarget.focus();
             props.onMouseEnter && props.onMouseEnter(e);
           }}
+          data-allowtabtosave={props.allowTabToSave}
         />
         <span className={"LuiTextInput-formatted"}>{props.formatted}</span>
       </span>

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

@@ -128,7 +128,7 @@ const MenuItemFr = ({
   };
 
   /**
-   * Keyboard events are triggered on up, otherwise sub-components get spaces and enters typed in them
+   * Keyboard events are triggered on up, otherwise subcomponents get spaces and enters typed in them
    */
   const handleKeyUp = (e: KeyboardEvent) => {
     if (!isHovering) return;

package/src/react-menu3/utils/withHovering.tsx

@@ -1,4 +1,4 @@
-import { memo, forwardRef, useContext, useRef, MutableRefObject } from "react";
+import { memo, forwardRef, useContext, useRef, MutableRefObject, PropsWithRef } from "react";
 import { HoverItemContext } from "../contexts/HoverItemContext";
 
 export interface withHoveringResultProps {
@@ -7,9 +7,9 @@ export interface withHoveringResultProps {
   menuItemRef?: MutableRefObject<any>;
 }
 
-export const withHovering = (name: string, WrappedComponent: (...args: any) => JSX.Element): any => {
+export const withHovering = <T,>(name: string, WrappedComponent: (props: T) => JSX.Element) => {
   const Component = memo(WrappedComponent);
-  const WithHovering = forwardRef<any>((props: any, ref) => {
+  const WithHovering = forwardRef((props: PropsWithRef<T>, ref) => {
     const menuItemRef = useRef<any>(null);
     return (
       <Component

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

@@ -14,6 +14,7 @@ import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
 import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
+import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
 
 export default {
   title: "Components / Grids",
@@ -234,9 +235,16 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
                 },
                 {
                   value: "oth",
-                  label: "Other",
+                  label: "Other text input",
                   subComponent: () => (
-                    <GridFormSubComponentTextInput placeholder={"Other..."} defaultValue={""} required={true} />
+                    <GridFormSubComponentTextInput placeholder={"Other..."} defaultValue={"a"} required={true} />
+                  ),
+                },
+                {
+                  value: "oth",
+                  label: "Other text area",
+                  subComponent: () => (
+                    <GridFormSubComponentTextArea placeholder={"Other..."} defaultValue={"b"} required={true} />
                   ),
                 },
               ];

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -0,0 +1,128 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { useRef } from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import {
+  GridFormDropDown,
+  GridFormDropDownProps,
+  GridPopoutEditDropDownSelectedItem,
+} from "../../../components/gridForm/GridFormDropDown";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { GridFormSubComponentTextInput } from "../../../components/gridForm/GridFormSubComponentTextInput";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormDropDown,
+  args: {},
+} as ComponentMeta<typeof GridFormDropDown>;
+
+const updateValue = jest
+  .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
+  .mockImplementation((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
+
+const onSelectedItem = jest.fn<Promise<void>, [GridPopoutEditDropDownSelectedItem<any>]>().mockResolvedValue(undefined);
+
+const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
+  const config: GridFormDropDownProps<any> = {
+    filtered: "local",
+    onSelectedItem,
+    options: [
+      { label: "Enabled", value: 1 },
+      { label: "Disabled", value: 0, disabled: true },
+      {
+        label: "Sub menu",
+        value: 0,
+        subComponent: () => (
+          <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+        ),
+      },
+    ],
+  };
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <div>
+          <h6 ref={anchorRef}>Interaction test</h6>
+          <GridPopoverContext.Provider
+            value={
+              {
+                anchorRef: anchorRef,
+                updateValue,
+                data: { value: "" },
+                value: "",
+                field: "value",
+                selectedRows: [],
+              } as any as GridPopoverContextType<any>
+            }
+          >
+            <GridFormDropDown {...props} {...config} />
+          </GridPopoverContext.Provider>
+        </div>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormDropDownInteractions_ = Template.bind({});
+GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const getOption = (name: string) => canvas.findByRole("menuitem", { name });
+
+  // Check enabled menu handles click
+  const enabledMenuOption = await getOption("Enabled");
+  expect(enabledMenuOption).toBeInTheDocument();
+
+  userEvent.click(enabledMenuOption);
+  expect(updateValue).toHaveBeenCalled();
+  expect(onSelectedItem).toHaveBeenCalled();
+
+  // Check disabled menu ignores click
+  updateValue.mockClear();
+  onSelectedItem.mockClear();
+  const disabledMenuOption = await getOption("Disabled");
+  userEvent.click(disabledMenuOption);
+  expect(updateValue).not.toHaveBeenCalled();
+  expect(onSelectedItem).not.toHaveBeenCalled();
+
+  // Check sub menu works
+  const subTextInput = await getOption("Sub menu...");
+  expect(subTextInput).toBeInTheDocument();
+
+  expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
+
+  userEvent.click(subTextInput);
+  const textInput = await canvas.findByPlaceholderText("Text input");
+  expect(textInput).toBeInTheDocument();
+  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+
+  userEvent.type(textInput, "Hello");
+  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape to not save
+  updateValue.mockClear();
+  userEvent.type(textInput, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.clear(textInput);
+  userEvent.type(textInput, "{Enter}");
+  expect(updateValue).not.toHaveBeenCalled();
+};

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -0,0 +1,92 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridPopoverEditBearingCorrectionEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormEditBearing,
+  args: {},
+} as ComponentMeta<typeof GridFormEditBearing>;
+
+const updateValue = jest.fn();
+
+const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Test</h6>
+        <GridPopoverContext.Provider
+          value={
+            {
+              anchorRef,
+              value: null,
+              updateValue,
+            } as any as GridPopoverContextType<any>
+          }
+        >
+          <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormEditBearingCorrectionInteractions_ = Template.bind({});
+GridFormEditBearingCorrectionInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+
+  const inputField = canvas.getByPlaceholderText("Enter bearing correction");
+
+  // Test formatting null
+  expect(await canvas.findByText("–")).toBeInTheDocument();
+
+  // Test formatting a bearing
+  expect(inputField).toBeInTheDocument();
+  userEvent.type(inputField, "1.2345");
+  expect(await canvas.findByText("+1° 23' 45.0\"")).toBeInTheDocument();
+
+  // Test enter to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Enter}");
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape not to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.type(inputField, "xxx");
+  expect(await canvas.findByText("?")).toBeInTheDocument();
+
+  expect(canvas.getByText("Bearing must be a number in D.MMSSS format")).toBeInTheDocument();
+  userEvent.type(inputField, "{Enter}");
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab();
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab({ shift: true });
+  expect(updateValue).not.toHaveBeenCalled();
+};

package/src/stories/grid/gridFormInteraction/GridFormEditBearingInteraction.stories.tsx

@@ -0,0 +1,91 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridPopoverEditBearingEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormEditBearing,
+  args: {},
+} as ComponentMeta<typeof GridFormEditBearing>;
+
+const updateValue = jest.fn();
+
+const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Test</h6>
+        <GridPopoverContext.Provider
+          value={
+            {
+              anchorRef,
+              value: null,
+              updateValue,
+            } as any as GridPopoverContextType<any>
+          }
+        >
+          <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormEditBearingInteractions_ = Template.bind({});
+GridFormEditBearingInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+
+  const inputField = canvas.getByPlaceholderText("Enter bearing");
+
+  // Test formatting null
+  expect(await canvas.findByText("–")).toBeInTheDocument();
+
+  // Test formatting a bearing
+  expect(inputField).toBeInTheDocument();
+  userEvent.type(inputField, "1.2345");
+  expect(await canvas.findByText("1° 23' 45\"")).toBeInTheDocument();
+
+  // Test enter to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Enter}");
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape not to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.type(inputField, "xxx");
+  expect(await canvas.findByText("?")).toBeInTheDocument();
+  expect(canvas.getByText("Bearing must be a number in D.MMSSS format")).toBeInTheDocument();
+  userEvent.type(inputField, "{Enter}");
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab();
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab({ shift: true });
+  expect(updateValue).not.toHaveBeenCalled();
+};