ContextQMD
Back to Mantine

7 16 0

apps/mantine.dev/src/pages/changelog/7-16-0.mdx

9.4.23.8 KB
Original Source

import { CarouselDemos, InputDemos, PaginationDemos, PopoverDemos, SliderDemos, TableOfContentsDemos, UseScrollSpyDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog7160);

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.

<Demo data={UseScrollSpyDemos.usage} />

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:

<Demo data={TableOfContentsDemos.usage} />

Input.ClearButton component

New Input.ClearButton component can be used to add clear button to custom inputs based on Input component. size of the clear button is automatically inherited from the input:

<Demo data={InputDemos.clearButton} />

Popover with overlay

Popover and other components based on it now support withOverlay prop:

<Demo data={PopoverDemos.overlay} />

You can now use container queries in Carousel component. With container queries, all responsive values are adjusted based on the container width, not the viewport width.

Example of using container queries. To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right corner of the demo:

<Demo data={CarouselDemos.container} />

RangeSlider restrictToMarks

RangeSlider component now supports restrictToMarks prop:

<Demo data={SliderDemos.restrictToMarks} />

Pagination withPages prop

Pagination component now supports withPages prop which allows hiding pages controls and displaying only previous and next buttons:

<Demo data={PaginationDemos.withPages} />

useForm touchTrigger option

use-form hook now supports touchTrigger option that allows customizing events that change touched state. It accepts two options:

  • change (default) – field will be considered touched when its value changes or it has been focused
  • focus – field will be considered touched only when it has been focused

Example of using focus trigger:

tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { a: 1 },
  touchTrigger: 'focus',
});

form.isTouched('a'); // -> false
form.setFieldValue('a', 2);
form.isTouched('a'); // -> false

// onFocus is called automatically when the user focuses the field
form.getInputProps('a').onFocus();
form.isTouched('a'); // -> true

Help Center updates

Other changes