Establish NODE.DC design system baseline

2026-07-10 02:34:36 +03:00
commit 73629d68c3
63 changed files with 6701 additions and 0 deletions
@@ -0,0 +1,148 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { computeFloatingPosition, type FloatingPlacement } from "@nodedc/ui-core";
+import { cn } from "./cn";
+
+export interface DropdownTriggerApi {
+  open: boolean;
+  show: () => void;
+  close: () => void;
+  toggle: () => void;
+  setTriggerRef: (node: HTMLElement | null) => void;
+  surfaceId: string;
+}
+
+export interface DropdownProps {
+  trigger: (api: DropdownTriggerApi) => ReactNode;
+  children: ReactNode | ((api: { close: () => void }) => ReactNode);
+  placement?: FloatingPlacement;
+  minWidth?: number;
+  width?: number | "anchor";
+  offset?: number;
+  disabled?: boolean;
+  className?: string;
+  surfaceClassName?: string;
+  surfaceRole?: "menu" | "listbox" | "dialog";
+}
+
+export function Dropdown({
+  trigger,
+  children,
+  placement = "bottom-start",
+  minWidth = 180,
+  width = "anchor",
+  offset = 8,
+  disabled = false,
+  className,
+  surfaceClassName,
+  surfaceRole = "menu",
+}: DropdownProps) {
+  const instanceId = useId();
+  const surfaceId = `${instanceId.replaceAll(":", "")}-surface`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerElement, setTriggerElement] = useState<HTMLElement | null>(null);
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const [surfaceStyle, setSurfaceStyle] = useState<CSSProperties>({ visibility: "hidden" });
+
+  const close = useCallback(() => setIsOpen(false), []);
+  const show = useCallback(() => {
+    if (!disabled) setIsOpen(true);
+  }, [disabled]);
+  const toggle = useCallback(() => {
+    if (!disabled) setIsOpen((current) => !current);
+  }, [disabled]);
+
+  const updatePosition = useCallback(() => {
+    if (!triggerElement || !surfaceRef.current) return;
+    const anchor = triggerElement.getBoundingClientRect();
+    const measured = surfaceRef.current.getBoundingClientRect();
+    const surfaceWidth = typeof width === "number"
+      ? width
+      : Math.max(minWidth, anchor.width, measured.width);
+    const surfaceHeight = Math.max(1, surfaceRef.current.scrollHeight);
+    const position = computeFloatingPosition({
+      anchor,
+      surfaceWidth,
+      surfaceHeight,
+      placement,
+      offset,
+    });
+    setSurfaceStyle({
+      top: position.top,
+      left: position.left,
+      width: surfaceWidth,
+      maxHeight: position.maxHeight,
+      visibility: "visible",
+    });
+  }, [minWidth, offset, placement, triggerElement, width]);
+
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    updatePosition();
+  }, [isOpen, updatePosition]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (triggerElement?.contains(target) || surfaceRef.current?.contains(target)) return;
+      close();
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        close();
+        triggerElement?.focus();
+      }
+    };
+    const handleOtherOpen = (event: Event) => {
+      const detail = (event as CustomEvent<{ id?: string }>).detail;
+      if (detail.id !== instanceId) close();
+    };
+    const handleViewportChange = () => updatePosition();
+
+    window.dispatchEvent(new CustomEvent("nodedc-dropdown-open", { detail: { id: instanceId } }));
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("nodedc-dropdown-open", handleOtherOpen as EventListener);
+    window.addEventListener("resize", handleViewportChange);
+    window.addEventListener("scroll", handleViewportChange, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("nodedc-dropdown-open", handleOtherOpen as EventListener);
+      window.removeEventListener("resize", handleViewportChange);
+      window.removeEventListener("scroll", handleViewportChange, true);
+    };
+  }, [close, instanceId, isOpen, triggerElement, updatePosition]);
+
+  return (
+    <span className={cn("nodedc-dropdown-anchor", className)}>
+      {trigger({ open: isOpen, show, close, toggle, setTriggerRef: setTriggerElement, surfaceId })}
+      {isOpen && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={surfaceRef}
+              id={surfaceId}
+              className={cn("nodedc-dropdown-surface", surfaceClassName)}
+              role={surfaceRole}
+              style={surfaceStyle}
+            >
+              {typeof children === "function" ? children({ close }) : children}
+            </div>,
+            document.body,
+          )
+        : null}
+    </span>
+  );
+}
+