@linzjs/step-ag-grid 1.4.4 → 1.4.5

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,32 @@
+import { useMemo } from "react";
+
+type useBemModifiers = Record<string, boolean | string | undefined>;
+
+interface useBemProps {
+  block: string;
+  element: string;
+  modifiers: useBemModifiers;
+  className: string | ((modifiers: useBemModifiers) => string | undefined);
+}
+
+// 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,30 @@
+import { Ref, MutableRefObject, useMemo } 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,
+) => {
+  if (typeof ref === "function") {
+    ref(instance);
+  } else if (ref) {
+    ref.current = instance;
+  }
+};
+
+export const useCombinedRef = <Instance>(
+  refA: Ref<Instance> | null | undefined,
+  refB: Ref<Instance> | null | undefined,
+): Ref<Instance> | null | undefined => {
+  return useMemo(() => {
+    if (!refA) return refB;
+    if (!refB) return refA;
+
+    return (instance) => {
+      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,22 @@
+import { MutableRefObject } from "react";
+import { useLayoutEffect } from "./useIsomorphicLayoutEffect";
+
+export const useItemEffect = (
+  isDisabled: boolean,
+  itemRef: MutableRefObject<any>,
+  updateItems: (item: any, isMounted?: boolean) => void,
+) => {
+  useLayoutEffect(() => {
+    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}`,
+      );
+    }
+    if (isDisabled) return;
+    const item = itemRef.current;
+    updateItems(item, true);
+    return () => {
+      updateItems(item);
+    };
+  }, [isDisabled, itemRef, updateItems]);
+};

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

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import { useRef, useContext, useEffect } 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) => {
+  const { submenuCloseDelay } = useContext(ItemSettingsContext);
+  const { isParentOpen, isSubmenuOpen, dispatch, updateItems } = useContext(MenuListItemContext);
+  const timeoutId = useRef(0);
+
+  const setHover = () => {
+    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);
+  };
+
+  const unsetHover = () => {
+    !isDisabled && dispatch(HoverActionTypes.UNSET, itemRef.current);
+  };
+
+  const onBlur = (e) => {
+    // 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 = 0;
+          setHover();
+        }, submenuCloseDelay);
+    } else {
+      setHover();
+    }
+  };
+
+  const onPointerLeave = (_, keepHover) => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      timeoutId.current = 0;
+    }
+
+    !keepHover && unsetHover();
+  };
+
+  useItemEffect(isDisabled, itemRef, 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,110 @@
+// @ts-nocheck
+import { useState, useCallback, useRef } from "react";
+import { HoverActionTypes, indexOfNode } from "../utils";
+
+export const useItems = (menuRef, focusRef) => {
+  const [hoverItem, setHoverItem] = useState();
+  const stateRef = useRef({
+    items: [],
+    hoverIndex: -1,
+    sorted: false,
+  });
+  const mutableState = stateRef.current;
+
+  const updateItems = useCallback(
+    (item, isMounted) => {
+      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();
+          }
+        }
+      }
+      mutableState.hoverIndex = -1;
+      mutableState.sorted = false;
+    },
+    [mutableState, focusRef],
+  );
+
+  const dispatch = useCallback(
+    (actionType, item, nextIndex) => {
+      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) => (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:
+          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 @@
+// @ts-nocheck
+import { useRef, useEffect } from "react";
+import { safeCall } from "../utils";
+
+export const useMenuChange = (onMenuChange, isOpen) => {
+  const prevOpen = useRef(isOpen);
+
+  useEffect(() => {
+    if (prevOpen.current !== isOpen) safeCall(onMenuChange, { open: isOpen });
+    prevOpen.current = isOpen;
+  }, [onMenuChange, isOpen]);
+};

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

@@ -0,0 +1,24 @@
+import { useTransition } from "react-transition-state";
+import { MenuStateMap, getTransition } from "../utils";
+
+interface useMenuStateProps {
+  initialMounted?: boolean;
+  unmountOnClose?: boolean;
+  transition: boolean | Record<string, string>;
+  transitionTimeout?: number;
+}
+
+export const useMenuState = (props?: useMenuStateProps) => {
+  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];
+};

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

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { useState } from "react";
+import { useMenuState } from "./useMenuState";
+
+export const useMenuStateAndFocus = (options) => {
+  const [menuProps, toggleMenu] = useMenuState(options);
+  const [menuItemFocus, setMenuItemFocus] = useState();
+
+  const openMenu = (position, alwaysUpdate) => {
+    setMenuItemFocus({ position, alwaysUpdate });
+    toggleMenu(true);
+  };
+
+  return [{ menuItemFocus, ...menuProps }, toggleMenu, openMenu];
+};