@linzjs/step-ag-grid 1.4.2 → 1.4.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.4.2",
+  "version": "1.4.5",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
@@ -14,7 +14,14 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17",
+    "ag-grid-community": ">=27",
+    "ag-grid-react": ">=27",
+    "@linzjs/lui": ">=17"
   },
   "dependencies": {
     "@linzjs/lui": "^17.18.2",
@@ -24,7 +31,9 @@
     "lodash-es": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "prop-types": "^15.8.1",
+    "react-transition-state": "^1.1.5"
   },
   "scripts": {
     "build": "rollup -c && npm run",
@@ -56,16 +65,15 @@
     ]
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.2",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "@semantic-release/changelog": "^6.0.1",
     "@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-mock": "^2.4.1",
     "@storybook/jest": "^0.0.10",
     "@storybook/react": "6.5.13",
     "@storybook/test-runner": "^0.9.0",
@@ -77,8 +85,8 @@
     "@types/jest": "^29.2.0",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^18.11.7",
-    "@types/react": "^18.0.23",
-    "@types/react-dom": "^18.0.7",
+    "@types/react": "^17.0.52",
+    "@types/react-dom": "^17.0.18",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/parser": "^5.41.0",
     "babel-jest": "^26.6.3",
@@ -108,6 +116,7 @@
     "sass": "^1.55.0",
     "sass-loader": "10.1.1",
     "semantic-release": "^19.0.5",
+    "storybook-addon-mock": "^2.4.1",
     "style-loader": "^2.0.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4"

package/src/components/GridLoadableCell.scss

@@ -0,0 +1,4 @@
+.GridLoadableCell-container {
+  display: flex;
+  align-items: center;
+}

package/src/components/GridLoadableCell.tsx

@@ -1,9 +1,13 @@
+import "./GridLoadableCell.scss";
+
 import { LuiMiniSpinner } from "@linzjs/lui";
