@conveyorhq/arrow-ds 1.36.0 → 1.37.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/ScrollSpy/ScrollSpy.d.ts

@@ -0,0 +1,57 @@
+import React, { ReactNode, Context, MutableRefObject, Dispatch, SetStateAction, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, KeyboardEvent, FocusEvent } from "react";
+declare type ScrollSpyContextType = {
+    currentIndex: number;
+    setCurrentIndex: Dispatch<SetStateAction<number>>;
+    currentPage: number;
+    setCurrentPage: Dispatch<SetStateAction<number>>;
+    refList: MutableRefObject<HTMLElement[]>;
+    updateCurrentRef(index: number, refItem: HTMLElement): void;
+    scrollToRef(refToScrollTo: HTMLElement): void;
+    scrollToFirst(event: MouseEvent): void;
+    scrollToLast(event: MouseEvent): void;
+    onAnchorClick(event: MouseEvent<HTMLAnchorElement>, index: number): void;
+    onInputChange(event: ChangeEvent<HTMLInputElement>): void;
+    onInputKeyUp(event: KeyboardEvent<HTMLInputElement>): void;
+    onInputFocus(event: FocusEvent<HTMLInputElement>): void;
+    items: number;
+    id: string;
+};
+export declare const ScrollSpyContext: Context<ScrollSpyContextType>;
+export declare function useScrollSpyContext(): ScrollSpyContextType;
+export interface ScrollSpyPageProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement;
+    threshold: number | number[] | undefined;
+    index: number;
+}
+export declare type ScrollSpyPageUsePropsHookProps = {
+    index: number;
+    id?: string;
+};
+export declare const useScrollSpyPageProps: ({ index, id }?: ScrollSpyPageUsePropsHookProps) => {
+    id: string;
+};
+export declare const ScrollSpyPage: React.ForwardRefExoticComponent<ScrollSpyPageProps & React.RefAttributes<HTMLDivElement>>;
+export interface ScrollSpyAnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    index: number;
+}
+export declare type ScrollSpyAnchorUsePropsHookProps = {
+    index: number;
+    id?: string;
+    href?: string;
+    onClick?(event: MouseEvent<HTMLAnchorElement>): void;
+};
+export declare const useScrollSpyAnchorProps: ({ index, id, href, onClick }?: ScrollSpyAnchorUsePropsHookProps) => {
+    id: string;
+    href: string;
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+    isActive: boolean;
+};
+export declare const ScrollSpyAnchor: React.ForwardRefExoticComponent<ScrollSpyAnchorProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare type ScrollSpyRootProps = {
+    children: ReactNode | ((props: ScrollSpyContextType) => JSX.Element);
+    items: number;
+    defaultIndex?: number;
+};
+export declare const ScrollSpyRoot: ({ children, items, defaultIndex, }: ScrollSpyRootProps) => JSX.Element;
+export {};

package/public/components/ScrollSpy/ScrollSpy.js

