chore(deps): update all dependencies

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@babel/core (source)	7.23.7 -> 7.23.9
@commitlint/cli (source)	18.4.4 -> 18.6.0
@commitlint/config-conventional (source)	18.4.4 -> 18.6.0
@mantine/core (source)	7.4.0 -> 7.5.1
@mantine/hooks (source)	7.4.0 -> 7.5.1
@playwright/test (source)	1.40.1 -> 1.41.2
@reduxjs/toolkit (source)	2.0.1 -> 2.1.0
@tanstack/react-query (source)	5.17.1 -> 5.18.1
@tanstack/react-query-devtools (source)	5.17.1 -> 5.18.1
@types/react (source)	18.2.46 -> 18.2.55
@types/react-dom (source)	18.2.18 -> 18.2.19
@typescript-eslint/eslint-plugin (source)	6.17.0 -> 6.21.0
@typescript-eslint/parser (source)	6.17.0 -> 6.21.0
@vitest/ui (source)	1.1.2 -> 1.2.2
autoprefixer	10.4.16 -> 10.4.17
axios (source)	1.6.4 -> 1.6.7
eslint-plugin-playwright	0.21.0 -> 0.22.2
eslint-plugin-prettier	5.1.2 -> 5.1.3
husky	8.0.3 -> 9.0.10
lint-staged	15.2.0 -> 15.2.2
postcss (source)	8.4.33 -> 8.4.35
postcss-preset-mantine	1.12.3 -> 1.13.0
prettier (source)	3.1.1 -> 3.2.5
prettier-plugin-tailwindcss	0.5.10 -> 0.5.11
react-hook-form (source)	7.49.2 -> 7.50.1
react-redux	9.0.4 -> 9.1.0
react-router-dom (source)	6.21.1 -> 6.22.0
tailwindcss (source)	3.4.0 -> 3.4.1
type-fest	4.9.0 -> 4.10.2
vite (source)	5.0.10 -> 5.0.12
vitest (source)	1.1.2 -> 1.2.2

---

Release Notes

babel/babel (@​babel/core)

v7.23.9

Compare Source

🐛 Bug Fix

• babel-helper-transform-fixture-test-runner, babel-plugin-transform-function-name, babel-plugin-transform-modules-systemjs, babel-preset-env
  • #​16225 fix: systemjs re-traverses helpers (@​liuxingbaoyu)
• babel-helper-create-class-features-plugin, babel-plugin-proposal-decorators
  • #​16226 Improve decorated private method check (@​JLHwung)
• babel-plugin-proposal-decorators, babel-plugin-transform-async-generator-functions, babel-plugin-transform-runtime, babel-preset-env
  • #​16224 Properly sort core-js@3 imports (@​nicolo-ribaudo)
• babel-traverse
  • #​15383 fix: Don't throw in getTypeAnnotation when using TS+inference (@​liuxingbaoyu)
• Other
  • #​16210 [eslint] Fix no-use-before-define for class ref in fields (@​nicolo-ribaudo)

🏠 Internal

• babel-core, babel-parser, babel-template
  • #​16222 Migrate eslint-parser to cts (@​liuxingbaoyu)
• babel-types
  • #​16213 Remove @babel/types props that are not produced by the parser (@​liuxingbaoyu)

🏃‍♀️ Performance

• babel-parser
  • #​16072 perf: Improve parser performance for typescript (@​liuxingbaoyu)

🔬 Output optimization

• babel-helper-create-class-features-plugin, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-pipeline-operator, babel-plugin-transform-class-properties, babel-plugin-transform-class-static-block, babel-plugin-transform-new-target, babel-plugin-transform-parameters, babel-plugin-transform-private-methods, babel-preset-env
  • #​16218 Improve temporary variables for decorators (@​liuxingbaoyu)
• babel-helpers, babel-plugin-proposal-explicit-resource-management, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • #​15959 Improve output of using (@​liuxingbaoyu)

conventional-changelog/commitlint (@​commitlint/cli)

v18.6.0

Compare Source

Note: Version bump only for package @​commitlint/cli

v18.5.0

Compare Source

Features

