fix(deps): update mantine monorepo to v7.13.2

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/core (source)	7.12.2 -> 7.13.2
@mantine/hooks (source)	7.12.2 -> 7.13.2

---

Release Notes

mantinedev/mantine (@​mantine/core)

v7.13.2

Compare Source

What's Changed

• [@mantine/dates] DateInput: Fix onClick handler passed to getDayProps not being called
• [@mantine/core] Badge: Fix incorrect cursor styles
• [@mantine/core] FileInput: Add resetRef prop support
• [@mantine/core] Popover: Fix onClose function being called twice with controlled state
• [@mantine/spotlight] Fix selected index not being reset when the spotlight is closed (#​6842)
• [@mantine/core] Popover: Improve performance of scrolling when large number of closed Popovers are rendered on the same page (#​6771)
• [@mantine/core] Pagination: Fix getItemProps not being able to override control children prop (#​6789)
• [@mantine/core] ScrollArea: Fix onBottomReached not being called if the viewport has decimal px height value (#​6792)
• [@mantine/hooks] use-in-viewport: Fix hook not reacting to node changes (#​6926)
• [@mantine/core] NumberInput: Fix incorrect handling of decimal numbers with more than 15 decimal places (#​6823)
• [@mantine/core] Slider: Fix marks not being aligned correctly (#​6909)
• [@mantine/hooks] use-fullscreen: Fix target node changes being ignored (#​6923)
• [@mantine/core] Badge: Fix incorrect sections alignment for variant="dot"
• [@mantine/core] TagsInput: Fix incorrect logic of removing duplicate tags (#​6922)
• [@mantine/core] AppShell: Fix error when Suspense is rendered inside AppShell (#​6927)
• [@mantine/core] Menu: Fix onKeyDown prop not working in Menu.Dropdown component (#​6910)

New Contributors

• @​RabeeAbuBaker made their first contribution in https://github.com/mantinedev/mantine/pull/6927
• @​linspw made their first contribution in https://github.com/mantinedev/mantine/pull/6923
• @​fellmann made their first contribution in https://github.com/mantinedev/mantine/pull/6926
• @​maclementED made their first contribution in https://github.com/mantinedev/mantine/pull/6842

Full Changelog: mantinedev/mantine@7.13.1...7.13.2

v7.13.1

Compare Source

What's Changed

• [@mantine/chart] PieChart: Remove unused CSS (#​6903)
• [@mantine/core] Menu: Fix onKeyDown not working when passed to Menu.Item (#​6906)
• [@mantine/core] TagsInput: Fix duplicated tags being deleted when one of tags with the same value is deleted (#​6907)
• [@mantine/dates] Fix hidden input value not respecting specified timezone (#​6881)
• [@mantine/hooks] use-hover: Fix events not being reattached when the target node changes (#​6782)
• [@mantine/colors-generator] Update chroma-js version to support the latest version (#​6879)
• [@mantine/core] PinInput: Fix incorrect Backspace key handling on the first input (#​6880)
• [@mantine/hooks] use-state-history: Add reset handler support (#​6769)
• [@mantine/core] ScrollArea: Fix onTopReached prop not being passed down in ScrollArea.Autosize component (#​6747)
• [@mantine/chart] Fix incorrect types for props passed down to recharts components (#​6820)
• [@mantine/form] Fix indices over 9 not working in form paths in some cases (#​6794)
• [@mantine/chart] BarChart: Fix BarLabel logging errors in the console (#​6810)
• [@mantine/chart] Fix error when chart tooltip label contains period (#​6826)
• [@mantine/core] Title: Add option to use Text font-size and line-height values with size prop (#​6833)
• [@mantine/date] Calendar: Fix nextLabel and previousLabel props not working (#​6847)
• [@mantine/core] Fix 2xl and other similar values being treated as CSS value instead of theme value (#​6855)
• [@mantine/core] Breadcrumbs: Fix component with large number of values not wrapping on small screens (#​6863)
• [@mantine/core] Table: Fix thead being overlayed to td in some cases (#​6860)

New Contributors

• @​ozantekin made their first contribution in https://github.com/mantinedev/mantine/pull/6863
• @​Vakarva made their first contribution in https://github.com/mantinedev/mantine/pull/6811
• @​zrll12 made their first contribution in https://github.com/mantinedev/mantine/pull/6747
• @​AdhamMoussa made their first contribution in https://github.com/mantinedev/mantine/pull/6769
• @​GZTimeWalker made their first contribution in https://github.com/mantinedev/mantine/pull/6879
• @​max-degterev made their first contribution in https://github.com/mantinedev/mantine/pull/6782
• @​ctdunc made their first contribution in https://github.com/mantinedev/mantine/pull/6907

Full Changelog: mantinedev/mantine@7.13.0...7.13.1

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 '@​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 '@​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 '@​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 '@​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 '@​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 '@​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

---

Configuration

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

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, 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.