@@ -0,0 +1,184 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSpyRoot = exports.ScrollSpyAnchor = exports.useScrollSpyAnchorProps = exports.ScrollSpyPage = exports.useScrollSpyPageProps = exports.useScrollSpyContext = exports.ScrollSpyContext = void 0;
+const react_1 = __importStar(require("react"));
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const auto_id_1 = require("@reach/auto-id");
+const hooks_1 = require("../../hooks");
+const defaultRootContext = {
+    currentIndex: 0,
+    setCurrentIndex: (index) => index,
+    currentPage: 1,
+    setCurrentPage: (index) => index,
+    refList: { current: [] },
+    updateCurrentRef: () => { },
+    scrollToRef: () => { },
+    scrollToFirst: () => { },
+    scrollToLast: () => { },
+    onAnchorClick: () => { },
+    onInputChange: () => { },
+    onInputKeyUp: () => { },
+    onInputFocus: () => { },
+    items: 1,
+    id: "scroll-spy-1",
+};
+exports.ScrollSpyContext = react_1.createContext(defaultRootContext);
+function useScrollSpyContext() {
+    const context = react_1.useContext(exports.ScrollSpyContext) || {
+        ...defaultRootContext,
+    };
+    return context;
+}
+exports.useScrollSpyContext = useScrollSpyContext;
+const useScrollSpyPageProps = ({ index, id } = { index: 0 }) => {
+    const { id: rootId } = useScrollSpyContext();
+    const pageId = `${rootId}-page-${index + 1}`;
+    return {
+        id: id || pageId,
+    };
+};
+exports.useScrollSpyPageProps = useScrollSpyPageProps;
+exports.ScrollSpyPage = react_1.forwardRef(({ id: idProp, children, index, threshold = 0.5, ...rest }, forwardedRef) => {
+    const ref = react_1.useRef(null);
+    const combinedRef = react_merge_refs_1.default([ref, forwardedRef]);
+    const isVisible = hooks_1.useIntersection(ref, {
+        threshold,
+    });
+    const { updateCurrentRef, setCurrentIndex, setCurrentPage, } = useScrollSpyContext();
+    const { id } = exports.useScrollSpyPageProps({ index, id: idProp });
+    const pageNumber = index + 1;
+    react_1.useEffect(() => {
+        if (ref && ref.current) {
+            updateCurrentRef(index, ref.current);
+        }
+    }, [ref, index, updateCurrentRef]);
+    react_1.useEffect(() => {
+        if (isVisible) {
+            setCurrentIndex(index);
+            setCurrentPage(pageNumber);
+        }
+    }, [isVisible, index, pageNumber, setCurrentIndex, setCurrentPage]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(react_1.default.Children.only(children), {
+        ...rest,
+        ...children.props,
+        id,
+        ref: combinedRef,
+    })));
+});
+const useScrollSpyAnchorProps = ({ index, id, href, onClick } = { index: 0 }) => {
+    const { id: rootId, currentIndex, onAnchorClick } = useScrollSpyContext();
+    const { id: pageId } = exports.useScrollSpyPageProps({ index });
+    const anchorId = `${rootId}-anchor-${index + 1}`;
+    return {
+        id: id || anchorId,
+        href: href || `#${pageId}`,
+        onClick: (event) => {
+            event.preventDefault();
+            if (onClick)
+                onClick(event);
+            onAnchorClick(event, index);
+        },
+        isActive: currentIndex === index,
+    };
+};
+exports.useScrollSpyAnchorProps = useScrollSpyAnchorProps;
+exports.ScrollSpyAnchor = react_1.forwardRef(({ id, children, onClick, index = 0, ...rest }, forwardedRef) => {
+    const { isActive, ...anchorProps } = exports.useScrollSpyAnchorProps({
+        index,
+        id,
+        onClick,
+    });
+    return (react_1.default.createElement("a", Object.assign({ ref: forwardedRef }, anchorProps, rest), children));
+});
+const ScrollSpyRoot = ({ children, items, defaultIndex = 0, }) => {
+    const defaultPageNumber = defaultIndex + 1;
+    const [currentIndex, setCurrentIndex] = react_1.useState(defaultIndex);
+    const [currentPage, setCurrentPage] = react_1.useState(defaultPageNumber);
+    const refList = react_1.useRef([]);
+    const id = `scroll-spy-${auto_id_1.useId()}`;
+    react_1.useEffect(() => {
+        refList.current = refList.current.slice(0, items);
+    }, [items]);
+    const updateCurrentRef = (index, refItem) => {
+        refList.current[index] = refItem;
+    };
+    const scrollToRef = (refToScrollTo) => {
+        refToScrollTo.scrollIntoView({ behavior: "smooth" });
+    };
+    const scrollToFirst = (event) => {
+        event.stopPropagation();
+        scrollToRef(refList.current[0]);
+    };
+    const scrollToLast = (event) => {
+        event.stopPropagation();
+        scrollToRef(refList.current[items - 1]);
+    };
+    const onAnchorClick = (event, index) => {
+        event.stopPropagation();
+        scrollToRef(refList.current[index]);
+        setCurrentPage(index + 1);
+    };
+    const onInputFocus = (event) => event.target.select();
+    const onInputChange = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const { value } = event.target;
+        const pageNumber = parseInt(value, 10);
+        const index = pageNumber - 1;
+        setCurrentPage(pageNumber);
+        if (pageNumber && pageNumber >= 1 && pageNumber <= items) {
+            scrollToRef(refList.current[index]);
+        }
+    };
+    const onInputKeyUp = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const { value } = event.currentTarget;
+        const pageNumber = parseInt(value, 10);
+        const index = pageNumber - 1;
+        if (pageNumber && pageNumber >= 1 && pageNumber <= items) {
+            scrollToRef(refList.current[index]);
+        }
+    };
+    const context = {
+        currentIndex,
+        setCurrentIndex,
+        currentPage,
+        setCurrentPage,
+        refList,
+        updateCurrentRef,
+        scrollToRef,
+        scrollToFirst,
+        scrollToLast,
+        onAnchorClick,
+        onInputChange,
+        onInputKeyUp,
+        onInputFocus,
+        items,
+        id,
+    };
+    return (react_1.default.createElement(exports.ScrollSpyContext.Provider, { value: context }, typeof children === "function" ? children(context) : children));
+};
+exports.ScrollSpyRoot = ScrollSpyRoot;

