@dmsi/wedgekit-react 0.0.2

package/src/components/useMenuSystem.tsx

@@ -0,0 +1,367 @@
+"use client";
+
+import { useState, useRef, useEffect, RefObject, useCallback } from "react";
+import { useMatchesMobile } from "./useMatchesMedia";
+
+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 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 openMenuWithDelay = (menuId: string, level: number, delay = 150) => {
+    if (isMobile) {
+      return;
+    }
+
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+
+    hoverTimeoutRef.current = setTimeout(() => {
+      openMenu(menuId, level);
+    }, delay);
+  };
+
+  const closeMenuWithDelay = (level: number, delay = 500) => {
+    if (isMobile) {
+      return;
+    }
+
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+
+    closeTimeoutRef.current = setTimeout(() => {
+      closeSubMenuLevel(level);
+    }, delay);
+  };
+
+  const cancelCloseTimeout = () => {
+    if (isMobile) {
+      return;
+    }
+
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  };
+
+  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,
+      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;
+  },
+) {
+  const [menuPosition, setMenuPosition] = useState<MenuPosition>({
+    top: 0,
+    left: 0,
+    minWidth: 0,
+  });
+
+  const isMobile = useMatchesMobile();
+
+  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") {
+      left = triggerRect.right + window.scrollX;
+    }
+
+    const overflowsLeftViewport = left + menuWidth > viewportWidth;
+
+    if (overflowsLeftViewport) {
+      left = triggerRect.left - menuWidth
+    }
+
+    if (isMobile) {
+      left = triggerRect.left + menuWidth > viewportWidth
+        ? Math.max(viewportWidth - menuWidth, 0) - 8
+        : triggerRect.left;
+      top = (elementRef.current.parentElement?.getBoundingClientRect()?.top ?? 0) + (elementRef.current.parentElement?.getBoundingClientRect()?.height ?? 0) + topOffset;
+    }
+
+    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);
+    window.addEventListener("resize", updatePosition);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [elementRef, updatePosition]);
+
+  return { menuPosition, updatePosition };
+}

package/src/components/useMounted.tsx

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

package/src/darkmode.css

