@multiplatform.one/forms 6.0.0

package/src/FloatingPanel/useFloatingPanel.ts

@@ -0,0 +1,344 @@
+import type { Middleware, Placement } from "@floating-ui/react";
+import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { clampDropdownRadius, scrollArrowThreshold } from "../shared/floatingList";
+
+export const panelAnimationDuration = 180;
+export const panelGrowDuration = 200;
+export const panelViewportPadding = 10;
+export const panelTransition = `opacity ${panelAnimationDuration}ms ease-out, transform ${panelAnimationDuration}ms ease-out, top ${panelGrowDuration}ms ease-out, max-height ${panelGrowDuration}ms ease-out, height ${panelGrowDuration}ms ease-out`;
+
+// ── Options ───────────────────────────────────────────────────
+
+export interface UseFloatingPanelOptions {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  disabled?: boolean;
+  /** Called just before the panel opens (e.g. to reset consumer-owned refs). */
+  onBeforeOpen?: () => void;
+  /** Consumer's reposition function — called on page scroll / resize. */
+  repositionRef?: RefObject<(() => void) | null>;
+  /**
+   * When provided, page-scroll is also blocked when the user scrolls
+   * past the boundary of this element (useful when the scroll area is
+   * a child of the floating element, e.g. Combobox list area).
+   */
+  scrollBoundaryRef?: RefObject<HTMLElement | null>;
+  /** Override default middleware ([offset, size]). Pass [] to disable. */
+  middleware?: Middleware[];
+  /** Enable floating-ui autoUpdate (default true). */
+  useAutoUpdate?: boolean;
+  /**
+   * Boolean ref set to true on inside-panel wheel events.
+   * The scroll-lock handler (document-level capture) flips this and
+   * calls repositionRef, so consumers don't need a separate wheel listener.
+   */
+  wheelGrowRef?: RefObject<boolean>;
+  /**
+   * When true, the floating panel width is based on its content rather than
+   * matching the trigger element width.
+   */
+  fitContent?: boolean;
+}
+
+// ── Return type ───────────────────────────────────────────────
+
+export interface UseFloatingPanelReturn {
+  context: ReturnType<typeof useFloating>["context"];
+  refs: ReturnType<typeof useFloating>["refs"];
+  x: number;
+  y: number;
+  strategy: ReturnType<typeof useFloating>["strategy"];
+  update: () => void;
+
+  mounted: boolean;
+  visible: boolean;
+  placement: Placement;
+  arrowUp: boolean;
+  arrowDown: boolean;
+
+  triggerRef: RefObject<HTMLElement | null>;
+  arrowScrollDirRef: RefObject<"up" | "down" | null>;
+  floatingStyleRef: RefObject<Record<string, any>>;
+  initializingRef: RefObject<boolean>;
+
+  computePlacement: () => void;
+  updateArrows: (element: HTMLElement) => void;
+  setReferenceRef: (node: HTMLElement | null) => void;
+  setMounted: Dispatch<SetStateAction<boolean>>;
+
+  dropdownRadius: string | 0;
+  hasBorder: boolean;
+  knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
+}
+
+// ── Hook ──────────────────────────────────────────────────────
+
+export function useFloatingPanel({
+  open,
+  onOpenChange,
+  disabled,
+  onBeforeOpen,
+  repositionRef,
+  scrollBoundaryRef,
+  middleware: middlewareProp,
+  useAutoUpdate: useAutoUpdateProp = true,
+  wheelGrowRef,
+  fitContent,
+}: UseFloatingPanelOptions): UseFloatingPanelReturn {
+  const { knobProps } = useResolvedKnobs();
+  const hasBorder = knobProps.borderRadius.borderWidth > 0;
+  const dropdownRadius = clampDropdownRadius(knobProps.borderRadius.borderRadius);
+
+  // ── State ─────────────────────────────────────────────────
+
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [arrowUp, setArrowUp] = useState(false);
+  const [arrowDown, setArrowDown] = useState(false);
+  const [placement, setPlacement] = useState<Placement>("bottom-start");
+
+  // ── Stable refs for callbacks (avoids cascading recreations) ──
+
+  const onBeforeOpenRef = useRef(onBeforeOpen);
+  onBeforeOpenRef.current = onBeforeOpen;
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+
+  // ── Refs ──────────────────────────────────────────────────
+
+  const closingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const arrowScrollDirRef = useRef<"up" | "down" | null>(null);
+  const floatingStyleRef = useRef<Record<string, any>>({});
+  const initializingRef = useRef(false);
+  const needsSetupRef = useRef(true);
+
+  // ── Placement ─────────────────────────────────────────────
+
+  const computePlacement = useCallback(() => {
+    const el = triggerRef.current;
+    if (!el || typeof window === "undefined") return;
+    const rect = el.getBoundingClientRect();
+    setPlacement(rect.top > window.innerHeight - rect.bottom ? "top-start" : "bottom-start");
+  }, []);
+
+  // ── Arrow state ───────────────────────────────────────────
+
+  const updateArrows = useCallback((element: HTMLElement) => {
+    const up = element.scrollTop > scrollArrowThreshold;
+    const down =
+      element.scrollTop < element.scrollHeight - element.clientHeight - scrollArrowThreshold;
+    setArrowUp((prev) => (prev !== up ? up : prev));
+    setArrowDown((prev) => (prev !== down ? down : prev));
+  }, []);
+
+  // ── Open / close setup ────────────────────────────────────
+
+  const setupForOpen = useCallback(() => {
+    computePlacement();
+    onBeforeOpenRef.current?.();
+    if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
+    floatingStyleRef.current = {};
+    initializingRef.current = true;
+    setMounted(true);
+  }, [computePlacement]);
+
+  // ── Lifecycle effect ──────────────────────────────────────
+
+  useEffect(() => {
+    if (open) {
+      if (needsSetupRef.current) setupForOpen();
+      needsSetupRef.current = true;
+      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+    } else {
+      setVisible(false);
+      setArrowUp(false);
+      setArrowDown(false);
+      if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
+      closingTimerRef.current = setTimeout(() => {
+        setMounted(false);
+      }, panelAnimationDuration);
+    }
+  }, [open, setupForOpen]);
+
+  useEffect(
+    () => () => {
+      if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
+    },
+    [],
+  );
+
+  // ── Floating UI setup ─────────────────────────────────────
+
+  const defaultMiddleware: Middleware[] = [
+    offset({ mainAxis: 4 }),
+    ...(fitContent
+      ? []
+      : [
+          size({
+            apply({
+              rects: {
+                reference: { width },
+              },
+              elements,
+            }) {
+              const minWidth = width + 8;
+              Object.assign(floatingStyleRef.current, { minWidth });
+              elements.floating.style.minWidth = `${minWidth}px`;
+            },
+            padding: panelViewportPadding,
+          }),
+        ]),
+  ];
+
+  const { x, y, strategy, context, refs, update } = useFloating({
+    open,
+    onOpenChange: (nextOpen) => {
+      if (disabled && nextOpen) return;
+      if (nextOpen) {
+        needsSetupRef.current = false;
+        setupForOpen();
+        const el = refs.floating.current;
+        if (el) el.scrollTop = 0;
+      }
+      onOpenChangeRef.current(nextOpen);
+    },
+    strategy: "fixed",
+    placement,
+    whileElementsMounted: useAutoUpdateProp ? autoUpdate : undefined,
+    middleware: middlewareProp ?? defaultMiddleware,
+  });
+
+  // ── Ref setup ─────────────────────────────────────────────
+
+  const setReferenceRef = useCallback(
+    (node: HTMLElement | null) => {
+      triggerRef.current = node;
+      refs.setReference(node);
+    },
+    [refs],
+  );
+
+  // ── Page scroll lock ──────────────────────────────────────
+
+  useLayoutEffect(() => {
+    if (!open || !mounted || typeof window === "undefined") return;
+    const scrollY = window.scrollY;
+    const floatingEl = refs.floating.current;
+    if (!floatingEl) return;
+
+    const preventScroll = (e: WheelEvent) => {
+      if (floatingEl.contains(e.target as Node)) {
+        if (wheelGrowRef && Math.abs(e.deltaY) > 0) {
+          wheelGrowRef.current = true;
+          repositionRef?.current?.();
+        }
+        // Use scrollBoundaryRef if provided (nested scroll), else use floating element.
+        // When content is short (no scroll), both boundaries are "hit" so we always prevent.
+        const scrollEl = scrollBoundaryRef?.current ?? floatingEl;
+        const atTop = scrollEl.scrollTop <= 0 && e.deltaY < 0;
+        const atBottom =
+          scrollEl.scrollTop >= scrollEl.scrollHeight - scrollEl.clientHeight - 1 && e.deltaY > 0;
+        if (atTop || atBottom) e.preventDefault();
+        return;
+      }
+      e.preventDefault();
+    };
+    const preventKeyScroll = (e: KeyboardEvent) => {
+      if (floatingEl.contains(e.target as Node)) return;
+      if (["ArrowDown", "ArrowUp", "Space", "PageDown", "PageUp", "Home", "End"].includes(e.code)) {
+        e.preventDefault();
+      }
+    };
+    const preventTouchScroll = (e: TouchEvent) => {
+      if (floatingEl.contains(e.target as Node)) return;
+      e.preventDefault();
+    };
+
+    window.scrollTo(0, scrollY);
+    requestAnimationFrame(() => window.scrollTo(0, scrollY));
+
+    document.addEventListener("wheel", preventScroll, { passive: false, capture: true });
+    document.addEventListener("keydown", preventKeyScroll, { capture: true });
+    document.addEventListener("touchmove", preventTouchScroll, { passive: false, capture: true });
+    return () => {
+      document.removeEventListener("wheel", preventScroll, { capture: true });
+      document.removeEventListener("keydown", preventKeyScroll, { capture: true });
+      document.removeEventListener("touchmove", preventTouchScroll, { capture: true });
+    };
+  }, [open, mounted, refs, scrollBoundaryRef, wheelGrowRef, repositionRef]);
+
+  // ── Close on offscreen + reposition on scroll / resize ────
+
+  useEffect(() => {
+    if (!open) return;
+    let rafId = 0;
+    const throttled = () => {
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        const trig = triggerRef.current;
+        if (trig) {
+          const rect = trig.getBoundingClientRect();
+          if (rect.bottom < 0 || rect.top > window.innerHeight) {
+            onOpenChangeRef.current(false);
+            return;
+          }
+        }
+        repositionRef?.current?.();
+      });
+    };
+    window.addEventListener("scroll", throttled, { passive: true });
+    window.addEventListener("resize", throttled, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", throttled);
+      window.removeEventListener("resize", throttled);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [open, repositionRef]);
+
+  // ── Resize sync ───────────────────────────────────────────
+
+  useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    window.addEventListener("resize", update);
+    if (open) update();
+    return () => window.removeEventListener("resize", update);
+  }, [update, open]);
+
+  return {
+    context,
+    refs,
+    x,
+    y,
+    strategy,
+    update,
+    mounted,
+    visible,
+    placement,
+    arrowUp,
+    arrowDown,
+    triggerRef,
+    arrowScrollDirRef,
+    floatingStyleRef,
+    initializingRef,
+    computePlacement,
+    updateArrows,
+    setReferenceRef,
+    setMounted,
+    dropdownRadius,
+    hasBorder,
+    knobProps,
+  };
+}