Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions .changeset/add-toc-component.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
'@ark-ui/react': minor
'@ark-ui/solid': minor
'@ark-ui/svelte': minor
'@ark-ui/vue': minor
---

**Toc** [New]: Add a table of contents component that tracks which headings are in view as the reader scrolls.

Pass the headings to `Toc.Root` as `items`, where each entry needs the heading element's `id` as `value` and its level
as `depth`. Set `scrollEl` when the content scrolls inside a container rather than the page, so tracking observes that
element instead of the viewport.

```tsx
<Toc.Root items={items} scrollEl={() => contentRef.current}>
<Toc.Content />
<Toc.Nav>
<Toc.Title />
<Toc.List>
<Toc.Indicator />
<Toc.Item item={item}>
<Toc.Link />
</Toc.Item>
</Toc.List>
</Toc.Nav>
</Toc.Root>
```

More than one heading can be active at once, so `Toc.Item` carries `data-first` and `data-last` to mark the ends of the
range, and `Toc.Indicator` spans it. Use `useToc` with `Toc.RootProvider` to reach `activeItems` and `scrollTo` from
outside the tree.

The API may still change while the component is in preview.
10 changes: 5 additions & 5 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ jobs:

- name: Create Release Pull Request or Publish
id: changesets
uses: changesets/action@v1
uses: changesets/action@v2.1.1
with:
version: bun run version
publish: bun run release
title: 'chore: release packages'
commit: 'chore: release packages'
version-script: bun run version
publish-script: bun run release
pr-title: 'chore: release packages'
commit-message: 'chore: release packages'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Loading