@linzjs/step-ag-grid 1.4.5 → 1.4.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
@@ -17,23 +17,23 @@
     "node": ">=14"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17",
+    "@linzjs/lui": ">=17",
     "ag-grid-community": ">=27",
     "ag-grid-react": ">=27",
-    "@linzjs/lui": ">=17"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "dependencies": {
-    "@linzjs/lui": "^17.18.2",
-    "ag-grid-community": "^27.3.0",
-    "ag-grid-react": "^27.3.0",
+    "@linzjs/lui": ">=17",
+    "ag-grid-community": ">=27",
+    "ag-grid-react": ">=27",
     "debounce-promise": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "uuid": "^9.0.0",
     "prop-types": "^15.8.1",
-    "react-transition-state": "^1.1.5"
+    "react": ">=17",
+    "react-dom": ">=17",
+    "react-transition-state": "^1.1.5",
+    "uuid": "^9.0.0"
   },
   "scripts": {
     "build": "rollup -c && npm run",

package/src/components/GridCell.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo, useState } from "react";
+import { ForwardedRef, forwardRef, useCallback, useContext, useMemo, useState } from "react";
 import { GridBaseRow } from "./Grid";
 import { UpdatingContext } from "@contexts/UpdatingContext";
 import { GridContext } from "@contexts/GridContext";
@@ -27,7 +27,7 @@ export interface GenericCellEditorColDef<
   FormProps extends GenericCellEditorParams<RowType>,
 > extends ColDef {
   cellEditorParams?: FormProps;
-  cellRendererParams?: GenericCellRendererParams;
+  cellRendererParams?: GenericCellRendererParams<RowType>;
 }
 
 export const GridCellRenderer = (cellRendererParams: ICellRendererParams) => {
@@ -77,8 +77,9 @@ interface GenericCellEditorICellEditorParams<RowType extends GridBaseRow, FormPr
   colDef: GenericCellEditorColDef<RowType, FormProps>;
 }
 
-export const GenericCellEditorComponent = <RowType extends GridBaseRow, FormProps extends Record<string, any>>(
+export const GenericCellEditorComponentFr = <RowType extends GridBaseRow, FormProps extends Record<string, any>>(
   props: GenericCellEditorICellEditorParams<RowType, FormProps>,
+  _: ForwardedRef<any>, // We don't forward the ref, as that's for generic aggrid cell editing
 ) => {
   const { updatingCells, getSelectedRows } = useContext(GridContext);
 
@@ -123,3 +124,5 @@ export const GenericCellEditorComponent = <RowType extends GridBaseRow, FormProp
     </>
   );
 };
+
+export const GenericCellEditorComponent = forwardRef(GenericCellEditorComponentFr);

package/src/components/GridPopoverHook.tsx

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "@contexts/GridContext";
 import { GridFormProps } from "./GridCell";
 import { GridBaseRow } from "./Grid";