@@ -0,0 +1,140 @@
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text-primary-normal: var(--color-neutral-000);
+
+    --color-text-primary-disabled: var(--color-neutral-400);
+    --color-text-primary-error: var(--color-critical-300);
+
+    --color-text-secondary-normal: var(--color-neutral-300);
+    --color-text-secondary-disabled: var(--color-neutral-400);
+    --color-text-secondary-error: var(--color-critical-300);
+
+    --color-text-success-normal: var(--color-success-200);
+    --color-text-success-disabled: var(--color-neutral-300);
+    --color-text-success-error: var(--color-critical-300);
+
+    --color-text-warning-normal: var(--color-warning-200);
+    --color-text-warning-disabled: var(--color-neutral-300);
+    --color-text-warning-error: var(--color-critical-300);
+
+    --color-text-link-normal: var(--color-link-300);
+    --color-text-link-hover: var(--color-link-400);
+    --color-text-link-active: var(--color-link-200);
+    --color-text-link-disabled: var(--color-neutral-400);
+
+    --color-border-primary-normal: var(--color-neutral-400);
+    --color-border-primary-focus: var(--color-action-300);
+    --color-border-primary-error: var(--color-critical-300);
+
+    --color-icon-primary-normal: var(--color-neutral-300);
+    --color-icon-primary-disabled: var(--color-neutral-400);
+
+    --color-icon-success-normal: var(--color-success-300);
+    --color-icon-success-disabled: var(--color-neutral-400);
+
+    --color-icon-warning-normal: var(--color-warning-300);
+    --color-icon-warning-disabled: var(--color-neutral-400);
+
+    --color-icon-critical-normal: var(--color-critical-300);
+    --color-icon-critical-disabled: var(--color-neutral-400);
+
+    --color-background-primary-normal: var(--color-neutral-600);
+    --color-background-grouped-primary-normal: var(--color-neutral-500);
+    --color-background-secondary-normal: var(--color-neutral-500);
+    --color-background-grouped-secondary-normal: var(--color-neutral-600);
+    --color-background-success-normal: var(--color-success-300);
+    --color-background-warning-normal: var(--color-warning-300);
+    --color-background-critical-normal: var(--color-critical-300);
+
+    --color-text-action-primary-normal: var(--color-action-300);
+    --color-text-action-primary-hover: var(--color-action-400);
+    --color-text-action-primary-active: var(--color-action-200);
+    --color-text-action-primary-disabled: var(--color-neutral-400);
+
+    --color-text-on-action-primary-normal: var(--color-neutral-600);
+    --color-text-on-action-primary-hover: var(--color-neutral-500);
+    --color-text-on-action-primary-active: var(--color-neutral-600);
+    --color-text-on-action-primary-disabled: var(--color-neutral-400);
+
+    --color-text-action-critical-normal: var(--color-critical-300);
+    --color-text-action-critical-hover: var(--color-critical-400);
+    --color-text-action-critical-active: var(--color-critical-200);
+    --color-text-action-critical-disabled: var(--color-neutral-400);
+
+    --color-border-action-normal: var(--color-action-300);
+    --color-border-action-hover: var(--color-action-400);
+    --color-border-action-active: var(--color-action-200);
+    --color-border-action-disabled: var(--color-neutral-450);
+
+    --color-text-critical-normal: var(--color-critical-300);
+    --color-text-critical-disabled: var(--color-neutral-300);
+    --color-text-critical-error: var(--color-critical-300);
+
+    --color-border-action-critical-normal: var(--color-critical-300);
+    --color-border-action-critical-hover: var(--color-critical-400);
+    --color-border-action-critical-active: var(--color-critical-200);
+    --color-border-action-critical-disabled: var(--color-neutral-450);
+
+    --color-icon-action-primary-normal: var(--color-neutral-000);
+    --color-icon-action-primary-hover: var(--color-action-300);
+    --color-icon-action-primary-active: var(--color-action-200);
+    --color-icon-action-primary-disabled: var(--color-neutral-400);
+
+    --color-icon-action-secondary-normal: var(--color-action-300);
+    --color-icon-action-secondary-hover: var(--color-action-400);
+    --color-icon-action-secondary-active: var(--color-action-200);
+    --color-icon-action-secondary-disabled: var(--color-neutral-400);
+
+    --color-icon-on-action-primary-normal: var(--color-neutral-600);
+    --color-icon-on-action-primary-hover: var(--color-neutral-500);
+    --color-icon-on-action-primary-active: var(--color-neutral-600);
+    --color-icon-on-action-primary-disabled: var(--color-neutral-400);
+
+    --color-icon-action-critical-normal: var(--color-critical-300);
+    --color-icon-action-critical-hover: var(--color-critical-400);
+    --color-icon-action-critical-active: var(--color-critical-200);
+    --color-icon-action-critical-disabled: var(--color-neutral-400);
+
+    --color-icon-brand-primary-normal: var(--color-brand-300);
+    --color-icon-brand-primary-hover: var(--color-brand-400);
+    --color-icon-brand-primary-active: var(--color-brand-200);
+    --color-icon-brand-primary-disabled: var(--color-neutral-400);
+
+    --color-background-action-primary-normal: var(--color-action-300);
+    --color-background-action-primary-hover: var(--color-action-400);
+    --color-background-action-primary-active: var(--color-action-200);
+    --color-background-action-primary-disabled: var(--color-neutral-450);
+
+    --color-background-action-secondary-normal: var(--color-neutral-600);
+    --color-background-action-secondary-hover: var(--color-action-500);
+    --color-background-action-secondary-active: var(--color-neutral-600);
+    --color-background-action-secondary-disabled: var(--color-neutral-450);
+
+    --color-background-brand-normal: var(--color-brand-400);
+
+    --color-background-action-critical-primary-normal: var(
+      --color-critical-300
+    );
+    --color-background-action-critical-primary-hover: var(--color-critical-400);
+    --color-background-action-critical-primary-active: var(
+      --color-critical-200
+    );
+    --color-background-action-critical-primary-disabled: var(
+      --color-neutral-450
+    );
+
+    --color-background-action-critical-secondary-normal: var(
+      --color-neutral-600
+    );
+    --color-background-action-critical-secondary-hover: var(
+      --color-critical-500
+    );
+    --color-background-action-critical-secondary-active: var(
+      --color-neutral-600
+    );
+    --color-background-action-critical-secondary-disabled: var(
+      --color-neutral-450
+    );
+  }
+}

package/src/fonts.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "Open Sans";
+  src: url("../static/open-sans.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Icons";
+  src: url("../static/icons-light[FILL].woff2") format("woff2");
+  /* src: url("../static/icons-light.woff2") format("woff2"); - We needed icons-light with FILL option */
+  font-weight: 300;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Icons";
+  src: url("../static/icons-normal[FILL].woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}