@linzjs/step-ag-grid 1.4.4 → 1.4.6

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

@@ -0,0 +1,349 @@
+import { useRef, useContext, useEffect, useMemo, useImperativeHandle } from "react";
+import { createPortal } from "react-dom";
+import { useBEM, useCombinedRef, useMenuChange, useMenuStateAndFocus, useItemEffect } from "../hooks";
+import { MenuList } from "./MenuList";
+import {
+  mergeProps,
+  batchedUpdates,
+  commonProps,
+  safeCall,
+  menuClass,
+  subMenuClass,
+  menuItemClass,
+  isMenuOpen,
+  withHovering,
+  SettingsContext,
+  ItemSettingsContext,
+  MenuListContext,
+  MenuListItemContext,
+  Keys,
+  HoverActionTypes,
+  FocusPositions,
+} from "../utils";
+import {
+  BaseProps,
+  ClassNameProp,
+  Hoverable,
+  MenuAlign,
+  MenuArrowModifiers,
+  MenuDirection,
+  MenuModifiers,
+  MenuOverflow,
+  MenuPosition,
+  RenderProp,
+  UncontrolledMenuProps,
+} from "../index";
+import { withHoveringResultProps } from "../utils/withHovering";
+
+//
+// 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;
+}>;
+
+/**
+ * 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?: React.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?: React.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?: React.ReactNode;
+}
+
+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";
+}
+
+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";
+
+  // FIXME Matt no idea what's going on here
+  const [stateProps, toggleMenu, _openMenu] = useMenuStateAndFocus(settings);
+
+  const { state } = stateProps;
+  const isDisabled = !!disabled;
+  const isOpen = isMenuOpen(state);
+  const containerRef = useRef(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
+
+  const stopTimer = () => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      timeoutId.current = undefined;
+    }
+  };
+
+  const openMenu = (...args: any[]) => {
+    stopTimer();
+    setHover();
+    !isDisabled && _openMenu(...args);
+  };
+
+  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);
+    }
+  };
+
+  const handlePointerLeave = () => {
+    stopTimer();
+    if (!isOpen) dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    let handled = false;
+
+    switch (e.key) {
+      // LEFT key is bubbled up from submenu items
+      case Keys.LEFT:
+        if (isOpen) {
+          menuItemRef?.current && menuItemRef.current.focus();
+          toggleMenu(false);
+          handled = true;
+        }
+        break;
+
+      // prevent browser from scrolling page to the right
+      case Keys.RIGHT:
+        if (!isOpen) handled = true;
+        break;
+    }
+
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  const handleItemKeyDown = (e: React.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;
+  };
+
+  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,
+        })}
+      >
+        {useMemo(() => safeCall(label, modifiers), [label, modifiers])}
+      </div>
+
+      {state && getMenuList()}
+    </li>
+  );
+};
+
+export const SubMenu = withHovering("SubMenu", SubMenuFr) as any as typeof SubMenuFr;

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

@@ -0,0 +1,9 @@
+export { useBEM } from "./useBEM";
+export { useCombinedRef } from "./useCombinedRef";
+export { useLayoutEffect } from "./useIsomorphicLayoutEffect";
+export { useItems } from "./useItems";
+export { useItemEffect } from "./useItemEffect";
+export { useItemState } from "./useItemState";
+export { useMenuChange } from "./useMenuChange";
+export { useMenuState } from "./useMenuState";
+export { useMenuStateAndFocus } from "./useMenuStateAndFocus";

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

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { ClassNameProp } from "../index";
+
+type useBemModifiers = Record<string, boolean | string | undefined>;
+
+interface useBemProps {
+  block: string;
+  element?: string;
+  modifiers?: useBemModifiers;
+  className?: ClassNameProp<any>; // FIXME Matt any?
+}
+
+// Generate className following BEM methodology: http://getbem.com/naming/
+// Modifier value can be one of the following types: boolean, string, undefined
+export const useBEM = ({ block, element, modifiers, className }: useBemProps) =>
+  useMemo(() => {
+    const blockElement = element ? `${block}__${element}` : block;
+
+    let classString = blockElement;
+    modifiers &&
+      Object.keys(modifiers).forEach((name) => {
+        const value = modifiers[name];
+        if (value) classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
+      });
+
+    let expandedClassName = typeof className === "function" ? className(modifiers) : className;
+    if (typeof expandedClassName === "string") {
+      expandedClassName = expandedClassName.trim();
+      if (expandedClassName) classString += ` ${expandedClassName}`;
+    }
+
+    return classString;
+  }, [block, element, modifiers, className]);

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

@@ -0,0 +1,24 @@
+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: ForwardedRef<T> | undefined, instance: T | null) => {
+  if (typeof ref === "function") {
+    ref(instance);
+  } else if (ref) {
+    ref.current = instance;
+  }
+};
+
+export const useCombinedRef = <Instance>(
+  refA: ForwardedRef<Instance> | undefined,
+  refB: ForwardedRef<Instance> | undefined,
+): LegacyRef<Instance> => {
+  return useMemo(() => {
+    return (instance: any) => {
+      setRef(refA, instance);
+      setRef(refB, instance);
+    };
+  }, [refA, refB]);
+};

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

@@ -0,0 +1,15 @@
+import { useEffect, useLayoutEffect } from "react";
+
+// Get around a warning when using useLayoutEffect on the server.
+// https://github.com/reduxjs/react-redux/blob/b48d087d76f666e1c6c5a9713bbec112a1631841/src/utils/useIsomorphicLayoutEffect.js#L12
+// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+// https://github.com/facebook/react/issues/14927#issuecomment-549457471
+
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"
+    ? useLayoutEffect
+    : useEffect;
+
+export { useIsomorphicLayoutEffect as useLayoutEffect };

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

@@ -0,0 +1,23 @@
+import { MutableRefObject } from "react";
+import { useLayoutEffect } from "./useIsomorphicLayoutEffect";
+
+export const useItemEffect = (
+  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: ${menuItemRef.current.outerHTML}`,
+      );
+    }
+    if (isDisabled) return;
+    const item = menuItemRef.current;
+    updateItems(item, true);
+    return () => {
+      updateItems(item);
+    };
+  }, [isDisabled, menuItemRef, updateItems]);
+};

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

@@ -0,0 +1,67 @@
+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 = (
+  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<ReturnType<typeof setTimeout>>();
+
+  const setHover = () => {
+    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
+  };
+
+  const unsetHover = () => {
+    !isDisabled && dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
+  };
+
+  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();
+  };
+
+  const onPointerMove = () => {
+    if (isSubmenuOpen) {
+      if (!timeoutId.current)
+        timeoutId.current = setTimeout(() => {
+          timeoutId.current = undefined;
+          setHover();
+        }, submenuCloseDelay);
+    } else {
+      setHover();
+    }
+  };
+
+  const onPointerLeave = (_: PointerEvent, keepHover: boolean) => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      timeoutId.current = undefined;
+    }
+
+    !keepHover && unsetHover();
+  };
+
+  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, isHovering, isParentOpen]);
+
+  return {
+    setHover,
+    onBlur,
+    onPointerMove,
+    onPointerLeave,
+  };
+};

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

@@ -0,0 +1,111 @@
+import { useState, useCallback, useRef, MutableRefObject } from "react";
+import { HoverActionTypes, indexOfNode } from "../utils";
+import { FocusPosition } from "../index";
+
+export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObject<any> | undefined) => {
+  const [hoverItem, setHoverItem] = useState<any>();
+  const stateRef = useRef({
+    items: [] as any[],
+    hoverIndex: -1,
+    sorted: false,
+  });
+  const mutableState = stateRef.current;
+
+  const updateItems = useCallback(
+    (item?: any, isMounted?: boolean) => {
+      const { items } = mutableState;
+      if (!item) {
+        mutableState.items = [];
+      } else if (isMounted) {
+        items.push(item);
+      } else {
+        const index = items.indexOf(item);
+        if (index > -1) {
+          items.splice(index, 1);
+          if (item.contains(document.activeElement)) {
+            focusRef?.current?.focus();
+            setHoverItem(undefined);
+          }
+        }
+      }
+      mutableState.hoverIndex = -1;
+      mutableState.sorted = false;
+    },
+    [mutableState, focusRef],
+  );
+
+  const dispatch = useCallback(
+    (actionType: number, item: any, nextIndex: FocusPosition) => {
+      const { items, hoverIndex } = mutableState;
+      const sortItems = () => {
+        if (mutableState.sorted) return;
+        const orderedNodes = menuRef.current.querySelectorAll(".szh-menu__item");
+        items.sort((a, b) => indexOfNode(orderedNodes, a) - indexOfNode(orderedNodes, b));
+        mutableState.sorted = true;
+      };
+
+      let index = -1,
+        newItem = undefined;
+      switch (actionType) {
+        case HoverActionTypes.RESET:
+          break;
+
+        case HoverActionTypes.SET:
+          newItem = item;
+          break;
+
+        case HoverActionTypes.UNSET:
+          newItem = (prevItem: any) => (prevItem === item ? undefined : prevItem);
+          break;
+
+        case HoverActionTypes.FIRST:
+          sortItems();
+          index = 0;
+          newItem = items[index];
+          break;
+
+        case HoverActionTypes.LAST:
+          sortItems();
+          index = items.length - 1;
+          newItem = items[index];
+          break;
+
+        case HoverActionTypes.SET_INDEX:
+          if (typeof nextIndex !== "number") break;
+          sortItems();
+          index = nextIndex;
+          newItem = items[index];
+          break;
+
+        case HoverActionTypes.INCREASE:
+          sortItems();
+          index = hoverIndex;
+          if (index < 0) index = items.indexOf(item);
+          index++;
+          if (index >= items.length) index = 0;
+          newItem = items[index];
+          break;
+
+        case HoverActionTypes.DECREASE:
+          sortItems();
+          index = hoverIndex;
+          if (index < 0) index = items.indexOf(item);
+          index--;
+          if (index < 0) index = items.length - 1;
+          newItem = items[index];
+          break;
+
+        default:
+          if (process.env.NODE_ENV !== "production")
+            throw new Error(`[React-Menu] Unknown hover action type: ${actionType}`);
+      }
+
+      if (!newItem) index = -1;
+      setHoverItem(newItem);
+      mutableState.hoverIndex = index;
+    },
+    [menuRef, mutableState],
+  );
+
+  return { hoverItem, dispatch, updateItems };
+};

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

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

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

@@ -0,0 +1,42 @@
+import { useTransition } from "react-transition-state";
+import { MenuStateMap, getTransition } from "../utils";
+import { MenuState, MenuStateOptions } from "../index";
+
+/**
+ * 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;
+  },
+
+  /**
+   * 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,
+  };
+  const [state, toggleMenu, endTransition] = useTransition({
+    mountOnEnter: !initialMounted,
+    unmountOnExit: unmountOnClose,
+    timeout: transitionTimeout ?? 500,
+    enter: getTransition(transition, "open"),
+    exit: getTransition(transition, "close"),
+  });
+
+  return [{ state: MenuStateMap[state], endTransition }, toggleMenu];
+};