@slithy/base-ui 0.1.0 → 0.2.0

package/src/Dropdown/DropdownRenderer.tsx

@@ -0,0 +1,118 @@
+import { Menu } from "@base-ui/react/menu";
+import { useEffect, useRef, useState } from "react";
+import { useDropdownStore } from "./DropdownStore";
+import "./Dropdown.css";
+
+/**
+ * Singleton renderer — mount once at the app root.
+ * Subscribes to the global DropdownStore and renders the active dropdown
+ * using Base UI's Menu.Root + Menu.Positioner.
+ *
+ * Menu.Root stays mounted so CSS transitions can play on both open and close.
+ * Content and anchor are swapped when a new dropdown opens.
+ */
+export function DropdownRenderer() {
+  const open = useDropdownStore((s) => s.open);
+  const content = useDropdownStore((s) => s.content);
+  const anchor = useDropdownStore((s) => s.anchor);
+  const keyboardOpen = useDropdownStore((s) => s.keyboardOpen);
+  const generation = useDropdownStore((s) => s.openGeneration);
+
+  // Keep content/anchor alive during close animation so the popup
+  // doesn't disappear before the transition finishes.
+  const lastContentRef = useRef(content);
+  const lastAnchorRef = useRef(anchor);
+  if (content) lastContentRef.current = content;
+  if (anchor) lastAnchorRef.current = anchor;
+
+  const activeContent = content ?? lastContentRef.current;
+  const activeAnchor = anchor ?? lastAnchorRef.current;
+
+  // Track whether we've ever had content (don't mount Menu.Root until first open)
+  const [hasOpened, setHasOpened] = useState(false);
+  // Defer the first open by one frame so Menu.Root mounts with open={false},
+  // then transitions to open={true} — enabling the starting-style animation.
+  const [deferredOpen, setDeferredOpen] = useState(false);
+  useEffect(() => {
+    if (open && !hasOpened) {
+      setHasOpened(true);
+      requestAnimationFrame(() => setDeferredOpen(true));
+    } else {
+      setDeferredOpen(open);
+    }
+  }, [open, hasOpened]);
+
+  // Restore focus to the trigger when the menu closes.
+  // Use RAF to run after Menu.Root's own focus restoration.
+  const prevOpenRef = useRef(false);
+  useEffect(() => {
+    if (prevOpenRef.current && !open && lastAnchorRef.current) {
+      const el = lastAnchorRef.current;
+      requestAnimationFrame(() => el.focus());
+    }
+    prevOpenRef.current = open;
+  }, [open]);
+
+  const callbacks = useDropdownStore((s) => s.callbacks);
+  const menuConfig = useDropdownStore((s) => s.menuConfig);
+  const positionConfig = useDropdownStore((s) => s.positionConfig);
+
+  // Auto-dismiss when the trigger scrolls out of view (non-modal only).
+  useEffect(() => {
+    if (!open || !anchor || menuConfig.modal !== false) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) {
+          useDropdownStore.getState().closeDropdown();
+        }
+      },
+      { threshold: 0 },
+    );
+    observer.observe(anchor);
+    return () => observer.disconnect();
+  }, [open, anchor, menuConfig.modal]);
+  const lastCallbacksRef = useRef(callbacks);
+  if (callbacks.onOpenChange) lastCallbacksRef.current = callbacks;
+
+  // Clear stale content after close animation completes
+  const handleOpenChangeComplete = (isOpen: boolean) => {
+    lastCallbacksRef.current.onOpenChangeComplete?.(isOpen);
+    if (!isOpen) {
+      lastContentRef.current = null;
+      lastAnchorRef.current = null;
+    }
+  };
+
+  if (!hasOpened) return null;
+
+  return (
+    <Menu.Root
+      open={deferredOpen}
+      modal={menuConfig.modal}
+      loopFocus={menuConfig.loopFocus}
+      highlightItemOnHover={menuConfig.highlightItemOnHover}
+      orientation={menuConfig.orientation}
+      onOpenChange={(isOpen, eventDetails) => {
+        if (!isOpen && eventDetails.reason !== "trigger-hover") {
+          lastCallbacksRef.current.onOpenChange?.(false);
+          useDropdownStore.getState().closeDropdown(generation);
+        }
+      }}
+      onOpenChangeComplete={handleOpenChangeComplete}
+    >
+      <Menu.Portal>
+        <Menu.Positioner
+          anchor={activeAnchor}
+          className="slithy-dropdown-positioner"
+          side={positionConfig.side}
+          sideOffset={positionConfig.sideOffset ?? 4}
+          align={positionConfig.align}
+          alignOffset={positionConfig.alignOffset}
+          collisionPadding={positionConfig.collisionPadding}
+        >
+          {activeContent}
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}

