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

[sam-morin]

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

ℹ️ 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 2 versions ahead of your current version.

• The recommended version was released on 25 days ago.

Release notes

Package name: @mantine/hooks

• 7.13.2 - 2024-10-03
  

  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 #6927
  • @ linspw made their first contribution in #6923
  • @ fellmann made their first contribution in #6926
  • @ maclementED made their first contribution in #6842

  Full Changelog: 7.13.1...7.13.2

• 7.13.1 - 2024-09-30
  

  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 #6863
  • @ Vakarva made their first contribution in #6811
  • @ zrll12 made their first contribution in #6747
  • @ AdhamMoussa made their first contribution in #6769
  • @ GZTimeWalker made their first contribution in #6879
  • @ max-degterev made their first contribution in #6782
  • @ ctdunc made their first contribution in #6907

  Full Changelog: 7.13.0...7.13.1

• 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

from @mantine/hooks GitHub release notes

---

Important

• Check the changes in this PR to ensure they won't cause issues with your project.
• This PR was automatically created by Snyk using the credentials of a real user.

---

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
• 📜 Customise PR templates
• 🛠 Adjust upgrade PR settings
• 🔕 Ignore this dependency or unsubscribe from future upgrade PRs