Update mantine monorepo to v8.2.1 #742

renovate · 2025-07-21T23:12:52Z

This PR contains the following updates:

Package	Change	Age	Confidence
@mantine/core (source)	`8.1.3` -> `8.2.1`
@mantine/hooks (source)	`8.1.3` -> `8.2.1`

Release Notes

mantinedev/mantine (@mantine/core)

`v8.2.1`

Compare Source

`v8.2.0`: 🔥

Compare Source

View changelog with demos on mantine.dev website

Styles API attributes

You now can pass attributes to inner elements of all components that support Styles API with attributes prop.
For example, it can be used to add data attributes for testing purposes:

import { Button } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Button
      attributes={{
        root: { 'data-test-id': 'root' },
        label: { 'data-test-id': 'label' },
        inner: { 'data-test-id': 'inner' },
      }}
    >
      Button
    </Button>
  );
}

Container grid strategy

Container now supports strategy="grid" prop which enables more
features.

Differences from the default strategy="block":

Uses display: grid instead of display: block
Does not include default inline padding
Does not set max-width on the root element (uses grid template columns instead)

Features supported by strategy="grid":

Everything that is supported by strategy="block"
Children with data-breakout attribute take the entire width of the container's parent element
Children with data-container inside data-breakout have the same width as the main grid column

Example of using breakout feature:

import { Box, Container } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Container strategy="grid" size={500}>
      <Box bg="var(--mantine-color-indigo-light)" h={50}>
        Main content
      </Box>

      <Box data-breakout bg="var(--mantine-color-indigo-light)" mt="xs">
        <div>Breakout</div>

        <Box data-container bg="indigo" c="white" h={50}>
          <div>Container inside breakout</div>
        </Box>
      </Box>
    </Container>
  );
}

Tooltip target

New Tooltip target prop is an alternative to children. It accepts a string (selector),
an HTML element or a ref object with HTML element. Use target prop when you do
not render tooltip target as JSX element.

Example of using target prop with a string selector:

import { Button, Tooltip } from '@&#8203;mantine/core';

function Demo() {
  return (
    <>
      <Tooltip target="#hover-me" label="Tooltip over button" />
      <Button id="hover-me">Hover me to see tooltip</Button>
    </>
  );
}

HoverCard.Group

HoverCard now supports delay synchronization between multiple instances using HoverCard.Group component:

import { HoverCard, Button, Text, Group } from '@&#8203;mantine/core';

function Demo() {
  return (
    <HoverCard.Group openDelay={500} closeDelay={100}>
      <Group justify="center">
        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>First</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">First hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Second</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Second hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Third</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Third hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </HoverCard.Group>
  );
}

use-selection hook

New use-selection hook:

import { Checkbox, Table } from '@&#8203;mantine/core';
import { useSelection } from '@&#8203;mantine/hooks';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function Demo() {
  const positions = useMemo(() => elements.map((element) => element.position), [elements]);

  const [selection, handlers] = useSelection({
    data: positions,
    defaultSelection: [39, 56],
  });

  const rows = elements.map((element) => {
    const isSelected = selection.includes(element.position);
    return (
      <Table.Tr key={element.name} bg={isSelected ? 'var(--mantine-color-blue-light)' : undefined}>
        <Table.Td>
          <Checkbox
            aria-label="Select row"
            checked={isSelected}
            onChange={(event) => {
              if (event.target.checked) {
                handlers.select(element.position);
              } else {
                handlers.deselect(element.position);
              }
            }}
          />
        </Table.Td>
        <Table.Td>{element.position}</Table.Td>
        <Table.Td>{element.name}</Table.Td>
        <Table.Td>{element.symbol}</Table.Td>
        <Table.Td>{element.mass}</Table.Td>
      </Table.Tr>
    );
  });

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>
            <Checkbox
              aria-label="Select deselect all rows"
              indeterminate={handlers.isSomeSelected()}
              checked={handlers.isAllSelected()}
              onChange={() => {
                if (handlers.isAllSelected()) {
                  handlers.resetSelection();
                } else {
                  handlers.setSelection(elements.map((el) => el.position));
                }
              }}
            />
          </Table.Th>
          <Table.Th>Element position</Table.Th>
          <Table.Th>Element name</Table.Th>
          <Table.Th>Symbol</Table.Th>
          <Table.Th>Atomic mass</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}

autoSelectOnBlur prop

Select and Autocomplete components now support autoSelectOnBlur prop.
Use it to automatically select the highlighted option when the input loses focus.
To see this feature in action: select an option with up/down arrows, then click outside the input:

import { Select } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Select
      label="Your favorite library"
      placeholder="Pick value"
      autoSelectOnBlur
      searchable
      data={['React', 'Angular', 'Vue', 'Svelte']}
    />
  );
}

