scroll-spy

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import * as React from "react";
6import { cn } from "@/lib/utils";
7import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
8import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
9import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
10import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
11import { useDirection } from "@/registry/bases/base/ui/direction";
12 
13const ROOT_NAME = "ScrollSpy";
14const NAV_NAME = "ScrollSpyNav";
15const LINK_NAME = "ScrollSpyLink";
16const VIEWPORT_NAME = "ScrollSpyViewport";
17const SECTION_NAME = "ScrollSpySection";
18 
19type Direction = "ltr" | "rtl";
20type Orientation = "horizontal" | "vertical";
21 
22type LinkElement = HTMLAnchorElement;
23type SectionElement = HTMLDivElement;
24 
25function getDefaultScrollBehavior(): ScrollBehavior {
26  if (typeof window === "undefined") return "smooth";
27  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
28    ? "auto"
29    : "smooth";
30}
31 
32interface StoreState {
33  value: string;
34}
35 
36interface Store {
37  subscribe: (callback: () => void) => () => void;
38  getState: () => StoreState;
39  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
40  notify: () => void;
41}
42 
43const StoreContext = React.createContext<Store | null>(null);
44 
45function useStore<T>(
46  selector: (state: StoreState) => T,
47  ogStore?: Store | null,
48): T {
49  const contextStore = React.useContext(StoreContext);
50 
51  const store = ogStore ?? contextStore;
52 
53  if (!store) {
54    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
55  }
56 
57  const getSnapshot = React.useCallback(
58    () => selector(store.getState()),
59    [store, selector],
60  );
61 
62  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
63}
64 
65interface ScrollSpyContextValue {
66  offset: number;
67  scrollBehavior: ScrollBehavior;
68  dir: Direction;
69  orientation: Orientation;
70  scrollContainer: HTMLElement | null;
71  isScrollingRef: React.RefObject<boolean>;
72  onSectionRegister: (id: string, element: SectionElement) => void;
73  onSectionUnregister: (id: string) => void;
74  onScrollToSection: (sectionId: string) => void;
75}
76 
77const ScrollSpyContext = React.createContext<ScrollSpyContextValue | null>(
78  null,
79);
80 
81function useScrollSpyContext(consumerName: string) {
82  const context = React.useContext(ScrollSpyContext);
83// … truncated