• cli: print-config now can be configured to print a json in stdout (#​3863) (6381a2d), closes #​3819

18.4.4 (2024-01-04)

Note: Version bump only for package @​commitlint/cli

18.4.3 (2023-11-21)

Note: Version bump only for package @​commitlint/cli

18.4.2 (2023-11-16)

Note: Version bump only for package @​commitlint/cli

18.4.1 (2023-11-12)

Note: Version bump only for package @​commitlint/cli

conventional-changelog/commitlint (@​commitlint/config-conventional)

v18.6.0

Compare Source

Features

• rules: add header-trim rule (#​3199) (#​3871) (331579a)

v18.5.0

Compare Source

Note: Version bump only for package @​commitlint/config-conventional

18.4.4 (2024-01-04)

Note: Version bump only for package @​commitlint/config-conventional

18.4.3 (2023-11-21)

Note: Version bump only for package @​commitlint/config-conventional

18.4.2 (2023-11-16)

Note: Version bump only for package @​commitlint/config-conventional

mantinedev/mantine (@​mantine/core)

v7.5.1

Compare Source

What's Changed

• [@mantine/core] Indicator: Improve processing animation for lo-resolution monitors (#​5682)
• [@mantine/hooks] use-debounced-state: Fix incorrect type definition (#​5665)
• [@mantine/hooks] use-session-storage: Fix default value not being set in the storage on initial render (#​5663)
• [@mantine/core] Combobox: Fix incorrect dropdown styles with custom ScrollArea component (#​5677)
• [@mantine/form] Fix incorrect touch and dirty state handling in form.initialize (#​5623)
• [@mantine/core] Chip: Fix error thrown when page is modified with Google Translate (#​5586)
• [@mantine/form] Add previous value as second argument to onValuesChange (#​5649)
• [@mantine/core] Fix autoContrast defined on theme not working in some components (#​5655)
• [@mantine/core] Fix broken alignment in Checkbox, Radio and Switch (#​5648)
• [@mantine/core-highlight] Add withCopyButton prop support to CodeHighlightTabs (#​5608)
• [@mantine/core] Update useComputedColorScheme types to match definition with other similar hooks (#​5588)
• [@mantine/core] MultiSelect: Forbid select item removal if associated item becomes disabled (#​5630)

New Contributors

• @​Phirb made their first contribution in https://github.com/mantinedev/mantine/pull/5630
• @​c0nd3v made their first contribution in https://github.com/mantinedev/mantine/pull/5588
• @​sxflynn made their first contribution in https://github.com/mantinedev/mantine/pull/5605
• @​vizath made their first contribution in https://github.com/mantinedev/mantine/pull/5648
• @​mariansimecek made their first contribution in https://github.com/mantinedev/mantine/pull/5649
• @​gabrielmaldi made their first contribution in https://github.com/mantinedev/mantine/pull/5670
• @​waweber made their first contribution in https://github.com/mantinedev/mantine/pull/5668
• @​msv96 made their first contribution in https://github.com/mantinedev/mantine/pull/5663
• @​cristianghita24 made their first contribution in https://github.com/mantinedev/mantine/pull/5665
• @​matthiasfeist made their first contribution in https://github.com/mantinedev/mantine/pull/5682

Full Changelog: mantinedev/mantine@7.5.0...7.5.1

v7.5.0: ✨ 7.5.0

Compare Source

View changelog with demos on mantine.dev website

DonutChart component

New DonutChart component:

import { DonutChart } from '@​mantine/charts';
import { data } from './data';

function Demo() {
  return <DonutChart data={data} />;
}

PieChart component

New PieChart component:

import { PieChart } from '@​mantine/charts';
import { data } from './data';

function Demo() {
  return <PieChart data={data} />;
}

@​mantine/dates value formatter

DatePickerInput, MonthPickerInput and
YearPickerInput now support valueFormatter prop.

valueFormatter is a more powerful alternative to valueFormat prop.
It allows formatting value label with a custom function.
The function is the same for all component types (default, multiple and range)
– you need to perform additional checks inside the function to handle different types.

Example of using a custom formatter function with type="multiple":

import dayjs from 'dayjs';
import { useState } from 'react';
import { DateFormatter, DatePickerInput } from '@​mantine/dates';

const formatter: DateFormatter = ({ type, date, locale, format }) => {
  if (type === 'multiple' && Array.isArray(date)) {
    if (date.length === 1) {
      return dayjs(date[0]).locale(locale).format(format);
    }

    if (date.length > 1) {
      return `${date.length} dates selected`;
    }

    return '';
  }

  return '';
};

function Demo() {
  const [value, setValue] = useState<Date[]>([]);

  return (
    <DatePickerInput
      label="Pick 2 dates or more"
      placeholder="Pick 2 dates or more"
      value={value}
      onChange={setValue}
      type="multiple"
      valueFormatter={formatter}
    />
  );
}

@​mantine/dates consistent weeks

You can now force each month to have 6 weeks by setting consistentWeeks: true on
DatesProvider. This is useful if you want to avoid layout
shifts when month changes.

import { DatePicker, DatesProvider } from '@​mantine/dates';

function Demo() {
  return (
    <DatesProvider settings={{ consistentWeeks: true }}>
      <DatePicker />
    </DatesProvider>
  );
}

Charts series label

It is now possible to change series labels with label property
in series object. This feature is supported in AreaChart,
BarChart and LineChart components.

import { AreaChart } from '@​mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <AreaChart
      h={300}
      data={data}
      dataKey="date"
      type="stacked"
      withLegend
      legendProps={{ verticalAlign: 'bottom' }}
      series={[
        { name: 'Apples', label: 'Apples sales', color: 'indigo.6' },
        { name: 'Oranges', label: 'Oranges sales', color: 'blue.6' },
        { name: 'Tomatoes', label: 'Tomatoes sales', color: 'teal.6' },
      ]}
    />
  );
}

Charts value formatter

All @mantine/charts components now support valueFormatter prop, which allows
formatting value that is displayed on the y axis and inside the tooltip.

import { AreaChart } from '@​mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <AreaChart
      h={300}
      data={data}
      dataKey="date"
      type="stacked"
      valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
      series={[
        { name: 'Apples', color: 'indigo.6' },
        { name: 'Oranges', color: 'blue.6' },
        { name: 'Tomatoes', color: 'teal.6' },
      ]}
    />
  );
}

Headings text wrap

New Title textWrap prop sets text-wrap
CSS property. It controls how text inside an element is wrapped.

import { Title } from '@​mantine/core';

function Demo() {
  return (
    <Title order={3} textWrap="wrap">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptatibus inventore iusto
      cum dolore molestiae perspiciatis! Totam repudiandae impedit maxime!
    </Title>
  );
}

You can also set textWrap on theme:

import { createTheme, MantineProvider } from '@​mantine/core';

const theme = createTheme({
  headings: {
    textWrap: 'wrap',
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Title>Some very long title that should wrap</Title>
    </MantineProvider>
  );
}

If set on theme, textWrap is also applied to headings in TypographyStylesProvider

mod prop

All components now support mod prop, which allows adding data attributes to
the root element:

import { Box } from '@​mantine/core';

<Box mod="data-button" />;
// -> <div data-button />

<Box mod={{ opened: true }} />;
// -> <div data-opened />

<Box mod={{ opened: false }} />;
// -> <div />

<Box mod={['button', { opened: true }]} />;
// -> <div data-button data-opened />

<Box mod={{ orientation: 'horizontal' }} />;
// -> <div data-orientation="horizontal" />

Documentation updates

• New testing with Vitest guide
• NativeSelect with dividers demo
• Popover shift and flip middlewares documentation
• Combobox props related to Popover documentation
• Loading styles from CDN guide
• Anchor now includes additional documentation on how to use Text props
• Pagination now includes props tables for all compound components
• A more detailed breakdown of browser support has been added to the about page

Help center updates

New articles added to the help center:

• Can I use Mantine with Astro?
• How can I contribute to the library?
• How can I add dynamic CSS styles?
• How can I load fonts in Next.js?
• How can I load fonts in Vite?
• Is there a floating action button component?
• How to change inputs placeholder color?
• I do not have styles in my dates components...

Other changes

• Checkbox.Group, Radio.Group and Switch.Group now support readOnly prop
• ActionIcon now has loading state animation
• SegmentedControl now supports withItemsBorder prop which allows removing border between items
• Progress now supports transitionDuration prop which controls section width animation duration
• Textarea and JsonInput components now support resize prop, which allows setting resize CSS property on the input
• @mantine/hooks package now exports readLocalStorageValue and readSessionStorageValue function to get value from storage outside of React components

v7.4.2

Compare Source

What's Changed

• [@mantine/modals] Fix onClose throwing error if trapFocus: false is passed to one of the modals (#​5577)
• [@mantine/dates] Add missing placeholder styles api selector to DatePickerInput, MonthPickerInput and YearPickerInput components
• [@mantine/tiptap] Fix incorrect disabled controls in dark color scheme
• [@mantine/core] MultiSelect: Fix combobox.closeDropdown() called twice in onBlur method
• [@mantine/tiptap] Fix incorrect peer dependencies
• [@mantine/core] Fix incorrect colors resolving logic for bg style prop
• [@mantine/core] Remove global height styles from body and html
• [@mantine/hooks] use-media-query: Fix getInitialValueInEffect not working correctly when initial value is provided (#​5575, #​5549)
• [@mantine/core] Divider: Change default colors to match other components (#​5480)
• [@mantine/core] Fix incorrect forceColorScheme={undefined} handling (#​4959)
• [@mantine/core] Menu: Remove duplicated static class on the dropdown element (#​5537)
• [@mantine/core] Add / support for rgba calculations (#​5544)

New Contributors

• @​kjk7034 made their first contribution in https://github.com/mantinedev/mantine/pull/5544

Full Changelog: mantinedev/mantine@7.4.1...7.4.2

v7.4.1

Compare Source

What's Changed

• [@mantine/core] Combobox: Fix numpad enter not working (#​5526)
• [@mantine/core] Combobox: Fix onClose prop not working (#​5509)
• [@mantine/core] AppShell: Fix header height 0 not working (#​5514)
• [@mantine/core] ColorPicker: Fix incorrect background gradient in AlphaSlider (#​5518)
• [@mantine/core] Indicator: Fix autoContrast being passed to the dom node as attribute (#​5508)
• [@mantine/core] NumberInput: Fix allowLeadingZeros prop not working
• [@mantine/core] NumberInput: Fix incorrect controls border color in disabled state
• [@mantine/core] NumberInput: Fix incorrect -0.0, -0.00, -0.000 ... inputs handling
• [@mantine/core] Popover: Improve width prop type
• [@mantine/core] Improve types of data prop in Autocomplete and TagsInput components
• [@mantine/core] MultiSelect: Fix required prop not displaying required asterisk
• [@mantine/hooks] use-scroll-into-view: Improve types (#​5426)
• [@mantine/core] MultiSelect: Fix incorrect pointer-events style on the right section (#​5472)
• [@mantine/core] Fix breakpoints defined in px being transformed into em when visibleFrom and hiddenFrom props are used (#​5457)
• [@mantine/core] Rating: Improve size type (#​5470)
• [@mantine/core] ScrollArea: Fix ScrollArea.Autosize working incorrectly with some tables (#​5481)
• [@mantine/core] NumberInput: Add support for numbers that are larger than Number.MAX_SAFE_INTEGER (#​5471)
• [@mantine/core] Combobox: Fix readonly data array not being supported (#​5477)
• [@mantine/charts] Fix incorrect y-axis styles in RTL (#​5505)

New Contributors

• @​hexcowboy made their first contribution in https://github.com/mantinedev/mantine/pull/5477
• @​giveerr made their first contribution in https://github.com/mantinedev/mantine/pull/5471
• @​ayovev made their first contribution in https://github.com/mantinedev/mantine/pull/5481
• @​hirotomoyamada made their first contribution in https://github.com/mantinedev/mantine/pull/5518
• @​buzzthedev made their first contribution in https://github.com/mantinedev/mantine/pull/5535
• @​ID-JA made their first contribution in https://github.com/mantinedev/mantine/pull/5509

Full Changelog: mantinedev/mantine@7.4.0...7.4.1

microsoft/playwright (@​playwright/test)

v1.41.2

Compare Source

Highlights

https://github.com/microsoft/playwright/issues/29123 - [REGRESSION] route.continue: Protocol error (Fetch.continueRequest): Invalid InterceptionId.

Browser Versions

• Chromium 121.0.6167.57
• Mozilla Firefox 121.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 120
• Microsoft Edge 120

v1.41.1

Compare Source

Highlights

https://github.com/microsoft/playwright/issues/29067 - [REGRESSION] Codegen/Recorder: not all clicks are being actioned nor recordedhttps://github.com/microsoft/playwright/issues/290288 - [REGRESSION] React component tests throw type error when passing null/undefined to componenhttps://github.com/microsoft/playwright/issues/2902727 - [REGRESSION] React component tests not passing Date prop valuhttps://github.com/microsoft/playwright/issues/29023023 - [REGRESSION] React component tests not rendering children phttps://github.com/microsoft/playwright/issues/290199019 - [REGRESSION] trace.playwright.dev does not currently support the loading from URL

Browser Versions

• Chromium 121.0.6167.57
• Mozilla Firefox 121.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 120
• Microsoft Edge 120

v1.41.0

Compare Source

New APIs

• New method page.unrouteAll([options]) removes all routes registered by page.route(url, handler, handler[, options]) and page.routeFromHAR(har[, options]). Optionally allows to wait for ongoing routes to finish, or ignore any errors from them.
• New method browserContext.unrouteAll([options]) removes all routes registered by browserContext.route(url, handler, handler[, options]) and browserContext.routeFromHAR(har[, options]). Optionally allows to wait for ongoing routes to finish, or ignore any errors from them.
• New option style in page.screenshot([options]) and locator.screenshot([options]) to add custom CSS to the page before taking a screenshot.
• New option stylePath for methods expect(page).toHaveScreenshot(name[, options]) and expect(locator).toHaveScreenshot(name[, options]) to apply a custom stylesheet while making the screenshot.
• New fileName option for Blob reporter, to specify the name of the report to be created.

Browser Versions

• Chromium 121.0.6167.57
• Mozilla Firefox 121.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 120
• Microsoft Edge 120

reduxjs/redux-toolkit (@​reduxjs/toolkit)

v2.1.0

Compare Source

This minor release:

• adds withTypes methods to listenerMiddleware and createDraftSafeSelector
• adds a skipPollingIfUnfocused option to RTK Query
• adds the ability to customise the createSelector instance used by RTK Query
• reworks slice selector logic to avoid depending on this value
• fixes the order and inference of create.asyncThunk type parameters
• fixes requirements for meta fields returned from queryFns
• marks promises that will never reject as safe, in preparation for https://github.com/typescript-eslint/typescript-eslint/issues/7008

What's Changed

• Update docs to avoid circular type by @​EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3948
• Copy "Migrating to Modern Redux" and "RTK is Redux" docs from core site by @​markerikson in https://github.com/reduxjs/redux-toolkit/pull/3956
• Fix store path rtk-query pokemon api tutorial by @​suspiciousRaccoon in https://github.com/reduxjs/redux-toolkit/pull/3611
• tweak RTKQ without hooks section, and add note regarding memoization by @​EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3963
• Add section regarding overriding deps by @​EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3968
• Add section re: RR custom context typing change by @​EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/3995
• Add Expo demo app to CI workflow by @​aryaemami59 in https://github.com/reduxjs/redux-toolkit/pull/3985
• docs: fix a typo in queries markdown file by @​fatihgnc in https://github.com/reduxjs/redux-toolkit/pull/4013
• Preserve nullable store state type by avoiding intersection with {} by @​EskiMojo14 in https://github.com/reduxjs/redux-toolkit/pull/4011
• Upgrade version of "graphql-request" by @​phryneas in https://github.com/reduxjs/redux-toolkit/pull/4026
• [graphql-request-base-query] update RTK peerDependency by @​phryneas in https://github.com/reduxjs/redux-toolkit/pull/4027
• fix: improve selectFromResult memoization by @​thisjeremiah in [https://github.com/reduxjs/redu

---

Configuration

📅 Schedule: Branch creation - "before 4am on the first day of the month" (UTC), 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.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

---

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

---

This PR has been generated by Mend Renovate. View repository job log here.

[netlify]

✅ Deploy Preview for my-react-template ready!

Name	Link
🔨 Latest commit	fa30a73
🔍 Latest deploy log	https://app.netlify.com/sites/my-react-template/deploys/65c43bf365434900099e0b4b
😎 Deploy Preview	https://deploy-preview-109--my-react-template.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.