Source edit mode in RichTextEditor

RichTextEditor now supports source edit mode:

import { useEditor } from '@&#8203;tiptap/react';
import StarterKit from '@&#8203;tiptap/starter-kit';
import { RichTextEditor } from '@&#8203;mantine/tiptap';
import { useState } from 'react';

function Demo() {
  const [isSourceCodeModeActive, onSourceCodeTextSwitch] = useState(false)

  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>',
  });

  return (
    <RichTextEditor editor={editor} onSourceCodeTextSwitch={onSourceCodeTextSwitch}>
      <RichTextEditor.Toolbar>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.SourceCode icon={BoldIcon} />
        </RichTextEditor.ControlsGroup>
        {!isSourceCodeModeActive && (
          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Blockquote />
            <RichTextEditor.Bold />
            <RichTextEditor.Italic />
            <RichTextEditor.Underline />
            <RichTextEditor.Strikethrough />
            <RichTextEditor.ClearFormatting />
            <RichTextEditor.Highlight />
          </RichTextEditor.ControlsGroup>
        )}
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

Recharts 3 support

You can now use the latest Recharts 3 version with Mantine charts.
@mantine/charts package was validated to work with both Recharts 2 and Recharts 3 versions.
Note that, there might still be some minor issues with Recharts 3, you are welcome to report issues on GitHub.

Other changes

Accordion default chevronSize prop value was changed to auto to allow using dynamic icon sizes
Accordion now supports chevronIconSize prop to configure size of the default chevron icon
AffixPosition type is now exported from @mantine/core package
errorProps, labelProps and descriptionProps props of all inputs now have stricter types and better IDE autocomplete
TypographyStylesProvider was renamed to just Typography to simplify usage. TypographyStylesProvider name is still available but marked as deprecated – it will be removed in 9.0.0 release.
Slider and RangeSlider components now have separate documentation pages

mantinedev/mantine (@mantine/hooks)

`v8.2.1`

Compare Source

`v8.2.0`: 🔥

Compare Source

View changelog with demos on mantine.dev website

Styles API attributes

You now can pass attributes to inner elements of all components that support Styles API with attributes prop.
For example, it can be used to add data attributes for testing purposes:

import { Button } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Button
      attributes={{
        root: { 'data-test-id': 'root' },
        label: { 'data-test-id': 'label' },
        inner: { 'data-test-id': 'inner' },
      }}
    >
      Button
    </Button>
  );
}

Container grid strategy

Container now supports strategy="grid" prop which enables more
features.

Differences from the default strategy="block":

Uses display: grid instead of display: block
Does not include default inline padding
Does not set max-width on the root element (uses grid template columns instead)

Features supported by strategy="grid":

Everything that is supported by strategy="block"
Children with data-breakout attribute take the entire width of the container's parent element
Children with data-container inside data-breakout have the same width as the main grid column

Example of using breakout feature:

import { Box, Container } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Container strategy="grid" size={500}>
      <Box bg="var(--mantine-color-indigo-light)" h={50}>
        Main content
      </Box>

      <Box data-breakout bg="var(--mantine-color-indigo-light)" mt="xs">
        <div>Breakout</div>

        <Box data-container bg="indigo" c="white" h={50}>
          <div>Container inside breakout</div>
        </Box>
      </Box>
    </Container>
  );
}

Tooltip target

New Tooltip target prop is an alternative to children. It accepts a string (selector),
an HTML element or a ref object with HTML element. Use target prop when you do
not render tooltip target as JSX element.

Example of using target prop with a string selector:

import { Button, Tooltip } from '@&#8203;mantine/core';

function Demo() {
  return (
    <>
      <Tooltip target="#hover-me" label="Tooltip over button" />
      <Button id="hover-me">Hover me to see tooltip</Button>
    </>
  );
}

HoverCard.Group

HoverCard now supports delay synchronization between multiple instances using HoverCard.Group component:

import { HoverCard, Button, Text, Group } from '@&#8203;mantine/core';

function Demo() {
  return (
    <HoverCard.Group openDelay={500} closeDelay={100}>
      <Group justify="center">
        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>First</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">First hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Second</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Second hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Third</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Third hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </HoverCard.Group>
  );
}

use-selection hook

New use-selection hook:

