@linzjs/step-ag-grid 8.4.2 → 9.0.0

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": "9.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -81,76 +81,76 @@
     ]
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/jest": "^0.0.10",
-    "@storybook/react": "6.5.13",
-    "@storybook/test-runner": "^0.9.0",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.16",
+    "@storybook/test-runner": "^0.9.4",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "^8.19.0",
+    "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
-    "@types/debounce-promise": "^3.1.5",
-    "@types/jest": "^29.2.2",
+    "@types/debounce-promise": "^3.1.6",
+    "@types/jest": "^29.4.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.11.9",
-    "@types/react": "^17.0.52",
+    "@types/node": "^18.13.0",
+    "@types/react": "^17.0.53",
     "@types/react-dom": "^17.0.18",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.42.0",
-    "babel-jest": "^29.2.2",
+    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "babel-jest": "^29.4.2",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^6.11.4",
+    "chromatic": "^6.17.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-deprecation": "^1.3.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.4",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-deprecation": "^1.3.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.9.1",
-    "jest": "^29.3.1",
+    "eslint-plugin-testing-library": "^5.10.1",
+    "jest": "^29.4.2",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom": "^29.4.2",
     "jest-expect-message": "^1.1.3",
-    "mkdirp": "^1.0.4",
+    "mkdirp": "^2.1.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.18",
-    "postcss-loader": "^7.0.1",
-    "postcss-scss": "^4.0.5",
-    "prettier": "^2.7.1",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.0.2",
+    "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.4",
     "react-app-polyfill": "^3.0.0",
     "react-scripts": "^5.0.1",
-    "rollup": "^3.2.5",
+    "rollup": "^3.14.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
-    "sass": "^1.56.0",
-    "sass-loader": "10.3.1",
+    "sass": "^1.58.0",
+    "sass-loader": "^13.2.0",
     "semantic-release": "^19.0.5",
-    "storybook-addon-mock": "^2.4.1",
-    "style-loader": "2.0.0",
-    "stylelint": "^14.14.1",
-    "stylelint-config-prettier": "^9.0.3",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-prettier": "^2.0.0",
     "stylelint-scss": "^4.3.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.5"
   },
   "babel": {
     "presets": [

package/src/components/Grid.tsx

@@ -340,33 +340,35 @@ export const Grid = (params: GridProps): JSX.Element => {
           />
         </div>
       )}
-      <AgGridReact
-        animateRows={params.animateRows}
-        rowClassRules={params.rowClassRules}
-        defaultColDef={params.defaultColDef}
-        getRowId={(params) => `${params.data.id}`}
-        suppressRowClickSelection={true}
-        rowSelection={params.rowSelection ?? "multiple"}
-        suppressBrowserResizeObserver={true}
-        colResizeDefault={"shift"}
-        onFirstDataRendered={sizeColumnsToFit}
-        onGridSizeChanged={sizeColumnsToFit}
-        suppressClickEdit={true}
-        onCellKeyPress={onCellKeyPress}
-        onCellClicked={onCellClicked}
-        onCellDoubleClicked={onCellDoubleClick}
-        onCellEditingStarted={refreshSelectedRows}
-        domLayout={params.domLayout}
-        columnDefs={columnDefs}
-        rowData={params.rowData}
-        noRowsOverlayComponent={noRowsOverlayComponent}
-        onGridReady={onGridReady}
-        onSortChanged={ensureSelectedRowIsVisible}
-        postSortRows={params.postSortRows ?? postSortRows}
-        onSelectionChanged={synchroniseExternalStateToGridSelection}
-        onColumnMoved={params.onColumnMoved}
-        alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
-      />
+      <div style={{ flex: 1 }}>
+        <AgGridReact
+          animateRows={params.animateRows}
+          rowClassRules={params.rowClassRules}
+          defaultColDef={params.defaultColDef}
+          getRowId={(params) => `${params.data.id}`}
+          suppressRowClickSelection={true}
+          rowSelection={params.rowSelection ?? "multiple"}
+          suppressBrowserResizeObserver={true}
+          colResizeDefault={"shift"}
+          onFirstDataRendered={sizeColumnsToFit}
+          onGridSizeChanged={sizeColumnsToFit}
+          suppressClickEdit={true}
+          onCellKeyPress={onCellKeyPress}
+          onCellClicked={onCellClicked}
+          onCellDoubleClicked={onCellDoubleClick}
+          onCellEditingStarted={refreshSelectedRows}
+          domLayout={params.domLayout}
+          columnDefs={columnDefs}
+          rowData={params.rowData}
+          noRowsOverlayComponent={noRowsOverlayComponent}
+          onGridReady={onGridReady}
+          onSortChanged={ensureSelectedRowIsVisible}
+          postSortRows={params.postSortRows ?? postSortRows}
+          onSelectionChanged={synchroniseExternalStateToGridSelection}
+          onColumnMoved={params.onColumnMoved}
+          alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
+        />
+      </div>
     </div>
   );
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -8,9 +8,10 @@ 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";
+import { textMatch } from "../../utils/textMatcher";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType> {
   // Note the row that was clicked on will be first
@@ -136,8 +137,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
               console.error("Cannot filter non-string labels", option);
               return undefined;
             }