package/public/components/ScrollSpy/index.d.ts

@@ -0,0 +1 @@
+export * from "./ScrollSpy";

package/public/components/ScrollSpy/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ScrollSpy"), exports);

package/public/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { useDisclosure } from "./useDisclosure";
+export { useIntersection } from "./useIntersection";
 export { useKeyPress } from "./useKeyPress";
 export { useMatchMedia } from "./useMatchMedia";
 export { useOutsideClick } from "./useOutsideClick";

package/public/hooks/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStep = exports.useScreenOrientation = exports.usePrefersReducedMotion = exports.useOutsideClick = exports.useMatchMedia = exports.useKeyPress = exports.useDisclosure = void 0;
+exports.useStep = exports.useScreenOrientation = exports.usePrefersReducedMotion = exports.useOutsideClick = exports.useMatchMedia = exports.useKeyPress = exports.useIntersection = exports.useDisclosure = void 0;
 var useDisclosure_1 = require("./useDisclosure");
 Object.defineProperty(exports, "useDisclosure", { enumerable: true, get: function () { return useDisclosure_1.useDisclosure; } });
+var useIntersection_1 = require("./useIntersection");
+Object.defineProperty(exports, "useIntersection", { enumerable: true, get: function () { return useIntersection_1.useIntersection; } });
 var useKeyPress_1 = require("./useKeyPress");
 Object.defineProperty(exports, "useKeyPress", { enumerable: true, get: function () { return useKeyPress_1.useKeyPress; } });
 var useMatchMedia_1 = require("./useMatchMedia");

package/public/hooks/useIntersection.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+export declare function useIntersection(ref: RefObject<HTMLElement>, options?: {
+    root?: Element | Document | null | undefined;
+    rootMargin?: string | undefined;
+    threshold?: number | number[] | undefined;
+}): boolean;

