@linzjs/step-ag-grid 1.4.5 → 1.4.6

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

@@ -1,130 +1,183 @@
-// @ts-nocheck
-import { useContext, useMemo } from "react";
-import { any, string, bool, func, node, oneOf, oneOfType } from "prop-types";
+import { Ref, useContext, useMemo } from "react";
 import { useBEM, useItemState, useCombinedRef } from "../hooks";
 import {
   mergeProps,
   commonProps,
   safeCall,
-  stylePropTypes,
   menuClass,
   menuItemClass,
   withHovering,
   EventHandlersContext,
   RadioGroupContext,
   Keys,
+  RMEvent,
 } from "../utils";
+import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../index";
+import { withHoveringResultProps } from "../utils/withHovering";
 
-export const MenuItem = withHovering(
-  "MenuItem",
-  function MenuItem({
-    className,
-    value,
-    href,
-    type,
-    checked,
-    disabled,
-    children,
-    onClick,
-    isHovering,
-    itemRef,
-    externalRef,
-    ...restProps
-  }) {
-    const isDisabled = !!disabled;
-    const { setHover, ...restStateProps } = useItemState(itemRef, itemRef, isHovering, isDisabled);
-    const eventHandlers = useContext(EventHandlersContext);
-    const radioGroup = useContext(RadioGroupContext);
-    const isRadio = type === "radio";
-    const isCheckBox = type === "checkbox";
-    const isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
-    const isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
+//
+// MenuItem
+// ----------------------------------------------------------------------
+export type MenuItemModifiers = Readonly<{
+  /**
+   * 'radio' for radio item, 'checkbox' for checkbox item, or `undefined` for other items.
+   */
+  type?: MenuItemTypeProp;
+  /**
+   * Indicates if the menu item is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Indicates if the menu item is being hovered and has focus.
+   */
+  hover: boolean;
+  /**
+   * Indicates if the menu item is checked when it's a radio or checkbox item.
+   */
+  checked: boolean;
+  /**
+   * Indicates if the menu item has a URL link.
+   */
+  anchor: boolean;
+}>;
 
-    const handleClick = (e) => {
-      if (isDisabled) {
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
+export interface MenuItemProps extends Omit<BaseProps<MenuItemModifiers>, "onClick">, Hoverable {
+  /**
+   * Any value provided to this prop will be available in the event object of click events.
+   *
+   * It's useful for helping identify which menu item is clicked when you
+   * listen on `onItemClick` event on root menu component.
+   */
+  value?: any;
+  /**
+   * If provided, menu item renders an HTML `<a>` element with this `href` attribute.
+   */
+  href?: string;
+  rel?: string;
+  target?: string;
+  /**
+   * Set this prop to make the item a checkbox or radio menu item.
+   */
+  type?: MenuItemTypeProp;
+  /**
+   * Set `true` if a checkbox menu item is checked.
+   *
+   * *Please note radio menu item doesn't use this prop.*
+   */
+  checked?: boolean;
+  /**
+   * Event fired when the menu item is clicked.
+   */
+  onClick?: EventHandler<ClickEvent>;
+  /**
+   * Any valid React node or a render function that returns one.
+   */
+  children?: RenderProp<MenuItemModifiers>;
+}
 
-      const event = { value, syntheticEvent: e };
-      if (e.key !== undefined) event.key = e.key;
-      if (isCheckBox) event.checked = !isChecked;
-      if (isRadio) event.name = radioGroup.name;
-      safeCall(onClick, event);
-      if (isRadio) safeCall(radioGroup.onRadioChange, event);
-      eventHandlers.handleClick(event, isCheckBox || isRadio);
-    };
+const MenuItemFr = ({
+  className,
+  value,
+  href,
+  type,
+  checked,
+  disabled,
+  children,
+  onClick,
+  isHovering,
+  menuItemRef,
+  externalRef,
+  ...restProps
+}: MenuItemProps & withHoveringResultProps) => {
+  const isDisabled = !!disabled;
+  const { setHover, ...restStateProps } = useItemState(menuItemRef, menuItemRef, isHovering, isDisabled);
+  const eventHandlers = useContext(EventHandlersContext);
+  const radioGroup = useContext(RadioGroupContext);
+  const isRadio = type === "radio";
+  const isCheckBox = type === "checkbox";
+  const isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
+  const isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
 
-    const handleKeyDown = (e) => {
-      if (!isHovering) return;
+  // FIXME handle click seems to be a combination of multiple event types
+  const handleClick = (e: any) => {
+    if (isDisabled) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
 
-      switch (e.key) {
-        case Keys.ENTER:
-        case Keys.SPACE:
-          if (isAnchor) {
-            itemRef.current.click();
-          } else {
-            handleClick(e);
-          }
-          break;
-      }
+    const event: RMEvent = {
+      value,
+      syntheticEvent: e,
     };
+    if (e.key !== undefined) event.key = e.key;
+    if (isCheckBox) event.checked = !isChecked;
+    if (isRadio) event.name = radioGroup.name;
+    safeCall(onClick, event);
+    if (isRadio) safeCall(radioGroup.onRadioChange, event);
+    eventHandlers.handleClick(event, isCheckBox || isRadio);
+  };
 
-    const modifiers = useMemo(
-      () => ({
-        type,
-        disabled: isDisabled,
-        hover: isHovering,
-        checked: isChecked,
-        anchor: isAnchor,
-      }),
-      [type, isDisabled, isHovering, isChecked, isAnchor],
-    );
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isHovering) return;
 
-    const mergedProps = mergeProps(
-      {
-        ...restStateProps,
-        onPointerDown: setHover,
-        onKeyDown: handleKeyDown,
-        onClick: handleClick,
-      },
-      restProps,
-    );
+    switch (e.key) {
+      case Keys.ENTER:
+      case Keys.SPACE:
+        if (isAnchor) {
+          menuItemRef?.current && menuItemRef.current.click();
+        } else {
+          handleClick(e);
+        }
+        break;
+    }
+  };
 
-    // Order of props overriding (same in all components):
-    // 1. Preset props adhering to WAI-ARIA Authoring Practices.
-    // 2. Merged outer and local props
-    // 3. ref, className
-    const menuItemProps = {
-      role: isRadio ? "menuitemradio" : isCheckBox ? "menuitemcheckbox" : "menuitem",
-      "aria-checked": isRadio || isCheckBox ? isChecked : undefined,
-      ...mergedProps,
-      ...commonProps(isDisabled, isHovering),
-      ref: useCombinedRef(externalRef, itemRef),
-      className: useBEM({ block: menuClass, element: menuItemClass, modifiers, className }),
-      children: useMemo(() => safeCall(children, modifiers), [children, modifiers]),
-    };
+  const modifiers = useMemo(
+    () => ({
+      type,
+      disabled: isDisabled,
+      hover: isHovering,
+      checked: isChecked,
+      anchor: isAnchor,
+    }),
+    [type, isDisabled, isHovering, isChecked, isAnchor],
+  );
 
-    if (isAnchor) {
-      return (
-        <li role="presentation">
-          <a href={href} {...menuItemProps} />
-        </li>
-      );
-    } else {
-      return <li {...menuItemProps} />;
-    }
-  },
-);
+  const mergedProps = mergeProps(
+    {
+      ...restStateProps,
+      onPointerDown: setHover,
+      onKeyDown: handleKeyDown,
+      onClick: handleClick,
+    },
+    restProps,
+  );
+
+  // Order of props overriding (same in all components):
+  // 1. Preset props adhering to WAI-ARIA Authoring Practices.
+  // 2. Merged outer and local props
+  // 3. ref, className
+  const menuItemProps = {
+    role: isRadio ? "menuitemradio" : isCheckBox ? "menuitemcheckbox" : "menuitem",
+    "aria-checked": isRadio || isCheckBox ? isChecked : undefined,
+    ...mergedProps,
+    ...commonProps(isDisabled, isHovering),
+    ref: useCombinedRef(externalRef as Ref<any>, menuItemRef),
+    className: useBEM({ block: menuClass, element: menuItemClass, modifiers, className }),
+    children: useMemo(() => safeCall(children, modifiers), [children, modifiers]),
+  };
 
-MenuItem.propTypes = {
-  ...stylePropTypes(),
-  value: any,
-  href: string,
-  type: oneOf(["checkbox", "radio"]),
-  checked: bool,
-  disabled: bool,
-  children: oneOfType([node, func]),
-  onClick: func,
+  if (isAnchor) {
+    return (
+      <li role="presentation">
+        <a href={href} {...menuItemProps} />
+      </li>
+    );
+  } else {
+    return <li {...menuItemProps} />;
+  }
 };
+
+// FIXME matt as any
+export const MenuItem = withHovering("MenuItem", MenuItemFr) as any as typeof MenuItemFr;

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

@@ -1,5 +1,4 @@
-// @ts-nocheck
-import { useState, useReducer, useEffect, useRef, useMemo, useCallback, useContext } from "react";
+import { useState, useReducer, useEffect, useRef, useMemo, useCallback, useContext, MutableRefObject } from "react";
 import { flushSync } from "react-dom";
 import { useBEM, useCombinedRef, useLayoutEffect, useItems } from "../hooks";
 import { getPositionHelpers, positionMenu, positionContextMenu } from "../positionUtils";
@@ -23,6 +22,65 @@ import {
   MenuListItemContext,
   HoverItemContext,
 } from "../utils";
+import { EventHandler, FocusPosition, MenuCloseEvent, MenuDirection, MenuState, RootMenuProps } from "../index";
+
+interface ExtraMenuProps {
+  isDisabled?: boolean;
+  ariaLabel?: string;
+  containerRef: MutableRefObject<HTMLElement>;
+  externalRef: MutableRefObject<HTMLUListElement>;
+  parentScrollingRef: MutableRefObject<any>;
+}
+
+//
+// ControlledMenu
+// ----------------------------------------------------------------------
+export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
+  /**
+   * Viewport coordinates to which context menu will be positioned.
+   *
+   * *Use this prop only for context menu*
+   */
+  anchorPoint?: {
+    x: number;
+    y: number;
+  };
+  /**
+   * A ref object attached to a DOM element to which menu will be positioned.
+   *
+   * *Don't set this prop for context menu*
+   */
+  anchorRef?: React.MutableRefObject<HTMLElement>;
+  skipOpen?: React.RefObject<boolean>;
+  /**
+   * If `true`, the menu list element will gain focus after menu is open.
+   * @default true
+   */
+  captureFocus?: boolean;
+  /**
+   * Controls the state of menu. When the prop is `undefined`, menu will be unmounted from DOM.
+   */
+  state?: MenuState;
+  /**
+   * Sets which menu item receives focus (hover) when menu opens.
+   * You will usually set this prop when the menu is opened by keyboard events.
+   *
+   * *Note: If you don't intend to update focus (hover) position,
+   * it's important to keep this prop's identity stable when your component re-renders.*
+   */
+  menuItemFocus?: {
+    position?: FocusPosition;
+    alwaysUpdate?: boolean;
+  };
+  /**
+   * Set the return value of `useMenuState` to this prop.
+   */
+  endTransition?: () => void;
+  /**
+   * Event fired when menu is about to close.
+   */
+  onClose?: EventHandler<MenuCloseEvent>;
+}
 
 export const MenuList = ({
   ariaLabel,
@@ -52,10 +110,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 +128,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 +141,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,14 +186,14 @@ 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) => {
+    (noOverflowCheck?: boolean) => {
       if (!containerRef.current) {
         if (process.env.NODE_ENV !== "production") {
           console.error(
@@ -146,12 +207,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 +232,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 +258,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 +333,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 +379,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 +403,7 @@ 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();
+            focusRef.current?.focus();
             setItemFocus();
           }
         },
@@ -346,6 +412,7 @@ export const MenuList = ({
 
       return () => clearTimeout(id);
     }
+    return () => {};
   }, [isOpen, openTransition, closeTransition, captureFocus, menuItemFocus, dispatch]);
 
   const isSubmenuOpen = openSubmenuCount > 0;
@@ -360,7 +427,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 +443,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 "../index";
 
-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) as any as typeof MenuRadioGroupFr;