@dmsi/wedgekit-react 0.0.4

package/src/components/Tooltip.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import clsx from "clsx";
+import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { typography } from "../classNames";
+
+export type TooltipProps = PropsWithChildren<{
+  message: string;
+  position?: "top" | "bottom" | "left" | "right";
+  children?: ReactNode;
+  showOnTruncation?: boolean;
+  offset?: number;
+}>;
+
+export const Tooltip = ({
+  message,
+  position = "top",
+  children,
+  showOnTruncation = false,
+  offset = 8,
+}: TooltipProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = useState(false);
+  const [removeOpacity, setRemoveOpacity] = useState(false);
+
+  const updatePosition = () => {
+    if (!ref.current || !tooltipRef.current) return;
+    
+    const rect = ref.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    
+    let top = 0;
+    let left = 0;
+    
+    switch (position) {
+      case "top":
+        top = rect.top - tooltipRect.height - offset;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = rect.bottom + offset;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.left - tooltipRect.width - offset;
+        break;
+      case "right":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.right + offset;
+        break;
+    }
+    
+    setTooltipPosition({ top, left });
+    requestAnimationFrame(() => {
+      setRemoveOpacity(true);
+    })
+  };
+
+  const handleMouseEnter = () => {
+    if (!showOnTruncation || checkForTextTruncation()) {
+      setIsVisible(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setIsVisible(false);
+    setRemoveOpacity(false);
+  };
+
+  useEffect(() => {
+    if (isVisible && tooltipRef.current) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      })
+    }
+  }, [isVisible]);
+
+  useEffect(() => {
+    if (isVisible) {
+      window.addEventListener('resize', updatePosition);
+      return () => window.removeEventListener('resize', updatePosition);
+    }
+  }, [isVisible]);
+
+  return (
+    <div
+      ref={ref}
+      className="relative inline-grid grid-cols-[auto_1fr] items-center"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+
+      {isVisible && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={tooltipRef}
+          style={{
+            position: 'fixed',
+            top: `${tooltipPosition.top}px`,
+            left: `${tooltipPosition.left}px`,
+            zIndex: 9999,
+          }}
+          className={clsx(
+            typography.caption,
+            "p-2 bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+            !removeOpacity && "opacity-0"
+          )}
+        >
+          {message}
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+
+  function checkForTextTruncation() {
+    if (showOnTruncation && ref.current) {
+      const paragraph = ref.current.querySelector('p');
+
+      if (paragraph) {
+        const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
+        setIsTruncated(isTruncated);
+
+        return isTruncated;
+      }
+    }
+
+    return false;
+  }
+};
+
+Tooltip.displayName = "Tooltip";

package/src/components/TopBar.tsx

@@ -0,0 +1,124 @@
+import clsx from "clsx";
+import { ComponentProps, ReactNode } from "react";
+import {
+  containerPaddingX,
+  gapUsingContainerPadding,
+  layoutGap,
+  layoutGroupGap,
+  layoutGroupGapPaddingY,
+} from "../classNames";
+import { LogoDMSiTopBar } from "./LogoDMSiTopBar";
+
+export type TopBarProps = ComponentProps<"div"> & {
+  left?: ReactNode;
+  right?: ReactNode;
+  topNavLinks?: ReactNode;
+  mobileLeft?: ReactNode;
+  mobileRight?: ReactNode;
+  brandLogo?: ReactNode;
+};
+
+export const TopBarBase = ({
+  left,
+  right,
+  topNavLinks,
+  mobileLeft,
+  mobileRight,
+  brandLogo = <LogoDMSiTopBar />,
+  ...props
+}: TopBarProps) => {
+  const defaultStyles = clsx("bg-background-primary-normal");
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-between",
+        containerPaddingX,
+        layoutGroupGapPaddingY,
+        layoutGap,
+        defaultStyles,
+      )}
+      {...props}
+    >
+      {left && (
+        <div
+          className={clsx(
+            "hidden desktop:flex items-center",
+            gapUsingContainerPadding,
+          )}
+        >
+          {left}
+        </div>
+      )}
+
+      {(right || topNavLinks) && (
+        <div
+          className={clsx(
+            "hidden desktop:flex items-center shrink-0 ml-auto",
+            "[&>a]:leading-6",
+            layoutGroupGap,
+          )}
+        >
+          {topNavLinks}
+
+          {topNavLinks && right && (
+            <div className="h-6 border-r border-border-primary-normal"></div>
+          )}
+
+          {right}
+        </div>
+      )}
+
+      {mobileLeft && (
+        <div
+          className={clsx("flex items-center desktop:hidden", layoutGroupGap)}
+        >
+          {mobileLeft}
+
+          <a
+            href="/"
+            className="grow max-w-[400px] h-auto max-h-10 *:max-h-[inherit]"
+          >
+            {brandLogo && brandLogo}
+          </a>
+        </div>
+      )}
+
+      {mobileRight && (
+        <div
+          className={clsx("flex items-center desktop:hidden", layoutGroupGap)}
+        >
+          {mobileRight}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const TopBar = ({
+  left,
+  brandLogo = <LogoDMSiTopBar />,
+
+  ...props
+}: TopBarProps & { brandLogo?: ReactNode }) => {
+  return (
+    <TopBarBase
+      {...props}
+      brandLogo={brandLogo}
+      left={
+        <>
+          <a
+            href="/"
+            className="grow max-w-[400px] h-auto max-h-10 *:max-h-[inherit]"
+          >
+            {brandLogo && brandLogo}
+          </a>
+
+          {left}
+        </>
+      }
+    />
+  );
+};
+
+TopBar.displayName = "TopBar";

package/src/components/useInfiniteScroll.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, RefObject } from "react";
+
+export function useInfiniteScroll({
+  containerRef,
+  onLoadMore,
+  isLoading,
+  offset = 50,
+  enabled = true, // ✅ Add this
+}: {
+  containerRef: RefObject<HTMLElement | null>;
+  onLoadMore: () => void;
+  isLoading: boolean;
+  offset?: number;
+  enabled?: boolean; // ✅ Add this
+}) {
+  useEffect(() => {
+    if (!enabled) return; // ✅ Skip logic if not enabled
+
+    const handleScroll = () => {
+      const el = containerRef.current;
+      if (!el || isLoading) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
+
+      if (isNearBottom) {
+        onLoadMore();
+      }
+    };
+
+    const el = containerRef.current;
+    if (el) el.addEventListener("scroll", handleScroll);
+
+    return () => {
+      if (el) el.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, onLoadMore, isLoading, offset, enabled]); // ✅ include enabled
+}

package/src/components/useMatchesMedia.tsx

@@ -0,0 +1,28 @@
+import { useLayoutEffect, useState } from "react";
+
+export const useMatchesMedia = (query: string): boolean => {
+  const [matches, setMatches] = useState(() =>
+    typeof window !== "undefined" ? window.matchMedia(query).matches : false,
+  );
+
+  useLayoutEffect(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    mediaQueryList.addEventListener("change", listener);
+    setMatches(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [query]);
+
+  return matches;
+};
+
+export const useMatchesMobile = (): boolean => {
+  const isMobile = useMatchesMedia("(width < 48rem)");
+
+  return isMobile;
+};

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;
+};