@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/useMenuSystem.tsx

@@ -1,456 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect, RefObject, useCallback } from "react";
-import { useMatchesMobile } from "../hooks";
-
-type MenuPosition = {
-  top: number;
-  left: number;
-  minWidth: number;
-};
-
-export function useSubMenuSystem(
-  mobilePositionTo: RefObject<HTMLElement | null>,
-) {
-  const [activeMenus, setActiveMenus] = useState<{ [level: number]: string }>(
-    {},
-  );
-  const [activeMenu, setActiveMenu] = useState("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = useState<number | null>(
-    null,
-  );
-  const menuRootRef = useRef<HTMLDivElement>(null);
-  const subMenuRefs = useRef<{ [id: string]: HTMLElement | null }>({});
-  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const mouseStopTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const isMouseMovingRef = useRef(false);
-  const pendingOpenActionRef = useRef<(() => void) | null>(null);
-  const pendingCloseActionRef = useRef<(() => void) | null>(null);
-  const isMobile = useMatchesMobile();
-
-  const toggleMenu = (menuId: string, level: number) => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-
-    setActiveMenu(menuId);
-    setCurrentSubMenuLevel(level);
-
-    setActiveMenus((prev) => {
-      const newActiveMenus = { ...prev };
-      if (newActiveMenus[level] === menuId) {
-        delete newActiveMenus[level];
-      } else {
-        newActiveMenus[level] = menuId;
-      }
-
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) > level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-
-      return newActiveMenus;
-    });
-  };
-
-  const openMenu = (menuId: string, level: number) => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-
-    setActiveMenus((prev) => {
-      const newActiveMenus = { ...prev };
-      newActiveMenus[level] = menuId;
-
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) > level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-
-      return newActiveMenus;
-    });
-  };
-
-  const executePendingActions = useCallback(() => {
-    if (pendingCloseActionRef.current) {
-      pendingCloseActionRef.current();
-      pendingCloseActionRef.current = null;
-    }
-
-    if (pendingOpenActionRef.current) {
-      pendingOpenActionRef.current();
-      pendingOpenActionRef.current = null;
-    }
-  }, []);
-
-  const openMenuWithDelay = (menuId: string, level: number, delay = 150) => {
-    if (isMobile) {
-      return;
-    }
-
-    pendingOpenActionRef.current = () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-      }
-
-      hoverTimeoutRef.current = setTimeout(() => {
-        openMenu(menuId, level);
-      }, delay);
-    }
-
-    if (!isMouseMovingRef.current) {
-      executePendingActions();
-    }
-  };
-
-  const closeMenuWithDelay = (level: number, delay = 500) => {
-    if (isMobile) {
-      return;
-    }
-
-    pendingCloseActionRef.current = () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-        hoverTimeoutRef.current = null;
-      }
-
-      closeTimeoutRef.current = setTimeout(() => {
-        closeSubMenuLevel(level);
-      }, delay);
-    }
-
-    if (!isMouseMovingRef.current) {
-      executePendingActions();
-    }
-  };
-
-  const handleMouseMove = () => {
-    isMouseMovingRef.current = true;
-    
-    if (mouseStopTimeoutRef.current) {
-      clearTimeout(mouseStopTimeoutRef.current);
-    }
-    
-    mouseStopTimeoutRef.current = setTimeout(() => {
-      isMouseMovingRef.current = false;
-      executePendingActions();
-    }, 200);
-  };
-
-  const cancelCloseTimeout = () => {
-    if (isMobile) {
-      return;
-    }
-
-    if (mouseStopTimeoutRef.current) {
-      clearTimeout(mouseStopTimeoutRef.current);
-      mouseStopTimeoutRef.current = null;
-      isMouseMovingRef.current = false;
-    }
-  };
-
-  const closeSubMenuLevel = (level: number) => {
-    setActiveMenus((prev) => {
-      const newActiveMenus = { ...prev };
-
-      delete newActiveMenus[level];
-
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) >= level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-
-      if (isMobile) {
-        const newSubMenuLevel = level - 1;
-        setCurrentSubMenuLevel(newSubMenuLevel);
-        const newActiveMenu = newActiveMenus[newSubMenuLevel];
-
-        if (Object.keys(newActiveMenus).length > 0 && newActiveMenu) {
-          setActiveMenu(newActiveMenu);
-        }
-      }
-
-      return newActiveMenus;
-    });
-  };
-
-  const registerSubMenu = (id: string, element: HTMLElement | null) => {
-    subMenuRefs.current[id] = element;
-  };
-
-  const isMenuActive = (menuId: string, level: number) => {
-    return activeMenus[level] === menuId;
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (Object.keys(activeMenus).length === 0) return;
-
-      const target = event.target as Node;
-
-      if (menuRootRef.current?.contains(target)) return;
-
-      const isInsideActiveSubmenu = Object.values(activeMenus).some((id) => {
-        const submenuEl = subMenuRefs.current[id];
-        return submenuEl?.contains(target);
-      });
-
-      if (!isInsideActiveSubmenu) {
-        setActiveMenus({});
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [activeMenus]);
-
-  useEffect(() => {
-    return () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-      }
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const getAllFocusableMenuElements = (): HTMLElement[] => {
-    const elements: HTMLElement[] = [];
-
-    if (menuRootRef.current) {
-      elements.push(
-        ...(Array.from(menuRootRef.current.children) as HTMLElement[]),
-      );
-    }
-
-    Object.values(activeMenus).forEach((menuId) => {
-      const submenuEl = subMenuRefs.current[menuId];
-      if (submenuEl) {
-        elements.push(...(Array.from(submenuEl.children) as HTMLElement[]));
-      }
-    });
-
-    return elements;
-  };
-
-  const findCurrentMenuLevel = (element: Element): number => {
-    let current = element.parentElement;
-    while (current) {
-      const level = current.getAttribute("data-menu-level");
-      if (level !== null) {
-        return parseInt(level, 10);
-      }
-      current = current.parentElement;
-    }
-    return 0;
-  };
-
-  const getMenuElementsAtLevel = (level: number): HTMLElement[] => {
-    if (level === 0 && menuRootRef.current) {
-      return Array.from(menuRootRef.current.children) as HTMLElement[];
-    }
-
-    const menuId = Object.entries(activeMenus).find(([, id]) => {
-      const submenuEl = subMenuRefs.current[id];
-      return (
-        submenuEl &&
-        submenuEl.getAttribute("data-menu-level") === level.toString()
-      );
-    })?.[1];
-
-    if (menuId) {
-      const submenuEl = subMenuRefs.current[menuId];
-      if (submenuEl) {
-        return Array.from(submenuEl.children) as HTMLElement[];
-      }
-    }
-
-    return [];
-  };
-
-  return {
-    menuRootRef,
-    activeMenus,
-    openMenu,
-    isMenuActive,
-    registerSubMenu,
-    closeSubMenuLevel,
-    getAllFocusableMenuElements,
-    findCurrentMenuLevel,
-    getMenuElementsAtLevel,
-    mobileHide: isMobile && Object.keys(activeMenus).length > 0,
-    listeners: {
-      onSubMenuHover: openMenuWithDelay,
-      onSubMenuLeave: closeMenuWithDelay,
-      onSubMenuEnter: cancelCloseTimeout,
-      onMouseMove: handleMouseMove,
-      toggleMenu,
-      mobilePositionTo,
-      activeMenu,
-      currentSubMenuLevel,
-      closeSubMenuLevel,
-    },
-  };
-}
-
-export function useMenuPosition(
-  elementRef: RefObject<HTMLElement | null>,
-  position: "right" | "bottom" | "bottom-right" = "bottom",
-  options?: {
-    isOpen?: boolean;
-    setIsOpen?: (isOpen: boolean) => void;
-    menuRef?: RefObject<HTMLElement | null>;
-    additionalRefs?: RefObject<HTMLElement | null>[];
-    topOffset?: number | null;
-    isMobile?: boolean;
-  },
-) {
-  const [menuPosition, setMenuPosition] = useState<MenuPosition>({
-    top: 0,
-    left: 0,
-    minWidth: 0,
-  });
-
-  const isMobile = options?.isMobile;
-
-  const updatePosition = useCallback(() => {
-    if (!elementRef?.current) return;
-
-    const triggerRect = elementRef.current.getBoundingClientRect();
-    const menuRect = options?.menuRef?.current?.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-
-    const menuWidth = menuRect?.width || triggerRect.width;
-    const topOffset = options?.topOffset ?? 4;
-
-    let top = 0;
-    let left = 0;
-
-    if (position === "bottom" || position === "bottom-right") {
-      top = triggerRect.top + triggerRect.height + topOffset;
-    } else {
-      top = triggerRect.top;
-    }
-
-    if (position === "bottom") {
-      left = triggerRect.left + window.scrollX;
-    } else if (position === "bottom-right") {
-      left = triggerRect.right + window.scrollX - menuWidth;
-    } else if (position === "right") {
-      if (isMobile) {
-        left = triggerRect.left + window.scrollX
-      } else {
-        left = triggerRect.right + window.scrollX;
-      }
-    }
-
-    const overflowsRightViewport = left + menuWidth > viewportWidth;
-
-    if (overflowsRightViewport) {
-      const newLeft = triggerRect.left - menuWidth;
-      const overflowsLeftViewport = newLeft < 0;
-
-      if (overflowsLeftViewport) {
-        left = (viewportWidth - menuWidth) / 2;
-      } else {
-        left = newLeft;
-      }
-    }
-
-    if (isMobile && position === "right") {
-      top = triggerRect.top + triggerRect.height + topOffset;
-    }
-
-    if (isMobile && menuWidth > viewportWidth) {
-      left = 0;
-    }
-
-    setMenuPosition({
-      top,
-      left,
-      minWidth: triggerRect.width,
-    });
-  }, [elementRef, position, options?.menuRef, options?.topOffset, isMobile]);
-
-  useEffect(() => {
-    if (!options?.isOpen || !options?.setIsOpen) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Node;
-      if (elementRef.current?.contains(target)) return;
-      if (options.menuRef?.current?.contains(target)) return;
-      if (options.additionalRefs?.some((ref) => ref.current?.contains(target)))
-        return;
-
-      options.setIsOpen?.(false);
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [
-    options,
-    elementRef,
-    options?.isOpen,
-    options?.setIsOpen,
-    options?.menuRef,
-    options?.additionalRefs,
-  ]);
-
-  useEffect(() => {
-    updatePosition();
-
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (elementRef?.current) {
-      resizeObserver.observe(elementRef.current);
-    }
-
-    window.addEventListener("scroll", updatePosition);
-
-    const hideMenuWhenParentIsScrolled = () => {
-      options?.setIsOpen?.(false);
-    }
-    const scrollableAncestors = getScrollableAncestors(elementRef.current);
-    scrollableAncestors.forEach(ancestor => ancestor.addEventListener("scroll", hideMenuWhenParentIsScrolled));
-
-    window.addEventListener("resize", updatePosition);
-
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-      scrollableAncestors.forEach(ancestor => ancestor.removeEventListener("scroll", hideMenuWhenParentIsScrolled))
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [elementRef, updatePosition]);
-
-  return { menuPosition, updatePosition };
-}
-
-function getScrollableAncestors(element: HTMLElement | null): HTMLElement[] {
-  if (!element) {
-    return []
-  }
-
-  const scrollables: HTMLElement[] = [];
-  let parent = element.parentElement;
-
-  while (parent) {
-    const overflowY = window.getComputedStyle(parent).overflowY;
-    if (overflowY === 'auto' || overflowY === 'scroll') {
-      scrollables.push(parent);
-    }
-    parent = parent.parentElement;
-  }
-
-  return scrollables;
-}

package/src/components/useMounted.tsx

@@ -1,14 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-export const useMounted = () => {
-  const [isMounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-    return () => setIsMounted(false);
-  }, []);
-
-  return isMounted;
-};