@linzjs/step-ag-grid 1.4.5 → 1.4.7

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { useState, useReducer, useEffect, useRef, useMemo, useCallback, useContext } from "react";
 import { flushSync } from "react-dom";
 import { useBEM, useCombinedRef, useLayoutEffect, useItems } from "../hooks";
@@ -23,6 +22,7 @@ import {
   MenuListItemContext,
   HoverItemContext,
 } from "../utils";
+import { ControlledMenuProps, MenuDirection } from "../types";
 
 export const MenuList = ({
   ariaLabel,
@@ -52,10 +52,10 @@ export const MenuList = ({
   children,
   onClose,
   ...restProps
-}) => {
+}: ControlledMenuProps) => {
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
-  const [arrowPosition, setArrowPosition] = useState({});
-  const [overflowData, setOverflowData] = useState();
+  const [arrowPosition, setArrowPosition] = useState({ x: 0, y: 0 });
+  const [overflowData, setOverflowData] = useState<{ height: number; overflowAmt: number | undefined }>();
   const [expandedDirection, setExpandedDirection] = useState(direction);
   const [openSubmenuCount, setOpenSubmenuCount] = useState(0);
   const [reposSubmenu, forceReposSubmenu] = useReducer((c) => c + 1, 1);
@@ -70,9 +70,9 @@ export const MenuList = ({
     viewScroll,
   } = useContext(SettingsContext);
   const reposFlag = useContext(MenuListContext).reposSubmenu || repositionFlag;
-  const menuRef = useRef(null);
-  const focusRef = useRef();
-  const arrowRef = useRef();
+  const menuRef = useRef<HTMLUListElement>({} as HTMLUListElement);
+  const focusRef = useRef<HTMLDivElement>(null);
+  const arrowRef = useRef<HTMLDivElement>(null);
   const prevOpen = useRef(false);
   const latestMenuSize = useRef({ width: 0, height: 0 });
   const latestHandlePosition = useRef(() => {});
@@ -83,34 +83,37 @@ export const MenuList = ({
   const closeTransition = getTransition(transition, "close");
   const scrollNodes = scrollNodesRef.current;
 
-  const onKeyDown = (e) => {
+  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    const elementTarget = e.target instanceof HTMLElement ? (e.target as HTMLElement) : null;
     const isTextInputTarget =
-      e.target.nodeName === "TEXTAREA" || (e.target.nodeName === "INPUT" && e.target.getAttribute("type") === "text");
+      elementTarget &&
+      (elementTarget.nodeName === "TEXTAREA" ||
+        (elementTarget.nodeName === "INPUT" && elementTarget.getAttribute("type") === "text"));
     switch (e.key) {
       case Keys.HOME:
         // Don't eat home/end events on inputs
         if (isTextInputTarget) return;
-        dispatch(HoverActionTypes.FIRST);
+        dispatch(HoverActionTypes.FIRST, null, 0);
         break;
 
       case Keys.END:
         // Don't eat home/end events on inputs
         if (isTextInputTarget) return;
-        dispatch(HoverActionTypes.LAST);
+        dispatch(HoverActionTypes.LAST, null, 0);
         break;
 
       case Keys.UP:
-        dispatch(HoverActionTypes.DECREASE, hoverItem);
+        dispatch(HoverActionTypes.DECREASE, hoverItem, 0);
         break;
 
       case Keys.DOWN:
-        dispatch(HoverActionTypes.INCREASE, hoverItem);
+        dispatch(HoverActionTypes.INCREASE, hoverItem, 0);
         break;
 
       // prevent browser from scrolling the page when SPACE is pressed
       case Keys.SPACE:
         // Don't preventDefault on children of FocusableItem
-        if (e.target && e.target.className.indexOf(menuClass) !== -1) {
+        if (elementTarget && elementTarget.className.includes(menuClass)) {
           e.preventDefault();
         }
         return;
@@ -125,15 +128,15 @@ export const MenuList = ({
 
   const onAnimationEnd = () => {
     if (state === "closing") {
-      setOverflowData(); // reset overflowData after closing
+      setOverflowData(undefined); // reset overflowData after closing
     }
 
-    safeCall(endTransition);
+    endTransition && safeCall(endTransition);
   };
 
   const handlePosition = useCallback(
-    (noOverflowCheck) => {
-      if (!containerRef.current) {
+    (noOverflowCheck?: boolean) => {
+      if (!containerRef?.current) {
         if (process.env.NODE_ENV !== "production") {
           console.error(
             '[React-Menu] Menu cannot be positioned properly as container ref is null. If you need to initialise `state` prop to "open" for ControlledMenu, please see this solution: https://codesandbox.io/s/initial-open-sp10wn',
@@ -146,12 +149,16 @@ export const MenuList = ({
         scrollNodes.menu =
           (boundingBoxRef
             ? boundingBoxRef.current // user explicitly sets boundingBoxRef
-            : getScrollAncestor(rootMenuRef.current)) || window; // try to discover bounding box automatically
+            : getScrollAncestor(rootMenuRef?.current)) || window; // try to discover bounding box automatically
       }
 
       const positionHelpers = getPositionHelpers(containerRef, menuRef, scrollNodes.menu, boundingBoxPadding);
       const { menuRect } = positionHelpers;
-      let results = { computedDirection: "bottom" };
+      let results: { computedDirection: MenuDirection; arrowX?: number; arrowY?: number; x: number; y: number } = {
+        computedDirection: "bottom",
+        x: 0,
+        y: 0,
+      };
       if (anchorPoint) {
         results = positionContextMenu({ positionHelpers, anchorPoint });
       } else if (anchorRef) {
@@ -167,13 +174,14 @@ export const MenuList = ({
           positionHelpers,
         });
       }
-      let { arrowX, arrowY, x, y, computedDirection } = results;
+      let { y } = results;
+      const { x, arrowX, arrowY, computedDirection } = results;
       let menuHeight = menuRect.height;
 
       if (!noOverflowCheck && overflow !== "visible") {
         const { getTopOverflow, getBottomOverflow } = positionHelpers;
 
-        let height, overflowAmt;
+        let height: number | undefined, overflowAmt: number | undefined;
         const prevHeight = latestMenuSize.current.height;
         const bottomOverflow = getBottomOverflow(y);
         // When bottomOverflow is 0, menu is on the bottom edge of viewport
@@ -192,16 +200,16 @@ export const MenuList = ({
           }
         }
 
-        if (height >= 0) {
+        if (height != null && height >= 0) {
           // To avoid triggering reposition in the next ResizeObserver callback
           menuHeight = height;
           setOverflowData({ height, overflowAmt });
         } else {
-          setOverflowData();
+          setOverflowData(undefined);
         }
       }
 
-      if (arrow) setArrowPosition({ x: arrowX, y: arrowY });
+      if (arrow) setArrowPosition({ x: arrowX ?? 0, y: arrowY ?? 0 });
       setMenuPosition({ x, y });
       setExpandedDirection(computedDirection);
       latestMenuSize.current = { width: menuRect.width, height: menuHeight };
@@ -267,11 +275,11 @@ export const MenuList = ({
     };
 
     const scrollObservers = scrollNodes.anchors.concat(viewScroll !== "initial" ? menuScroll : []);
-    scrollObservers.forEach((o) => o.addEventListener("scroll", handleScroll));
+    scrollObservers.forEach((o: any) => o.addEventListener("scroll", handleScroll));
     return () => scrollObservers.forEach((o) => o.removeEventListener("scroll", handleScroll));
   }, [rootAnchorRef, scrollNodes, isOpen, onClose, viewScroll, handlePosition]);
 
-  const hasOverflow = !!overflowData && overflowData.overflowAmt > 0;
+  const hasOverflow = !!overflowData && overflowData.overflowAmt != null && overflowData.overflowAmt > 0;
   useEffect(() => {
     if (hasOverflow || !isOpen || !parentScrollingRef) return;
 
@@ -313,18 +321,18 @@ export const MenuList = ({
 
   useEffect(() => {
     if (!isOpen) {
-      dispatch(HoverActionTypes.RESET);
-      if (!closeTransition) setOverflowData();
-      return;
+      dispatch(HoverActionTypes.RESET, undefined, 0);
+      if (!closeTransition) setOverflowData(undefined);
+      return () => {};
     }
 
     const { position, alwaysUpdate } = menuItemFocus || {};
     const setItemFocus = () => {
       if (position === FocusPositions.FIRST) {
-        dispatch(HoverActionTypes.FIRST);
+        dispatch(HoverActionTypes.FIRST, undefined, 0);
       } else if (position === FocusPositions.LAST) {
-        dispatch(HoverActionTypes.LAST);
-      } else if (position >= -1) {
+        dispatch(HoverActionTypes.LAST, undefined, 0);
+      } else if (typeof position === "number" && position >= -1) {
         dispatch(HoverActionTypes.SET_INDEX, undefined, position);
       }
     };
@@ -337,7 +345,22 @@ export const MenuList = ({
         () => {
           // If focus has already been set to a children element, don't set focus on menu or item
           if (!menuRef.current.contains(document.activeElement)) {
-            focusRef.current.focus();
+            // Handle popover portal focus
+            const popupElement = focusRef.current?.nextSibling;
+            if (popupElement instanceof Element) {
+              const input = popupElement.querySelectorAll("input,textarea")[0] as HTMLElement;
+              if (input) {
+                input.focus();
+                // Text areas should start at end
+                if (input instanceof HTMLTextAreaElement) {
+                  input.selectionStart = input.value.length;
+                }
+              } else {
+                focusRef.current?.focus();
+              }
+            } else {
+              focusRef.current?.focus();
+            }
             setItemFocus();
           }
         },
@@ -346,6 +369,7 @@ export const MenuList = ({
 
       return () => clearTimeout(id);
     }
+    return () => {};
   }, [isOpen, openTransition, closeTransition, captureFocus, menuItemFocus, dispatch]);
 
   const isSubmenuOpen = openSubmenuCount > 0;
@@ -360,7 +384,8 @@ export const MenuList = ({
     [isOpen, isSubmenuOpen, dispatch, updateItems],
   );
 
-  let maxHeight, overflowAmt;
+  let maxHeight: number | undefined;
+  let overflowAmt: number | undefined;
   if (overflowData) {
     setDownOverflow ? (overflowAmt = overflowData.overflowAmt) : (maxHeight = overflowData.height);
   }
@@ -375,7 +400,7 @@ export const MenuList = ({
     }),
     [reposSubmenu, overflow, overflowAmt, expandedDirection],
   );
-  const overflowStyle = maxHeight >= 0 ? { maxHeight, overflow } : undefined;
+  const overflowStyle = maxHeight != null && maxHeight >= 0 ? { maxHeight, overflow } : undefined;
 
   const modifiers = useMemo(
     () => ({

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

@@ -1,13 +1,57 @@
-// @ts-nocheck
-import { forwardRef, useMemo } from "react";
-import { any, string, func } from "prop-types";
+import { ForwardedRef, forwardRef, ReactNode, useMemo } from "react";
 import { useBEM } from "../hooks";
-import { stylePropTypes, menuClass, radioGroupClass, RadioGroupContext } from "../utils";
+import { menuClass, radioGroupClass, RadioGroupContext } from "../utils";
+import { BaseProps, Event, EventHandler } from "../types";
 
-export const MenuRadioGroup = forwardRef(function MenuRadioGroup(
-  { "aria-label": ariaLabel, className, name, value, onRadioChange, ...restProps },
-  externalRef,
-) {
+export interface RadioChangeEvent extends Event {
+  /**
+   * The `name` prop passed to the `MenuRadioGroup` when the menu item is in a radio group.
+   */
+  name?: string;
+  /**
+   * Set this property on event object to control whether to keep menu open after menu item is activated.
+   * Leaving it `undefined` will behave in accordance with WAI-ARIA Authoring Practices.
+   */
+  keepOpen?: boolean;
+  /**
+   * Setting this property on event object to `true` will skip `onItemClick` event on root menu component.
+   */
+  stopPropagation?: boolean;
+  /**
+   * DOM event object (React synthetic event)
+   */
+  syntheticEvent: MouseEvent | KeyboardEvent;
+}
+
+//
+// MenuRadioGroup
+// ----------------------------------------------------------------------
+export interface MenuRadioGroupProps extends BaseProps {
+  /**
+   * Optionally set the radio group name.
+   *
+   * The name will be passed to the `onRadioChange` event.
+   * It's useful for identifying radio groups if you attach the same event handler to multiple groups.
+   */
+  name?: string;
+  /**
+   * Set value of the radio group.
+   *
+   * The child menu item which has the same value (strict equality ===) as the
+   * radio group is marked as checked.
+   */
+  value?: any;
+  children?: ReactNode;
+  /**
+   * Event fired when a child menu item is clicked (selected).
+   */
+  onRadioChange?: EventHandler<RadioChangeEvent>;
+}
+
+export const MenuRadioGroupFr = (
+  { "aria-label": ariaLabel, className, name, value, onRadioChange, ...restProps }: MenuRadioGroupProps,
+  externalRef: ForwardedRef<HTMLUListElement>,
+) => {
   const contextValue = useMemo(() => ({ name, value, onRadioChange }), [name, value, onRadioChange]);
 
   return (
@@ -23,11 +67,6 @@ export const MenuRadioGroup = forwardRef(function MenuRadioGroup(
       </li>
     </RadioGroupContext.Provider>
   );
-});
-
-MenuRadioGroup.propTypes = {
-  ...stylePropTypes(),
-  name: string,
-  value: any,
-  onRadioChange: func,
 };
+
+export const MenuRadioGroup = forwardRef(MenuRadioGroupFr);