@linzjs/step-ag-grid 1.4.5 → 1.4.7

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

@@ -1,7 +1,14 @@
-// @ts-nocheck
-import { useRef, useContext, useEffect, useMemo, useImperativeHandle } from "react";
+import {
+  useRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useImperativeHandle,
+  CSSProperties,
+  ReactNode,
+  KeyboardEvent,
+} from "react";
 import { createPortal } from "react-dom";
-import { node, func, bool, shape, oneOf, oneOfType } from "prop-types";
 import { useBEM, useCombinedRef, useMenuChange, useMenuStateAndFocus, useItemEffect } from "../hooks";
 import { MenuList } from "./MenuList";
 import {
@@ -9,9 +16,6 @@ import {
   batchedUpdates,
   commonProps,
   safeCall,
-  stylePropTypes,
-  uncontrolledMenuPropTypes,
-  menuPropTypes,
   menuClass,
   subMenuClass,
   menuItemClass,
@@ -25,219 +29,330 @@ import {
   HoverActionTypes,
   FocusPositions,
 } from "../utils";
+import {
+  BaseProps,
+  ClassNameProp,
+  Hoverable,
+  MenuAlign,
+  MenuArrowModifiers,
+  MenuDirection,
+  MenuModifiers,
+  MenuOverflow,
+  MenuPosition,
+  RenderProp,
+  UncontrolledMenuProps,
+} from "../types";
+import { withHoveringResultProps } from "../utils/withHovering";
 
-export const SubMenu = withHovering(
-  "SubMenu",
-  function SubMenu({
-    "aria-label": ariaLabel,
-    className,
-    disabled,
-    direction,
-    label,
-    openTrigger,
-    onMenuChange,
-    isHovering,
-    instanceRef,
-    itemRef,
-    captureFocus: _1,
-    repositionFlag: _2,
-    itemProps = {},
-    ...restProps
-  }) {
-    const settings = useContext(SettingsContext);
-    const { rootMenuRef } = settings;
-    const { submenuOpenDelay, submenuCloseDelay } = useContext(ItemSettingsContext);
-    const { parentMenuRef, parentDir, overflow: parentOverflow } = useContext(MenuListContext);
-    const { isParentOpen, isSubmenuOpen, setOpenSubmenuCount, dispatch, updateItems } = useContext(MenuListItemContext);
-    const isPortal = parentOverflow !== "visible";
-
-    const [stateProps, toggleMenu, _openMenu] = useMenuStateAndFocus(settings);
-
-    const { state } = stateProps;
-    const isDisabled = !!disabled;
-    const isOpen = isMenuOpen(state);
-    const containerRef = useRef(null);
-    const timeoutId = useRef(0);
-
-    const stopTimer = () => {
-      if (timeoutId.current) {
-        clearTimeout(timeoutId.current);
-        timeoutId.current = 0;
-      }
-    };
+//
+// SubMenu
+// ----------------------------------------------------------------------
+export type SubMenuItemModifiers = Readonly<{
+  /**
+   * Indicates if the submenu is open.
+   */
+  open: boolean;
+  /**
+   * Indicates if the submenu item is being hovered and has focus.
+   */
+  hover: boolean;
+  /**
+   * Indicates if the submenu and item are disabled.
+   */
+  disabled: boolean;
+}>;
 
-    const openMenu = (...args) => {
-      stopTimer();
-      setHover();
-      !isDisabled && _openMenu(...args);
-    };
+/**
+ * Common props for `Menu`, `SubMenu` and `ControlledMenu`
+ */
+interface BaseMenuProps extends Omit<BaseProps, "style"> {
+  /**
+   * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
+   */
+  menuClassName?: ClassNameProp<MenuModifiers>;
+  /**
+   * This prop is forwarded to the `style` prop of menu DOM element.
+   */
+  menuStyle?: CSSProperties;
+  /**
+   * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
+   */
+  arrowClassName?: ClassNameProp<MenuArrowModifiers>;
+  /**
+   * This prop is forwarded to the `style` prop of menu arrow DOM element.
+   */
+  arrowStyle?: CSSProperties;
+  /**
+   * Set `true` to display an arrow pointing to its anchor element.
+   */
+  arrow?: boolean;
+  /**
+   * Set the horizontal distance (in pixels) between menu and its anchor element.
+   * The value can be negative.
+   * @default 0
+   */
+  offsetX?: number;
+  /**
+   * Set the vertical distance (in pixels) between menu and its anchor element.
+   * The value can be negative.
+   * @default 0
+   */
+  offsetY?: number;
+  /**
+   * Set alignment of menu with anchor element.
+   * @default 'start'
+   */
+  align?: MenuAlign;
+  /**
+   * Set direction in which menu expands against anchor element.
+   * @default 'bottom'
+   */
+  direction?: MenuDirection;
+  /**
+   * Set the position of menu related to its anchor element:
+   *
+   * - 'auto' menu position is adjusted to have it contained within the viewport,
+   * even if it will be detached from the anchor element.
+   * This option allows to display menu in the viewport as much as possible.
+   *
+   * - 'anchor' menu position is adjusted to have it contained within the viewport,
+   * but it will be kept attached to the edges of anchor element.
+   *
+   * - 'initial' menu always stays at its initial position.
+   * @default 'auto'
+   */
+  position?: MenuPosition;
+  /**
+   * Make the menu list scrollable or hidden when there is not enough viewport space to
+   * display all menu items. The prop is similar to the CSS `overflow` property.
+   * @default 'visible'
+   */
+  overflow?: MenuOverflow;
+  /**
+   * Set computed overflow amount down to a child `MenuGroup`.
+   * The `MenuGroup` should have `takeOverflow` prop set as `true` accordingly.
+   */
+  setDownOverflow?: boolean;
+  children?: ReactNode;
+}
 
-    const setHover = () => !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);
+export interface SubMenuProps extends BaseMenuProps, Hoverable, UncontrolledMenuProps, withHoveringResultProps {
+  /**
+   * Properties of this object are spread to the submenu item DOM element.
+   */
+  itemProps?: BaseProps<SubMenuItemModifiers>;
+  /**
+   * The submenu `label` can be a `string` or JSX element, or a render function that returns one.
+   */
+  label?: RenderProp<SubMenuItemModifiers>;
+  /**
+   * - `undefined` submenu opens when the label item is hovered or clicked. This is the default behaviour.
+   * - 'clickOnly' submenu opens when the label item is clicked.
+   * - 'none' submenu doesn't open with mouse or keyboard events;
+   * you can call the `openMenu` function on `instanceRef` to open submenu programmatically.
+   */
+  openTrigger?: "none" | "clickOnly";
+}
 
-    const delayOpen = (delay) => {
-      setHover();
-      if (!openTrigger) timeoutId.current = setTimeout(() => batchedUpdates(openMenu), Math.max(delay, 0));
-    };
+export const SubMenuFr = ({
+  "aria-label": ariaLabel,
+  className,
+  disabled,
+  direction,
+  label,
+  openTrigger,
+  onMenuChange,
+  isHovering,
+  instanceRef,
+  menuItemRef,
+  itemProps = {},
+  ...restProps
+}: SubMenuProps) => {
+  const settings = useContext(SettingsContext);
+  const { rootMenuRef } = settings;
+  const { submenuOpenDelay, submenuCloseDelay } = useContext(ItemSettingsContext);
+  const { parentMenuRef, parentDir, overflow: parentOverflow } = useContext(MenuListContext);
+  const { isParentOpen, isSubmenuOpen, setOpenSubmenuCount, dispatch, updateItems } = useContext(MenuListItemContext);
+  const isPortal = parentOverflow !== "visible";
 
-    const handlePointerMove = () => {
-      if (timeoutId.current || isOpen || isDisabled) return;
+  // FIXME Matt no idea what's going on here
+  const [stateProps, toggleMenu, _openMenu] = useMenuStateAndFocus(settings);
 
-      if (isSubmenuOpen) {
-        timeoutId.current = setTimeout(() => delayOpen(submenuOpenDelay - submenuCloseDelay), submenuCloseDelay);
-      } else {
-        delayOpen(submenuOpenDelay);
-      }
-    };
-
-    const handlePointerLeave = () => {
-      stopTimer();
-      if (!isOpen) dispatch(HoverActionTypes.UNSET, itemRef.current);
-    };
-
-    const handleKeyDown = (e) => {
-      let handled = false;
-
-      switch (e.key) {
-        // LEFT key is bubbled up from submenu items
-        case Keys.LEFT:
-          if (isOpen) {
-            itemRef.current.focus();
-            toggleMenu(false);
-            handled = true;
-          }
-          break;
-
-        // prevent browser from scrolling page to the right
-        case Keys.RIGHT:
-          if (!isOpen) handled = true;
-          break;
-      }
+  const { state } = stateProps;
+  const isDisabled = !!disabled;
+  const isOpen = isMenuOpen(state);
+  const containerRef = useRef(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
 
-      if (handled) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
+  const stopTimer = () => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      timeoutId.current = undefined;
+    }
+  };
 
-    const handleItemKeyDown = (e) => {
-      if (!isHovering) return;
+  const openMenu = (...args: any[]) => {
+    stopTimer();
+    setHover();
+    !isDisabled && _openMenu(...args);
+  };
 
-      switch (e.key) {
-        case Keys.ENTER:
-        case Keys.SPACE:
-        case Keys.RIGHT:
-          openTrigger !== "none" && openMenu(FocusPositions.FIRST);
-          break;
-      }
-    };
-
-    useItemEffect(isDisabled, itemRef, updateItems);
-    useMenuChange(onMenuChange, isOpen);
-
-    useEffect(() => () => clearTimeout(timeoutId.current), []);
-    useEffect(() => {
-      // Don't set focus when parent menu is closed, otherwise focus will be lost
-      // and onBlur event will be fired with relatedTarget setting as null.
-      if (isHovering && isParentOpen) {
-        itemRef.current.focus();
-      } else {
-        toggleMenu(false);
-      }
-    }, [isHovering, isParentOpen, toggleMenu, itemRef]);
+  const setHover = () => !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
+
+  const delayOpen = (delay: number) => {
+    setHover();
+    if (!openTrigger) timeoutId.current = setTimeout(() => batchedUpdates(openMenu), Math.max(delay, 0));
+  };
+
+  const handlePointerMove = () => {
+    if (timeoutId.current || isOpen || isDisabled) return;
+
+    if (isSubmenuOpen) {
+      timeoutId.current = setTimeout(() => delayOpen(submenuOpenDelay - submenuCloseDelay), submenuCloseDelay);
+    } else {
+      delayOpen(submenuOpenDelay);
+    }
+  };
 
-    useEffect(() => {
-      setOpenSubmenuCount((count) => (isOpen ? count + 1 : Math.max(count - 1, 0)));
-    }, [setOpenSubmenuCount, isOpen]);
+  const handlePointerLeave = () => {
+    stopTimer();
+    if (!isOpen) dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
+  };
 
-    useImperativeHandle(instanceRef, () => ({
-      openMenu: (...args) => {
-        isParentOpen && openMenu(...args);
-      },
-      closeMenu: () => {
+  const handleKeyDown = (e: KeyboardEvent) => {
+    let handled = false;
+
+    switch (e.key) {
+      // LEFT key is bubbled up from submenu items
+      case Keys.LEFT:
         if (isOpen) {
-          itemRef.current.focus();
+          menuItemRef?.current && menuItemRef.current.focus();
           toggleMenu(false);
+          handled = true;
         }
-      },
-    }));
-
-    const modifiers = useMemo(
-      () => ({
-        open: isOpen,
-        hover: isHovering,
-        disabled: isDisabled,
-        submenu: true,
-      }),
-      [isOpen, isHovering, isDisabled],
-    );
+        break;
+
+      // prevent browser from scrolling page to the right
+      case Keys.RIGHT:
+        if (!isOpen) handled = true;
+        break;
+    }
 
-    const { ref: externalItemRef, className: itemClassName, ...restItemProps } = itemProps;
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
 
-    const mergedItemProps = mergeProps(
-      {
-        onPointerMove: handlePointerMove,
-        onPointerLeave: handlePointerLeave,
-        onKeyDown: handleItemKeyDown,
-        onClick: () => openTrigger !== "none" && openMenu(),
-      },
-      restItemProps,
+  const handleItemKeyDown = (e: KeyboardEvent) => {
+    if (!isHovering) return;
+
+    switch (e.key) {
+      case Keys.ENTER:
+      case Keys.SPACE:
+      case Keys.RIGHT:
+        openTrigger !== "none" && openMenu(FocusPositions.FIRST);
+        break;
+    }
+  };
+
+  useItemEffect(isDisabled, menuItemRef, updateItems);
+  useMenuChange(onMenuChange, isOpen);
+
+  useEffect(() => () => clearTimeout(timeoutId.current), []);
+  useEffect(() => {
+    // Don't set focus when parent menu is closed, otherwise focus will be lost
+    // and onBlur event will be fired with relatedTarget setting as null.
+    if (isHovering && isParentOpen) {
+      menuItemRef?.current && menuItemRef.current.focus();
+    } else {
+      toggleMenu(false);
+    }
+  }, [isHovering, isParentOpen, toggleMenu, menuItemRef]);
+
+  useEffect(() => {
+    setOpenSubmenuCount((count: number) => (isOpen ? count + 1 : Math.max(count - 1, 0)));
+  }, [setOpenSubmenuCount, isOpen]);
+
+  useImperativeHandle(instanceRef, () => ({
+    openMenu: (...args) => {
+      isParentOpen && openMenu(...args);
+    },
+    closeMenu: () => {
+      if (isOpen) {
+        menuItemRef?.current && menuItemRef.current.focus();
+        toggleMenu(false);
+      }
+    },
+  }));
+
+  const modifiers = useMemo(
+    () => ({
+      open: isOpen,
+      hover: isHovering,
+      disabled: isDisabled,
+      submenu: true,
+    }),
+    [isOpen, isHovering, isDisabled],
+  );
+
+  const { ref: externalItemRef, className: itemClassName, ...restItemProps } = itemProps;
+
+  const mergedItemProps = mergeProps(
+    {
+      onPointerMove: handlePointerMove,
+      onPointerLeave: handlePointerLeave,
+      onKeyDown: handleItemKeyDown,
+      onClick: () => openTrigger !== "none" && openMenu(),
+    },
+    restItemProps,
+  );
+
+  const getMenuList = () => {
+    const menuList = (
+      <MenuList
+        {...restProps}
+        {...stateProps}
+        ariaLabel={ariaLabel || (typeof label === "string" ? label : "Submenu")}
+        anchorRef={menuItemRef}
+        containerRef={isPortal ? rootMenuRef : containerRef}
+        direction={direction || (parentDir === "right" || parentDir === "left" ? parentDir : "right")}
+        parentScrollingRef={isPortal && parentMenuRef}
+        isDisabled={isDisabled}
+      />
     );
+    const container = rootMenuRef?.current;
+    return isPortal && container ? createPortal(menuList, container) : menuList;
+  };
 
-    const getMenuList = () => {
-      const menuList = (
-        <MenuList
-          {...restProps}
-          {...stateProps}
-          ariaLabel={ariaLabel || (typeof label === "string" ? label : "Submenu")}
-          anchorRef={itemRef}
-          containerRef={isPortal ? rootMenuRef : containerRef}
-          direction={direction || (parentDir === "right" || parentDir === "left" ? parentDir : "right")}
-          parentScrollingRef={isPortal && parentMenuRef}
-          isDisabled={isDisabled}
-        />
-      );
-      const container = rootMenuRef.current;
-      return isPortal && container ? createPortal(menuList, container) : menuList;
-    };
-
-    return (
-      <li
-        className={useBEM({ block: menuClass, element: subMenuClass, className })}
-        style={{ position: "relative" }}
-        role="presentation"
-        ref={containerRef}
-        onKeyDown={handleKeyDown}
+  return (
+    <li
+      className={useBEM({ block: menuClass, element: subMenuClass, className })}
+      style={{ position: "relative" }}
+      role="presentation"
+      ref={containerRef}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        role="menuitem"
+        aria-haspopup
+        aria-expanded={isOpen}
+        {...mergedItemProps}
+        {...commonProps(isDisabled, isHovering)}
+        ref={useCombinedRef(externalItemRef, menuItemRef)}
+        className={useBEM({
+          block: menuClass,
+          element: menuItemClass,
+          modifiers,
+          className: itemClassName,
+        })}
       >
-        <div
-          role="menuitem"
-          aria-haspopup
-          aria-expanded={isOpen}
-          {...mergedItemProps}
-          {...commonProps(isDisabled, isHovering)}
-          ref={useCombinedRef(externalItemRef, itemRef)}
-          className={useBEM({
-            block: menuClass,
-            element: menuItemClass,
-            modifiers,
-            className: itemClassName,
-          })}
-        >
-          {useMemo(() => safeCall(label, modifiers), [label, modifiers])}
-        </div>
-
-        {state && getMenuList()}
-      </li>
-    );
-  },
-);
-
-SubMenu.propTypes = {
-  ...menuPropTypes,
-  ...uncontrolledMenuPropTypes,
-  disabled: bool,
-  openTrigger: oneOf(["none", "clickOnly"]),
-  label: oneOfType([node, func]),
-  itemProps: shape({
-    ...stylePropTypes(),
-  }),
+        {useMemo(() => safeCall(label, modifiers), [label, modifiers])}
+      </div>
+
+      {state && getMenuList()}
+    </li>
+  );
 };
+
+export const SubMenu = withHovering("SubMenu", SubMenuFr);

package/src/react-menu3/hooks/useBEM.ts

@@ -1,12 +1,13 @@
 import { useMemo } from "react";
+import { ClassNameProp } from "../types";
 
 type useBemModifiers = Record<string, boolean | string | undefined>;
 
 interface useBemProps {
   block: string;
-  element: string;
-  modifiers: useBemModifiers;
-  className: string | ((modifiers: useBemModifiers) => string | undefined);
+  element?: string;
+  modifiers?: useBemModifiers;
+  className?: ClassNameProp<any>; // FIXME Matt any?
 }
 
 // Generate className following BEM methodology: http://getbem.com/naming/

package/src/react-menu3/hooks/useCombinedRef.ts

@@ -1,12 +1,9 @@
-import { Ref, MutableRefObject, useMemo } from "react";
+import { useMemo, LegacyRef, ForwardedRef } from "react";
 
 // Adapted from material-ui
 // https://github.com/mui-org/material-ui/blob/f996027d00e7e4bff3fc040786c1706f9c6c3f82/packages/material-ui-utils/src/useForkRef.ts
 
-const setRef = <T>(
-  ref: MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,
-  instance: T | null,
-) => {
+const setRef = <T>(ref: ForwardedRef<T> | undefined, instance: T | null) => {
   if (typeof ref === "function") {
     ref(instance);
   } else if (ref) {
@@ -15,14 +12,11 @@ const setRef = <T>(
 };
 
 export const useCombinedRef = <Instance>(
-  refA: Ref<Instance> | null | undefined,
-  refB: Ref<Instance> | null | undefined,
-): Ref<Instance> | null | undefined => {
+  refA: ForwardedRef<Instance> | undefined,
+  refB: ForwardedRef<Instance> | undefined,
+): LegacyRef<Instance> => {
   return useMemo(() => {
-    if (!refA) return refB;
-    if (!refB) return refA;
-
-    return (instance) => {
+    return (instance: any) => {
       setRef(refA, instance);
       setRef(refB, instance);
     };

package/src/react-menu3/hooks/useItemEffect.ts

@@ -2,21 +2,22 @@ import { MutableRefObject } from "react";
 import { useLayoutEffect } from "./useIsomorphicLayoutEffect";
 
 export const useItemEffect = (
-  isDisabled: boolean,
-  itemRef: MutableRefObject<any>,
+  isDisabled: boolean | undefined,
+  menuItemRef: MutableRefObject<any> | undefined,
   updateItems: (item: any, isMounted?: boolean) => void,
 ) => {
   useLayoutEffect(() => {
+    if (!menuItemRef) return;
     if (process.env.NODE_ENV !== "production" && !updateItems) {
       throw new Error(
-        `[React-Menu] This menu item or submenu should be rendered under a menu: ${itemRef.current.outerHTML}`,
+        `[React-Menu] This menu item or submenu should be rendered under a menu: ${menuItemRef.current.outerHTML}`,
       );
     }
     if (isDisabled) return;
-    const item = itemRef.current;
+    const item = menuItemRef.current;
     updateItems(item, true);
     return () => {
       updateItems(item);
     };
-  }, [isDisabled, itemRef, updateItems]);
+  }, [isDisabled, menuItemRef, updateItems]);
 };