Sourced from @​mantine/form's releases.

7.16.0 🌶️

View changelog with demos on mantine.dev website

use-scroll-spy hook

New use-scroll-spy hook tracks scroll position and returns index of the element that is currently in the viewport. It is useful for creating table of contents components (like in mantine.dev sidebar on the right side) and similar features.

import { Text, UnstyledButton } from '@mantine/core';
import { useScrollSpy } from '@mantine/hooks';
function Demo() {
const spy = useScrollSpy({
selector: '#mdx :is(h1, h2, h3, h4, h5, h6)',
});
const headings = spy.data.map((heading, index) => (
<li
key={heading.id}
style={{
listStylePosition: 'inside',
paddingInlineStart: heading.depth * 20,
background: index === spy.active ? 'var(--mantine-color-blue-light)' : undefined,
}}
>
<UnstyledButton onClick={() => heading.getNode().scrollIntoView()}>
{heading.value}
</UnstyledButton>
</li>
));
return (
<div>
<Text>Scroll to heading:</Text>
<ul style={{ margin: 0, padding: 0 }}>{headings}</ul>
</div>
);
}

TableOfContents component

New TableOfContents component is built on top of use-scroll-spy hook and can be used to create table of contents components like the one on the right side of mantine.dev documentation sidebar:

</tr></table> 

... (truncated)

• e8f7b01 [release] Version: 7.16.0
• 75d2c25 [release] Version: 7.15.3
• 41b8186 [release] Version: 7.15.2
• 296fb8f [@​mantine/form] Fix incorrect validators types (#7242)
• 7f47aef [release] Version: 7.15.1
• 9b6524d [@​mantine/form] Add touchTrigger option support
• See full diff in compare view

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)