package/public/hooks/useIntersection.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersection = void 0;
+const react_1 = require("react");
+function useIntersection(ref, options) {
+    const [isIntersecting, setIsIntersecting] = react_1.useState(false);
+    const observer = react_1.useMemo(() => new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting), {
+        root: undefined,
+        rootMargin: "0px",
+        threshold: 1.0,
+        ...options,
+    }), [options]);
+    react_1.useEffect(() => {
+        if (ref && ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [observer, ref]);
+    return isIntersecting;
+}
+exports.useIntersection = useIntersection;

package/public/index.d.ts

@@ -61,6 +61,7 @@ export * from "./components/Radio";
 export * from "./components/Relative";
 export * from "./components/Reference";
 export * from "./components/ScrollPane";
+export * from "./components/ScrollSpy";
 export * from "./components/SearchFilter";
 export * from "./components/Select";
 export * from "./components/SelectNew";

package/public/index.js

@@ -81,6 +81,7 @@ __exportStar(require("./components/Radio"), exports);
 __exportStar(require("./components/Relative"), exports);
 __exportStar(require("./components/Reference"), exports);
 __exportStar(require("./components/ScrollPane"), exports);
+__exportStar(require("./components/ScrollSpy"), exports);
 __exportStar(require("./components/SearchFilter"), exports);
 __exportStar(require("./components/Select"), exports);
 __exportStar(require("./components/SelectNew"), exports);

package/src/components/ScrollSpy/ScrollSpy.story.mdx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import { ScrollSpy } from "./ScrollSpy";
+
+<Meta title="Components/Layout/Scroll Spy" component={ScrollSpy} />
+
+# Scroll Spy
+
+ScrollSpy tracks scrolling using IntersectionObserver.
+
+Documenation in progress…
+
+```jsx
+import { ScrollSpy } from "@conveyorhq/arrow-ds";
+```

package/src/components/ScrollSpy/ScrollSpy.tsx

@@ -0,0 +1,322 @@
+import React, {
+  ReactNode,
+  useState,
+  useRef,
+  useEffect,
+  Context,
+  createContext,
+  MutableRefObject,
+  useContext,
+  Dispatch,
+  SetStateAction,
+  HTMLAttributes,
+  forwardRef,
+  ReactElement,
+  AnchorHTMLAttributes,
+  MouseEvent,
+  ChangeEvent,
+  KeyboardEvent,
+  FocusEvent,
+} from "react";
+import mergeRefs from "react-merge-refs";
+import { useId } from "@reach/auto-id";
+import { useIntersection } from "../../hooks";
+
+// ------------------------------------------------------------------
+// ScrollSpy.Context
+// ------------------------------------------------------------------
+type ScrollSpyContextType = {
+  currentIndex: number;
+  setCurrentIndex: Dispatch<SetStateAction<number>>;
+  currentPage: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  refList: MutableRefObject<HTMLElement[]>;
+  updateCurrentRef(index: number, refItem: HTMLElement): void;
+  scrollToRef(refToScrollTo: HTMLElement): void;
+  scrollToFirst(event: MouseEvent): void;
+  scrollToLast(event: MouseEvent): void;
+  onAnchorClick(event: MouseEvent<HTMLAnchorElement>, index: number): void;
+  onInputChange(event: ChangeEvent<HTMLInputElement>): void;
+  onInputKeyUp(event: KeyboardEvent<HTMLInputElement>): void;
+  onInputFocus(event: FocusEvent<HTMLInputElement>): void;
+  items: number;
+  id: string;
+};
+
+const defaultRootContext: ScrollSpyContextType = {
+  currentIndex: 0,
+  setCurrentIndex: (index) => index,
+  currentPage: 1,
+  setCurrentPage: (index) => index,
+  refList: { current: [] },
+  updateCurrentRef: () => {},
+  scrollToRef: () => {},
+  scrollToFirst: () => {},
+  scrollToLast: () => {},
+  onAnchorClick: () => {},
+  onInputChange: () => {},
+  onInputKeyUp: () => {},
+  onInputFocus: () => {},
+  items: 1,
+  id: "scroll-spy-1",
+};
+
+export const ScrollSpyContext: Context<ScrollSpyContextType> = createContext<ScrollSpyContextType>(
+  defaultRootContext,
+);
+
+export function useScrollSpyContext() {
+  const context = useContext<typeof defaultRootContext>(ScrollSpyContext) || {
+    ...defaultRootContext,
+  };
+
+  return context;
+}
+
+// ------------------------------------------------------------------
+// ScrollSpy.Page
+// ------------------------------------------------------------------
+export interface ScrollSpyPageProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactElement;
+  threshold: number | number[] | undefined;
+  index: number;
+}
+
+export type ScrollSpyPageUsePropsHookProps = {
+  index: number;
+  id?: string;
+};
+
+export const useScrollSpyPageProps = (
+  { index, id }: ScrollSpyPageUsePropsHookProps = { index: 0 },
+) => {
+  const { id: rootId } = useScrollSpyContext();
+  const pageId = `${rootId}-page-${index + 1}`;
+  return {
+    id: id || pageId,
+  };
+};
+
+export const ScrollSpyPage = forwardRef<HTMLDivElement, ScrollSpyPageProps>(
+  ({ id: idProp, children, index, threshold = 0.5, ...rest }, forwardedRef) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const combinedRef = mergeRefs<HTMLDivElement>([ref, forwardedRef]);
+
+    const isVisible = useIntersection(ref, {
+      threshold,
+    });
+
+    const {
+      updateCurrentRef,
+      setCurrentIndex,
+      setCurrentPage,
+    } = useScrollSpyContext();
+
+    const { id } = useScrollSpyPageProps({ index, id: idProp });
+    const pageNumber = index + 1;
+
+    useEffect(() => {
+      if (ref && ref.current) {
+        updateCurrentRef(index, ref.current);
+      }
+    }, [ref, index, updateCurrentRef]);
+
+    useEffect(() => {
+      if (isVisible) {
+        setCurrentIndex(index);
+        setCurrentPage(pageNumber);
+      }
+    }, [isVisible, index, pageNumber, setCurrentIndex, setCurrentPage]);
+
+    return (
+      <>
+        {React.cloneElement(React.Children.only(children), {
+          ...rest,
+          ...children.props,
+          id,
+          ref: combinedRef,
+        })}
+      </>
+    );
+  },
+);
+
+// ------------------------------------------------------------------
+// ScrollSpy.Anchor
+// ------------------------------------------------------------------
+export interface ScrollSpyAnchorProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: ReactNode;
+  index: number;
+}
+
+export type ScrollSpyAnchorUsePropsHookProps = {
+  index: number;
+  id?: string;
+  href?: string;
+  onClick?(event: MouseEvent<HTMLAnchorElement>): void;
+};
+
+export const useScrollSpyAnchorProps = (
+  { index, id, href, onClick }: ScrollSpyAnchorUsePropsHookProps = { index: 0 },
+) => {
+  const { id: rootId, currentIndex, onAnchorClick } = useScrollSpyContext();
+  const { id: pageId } = useScrollSpyPageProps({ index });
+  const anchorId = `${rootId}-anchor-${index + 1}`;
+
+  return {
+    id: id || anchorId,
+    href: href || `#${pageId}`,
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (onClick) onClick(event);
+      onAnchorClick(event, index);
+    },
+    isActive: currentIndex === index,
+  };
+};
+
+export const ScrollSpyAnchor = forwardRef<
+  HTMLAnchorElement,
+  ScrollSpyAnchorProps
+>(({ id, children, onClick, index = 0, ...rest }, forwardedRef) => {
+  const { isActive, ...anchorProps } = useScrollSpyAnchorProps({
+    index,
+    id,
+    onClick,
+  });
+
+  return (
+    <a ref={forwardedRef} {...anchorProps} {...rest}>
+      {children}
+    </a>
+  );
+});
+
+// ------------------------------------------------------------------
+// ScrollSpy.Root
+// ------------------------------------------------------------------
+export type ScrollSpyRootProps = {
+  children: ReactNode | ((props: ScrollSpyContextType) => JSX.Element);
+  items: number;
+  defaultIndex?: number;
+};
+
+export const ScrollSpyRoot = ({
+  children,
+  items,
+  defaultIndex = 0,
+}: ScrollSpyRootProps) => {
+  const defaultPageNumber = defaultIndex + 1;
+  const [currentIndex, setCurrentIndex] = useState(defaultIndex);
+  const [currentPage, setCurrentPage] = useState(defaultPageNumber);
+  const refList = useRef<HTMLElement[]>([]);
+  const id = `scroll-spy-${useId()}`;
+
+  useEffect(() => {
+    refList.current = refList.current.slice(0, items);
+  }, [items]);
+
+  const updateCurrentRef = (index: number, refItem: HTMLElement) => {
+    refList.current[index] = refItem;
+  };
+
+  const scrollToRef = (refToScrollTo: HTMLElement) => {
+    refToScrollTo.scrollIntoView({ behavior: "smooth" });
+  };
+
+  const scrollToFirst = (event: MouseEvent) => {
+    event.stopPropagation();
+    scrollToRef(refList.current[0]);
+  };
+
+  const scrollToLast = (event: MouseEvent) => {
+    event.stopPropagation();
+    scrollToRef(refList.current[items - 1]);
+  };
+
+  const onAnchorClick = (
+    event: MouseEvent<HTMLAnchorElement>,
+    index: number,
+  ) => {
+    event.stopPropagation();
+    scrollToRef(refList.current[index]);
+    setCurrentPage(index + 1);
+  };
+
+  const onInputFocus = (event: FocusEvent<HTMLInputElement>) =>
+    event.target.select();
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+
+    const { value } = event.target;
+    const pageNumber = parseInt(value, 10);
+    const index = pageNumber - 1;
+
+    setCurrentPage(pageNumber);
+
+    if (pageNumber && pageNumber >= 1 && pageNumber <= items) {
+      scrollToRef(refList.current[index]);
+    }
+  };
+
+  const onInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+
+    const { value } = event.currentTarget;
+    const pageNumber = parseInt(value, 10);
+    const index = pageNumber - 1;
+
+    if (pageNumber && pageNumber >= 1 && pageNumber <= items) {
+      scrollToRef(refList.current[index]);
+    }
+  };
+
+  const context = {
+    currentIndex,
+    setCurrentIndex,
+    currentPage,
+    setCurrentPage,
+    refList,
+    updateCurrentRef,
+    scrollToRef,
+    scrollToFirst,
+    scrollToLast,
+    onAnchorClick,
+    onInputChange,
+    onInputKeyUp,
+    onInputFocus,
+    items,
+    id,
+  };
+
+  return (
+    <ScrollSpyContext.Provider value={context}>
+      {typeof children === "function" ? children(context) : children}
+    </ScrollSpyContext.Provider>
+  );
+};
+
+/**
+ * @TODO get types right and re-enable these exports
+ */
+// ------------------------------------------------------------------
+// ScrollSpy
+// ------------------------------------------------------------------
+// export type ScrollSpyProps = ScrollSpyRootProps & {
+//   Root: ScrollSpyRootProps;
+//   Anchor: ScrollSpyAnchorProps;
+//   Page: ScrollSpyPageProps;
+// };
+
+// export const ScrollSpy = () => ({
+//   ...ScrollSpyRoot,
+//   ...{
+//     Root: ScrollSpyRoot,
+//     Anchor: ScrollSpyAnchor,
+//     Page: ScrollSpyPage,
+//   },
+// });

