feat: add rootMargin to TableOfContents builder (#1210)

Co-authored-by: Jiewei Cheong <[email protected]> Co-authored-by: Thomas G. Lopes <26071571 [email protected]>
melt-ui · Jun 28, 2024 · 13275cf · 13275cf
1 parent 23129c1
commit 13275cf
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/rude-pugs-tease.md b/.changeset/rude-pugs-tease.md
@@ -0,0 1,5 @@
 ---
 "@melt-ui/svelte": minor
 ---
 
 feat: add rootMargin to TableOfContents builder
diff --git a/src/docs/data/builders/table-of-contents.ts b/src/docs/data/builders/table-of-contents.ts
@@ -35,6 35,12 @@ const builder: APISchema = {
 `'highest'` means the opposite.\n\
 `'lowest-parents'` means that parents of the heading with the lowest visible content are also considered active, and the same goes for `'highest-parents'`.",
  },
  {
  name: 'rootMargin',
  type: 'string',
  description:
  'The root margin for the intersection observer. Refer to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) for more information.',
  },
  {
  name: 'scrollOffset',
  type: 'number',

diff --git a/src/lib/builders/table-of-contents/create.ts b/src/lib/builders/table-of-contents/create.ts
@@ -32,6 32,7 @@ export function createTableOfContents(args: CreateTableOfContentsArgs) {
  selector,
  exclude,
  activeType,
  rootMargin,
  scrollBehaviour,
  scrollOffset,
  headingFilterFn,
@@ -301,6 302,7 @@ export function createTableOfContents(args: CreateTableOfContentsArgs) {
  observer = new IntersectionObserver(handleElementObservation, {
  root: null,
  threshold: observer_threshold,
  rootMargin,
  });
  elementsList.forEach((el) => observer?.observe(el));
  }

diff --git a/src/lib/builders/table-of-contents/types.ts b/src/lib/builders/table-of-contents/types.ts
@@ -48,6 48,10 @@ export type CreateTableOfContentsArgs = {
  * - 'highest-parents': Parents of the heading with the highest visible content are also considered active.
  */
  activeType?: ActiveType;
  /**
  * The root margin for the intersection observer. Refer to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) for more information.
  */
  rootMargin?: string;
  /**
  * A custom filter function for headings.
  */