import { Checkbox, Table } from '@&#8203;mantine/core';
import { useSelection } from '@&#8203;mantine/hooks';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function Demo() {
  const positions = useMemo(() => elements.map((element) => element.position), [elements]);

  const [selection, handlers] = useSelection({
    data: positions,
    defaultSelection: [39, 56],
  });

  const rows = elements.map((element) => {
    const isSelected = selection.includes(element.position);
    return (
      <Table.Tr key={element.name} bg={isSelected ? 'var(--mantine-color-blue-light)' : undefined}>
        <Table.Td>
          <Checkbox
            aria-label="Select row"
            checked={isSelected}
            onChange={(event) => {
              if (event.target.checked) {
                handlers.select(element.position);
              } else {
                handlers.deselect(element.position);
              }
            }}
          />
        </Table.Td>
        <Table.Td>{element.position}</Table.Td>
        <Table.Td>{element.name}</Table.Td>
        <Table.Td>{element.symbol}</Table.Td>
        <Table.Td>{element.mass}</Table.Td>
      </Table.Tr>
    );
  });

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>
            <Checkbox
              aria-label="Select deselect all rows"
              indeterminate={handlers.isSomeSelected()}
              checked={handlers.isAllSelected()}
              onChange={() => {
                if (handlers.isAllSelected()) {
                  handlers.resetSelection();
                } else {
                  handlers.setSelection(elements.map((el) => el.position));
                }
              }}
            />
          </Table.Th>
          <Table.Th>Element position</Table.Th>
          <Table.Th>Element name</Table.Th>
          <Table.Th>Symbol</Table.Th>
          <Table.Th>Atomic mass</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}

autoSelectOnBlur prop

Select and Autocomplete components now support autoSelectOnBlur prop.
Use it to automatically select the highlighted option when the input loses focus.
To see this feature in action: select an option with up/down arrows, then click outside the input:

import { Select } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Select
      label="Your favorite library"
      placeholder="Pick value"
      autoSelectOnBlur
      searchable
      data={['React', 'Angular', 'Vue', 'Svelte']}
    />
  );
}

Source edit mode in RichTextEditor

RichTextEditor now supports source edit mode:

import { useEditor } from '@&#8203;tiptap/react';
import StarterKit from '@&#8203;tiptap/starter-kit';
import { RichTextEditor } from '@&#8203;mantine/tiptap';
import { useState } from 'react';

function Demo() {
  const [isSourceCodeModeActive, onSourceCodeTextSwitch] = useState(false)

  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>',
  });

  return (
    <RichTextEditor editor={editor} onSourceCodeTextSwitch={onSourceCodeTextSwitch}>
      <RichTextEditor.Toolbar>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.SourceCode icon={BoldIcon} />
        </RichTextEditor.ControlsGroup>
        {!isSourceCodeModeActive && (
          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Blockquote />
            <RichTextEditor.Bold />
            <RichTextEditor.Italic />
            <RichTextEditor.Underline />
            <RichTextEditor.Strikethrough />
            <RichTextEditor.ClearFormatting />
            <RichTextEditor.Highlight />
          </RichTextEditor.ControlsGroup>
        )}
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

Recharts 3 support

You can now use the latest Recharts 3 version with Mantine charts.
@mantine/charts package was validated to work with both Recharts 2 and Recharts 3 versions.
Note that, there might still be some minor issues with Recharts 3, you are welcome to report issues on GitHub.

Other changes

Accordion default chevronSize prop value was changed to auto to allow using dynamic icon sizes
Accordion now supports chevronIconSize prop to configure size of the default chevron icon
AffixPosition type is now exported from @mantine/core package
errorProps, labelProps and descriptionProps props of all inputs now have stricter types and better IDE autocomplete
TypographyStylesProvider was renamed to just Typography to simplify usage. TypographyStylesProvider name is still available but marked as deprecated – it will be removed in 9.0.0 release.
Slider and RangeSlider components now have separate documentation pages

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

Update mantine monorepo to v8.2.1

1d982be

renovate bot merged commit 7478a4e into main Jul 22, 2025
2 checks passed

renovate bot deleted the renovate/mantine-monorepo branch July 22, 2025 04:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update mantine monorepo to v8.2.1 #742

Update mantine monorepo to v8.2.1 #742

Uh oh!

renovate bot commented Jul 21, 2025

Uh oh!

Uh oh!

Uh oh!

Update mantine monorepo to v8.2.1 #742

Update mantine monorepo to v8.2.1 #742

Uh oh!

Conversation

renovate bot commented Jul 21, 2025

Release Notes

v8.2.1

v8.2.0: 🔥

Styles API attributes

Container grid strategy

Tooltip target

HoverCard.Group

use-selection hook

autoSelectOnBlur prop

Source edit mode in RichTextEditor

Recharts 3 support

Other changes

v8.2.1

v8.2.0: 🔥

Styles API attributes

Container grid strategy

Tooltip target

HoverCard.Group

use-selection hook

autoSelectOnBlur prop

Source edit mode in RichTextEditor

Recharts 3 support

Other changes

Configuration

Uh oh!

Uh oh!

Uh oh!

`v8.2.1`

`v8.2.0`: 🔥

`v8.2.1`

`v8.2.0`: 🔥