[Snyk] Upgrade @mantine/hooks from 7.12.2 to 7.13.0

[sam-morin]

Snyk has created this PR to upgrade @mantine/hooks from 7.12.2 to 7.13.0.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

---

• The recommended version is 1 version ahead of your current version.
• The recommended version was released a month ago, on 2024-09-25.

Release notes

Package name: @mantine/hooks

• 7.13.0 - 2024-09-25
  

  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
• 7.12.2 - 2024-08-30
  Read more

from @mantine/hooks GitHub release notes

Commit messages

Package name: @mantine/hooks

• 1d8c76d [core] Update yarn to the latest version
• 55910f0 [core] Fix ESLint 9 issues
• 2304030 Merge branch 'master' of github.com:mantinedev/mantine into 7.13
• 00a94ce [core] Migrate to ESLint 9
• a5f0cfa [core] Migrate all rules to eslint-config-mantine
• e5f3a53 [core] Migrate to eslint 9
• d21d85e Merge branch 'master' of github.com:mantinedev/mantine into 7.13
• 133b7bf [release] Version: 7.12.2
• 1f0034c Merge branch 'master' of github.com:mantinedev/mantine into 7.13
• aef1613 [core] Add 7.13.0 changelog for GitHub
• 69f6417 [mantine.dev] Add Grid container queries documentation
• c4b898d [@ mantine/core] Grid: Add container queries support
• 3315bc5 Merge branch '7.12' into 7.13
• 6c27558 [mantine.dev] Add CompositeChart component documentation
• 144aee6 [mantine.dev] Add all CompositeChart demos
• 41f9f8a [mantine.dev] Init CompositeChart demos
• f5ef82f [@ mantine/charts] CompositeChart: Init component
• 9558a03 [@ mantine/charts] ScatterChart: Add point labels support
• 8d4d749 [@ mantine/charts] Add points labels support to LineChart and AreaChart components
• e28f14f [@ mantine/charts] BarChart: Add mixed bar chart stacks support
• e1b7c3c [@ mantine/charts] BarChart: Add minBarSize prop support
• 6c0979e [mantine.dev] Add example on how to deselect radio chip
• d5ab57c [help.mantine.dev] Add question about using an array of strings in use-form lists
• 133cbef [help.mantine.dev] Add question about polymorphic components

Compare

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs