fix(deps): update mantine monorepo to v7.13.0 #3836

renovate · 2024-09-25T09:54:17Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/colors-generator (source)	`7.12.2` -> `7.13.0`
@mantine/core (source)	`7.12.2` -> `7.13.0`
@mantine/hooks (source)	`7.12.2` -> `7.13.0`
@mantine/modals (source)	`7.12.2` -> `7.13.0`
@mantine/notifications (source)	`7.12.2` -> `7.13.0`
@mantine/tiptap (source)	`7.12.2` -> `7.13.0`

Release Notes

mantinedev/mantine (@mantine/colors-generator)

`v7.13.0`: 🎇

Compare Source

View changelog with demos on mantine.dev website

Container queries support in Grid

You can now use container queries
in Grid 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:

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

function Demo() {
  return (
    // Wrapper div is added for demonstration purposes only,
    // it is not required in real projects
    <div style={{ resize: 'horizontal', overflow: 'hidden', maxWidth: '100%' }}>
      <Grid
        type="container"
        breakpoints={{ xs: '100px', sm: '200px', md: '300px', lg: '400px', xl: '500px' }}
      >
        <Col span={{ base: 12, md: 6, lg: 3 }}>1</Col>
        <Col span={{ base: 12, md: 6, lg: 3 }}>2</Col>
        <Col span={{ base: 12, md: 6, lg: 3 }}>3</Col>
        <Col span={{ base: 12, md: 6, lg: 3 }}>4</Col>
      </Grid>
    </div>
  );
}

CompositeChart component

New CompositeChart component allows using Line, Area and Bar charts together in a single chart:

import { CompositeChart } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CompositeChart
      h={300}
      data={data}
      dataKey="date"
      unit="$"
      maxBarWidth={30}
      series={[
        { name: 'Tomatoes', color: 'rgba(18, 120, 255, 0.2)', type: 'bar' },
        { name: 'Apples', color: 'red.8', type: 'line' },
        { name: 'Oranges', color: 'yellow.8', type: 'area' },
      ]}
    />
  );
}

Points labels

LineChart and AreaChart now support withPointLabels prop to display labels on data points:

import { LineChart } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <LineChart
      h={300}
      data={data}
      dataKey="date"
      withLegend
      withPointLabels
      series={[
        { name: 'Apples', color: 'indigo.6' },
        { name: 'Oranges', color: 'blue.6' },
      ]}
    />
  );
}

ScatterChart also supports point labels, but also allows to control which axis should display labels with pointLabels prop:

import { ScatterChart } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <ScatterChart
      h={350}
      data={data}
      dataKey={{ x: 'age', y: 'BMI' }}
      xAxisLabel="Age"
      yAxisLabel="BMI"
      pointLabels="x"
    />
  );
}

BarChart: Mixed stacks

You can now control how BarChart series are stacked by setting stackId property in series object:

import { BarChart } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="month"
      series={[
        { name: 'Smartphones', color: 'violet.6', stackId: 'a' },
        { name: 'Laptops', color: 'blue.6', stackId: 'b' },
        { name: 'Tablets', color: 'teal.6', stackId: 'b' },
      ]}
    />
  );
}

BarChart: Minimum bar size

BarChart now supports minBarSize prop to set the minimum size of the bar in px:

import { BarChart } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="month"
      withLegend
      series={[
        { name: 'Smartphones', color: 'violet.6' },
        { name: 'Laptops', color: 'blue.6' },
        { name: 'Tablets', color: 'teal.6' },
      ]}
    />
  );
}

Help Center updates

New How to integrate custom input with use-form hook? question
New Can I remove MultiSelect placeholder when the component has selected values? question
New How can I load fonts in Remix? question
New My styles are overridden by Mantine components styles, what should I do? question
New Why I cannot use one polymorphic component in component prop of another polymorphic component? question
New Can I use an array of strings as a list in use-form? question

Other changes

New demo has been added to Chip component with an example of how to deselect radio chip
BarChart now supports maxBarWidth prop to set the maximum width of each bar in px

mantinedev/mantine (@mantine/core)