-            const str = (option.label as string) || "";
-            return str.toLowerCase().indexOf(filter.toLowerCase()) !== -1 ? option : undefined;
+            return textMatch((option.label as string) || "", filter) ? option : undefined;
           })
           .filter((r) => r !== undefined),
       );
@@ -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

@@ -41,6 +41,11 @@ export interface GridFormMultiSelectGroup {
   filter?: string;
 }
 
+export interface GridFormMultiSelectSaveProps<RowType extends GridBaseRow> {
+  selectedRows: RowType[];
+  selectedOptions: MultiSelectOption[];
+}
+
 export interface GridFormMultiSelectProps<RowType extends GridBaseRow> extends CellEditorCommon {
   className?:
     | "GridMultiSelect-containerSmall"
@@ -54,7 +59,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow> extends C
   filterHelpText?: string | ((filter: string, options: MultiSelectOption[]) => string | undefined);
   noOptionsMessage?: string;
   onSelectFilter?: (props: { filter: string; options: MultiSelectOption[] }) => void;
-  onSave?: (props: { selectedRows: RowType[]; selectedOptions: MultiSelectOption[] }) => Promise<boolean>;
+  onSave?: (props: GridFormMultiSelectSaveProps<RowType>) => Promise<boolean>;
   headers?: GridFormMultiSelectGroup[];
   options: MultiSelectOption[] | ((selectedRows: RowType[]) => Promise<MultiSelectOption[]> | MultiSelectOption[]);
   invalid?: (selectedRows: RowType[], selectedOptions: MultiSelectOption[]) => boolean;
@@ -164,11 +169,12 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
               filterPlaceholder={props.filterPlaceholder}
             />
           )}
-          {headerGroups && (isEmpty(headerGroups) || !toPairs(headerGroups).some(([_, options]) => !isEmpty(options))) && (
-            <MenuItem key={"noOptions"} className={"GridMultiSelect-noOptions"} disabled={true}>
-              {props.noOptionsMessage ?? "No Options"}
-            </MenuItem>
-          )}
+          {headerGroups &&
+            (isEmpty(headerGroups) || !toPairs(headerGroups).some(([_, options]) => !isEmpty(options))) && (
+              <MenuItem key={"noOptions"} className={"GridMultiSelect-noOptions"} disabled={true}>
+                {props.noOptionsMessage ?? "No Options"}
+              </MenuItem>
+            )}
           {headerGroups && !isEmpty(headerGroups) && (
             <div className={"GridFormMultiSelect-options"}>
               {headers.map((header, index) => {
@@ -397,29 +403,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

@@ -42,8 +42,8 @@ export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
         helpText={helpText}
-        autoFocus={true}
         placeholder={props.placeholder}
+        allowTabToSave={true}
       />
     </div>
   );

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -38,9 +38,9 @@ export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
       error={invalid()}
       onChange={(e) => setValue(e.target.value)}
       helpText={helpText}
-      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) => {
@@ -39,7 +40,7 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
           {/* wrapper div used for error styling */}
           <textarea
             rows={5}
-            {...omit(props, ["error", "value", "helpText", "formatted", "className"])}
+            {...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"])}
             id={id}
             value={props.value ?? ""}
             spellCheck={true}
@@ -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 => {
@@ -25,12 +26,13 @@ export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
           type={"text"}
           spellCheck={true}
           defaultValue={props.value}
-          {...omit(props, ["error", "value", "helpText", "formatted", "className"])}
+          {...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"])}
           className={"LuiTextInput-input"}
           onMouseEnter={(e) => {
             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/ControlledMenu.tsx

@@ -127,6 +127,25 @@ export const ControlledMenuFr = (
         return;
       }
 
+      const invokeSave = (reason: string) => {
+        if (!saveButtonRef?.current) return;
+        saveButtonRef.current?.setAttribute("data-reason", reason);
+        saveButtonRef?.current?.click();
+      };
+
+      const allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
+      if (allowTabToSave) {
+        if (isDown) {
+          ev.preventDefault();
+          ev.stopPropagation();
+          lastTabDownEl.current = activeElement;
+        } else {
+          lastTabDownEl.current == activeElement &&
+            invokeSave(ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD);
+        }
+        return;
+      }
+
       const inputElsIterator = thisDocument.querySelectorAll<HTMLElement>(".szh-menu--state-open input,textarea");
       let inputEls: HTMLElement[] = [];
       inputElsIterator.forEach((el) => inputEls.push(el));
@@ -138,12 +157,6 @@ export const ControlledMenuFr = (
 
       const isTextArea = activeElement.nodeName === "TEXTAREA";
       const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") == "true" || isTextArea;
-      const allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
-      const invokeSave = (reason: string) => {
-        if (!saveButtonRef?.current) return;
-        saveButtonRef.current?.setAttribute("data-reason", reason);
-        saveButtonRef?.current?.click();
-      };
 
       switch (activeElement.nodeName) {
         case "TEXTAREA":

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