+import clsx from "clsx";
 
 export const GridLoadableCell = (props: {
   isLoading: boolean;
   dataTestId?: string;
   children: JSX.Element | string;
+  className?: string;
 }): JSX.Element => {
   // console.log(`Rendering LoadableCell - loading: ${props.isLoading}`);
   if (props.isLoading) {
@@ -15,7 +19,7 @@ export const GridLoadableCell = (props: {
   }
   // only add test id into ONE of the columns in a grid. this way each row will have one unique id :)
   return (
-    <div data-testid={props.dataTestId} style={{ display: "flex", alignItems: "center" }}>
+    <div data-testid={props.dataTestId} className={clsx("GridLoadableCell-container", props.className)}>
       {props.children}
     </div>
   );

package/src/components/GridPopoverHook.tsx

@@ -1,11 +1,9 @@
 import { ICellEditorParams } from "ag-grid-community";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "@contexts/GridContext";
-import { ControlledMenu } from "@szhsin/react-menu";
 import { GridFormProps } from "./GridCell";
-import { hasParentClass } from "@utils/util";
 import { GridBaseRow } from "./Grid";
-import { isEmpty } from "lodash-es";
+import { ControlledMenu } from "../react-menu3";
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(
   props: GridFormProps<RowType>,
@@ -33,51 +31,6 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
     [save, stopEditing, updateValue],
   );
 
-  const clickIsWithinMenu = useCallback((ev: MouseEvent) => {
-    return hasParentClass("szh-menu--state-open", ev.target as Node);
-  }, []);
-
-  const handleScreenMouseDown = useCallback(
-    (ev: MouseEvent) => {
-      if (!clickIsWithinMenu(ev)) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        // There's an issue in React17
-        // 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 an invisible button in the dropdown
-        saveButtonRef.current?.click();
-      }
-    },
-    [clickIsWithinMenu],
-  );
-
-  const handleScreenMouseEvent = useCallback(
-    (ev: MouseEvent) => {
-      if (!clickIsWithinMenu(ev)) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-    },
-    [clickIsWithinMenu],
-  );
-
-  useEffect(() => {
-    if (isOpen) {
-      document.addEventListener("mousedown", handleScreenMouseDown, true);
-      document.addEventListener("mouseup", handleScreenMouseEvent, true);
-      document.addEventListener("click", handleScreenMouseEvent, true);
-      document.addEventListener("dblclick", handleScreenMouseEvent, true);
-      return () => {
-        document.removeEventListener("mousedown", handleScreenMouseDown, true);
-        document.removeEventListener("mouseup", handleScreenMouseEvent, true);
-        document.removeEventListener("click", handleScreenMouseEvent, true);
-        document.removeEventListener("dblclick", handleScreenMouseEvent, true);
-      };
-    }
-    return () => {};
-  }, [handleScreenMouseDown, handleScreenMouseEvent, isOpen]);
-
   const popoverWrapper = useCallback(
     (children: JSX.Element) => {
       return (
@@ -85,11 +38,12 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
           {anchorRef.current && (
             <ControlledMenu
               state={isOpen ? "open" : "closed"}
-              portal={isEmpty(document.querySelectorAll(".PopoutWindowContainer"))}
+              portal={true}
               unmountOnClose={true}
               anchorRef={anchorRef}
+              saveButtonRef={saveButtonRef}
               menuClassName={"lui-menu"}
-              onClose={(event) => triggerSave(event.reason).then()}
+              onClose={(event: { reason: string }) => triggerSave(event.reason).then()}
             >
               {saving && (
                 <div

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,6 +1,6 @@
-import "@szhsin/react-menu/dist/index.css";
+import "../../react-menu3/styles/index.scss";
 
-import { MenuItem, MenuDivider, FocusableItem } from "@szhsin/react-menu";
+import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
 import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
@@ -182,7 +182,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
               <MenuDivider key={`$$divider_${index}`} />
             ) : filteredValues.includes(item.value) ? null : (
               <MenuItem
-                key={`${item.value}`}
+                key={`${props.field}-${index}`}
                 disabled={!!item.disabled}
                 title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                 value={item.value}

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,6 +1,6 @@
-import "@szhsin/react-menu/dist/index.css";
+import "../../react-menu3/styles/index.scss";
 
-import { MenuItem, MenuDivider, FocusableItem } from "@szhsin/react-menu";
+import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
@@ -137,7 +137,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
             <>
               <MenuItem
                 key={`${item.value}`}
-                onClick={(e) => {
+                onClick={(e: { keepOpen: boolean }) => {
                   e.keepOpen = true;
                   // onSelectMenuOption(itemIndex, e.value);
                   return false;
@@ -158,7 +158,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
               </MenuItem>
               {selectedValues.includes(item.value) && item.subComponent && (
                 <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
-                  {(ref) =>
+                  {(ref: any) =>
                     item.subComponent &&
                     item.subComponent(
                       {

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -2,7 +2,7 @@ import { GridBaseRow } from "../Grid";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "@contexts/GridContext";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { MenuDivider, MenuItem } from "@szhsin/react-menu";
+import { MenuDivider, MenuItem } from "@react-menu3";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 

package/src/components/gridPopoverEdit/GridPopoverMenu.scss

@@ -1,7 +1,11 @@
 @use 'node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
-.GridPopoutMenu-burger svg {
-  fill: lui.$sea;
+.GridPopoutMenu-burger {
+  cursor: pointer;
+
+  & svg {
+    fill: lui.$sea;
+  }
 }
 
 .GridPopoutMenu-burgerDisabled svg {

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -1,5 +1,5 @@
 import "./GridPopoverMenu.scss";
-import "@szhsin/react-menu/dist/index.css";
+import "../../react-menu3/styles/index.scss";
 
 import { ColDef } from "ag-grid-community";
 import { GenericMultiEditCellClass } from "../GenericCellClass";

package/src/components/gridRender/GridRenderPopoutMenuCell.tsx

@@ -1,6 +1,6 @@
-import { ICellRendererParams } from "ag-grid-community";
 import { useContext } from "react";
-import { UpdatingContext } from "../../contexts/UpdatingContext";
+import { ICellRendererParams } from "ag-grid-community";
+import { UpdatingContext } from "@contexts/UpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { LuiIcon } from "@linzjs/lui";
 
@@ -10,13 +10,11 @@ export const GridRenderPopoutMenuCell = (props: ICellRendererParams) => {
   const disabled = !props.colDef?.editable;
 
   return (
-    <GridLoadableCell isLoading={isLoading}>
-      <LuiIcon
-        name={"ic_more_vert"}
-        alt={"More actions"}
-        size={"md"}
-        className={disabled ? `GridPopoutMenu-burgerDisabled` : `GridPopoutMenu-burger`}
-      />
+    <GridLoadableCell
+      isLoading={isLoading}
+      className={disabled ? `GridPopoutMenu-burgerDisabled` : `GridPopoutMenu-burger`}
+    >
+      <LuiIcon name={"ic_more_vert"} alt={"More actions"} size={"md"} />
     </GridLoadableCell>
   );
 };

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

@@ -0,0 +1,260 @@
+// @ts-nocheck
+import { forwardRef, useRef, useMemo, useCallback, useEffect } 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";
+
+export const ControlledMenu = forwardRef(function ControlledMenu(
+  {
+    "aria-label": ariaLabel,
+    className,
+    containerProps,
+    initialMounted,
+    unmountOnClose,
+    transition,
+    transitionTimeout,
+    boundingBoxRef,
+    boundingBoxPadding,
+    reposition = "auto",
+    submenuOpenDelay = 300,
+    submenuCloseDelay = 150,
+    skipOpen,
+    viewScroll = "initial",
+    portal,
+    theming,
+    onItemClick,
+    onClose,
+    saveButtonRef,
+    ...restProps
+  }: any,
+  externalRef,
+) {
+  const containerRef = useRef(null);
+  const scrollNodesRef = useRef({});
+  const { anchorRef, state } = restProps;
+
+  const settings = useMemo(
+    () => ({
+      initialMounted,
+      unmountOnClose,
+      transition,
+      transitionTimeout,
+      boundingBoxRef,
+      boundingBoxPadding,
+      rootMenuRef: containerRef,
+      rootAnchorRef: anchorRef,
+      scrollNodesRef,
+      reposition,
+      viewScroll,
+    }),
+    [
+      initialMounted,
+      unmountOnClose,
+      transition,
+      transitionTimeout,
+      anchorRef,
+      boundingBoxRef,
+      boundingBoxPadding,
+      reposition,
+      viewScroll,
+    ],
+  );
+
+  const clickIsWithinMenu = useCallback((ev: MouseEvent) => {
+    return hasParentClass("szh-menu--state-open", ev.target as Node);
+  }, []);
+
+  const handleScreenEventForSave = useCallback(
+    (ev: MouseEvent) => {
+      if (!clickIsWithinMenu(ev)) {
+        //!ev.currentTarget.contains(ev.relatedTarget || document.activeElement)) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        // FIXME There's an issue in React17
+        // 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();
+        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.
+        // 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 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) {
+          skipOpen.current = true;
+          setTimeout(() => (skipOpen.current = false), 300);
+        }
+      }
+    },
+    [clickIsWithinMenu, onClose],
+  );
+
+  const handleScreenEventForCancel = useCallback(
+    (ev: MouseEvent) => {
+      if (!clickIsWithinMenu(ev)) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    },
+    [clickIsWithinMenu],
+  );
+
+  useEffect(() => {
+    if (isMenuOpen(state)) {
+      const thisDocument = anchorRef.current ? anchorRef.current.ownerDocument : document;
+      thisDocument.addEventListener("mousedown", handleScreenEventForCancel, true);
+      thisDocument.addEventListener("mouseup", handleScreenEventForSave, true);
+      thisDocument.addEventListener("click", handleScreenEventForCancel, true);
+      thisDocument.addEventListener("dblclick", handleScreenEventForCancel, true);
+      return () => {
+        thisDocument.removeEventListener("mousedown", handleScreenEventForCancel, true);
+        thisDocument.removeEventListener("mouseup", handleScreenEventForSave, true);
+        thisDocument.removeEventListener("click", handleScreenEventForCancel, true);
+        thisDocument.removeEventListener("dblclick", handleScreenEventForCancel, true);
+      };
+    }
+    return () => {};
+  }, [handleScreenEventForSave, handleScreenEventForCancel, state]);
+
+  const itemSettings = useMemo(
+    () => ({
+      submenuOpenDelay,
+      submenuCloseDelay,
+    }),
+    [submenuOpenDelay, submenuCloseDelay],
+  );
+
+  const eventHandlers = useMemo(
+    () => ({
+      handleClick(event, isCheckorRadio) {
+        if (!event.stopPropagation) safeCall(onItemClick, event);
+
+        let keepOpen = event.keepOpen;
+        if (keepOpen === undefined) {
+          // 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;
+        }
+
+        if (!keepOpen) {
+          safeCall(onClose, {
+            value: event.value,
+            key: event.key,
+            reason: CloseReason.CLICK,
+          });
+        }
+      },
+
+      handleClose(key) {
+        safeCall(onClose, { key, reason: CloseReason.CLICK });
+      },
+    }),
+    [onItemClick, onClose],
+  );
+
+  const onKeyDown = ({ key }) => {
+    switch (key) {
+      case Keys.ESC:
+        safeCall(onClose, { key, reason: CloseReason.CANCEL });
+        break;
+    }
+  };
+
+  const onBlur = (e) => {
+    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,
+      // 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) {
+        skipOpen.current = true;
+        setTimeout(() => (skipOpen.current = false), 300);
+      }
+    }
+  };
+
+  const itemTransition = getTransition(transition, "item");
+  const modifiers = useMemo(() => ({ theme: theming, itemTransition }), [theming, itemTransition]);
+
+  const menuList = (
+    <div
+      {...mergeProps({ onKeyDown, onBlur }, containerProps)}
+      className={useBEM({
+        block: menuContainerClass,
+        modifiers,
+        className,
+      })}
+      style={{ ...containerProps?.style, position: "relative" }}
+      ref={containerRef}
+    >
+      {state && (
+        <SettingsContext.Provider value={settings}>
+          <ItemSettingsContext.Provider value={itemSettings}>
+            <EventHandlersContext.Provider value={eventHandlers}>
+              <MenuList
+                {...restProps}
+                ariaLabel={ariaLabel || "Menu"}
+                externalRef={externalRef}
+                containerRef={containerRef}
+                onClose={onClose}
+              />
+            </EventHandlersContext.Provider>
+          </ItemSettingsContext.Provider>
+        </SettingsContext.Provider>
+      )}
+    </div>
+  );
+
+  if (portal === true && anchorRef.current !== undefined) {
+    portal = { target: anchorRef.current.ownerDocument.body };
+  }
+
+  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;
+  }
+  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,
+};

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

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import { useContext, useMemo, useRef } from "react";
+import { bool, func } from "prop-types";
+import { useBEM, useCombinedRef, useItemState } from "../hooks";
+import {
+  mergeProps,
+  commonProps,
+  safeCall,
+  menuClass,
+  menuItemClass,
+  stylePropTypes,
+  withHovering,
+  EventHandlersContext,
+} from "../utils";
+
+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);
+
+    const modifiers = useMemo(
+      () => ({
+        disabled: isDisabled,
+        hover: isHovering,
+        focusable: true,
+      }),
+      [isDisabled, isHovering],
+    );
+
+    const renderChildren = useMemo(
+      () =>
+        safeCall(children, {
+          ...modifiers,
+          ref,
+          closeMenu: handleClose,
+        }),
+      [children, modifiers, handleClose],
+    );
+
+    const mergedProps = mergeProps(
+      {
+        ...restStateProps,
+        onPointerLeave: (e) => onPointerLeave(e, true),
+        onFocus: setHover,
+      },
+      restProps,
+    );
+
+    return (
+      <li
+        role="menuitem"
+        {...mergedProps}
+        {...commonProps(isDisabled)}
+        ref={useCombinedRef(externalRef, itemRef)}
+        className={useBEM({ block: menuClass, element: menuItemClass, modifiers, className })}
+      >
+        {renderChildren}
+      </li>
+    );
+  },
+);
+
+FocusableItem.propTypes = {
+  ...stylePropTypes(),
+  disabled: bool,
+  children: func,
+};