@linzjs/step-ag-grid 1.4.5 → 1.4.7

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

@@ -1,23 +1,27 @@
-// @ts-nocheck
-import { useRef, useContext, useEffect } from "react";
+import { useRef, useContext, useEffect, FocusEvent, MutableRefObject } from "react";
 import { ItemSettingsContext, MenuListItemContext, HoverActionTypes } from "../utils";
 import { useItemEffect } from "./useItemEffect";
 
 // This hook includes some common stateful logic in MenuItem and FocusableItem
-export const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
+export const useItemState = (
+  menuItemRef: MutableRefObject<any> | undefined,
+  focusRef: MutableRefObject<any> | undefined,
+  isHovering?: boolean,
+  isDisabled?: boolean,
+) => {
   const { submenuCloseDelay } = useContext(ItemSettingsContext);
   const { isParentOpen, isSubmenuOpen, dispatch, updateItems } = useContext(MenuListItemContext);
-  const timeoutId = useRef(0);
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
 
   const setHover = () => {
-    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);
+    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
   };
 
   const unsetHover = () => {
-    !isDisabled && dispatch(HoverActionTypes.UNSET, itemRef.current);
+    !isDisabled && dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
   };
 
-  const onBlur = (e) => {
+  const onBlur = (e: FocusEvent) => {
     // Focus has moved out of the entire item
     // It handles situation such as clicking on a sibling disabled menu item
     if (isHovering && !e.currentTarget.contains(e.relatedTarget)) unsetHover();
@@ -27,7 +31,7 @@ export const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
     if (isSubmenuOpen) {
       if (!timeoutId.current)
         timeoutId.current = setTimeout(() => {
-          timeoutId.current = 0;
+          timeoutId.current = undefined;
           setHover();
         }, submenuCloseDelay);
     } else {
@@ -35,22 +39,22 @@ export const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
     }
   };
 
-  const onPointerLeave = (_, keepHover) => {
+  const onPointerLeave = (_: PointerEvent, keepHover: boolean) => {
     if (timeoutId.current) {
       clearTimeout(timeoutId.current);
-      timeoutId.current = 0;
+      timeoutId.current = undefined;
     }
 
     !keepHover && unsetHover();
   };
 
-  useItemEffect(isDisabled, itemRef, updateItems);
+  useItemEffect(isDisabled, menuItemRef, updateItems);
   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) {
-      focusRef.current && focusRef.current.focus();
+      focusRef?.current && focusRef.current.focus();
     }
   }, [focusRef, isHovering, isParentOpen]);
 

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

@@ -1,18 +1,18 @@
-// @ts-nocheck
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, MutableRefObject } from "react";
 import { HoverActionTypes, indexOfNode } from "../utils";
+import { FocusPosition } from "../types";
 