package/src/Dropdown/DropdownStore.ts

@@ -0,0 +1,147 @@
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import type { ReactNode } from "react";
+
+/* ------------------------------------------------------------------ */
+/*  Minimal store (self-contained, no external deps)                   */
+/* ------------------------------------------------------------------ */
+
+type Listener = () => void;
+
+export type DropdownCallbacks = {
+  onOpenChange?: (open: boolean) => void;
+  onOpenChangeComplete?: (open: boolean) => void;
+};
+
+export type DropdownMenuConfig = {
+  modal?: boolean;
+  loopFocus?: boolean;
+  highlightItemOnHover?: boolean;
+  orientation?: "vertical" | "horizontal";
+};
+
+export type DropdownPositionConfig = {
+  side?: "top" | "bottom" | "left" | "right" | "inline-end" | "inline-start";
+  sideOffset?: number;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+};
+
+export type DropdownStoreState = {
+  open: boolean;
+  content: ReactNode | null;
+  anchor: HTMLElement | null;
+  keyboardOpen: boolean;
+  callbacks: DropdownCallbacks;
+  menuConfig: DropdownMenuConfig;
+  positionConfig: DropdownPositionConfig;
+  /** Monotonically increasing — lets the renderer ignore stale dismiss events */
+  openGeneration: number;
+  openDropdown: (
+    content: ReactNode,
+    anchor: HTMLElement,
+    options?: { keyboard?: boolean; callbacks?: DropdownCallbacks; menuConfig?: DropdownMenuConfig; positionConfig?: DropdownPositionConfig },
+  ) => void;
+  closeDropdown: (generation?: number) => void;
+  updateContent: (content: ReactNode) => void;
+};
+
+function shallowEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every((k) =>
+    Object.is(
+      (a as Record<string, unknown>)[k],
+      (b as Record<string, unknown>)[k],
+    ),
+  );
+}
+
+function createDropdownStore() {
+  const listeners = new Set<Listener>();
+
+  function notify() {
+    listeners.forEach((l) => l());
+  }
+
+  let state: DropdownStoreState = {
+    open: false,
+    content: null,
+    anchor: null,
+    keyboardOpen: false,
+    callbacks: {},
+    menuConfig: {},
+    positionConfig: {},
+    openGeneration: 0,
+
+    openDropdown(content, anchor, options) {
+      state = {
+        ...state,
+        open: true,
+        content,
+        anchor,
+        keyboardOpen: options?.keyboard ?? false,
+        callbacks: options?.callbacks ?? {},
+        menuConfig: options?.menuConfig ?? {},
+        positionConfig: options?.positionConfig ?? {},
+        openGeneration: state.openGeneration + 1,
+      };
+      notify();
+    },
+
+    closeDropdown(generation) {
+      // Ignore stale dismiss events from a previous menu instance
+      if (generation !== undefined && generation !== state.openGeneration) return;
+      state = {
+        ...state,
+        open: false,
+        content: null,
+        anchor: null,
+        keyboardOpen: false,
+      };
+      notify();
+    },
+
+    updateContent(content) {
+      if (!state.open || state.content === content) return;
+      state = { ...state, content };
+      notify();
+    },
+  };
+
+  return {
+    getState: () => state,
+    subscribe: (listener: Listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+const store = createDropdownStore();
+
+export function useDropdownStore<T>(selector: (state: DropdownStoreState) => T): T {
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+
+  const prevRef = useRef<T | undefined>(undefined);
+
+  const getSnapshot = useCallback(() => {
+    const result = selectorRef.current(store.getState());
+    const prev = prevRef.current;
+    if (prev !== undefined && shallowEqual(prev, result)) {
+      return prev;
+    }
+    prevRef.current = result;
+    return result;
+  }, []);
+
+  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+
+/** Direct access for imperative use inside event handlers */
+useDropdownStore.getState = store.getState;

package/src/Dropdown/index.ts

@@ -1 +1,2 @@
 export { Dropdown } from "./Dropdown";
+export { DropdownRenderer } from "./DropdownRenderer";