-import { ControlledMenu } from "../react-menu3";
+import { ControlledMenu } from "@react-menu3";
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(
   props: GridFormProps<RowType>,

package/src/components/gridForm/GridFormDropDown.tsx

@@ -153,7 +153,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
     <>
       {formProps.filtered && (
         <>
-          <FocusableItem className={"filter-item"} index={-1}>
+          <FocusableItem className={"filter-item"}>
             {({ ref }: any) => (
               <div style={{ display: "flex", width: "100%" }}>
                 <input

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,7 +1,7 @@
 import "../../react-menu3/styles/index.scss";
 
-import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { MenuItem, MenuDivider, FocusableItem, ClickEvent } from "@react-menu3";
+import { Fragment, useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay } from "lodash-es";
@@ -58,7 +58,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
     },
     [formProps, selectedValues],
   );
-  const { popoverWrapper } = useGridPopoverHook(props, save);
+  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
 
   // Load up options list if it's async function
   useEffect(() => {
@@ -99,7 +99,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
             return undefined;
           }
           const str = (option.label as string) || "";
-          return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
+          return str.toLowerCase().indexOf(filter.trim()) === -1 ? option.value : undefined;
         })
         .filter((r) => r !== undefined),
     );
@@ -110,7 +110,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
       <div className={"Grid-popoverContainerList"}>
         {options && formProps.filtered && (
           <>
-            <FocusableItem className={"filter-item"}>
+            <FocusableItem className={"filter-item"} key={"filter"}>
               {({ ref }: any) => (
                 <div style={{ display: "flex", width: "100%" }}>
                   <input
@@ -134,28 +134,47 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
           item.value === MenuSeparatorString ? (
             <MenuDivider key={`$$divider_${index}`} />
           ) : filteredValues.includes(item.value) ? null : (
-            <>
+            <Fragment key={`${index}`}>
               <MenuItem
-                key={`${item.value}`}
-                onClick={(e: { keepOpen: boolean }) => {
+                key={`${index}`}
+                onClick={(e: ClickEvent) => {
                   e.keepOpen = true;
-                  // onSelectMenuOption(itemIndex, e.value);
-                  return false;
+                  if (selectedValues.includes(item.value)) {
+                    setSelectedValues(selectedValues.filter((value) => value != item.value));
+                  } else {
+                    setSelectedValues([...selectedValues, item.value]);
+                  }
+                }}
+                onKeyDown={async (e: KeyboardEvent) => {
+                  if (e.key === "Enter") triggerSave().then();
+                  else if (e.key === " ") {
+                    if (selectedValues.includes(item.value)) {
+                      setSelectedValues(selectedValues.filter((value) => value != item.value));
+                    } else {
+                      setSelectedValues([...selectedValues, item.value]);
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }
                 }}
               >
                 <LuiCheckboxInput
                   isChecked={selectedValues.includes(item.value)}
                   value={`${item.value}`}
                   label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      setSelectedValues([...selectedValues, item.value as string]);
-                    } else {
-                      setSelectedValues(selectedValues.filter((value) => value != item.value));
-                    }
+                  inputProps={{
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      return false;
+                    },
+                  }}
+                  onChange={() => {
+                    /*Do nothing, change handled by menuItem*/
                   }}
                 />
               </MenuItem>
+
               {selectedValues.includes(item.value) && item.subComponent && (
                 <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
                   {(ref: any) =>
@@ -171,7 +190,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
                   }
                 </FocusableItem>
               )}
-            </>
+            </Fragment>
           ),
         )}
       </div>

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,7 +1,7 @@
 import "./GridRenderGenericCell.scss";
 
 import { useContext } from "react";
-import { UpdatingContext } from "../../contexts/UpdatingContext";
+import { UpdatingContext } from "@contexts/UpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { GridIcon } from "../GridIcon";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
@@ -9,21 +9,25 @@ import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef
 import { GenericCellEditorParams } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 
+export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
+  data: RowType;
+}
+
 export interface GenericCellColDef<RowType extends GridBaseRow, FormProps extends Record<string, any>> extends ColDef {
-  cellRendererParams?: GenericCellRendererParams;
+  cellRendererParams?: GenericCellRendererParams<RowType>;
   cellEditorParams?: GenericCellEditorParams<RowType> & FormProps;
 }
 
-export interface GenericCellRendererParams {
+export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   singleClickEdit?: boolean;
-  warning?: (props: ICellRendererParams) => string | boolean | undefined;
-  info?: (props: ICellRendererParams) => string | boolean | undefined;
+  warning?: (props: RowICellRendererParams<RowType>) => string | boolean | undefined;
+  info?: (props: RowICellRendererParams<RowType>) => string | boolean | undefined;
 }
 
-export const GridRendererGenericCell = (props: ICellRendererParams): JSX.Element => {
+export const GridRendererGenericCell = <RowType extends GridBaseRow>(props: ICellRendererParams): JSX.Element => {
   const { checkUpdating } = useContext(UpdatingContext);
 
-  const cellRendererParams = props.colDef?.cellRendererParams as GenericCellRendererParams | undefined;
+  const cellRendererParams = props.colDef?.cellRendererParams as GenericCellRendererParams<RowType> | undefined;
   const warningFn = cellRendererParams?.warning;
   const warningText = warningFn ? warningFn(props) : undefined;
   const infoFn = cellRendererParams?.info;

package/src/components/gridRender/GridRenderPopoutMenuCell.tsx

@@ -1,13 +1,25 @@
 import { useContext } from "react";
-import { ICellRendererParams } from "ag-grid-community";
+import { ColDef, ICellRendererParams } from "ag-grid-community";
 import { UpdatingContext } from "@contexts/UpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { LuiIcon } from "@linzjs/lui";
+import { Column } from "ag-grid-community/dist/lib/entities/column";
 
 export const GridRenderPopoutMenuCell = (props: ICellRendererParams) => {
   const { checkUpdating } = useContext(UpdatingContext);
   const isLoading = checkUpdating(props.colDef?.field ?? "", props.data.id);
-  const disabled = !props.colDef?.editable;
+  const editable = props.colDef?.editable;
+  const disabled = !(typeof editable === "function"
+    ? editable({
+        node: props.node,
+        data: props.data,
+        column: props.column as Column,
+        colDef: props.colDef as ColDef,
+        api: props.api,
+        columnApi: props.columnApi,
+        context: props.context,
+      })
+    : editable);
 
   return (
     <GridLoadableCell

package/src/contexts/GridContextProvider.tsx

@@ -258,9 +258,10 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         }
         // This is needed to trigger postSortRowsHook
         gridApi.refreshClientSideRowModel();
-        stopEditing();
+      } else {
+        // Don't set saving if ok as the form has already closed
+        setSaving && setSaving(false);
       }
-      setSaving && setSaving(false);
       return ok;
     });
   };

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

@@ -1,27 +1,33 @@
-// @ts-nocheck
-import { forwardRef, useRef, useMemo, useCallback, useEffect } from "react";
+import {
+  forwardRef,
+  useRef,
+  useMemo,
+  useCallback,
+  useEffect,
+  KeyboardEvent,
+  FocusEvent,
+  MutableRefObject,
+  ForwardedRef,
+} from "react";
 import { createPortal } from "react-dom";
-import { string, number, bool, func, object, oneOf, oneOfType, exact } from "prop-types";
 import { MenuList } from "./MenuList";
 import { useBEM } from "../hooks";
 import {
-  rootMenuPropTypes,
   menuContainerClass,
   mergeProps,
   safeCall,
   isMenuOpen,
   getTransition,
-  values,
   CloseReason,
   Keys,
-  MenuStateMap,
   EventHandlersContext,
   SettingsContext,
   ItemSettingsContext,
 } from "../utils";
 import { hasParentClass } from "@utils/util";
+import { ControlledMenuProps, PortalFieldType, RadioChangeEvent } from "../types";
 
-export const ControlledMenu = forwardRef(function ControlledMenu(
+export const ControlledMenuFr = (
   {
     "aria-label": ariaLabel,
     className,
@@ -43,11 +49,11 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
     onClose,
     saveButtonRef,
     ...restProps
-  }: any,
-  externalRef,
-) {
-  const containerRef = useRef(null);
-  const scrollNodesRef = useRef({});
+  }: ControlledMenuProps & { saveButtonRef?: MutableRefObject<HTMLButtonElement | null> },
+  externalRef: ForwardedRef<HTMLUListElement>,
+) => {
+  const containerRef = useRef<HTMLElement>();
+  const scrollNodesRef = useRef<{ anchors?: HTMLDivElement[] }>({});
   const { anchorRef, state } = restProps;
 
   const settings = useMemo(
@@ -91,7 +97,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
         // the cell doesn't refresh during update if save is invoked from a native event
         // This doesn't happen in React18
         // To work around it, I invoke the save by clicking on a passed in invisible button ref
-        if (saveButtonRef.current) saveButtonRef.current.click();
+        if (saveButtonRef?.current) saveButtonRef.current.click();
         else safeCall(onClose, { reason: CloseReason.BLUR });
 
         // If a user clicks on the menu button when a menu is open, we need to close the menu.
@@ -106,7 +112,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
         }
       }
     },
-    [clickIsWithinMenu, onClose],
+    [clickIsWithinMenu, onClose, saveButtonRef, skipOpen],
   );
 
   const handleScreenEventForCancel = useCallback(
@@ -121,7 +127,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
 
   useEffect(() => {
     if (isMenuOpen(state)) {
-      const thisDocument = anchorRef.current ? anchorRef.current.ownerDocument : document;
+      const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
       thisDocument.addEventListener("mousedown", handleScreenEventForCancel, true);
       thisDocument.addEventListener("mouseup", handleScreenEventForSave, true);
       thisDocument.addEventListener("click", handleScreenEventForCancel, true);
@@ -134,7 +140,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
       };
     }
     return () => {};
-  }, [handleScreenEventForSave, handleScreenEventForCancel, state]);
+  }, [handleScreenEventForSave, handleScreenEventForCancel, state, anchorRef]);
 
   const itemSettings = useMemo(
     () => ({
@@ -146,7 +152,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
 
   const eventHandlers = useMemo(
     () => ({
-      handleClick(event, isCheckorRadio) {
+      handleClick(event: RadioChangeEvent, isCheckOrRadio: boolean) {
         if (!event.stopPropagation) safeCall(onItemClick, event);
 
         let keepOpen = event.keepOpen;
@@ -154,7 +160,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
           // if event.keepOpen is undefined, the following default behaviour is used
           // According to WAI-ARIA Authoring Practices 1.1
           // Keep menu open when check or radio is invoked by SPACE key
-          keepOpen = isCheckorRadio && event.key === Keys.SPACE;
+          keepOpen = isCheckOrRadio && event.key === Keys.SPACE;
         }
 
         if (!keepOpen) {
@@ -166,14 +172,14 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
         }
       },
 
-      handleClose(key) {
+      handleClose(key?: string) {
         safeCall(onClose, { key, reason: CloseReason.CLICK });
       },
     }),
     [onItemClick, onClose],
   );
 
-  const onKeyDown = ({ key }) => {
+  const onKeyDown = ({ key }: KeyboardEvent) => {
     switch (key) {
       case Keys.ESC:
         safeCall(onClose, { key, reason: CloseReason.CANCEL });
@@ -181,14 +187,14 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
     }
   };
 
-  const onBlur = (e) => {
+  const onBlur = (e: FocusEvent) => {
     if (isMenuOpen(state) && !e.currentTarget.contains(e.relatedTarget || document.activeElement)) {
       safeCall(onClose, { reason: CloseReason.BLUR });
 
       // If a user clicks on the menu button when a menu is open, we need to close the menu.
       // However, a blur event will be fired prior to the click event on menu button,
       // which makes the menu first close and then open again.
-      // If this happen, e.relatedTarget is incorrectly set to null instead of the button in Safari and Firefox,
+      // If this happens, e.relatedTarget is incorrectly set to null instead of the button in Safari and Firefox,
       // and makes it difficult to determine whether onBlur is fired because of clicking on menu button.
       // This is a workaround approach which sets a flag to skip a following click event.
       if (skipOpen) {
@@ -230,31 +236,20 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
     </div>
   );
 
-  if (portal === true && anchorRef.current !== undefined) {
-    portal = { target: anchorRef.current.ownerDocument.body };
+  if (portal === true && anchorRef?.current !== undefined) {
+    portal = { target: anchorRef.current.ownerDocument.body } as PortalFieldType;
   }
 
-  if (portal === true && typeof document !== "undefined") {
-    return createPortal(menuList, document.body);
-  } else if (portal) {
-    return portal.target ? createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+  if (portal) {
+    if (typeof portal === "boolean") {
+      if (portal && typeof document !== "undefined") {
+        return createPortal(menuList, document.body);
+      }
+    } else {
+      return portal.target ? createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+    }
   }
   return menuList;
-});
-
-ControlledMenu.propTypes /* remove-proptypes */ = {
-  ...rootMenuPropTypes,
-  state: oneOf(values(MenuStateMap)),
-  anchorPoint: exact({
-    x: number,
-    y: number,
-  }),
-  anchorRef: object,
-  skipOpen: object,
-  captureFocus: bool,
-  menuItemFocus: exact({
-    position: oneOfType([string, number]),
-    alwaysUpdate: bool,
-  }),
-  onClose: func,
 };
+
+export const ControlledMenu = forwardRef(ControlledMenuFr);

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

@@ -1,6 +1,4 @@
-// @ts-nocheck
-import { useContext, useMemo, useRef } from "react";
-import { bool, func } from "prop-types";
+import { LegacyRef, useContext, useMemo, useRef } from "react";
 import { useBEM, useCombinedRef, useItemState } from "../hooks";
 import {
   mergeProps,
@@ -8,63 +6,70 @@ import {
   safeCall,
   menuClass,
   menuItemClass,
-  stylePropTypes,
   withHovering,
   EventHandlersContext,
 } from "../utils";
+import { BaseProps } from "../types";
+import { withHoveringResultProps } from "../utils/withHovering";
 
-export const FocusableItem = withHovering(
-  "FocusableItem",
-  function FocusableItem({ className, disabled, children, isHovering, itemRef, externalRef, ...restProps }) {
-    const isDisabled = !!disabled;
-    const ref = useRef(null);
-    const { setHover, onPointerLeave, ...restStateProps } = useItemState(itemRef, ref, isHovering, isDisabled);
-    const { handleClose } = useContext(EventHandlersContext);
+export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
+  disabled?: boolean;
+  children: (ref: LegacyRef<any>) => JSX.Element;
+}
 
-    const modifiers = useMemo(
-      () => ({
-        disabled: isDisabled,
-        hover: isHovering,
-        focusable: true,
-      }),
-      [isDisabled, isHovering],
-    );
+export const FocusableItemFr = ({
+  className,
+  disabled,
+  children,
+  isHovering,
+  menuItemRef,
+  externalRef,
+  ...restProps
+}: FocusableItemProps) => {
+  const isDisabled = !!disabled;
+  const ref = useRef(null);
+  const { setHover, onPointerLeave, ...restStateProps } = useItemState(menuItemRef, ref, isHovering, isDisabled);
+  const { handleClose } = useContext(EventHandlersContext);
 
-    const renderChildren = useMemo(
-      () =>
-        safeCall(children, {
-          ...modifiers,
-          ref,
-          closeMenu: handleClose,
-        }),
-      [children, modifiers, handleClose],
-    );
+  const modifiers = useMemo(
+    () => ({
+      disabled: isDisabled,
+      hover: isHovering,
+      focusable: true,
+    }),
+    [isDisabled, isHovering],
+  );
 
-    const mergedProps = mergeProps(
-      {
-        ...restStateProps,
-        onPointerLeave: (e) => onPointerLeave(e, true),
-        onFocus: setHover,
-      },
-      restProps,
-    );
+  const renderChildren = useMemo(
+    () =>
+      safeCall(children, {
+        ...modifiers,
+        ref,
+        closeMenu: handleClose,
+      }),
+    [children, modifiers, handleClose],
+  );
 
-    return (
-      <li
-        role="menuitem"
-        {...mergedProps}
-        {...commonProps(isDisabled)}
-        ref={useCombinedRef(externalRef, itemRef)}
-        className={useBEM({ block: menuClass, element: menuItemClass, modifiers, className })}
-      >
-        {renderChildren}
-      </li>
-    );
-  },
-);
+  const mergedProps = mergeProps(
+    {
+      ...restStateProps,
+      onPointerLeave: (e: PointerEvent) => onPointerLeave(e, true),
+      onFocus: setHover,
+    },
+    restProps,
+  );
 
-FocusableItem.propTypes = {
-  ...stylePropTypes(),
-  disabled: bool,
-  children: func,
+  return (
+    <li
+      role="menuitem"
+      {...mergedProps}
+      {...commonProps(isDisabled)}
+      ref={useCombinedRef(externalRef, menuItemRef)}
+      className={useBEM({ block: menuClass, element: menuItemClass, modifiers, className })}
+    >
+      {renderChildren}
+    </li>
+  );
 };
+
+export const FocusableItem = withHovering("FocusableItem", FocusableItemFr);