-export const useItems = (menuRef, focusRef) => {
-  const [hoverItem, setHoverItem] = useState();
+export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObject<any> | undefined) => {
+  const [hoverItem, setHoverItem] = useState<any>();
   const stateRef = useRef({
-    items: [],
+    items: [] as any[],
     hoverIndex: -1,
     sorted: false,
   });
   const mutableState = stateRef.current;
 
   const updateItems = useCallback(
-    (item, isMounted) => {
+    (item?: any, isMounted?: boolean) => {
       const { items } = mutableState;
       if (!item) {
         mutableState.items = [];
@@ -23,8 +23,8 @@ export const useItems = (menuRef, focusRef) => {
         if (index > -1) {
           items.splice(index, 1);
           if (item.contains(document.activeElement)) {
-            focusRef.current.focus();
-            setHoverItem();
+            focusRef?.current?.focus();
+            setHoverItem(undefined);
           }
         }
       }
@@ -35,7 +35,7 @@ export const useItems = (menuRef, focusRef) => {
   );
 
   const dispatch = useCallback(
-    (actionType, item, nextIndex) => {
+    (actionType: number, item: any, nextIndex: FocusPosition) => {
       const { items, hoverIndex } = mutableState;
       const sortItems = () => {
         if (mutableState.sorted) return;
@@ -55,7 +55,7 @@ export const useItems = (menuRef, focusRef) => {
           break;
 
         case HoverActionTypes.UNSET:
-          newItem = (prevItem) => (prevItem === item ? undefined : prevItem);
+          newItem = (prevItem: any) => (prevItem === item ? undefined : prevItem);
           break;
 
         case HoverActionTypes.FIRST:
@@ -71,6 +71,7 @@ export const useItems = (menuRef, focusRef) => {
           break;
 
         case HoverActionTypes.SET_INDEX:
+          if (typeof nextIndex !== "number") break;
           sortItems();
           index = nextIndex;
           newItem = items[index];

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

@@ -1,12 +1,12 @@
-// @ts-nocheck
 import { useRef, useEffect } from "react";
 import { safeCall } from "../utils";
+import { EventHandler, MenuChangeEvent } from "../types";
 
-export const useMenuChange = (onMenuChange, isOpen) => {
+export const useMenuChange = (onMenuChange?: EventHandler<MenuChangeEvent>, isOpen?: boolean) => {
   const prevOpen = useRef(isOpen);
 
   useEffect(() => {
-    if (prevOpen.current !== isOpen) safeCall(onMenuChange, { open: isOpen });
+    if (onMenuChange && prevOpen.current !== isOpen) safeCall(onMenuChange, { open: !!isOpen });
     prevOpen.current = isOpen;
   }, [onMenuChange, isOpen]);
 };

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

@@ -1,14 +1,32 @@
 import { useTransition } from "react-transition-state";
 import { MenuStateMap, getTransition } from "../utils";
+import { MenuState, MenuStateOptions } from "../types";
 
-interface useMenuStateProps {
-  initialMounted?: boolean;
-  unmountOnClose?: boolean;
-  transition: boolean | Record<string, string>;
-  transitionTimeout?: number;
-}
+/**
+ * A custom Hook which helps manage the states of `ControlledMenu`.
+ */
+export const useMenuState = (
+  props?: MenuStateOptions,
+): [
+  {
+    /**
+     * Menu state which should be forwarded to `ControlledMenu`.
+     */
+    state?: MenuState;
+    /**
+     * Stop transition animation. This function value should be forwarded to `ControlledMenu`.
+     */
+    endTransition: () => void;
+  },
 
-export const useMenuState = (props?: useMenuStateProps) => {
+  /**
+   * Open or close menu.
+   *
+   * - If no parameter is supplied, this function will toggle state between open and close phases.
+   * - You can set a boolean parameter to explicitly switch into one of the two phases.
+   */
+  (open?: boolean) => void,
+] => {
   const { initialMounted, unmountOnClose, transition, transitionTimeout } = props ?? {
     transition: false,
   };

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

@@ -1,12 +1,14 @@
-// @ts-nocheck
 import { useState } from "react";
 import { useMenuState } from "./useMenuState";
+import { ControlledMenuProps, FocusPosition, MenuStateOptions } from "../types";
 
-export const useMenuStateAndFocus = (options) => {
+export const useMenuStateAndFocus = (
+  options: MenuStateOptions,
+): [any, (open?: boolean) => void, (position?: FocusPosition, alwaysUpdate?: boolean) => void] => {
   const [menuProps, toggleMenu] = useMenuState(options);
-  const [menuItemFocus, setMenuItemFocus] = useState();
+  const [menuItemFocus, setMenuItemFocus] = useState<ControlledMenuProps["menuItemFocus"]>();
 
-  const openMenu = (position, alwaysUpdate) => {
+  const openMenu = (position?: FocusPosition, alwaysUpdate?: boolean) => {
     setMenuItemFocus({ position, alwaysUpdate });
     toggleMenu(true);
   };

package/src/react-menu3/index.ts

@@ -9,3 +9,4 @@ export { MenuDivider } from "./components/MenuDivider";
 export { MenuHeader } from "./components/MenuHeader";
 export { MenuGroup } from "./components/MenuGroup";
 export { MenuRadioGroup } from "./components/MenuRadioGroup";
+export { ClickEvent } from "./types";

package/src/react-menu3/positionUtils/getPositionHelpers.ts

@@ -1,10 +1,16 @@
-// @ts-nocheck
 import { parsePadding } from "../utils";
+import { MutableRefObject } from "react";
 
-export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBoxPadding) => {
+export const getPositionHelpers = (
+  containerRef: MutableRefObject<HTMLElement | undefined>,
+  menuRef: MutableRefObject<HTMLElement>,
+  menuScroll: Window | Element,
+  boundingBoxPadding: string | undefined,
+) => {
   const menuRect = menuRef.current.getBoundingClientRect();
-  const containerRect = containerRef.current.getBoundingClientRect();
-  const thisWindow = containerRef.current.ownerDocument.defaultView;
+  const thisWindow = containerRef.current?.ownerDocument.defaultView ?? window;
+  const containerRect = (containerRef.current ?? thisWindow.document.body).getBoundingClientRect();
+
   const boundingRect =
     menuScroll === window || menuScroll === thisWindow
       ? {
@@ -13,17 +19,18 @@ export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBo
           right: thisWindow.document.documentElement.clientWidth,
           bottom: thisWindow.innerHeight,
         }
-      : menuScroll.getBoundingClientRect();
+      : (menuScroll as Element).getBoundingClientRect();
   const padding = parsePadding(boundingBoxPadding);
 
   // For left and top, overflows are negative value.
   // For right and bottom, overflows are positive value.
-  const getLeftOverflow = (x) => x + containerRect.left - boundingRect.left - padding.left;
-  const getRightOverflow = (x) => x + containerRect.left + menuRect.width - boundingRect.right + padding.right;
-  const getTopOverflow = (y) => y + containerRect.top - boundingRect.top - padding.top;
-  const getBottomOverflow = (y) => y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
+  const getLeftOverflow = (x: number) => x + containerRect.left - boundingRect.left - padding.left;
+  const getRightOverflow = (x: number) => x + containerRect.left + menuRect.width - boundingRect.right + padding.right;
+  const getTopOverflow = (y: number) => y + containerRect.top - boundingRect.top - padding.top;
+  const getBottomOverflow = (y: number) =>
+    y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
 
-  const confineHorizontally = (x) => {
+  const confineHorizontally = (x: number) => {
     // If menu overflows to the left side, adjust x to have the menu contained within the viewport
     // and there is no need to check the right side;
     // if it doesn't overflow to the left, then check the right side
@@ -35,7 +42,7 @@ export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBo
       if (rightOverflow > 0) {
         x -= rightOverflow;
         // Check again to make sure menu doesn't overflow to the left
-        // because it may go off screen and cannot be scroll into view.
+        // because it may go off-screen and cannot be scrolled into view.
         leftOverflow = getLeftOverflow(x);
         if (leftOverflow < 0) x -= leftOverflow;
       }
@@ -44,7 +51,7 @@ export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBo
     return x;
   };
 
-  const confineVertically = (y) => {
+  const confineVertically = (y: number) => {
     // Similar logic to confineHorizontally above
     let topOverflow = getTopOverflow(y);
     if (topOverflow < 0) {

package/src/react-menu3/positionUtils/placeArrowHorizontal.ts

@@ -1,8 +1,15 @@
-// @ts-nocheck
-export const placeArrowHorizontal = ({ arrowRef, menuX, anchorRect, containerRect, menuRect }) => {
-  let x = anchorRect.left - containerRect.left - menuX + anchorRect.width / 2;
-  const offset = arrowRef.current.offsetWidth * 1.25;
+import { MutableRefObject } from "react";
+
+export const placeArrowHorizontal = (p: {
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  menuX: number;
+  anchorRect: DOMRect;
+  containerRect: DOMRect;
+  menuRect: DOMRect;
+}) => {
+  let x = p.anchorRect.left - p.containerRect.left - p.menuX + p.anchorRect.width / 2;
+  const offset = p.arrowRef.current ? p.arrowRef.current.offsetWidth * 1.25 : 0;
   x = Math.max(offset, x);
-  x = Math.min(x, menuRect.width - offset);
+  x = Math.min(x, p.menuRect.width - offset);
   return x;
 };

package/src/react-menu3/positionUtils/placeArrowVertical.ts

@@ -1,8 +1,15 @@
-// @ts-nocheck
-export const placeArrowVertical = ({ arrowRef, menuY, anchorRect, containerRect, menuRect }) => {
-  let y = anchorRect.top - containerRect.top - menuY + anchorRect.height / 2;
-  const offset = arrowRef.current.offsetHeight * 1.25;
+import { MutableRefObject } from "react";
+
+export const placeArrowVertical = (p: {
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  menuY: number;
+  anchorRect: DOMRect;
+  containerRect: DOMRect;
+  menuRect: DOMRect;
+}) => {
+  let y = p.anchorRect.top - p.containerRect.top - p.menuY + p.anchorRect.height / 2;
+  const offset = p.arrowRef.current ? p.arrowRef.current.offsetHeight * 1.25 : 0;
   y = Math.max(offset, y);
-  y = Math.min(y, menuRect.height - offset);
+  y = Math.min(y, p.menuRect.height - offset);
   return y;
 };

package/src/react-menu3/positionUtils/placeLeftorRight.ts

@@ -1,22 +1,38 @@
-// @ts-nocheck
 import { placeArrowVertical } from "./placeArrowVertical";
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MutableRefObject } from "react";
+import { MenuDirection } from "../types";
 
-export const placeLeftorRight = ({
-  anchorRect,
-  containerRect,
-  menuRect,
-  placeLeftorRightY,
-  placeLeftX,
-  placeRightX,
-  getLeftOverflow,
-  getRightOverflow,
-  confineHorizontally,
-  confineVertically,
-  arrowRef,
-  arrow,
-  direction,
-  position,
-}) => {
+export interface placeLeftorRightParams {
+  anchorRect: DOMRect;
+  placeLeftorRightY: number;
+  placeLeftX: number;
+  placeRightX: number;
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrow?: boolean;
+  direction: MenuDirection;
+  position: "auto" | "anchor" | "initial";
+}
+
+export const placeLeftorRight = (
+  props: ReturnType<typeof getPositionHelpers> & placeLeftorRightParams,
+): { arrowY: number | undefined; x: number; y: number; computedDirection: MenuDirection } => {
+  const {
+    anchorRect,
+    containerRect,
+    menuRect,
+    placeLeftorRightY,
+    placeLeftX,
+    placeRightX,
+    getLeftOverflow,
+    getRightOverflow,
+    confineHorizontally,
+    confineVertically,
+    arrowRef,
+    arrow,
+    direction,
+    position,
+  } = props;
   let computedDirection = direction;
   let y = placeLeftorRightY;
   if (position !== "initial") {

package/src/react-menu3/positionUtils/placeToporBottom.ts

@@ -1,24 +1,40 @@
-// @ts-nocheck
 import { placeArrowHorizontal } from "./placeArrowHorizontal";
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MutableRefObject } from "react";
+import { MenuDirection } from "../types";
 
-export const placeToporBottom = ({
-  anchorRect,
-  containerRect,
-  menuRect,
-  placeToporBottomX,
-  placeTopY,
-  placeBottomY,
-  getTopOverflow,
-  getBottomOverflow,
-  confineHorizontally,
-  confineVertically,
-  arrowRef,
-  arrow,
-  direction,
-  position,
-}) => {
+export interface placeToporBottomParams {
+  anchorRect: DOMRect;
+  placeToporBottomX: number;
+  placeTopY: number;
+  placeBottomY: number;
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrow?: boolean;
+  direction: "left" | "right" | "top" | "bottom";
+  position: "auto" | "anchor" | "initial";
+}
+
+export const placeToporBottom = (
+  props: ReturnType<typeof getPositionHelpers> & placeToporBottomParams,
+): { arrowX?: number | undefined; x: number; y: number; computedDirection: MenuDirection } => {
+  const {
+    anchorRect,
+    containerRect,
+    menuRect,
+    placeToporBottomX,
+    placeTopY,
+    placeBottomY,
+    getTopOverflow,
+    getBottomOverflow,
+    confineHorizontally,
+    confineVertically,
+    arrowRef,
+    arrow,
+    direction,
+    position,
+  } = props;
   // make sure invalid direction is treated as 'bottom'
-  let computedDirection = direction === "top" ? "top" : "bottom";
+  let computedDirection: MenuDirection = direction === "top" ? "top" : "bottom";
   let x = placeToporBottomX;
   if (position !== "initial") {
     x = confineHorizontally(x);

package/src/react-menu3/positionUtils/positionContextMenu.ts

@@ -1,5 +1,17 @@
-// @ts-nocheck
-export const positionContextMenu = ({ positionHelpers, anchorPoint }) => {
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MenuDirection } from "../types";
+
+export const positionContextMenu = ({
+  positionHelpers,
+  anchorPoint,
+}: {
+  positionHelpers: ReturnType<typeof getPositionHelpers>;
+  anchorPoint: { x: number; y: number };
+}): {
+  x: number;
+  y: number;
+  computedDirection: MenuDirection;
+} => {
   const {
     menuRect,
     containerRect,
@@ -33,7 +45,7 @@ export const positionContextMenu = ({ positionHelpers, anchorPoint }) => {
   }
 
   // Similar logic to the left and right side above.
-  let computedDirection = "bottom";
+  let computedDirection: MenuDirection = "bottom";
   const bottomOverflow = getBottomOverflow(y);
   if (bottomOverflow > 0) {
     const adjustedY = y - menuRect.height;

package/src/react-menu3/positionUtils/positionMenu.ts

@@ -1,23 +1,28 @@
-// @ts-nocheck
 import { placeLeftorRight } from "./placeLeftorRight";
 import { placeToporBottom } from "./placeToporBottom";
+import { MutableRefObject } from "react";
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MenuDirection } from "../types";
 
-export const positionMenu = ({
-  arrow,
-  align,
-  direction,
-  offsetX,
-  offsetY,
-  position,
-  anchorRef,
-  arrowRef,
-  positionHelpers,
-}) => {
+interface positionMenuProps {
+  offsetX: number;
+  offsetY: number;
+  arrowRef: MutableRefObject<HTMLDivElement | null>;
+  anchorRef: MutableRefObject<HTMLElement | null>;
+  arrow?: boolean;
+  direction: MenuDirection;
+  position: "auto" | "anchor" | "initial";
+  align: "start" | "center" | "end";
+  positionHelpers: ReturnType<typeof getPositionHelpers>;
+}
+
+export const positionMenu = (props: positionMenuProps) => {
+  const { arrow, align, direction, offsetX, offsetY, position, anchorRef, arrowRef, positionHelpers } = props;
   const { menuRect, containerRect } = positionHelpers;
 
   let horizontalOffset = offsetX;
   let verticalOffset = offsetY;
-  if (arrow) {
+  if (arrow && arrowRef.current) {
     if (direction === "left" || direction === "right") {
       horizontalOffset += arrowRef.current.offsetWidth;
     } else {
@@ -25,7 +30,9 @@ export const positionMenu = ({
     }
   }
 
-  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const anchorRect = anchorRef.current
+    ? anchorRef.current.getBoundingClientRect()
+    : ({ left: 0, right: 0, top: 200, bottom: 200, width: 200, height: 200 } as DOMRect);
   const placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset;
   const placeRightX = anchorRect.right - containerRect.left + horizontalOffset;
   const placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset;

package/src/react-menu3/style-utils/index.ts

@@ -11,14 +11,17 @@ import {
   subMenuClass,
 } from "../utils";
 
-const bem = (block) => (element) => (modifier) => {
-  let selector = `.${block}`;
-  if (element) selector += `__${element}`;
-  if (modifier) selector += `--${modifier}`;
-  return selector;
-};
+const bem =
+  (block: string) =>
+  (element?: string) =>
+  (modifier?: string): string => {
+    let selector = `.${block}`;
+    if (element) selector += `__${element}`;
+    if (modifier) selector += `--${modifier}`;
+    return selector;
+  };
 
-const createSelector = (blockElement, modifiers = []) => {
+const createSelector = (blockElement: (modifier?: string) => string, modifiers: string[] = []) => {
   const selectorObj = {};
   Object.defineProperty(selectorObj, "name", {
     value: blockElement(),