scroll-spy

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