package/src/components/ScrollSpy/index.ts

@@ -0,0 +1 @@
+export * from "./ScrollSpy";

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useDisclosure } from "./useDisclosure";
+export { useIntersection } from "./useIntersection";
 export { useKeyPress } from "./useKeyPress";
 export { useMatchMedia } from "./useMatchMedia";
 export { useOutsideClick } from "./useOutsideClick";

package/src/hooks/useIntersection.ts

@@ -0,0 +1,37 @@
+import { RefObject, useEffect, useMemo, useState } from "react";
+
+export function useIntersection(
+  ref: RefObject<HTMLElement>,
+  options?: {
+    root?: Element | Document | null | undefined;
+    rootMargin?: string | undefined;
+    threshold?: number | number[] | undefined;
+  },
+) {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(
+        ([entry]) => setIsIntersecting(entry.isIntersecting),
+        {
+          root: undefined,
+          rootMargin: "0px",
+          threshold: 1.0,
+          ...options,
+        },
+      ),
+    [options],
+  );
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [observer, ref]);
+
+  return isIntersecting;
+}

package/src/index.ts

@@ -62,6 +62,7 @@ export * from "./components/Radio";
 export * from "./components/Relative";
 export * from "./components/Reference";
 export * from "./components/ScrollPane";
+export * from "./components/ScrollSpy";
 export * from "./components/SearchFilter";
 export * from "./components/Select";
 export * from "./components/SelectNew";