chore(ui): update mantine & related (major) #1094

renovate · 2024-02-13T00:52:24Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@iconify-icon/react (source)	`1.0.8` -> `2.0.0`
@mantine/carousel (source)	`^6` -> `^6 \|\| ^7.0.0`
@mantine/carousel (source)	`6.0.21` -> `7.5.2`
@mantine/core (source)	`^6` -> `^6 \|\| ^7.0.0`
@mantine/core (source)	`6.0.21` -> `7.5.2`
@mantine/dates (source)	`^6` -> `^6 \|\| ^7.0.0`
@mantine/dates (source)	`6.0.21` -> `7.5.2`
@mantine/form (source)	`^6` -> `^6 \|\| ^7.0.0`
@mantine/form (source)	`6.0.21` -> `7.5.2`
@mantine/hooks (source)	`^6` -> `^6 \|\| ^7.0.0`
@mantine/hooks (source)	`6.0.21` -> `7.5.2`
@mantine/notifications (source)	`^6` -> `^6 \|\| ^7.0.0`
@mantine/notifications (source)	`6.0.21` -> `7.5.2`
@mantine/nprogress (source)	`^6` -> `^6 \|\| ^7.0.0`
@mantine/nprogress (source)	`6.0.21` -> `7.5.2`
react-hook-form-mantine (source)	`^2.0.0` -> `^2.0.0 \|\| ^3.0.0`
react-hook-form-mantine (source)	`2.0.0` -> `3.1.3`

Release Notes

mantinedev/mantine (@mantine/carousel)

`v7.5.2`

Compare Source

What's Changed

[@mantine/core] ActionIcon: Fix icon width and height defined in % not working correctly
[@mantine/core] ScrollArea: Fix offsetScrollbars not working (#5733)
[@mantine/tiptap] Fix initialExternal on RichTextEditor.Link control not working correctly
[@mantine/core] FileInput: Fix incorrect extend function type
[@mantine/core] PinInput: Fix various issues related to user input and pasting into the input (#5704)
[@mantine/form] Add callback argument support to form.setFieldValue handler (#5696)
[@mantine/core] Add explicit extension to exports to support NodeNext TypeScript resolution (#5697)
[@mantine/hooks] use-list-state: Add swap handler support (#5716)
[@mantine/core] Fix NodeNext TypeScript resolution not working correctly for PolymorphicComponentProps and PolymorphicRef types (#5730)
[@mantine/core] Fix cjs builds unable to resolve third-party dependencies with certain TypeScript settings (#5741)
[@mantine/core] Transition: Fix skew-up transition not working (#5714)
[@mantine/core] Select: Fix active option not being scrolled into view when the dropdown opens
[@mantine/core] Menu: Fix unexpected focus trap when keepMounted is false (#4502)
[@mantine/core] ScrollArea: Fix style prop not being passed to the element when used in viewportProps (#5594)
[@mantine/core] Divider: Fix poor color contrast with light color scheme
[@mantine/core] Modal: Fix incorrect content border-radius when fullScreen prop is set
[@mantine/core] Modal: Fix scroll container not working correctly when ScrollArea is used as a scroll container for a full screen modal
[@mantine/notifications] Fix notifications handlers not allowing passing data-* attributes (#5640)

New Contributors

@kblcuk made their first contribution in https://github.com/mantinedev/mantine/pull/5741
@qweered made their first contribution in https://github.com/mantinedev/mantine/pull/5694
@kkaplita made their first contribution in https://github.com/mantinedev/mantine/pull/5704

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

`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 '@&#8203;mantine/charts';
import { data } from './data';

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

PieChart component

New PieChart component:

import { PieChart } from '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;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:

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

`v7.4.0`: ⭐

Compare Source

View changelog with demos on mantine.dev website

@mantine/charts

New @mantine/charts package provides a set of components
to build charts and graphs. All components are based on recharts.
Currently, the package provides AreaChart, BarChart,
LineChart and Sparkline components.
More components will be added in the next minor releases.

AreaChart component

New AreaChart component:

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

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

LineChart component

New LineChart component:

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

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

BarChart component

New BarChart component:

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

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

Sparkline component

New Sparkline component:

import { Sparkline } from '@&#8203;mantine/charts';

function Demo() {
  return (
    <Sparkline
      w={200}
      h={60}
      data={[10, 20, 40, 20, 40, 10, 50]}
      curveType="linear"
      color="blue"
      fillOpacity={0.6}
      strokeWidth={2}
    />
  );
}

OKLCH colors support

You can now use OKLCH colors in theme.colors.
OKLCH color model has 88.18% browser support,
it is supported in all modern browsers. OKLCH model provides 30% more colors than HSL model and
has several other advantages.

Example of adding OKLCH color to the theme:

import { Button, createTheme, Group, MantineProvider } from '@&#8203;mantine/core';

const theme = createTheme({
  colors: {
    'oklch-blue': [
      'oklch(96.27% 0.0217 238.66)',
      'oklch(92.66% 0.0429 240.01)',
      'oklch(86.02% 0.0827 241.66)',
      'oklch(78.2% 0.13 243.83)',
      'oklch(71.8% 0.1686 246.06)',
      'oklch(66.89% 0.1986 248.32)',
      'oklch(62.59% 0.2247 250.29)',
      'oklch(58.56% 0.2209 251.26)',
      'oklch(54.26% 0.2067 251.67)',
      'oklch(49.72% 0.1888 251.59)',
    ],
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button color="oklch-blue">Filled</Button>
        <Button color="oklch-blue" variant="outline">
          Outline
        </Button>
        <Button color="oklch-blue" variant="light">
          Light
        </Button>
      </Group>
    </MantineProvider>
  );
}

autoContrast

New theme.autoContrast property controls whether text color should be changed based on the given color prop
in the following components:

ActionIcon with variant="filled" only
Alert with variant="filled" only
Avatar with variant="filled" only
Badge with variant="filled" only
Button with variant="filled" only
Chip with variant="filled" only
NavLink with variant="filled" only
ThemeIcon with variant="filled" only
Checkbox with variant="filled" only
Radio with variant="filled" only
Tabs with variant="pills" only
SegmentedControl
Stepper
Pagination
Progress
Indicator
Timeline
Spotlight
All @mantine/dates components that are based on Calendar component

autoContrast can be set globally on the theme level or individually for each component via autoContrast prop,
except for Spotlight and @mantine/dates components, which only support global theme setting.

import { Button, Code, Group } from '@&#8203;mantine/core';

function Demo() {
  return (
    <>
      <Code>autoContrast: true</Code>
      <Group mt="xs" mb="lg">
        <Button color="lime.4" autoContrast>
          Lime.4 button
        </Button>
        <Button color="blue.2" autoContrast>
          Blue.2 button
        </Button>
        <Button color="orange.3" autoContrast>
          Orange.3 button
        </Button>
      </Group>

      <Code>autoContrast: false</Code>
      <Group mt="xs">
        <Button color="lime.4">Lime.4 button</Button>
        <Button color="blue.2">Blue.2 button</Button>
        <Button color="orange.3">Orange.3 button</Button>
      </Group>
    </>
  );
}

autoContrast checks whether the given color luminosity is above or below the luminanceThreshold value
and changes text color to either theme.white or theme.black accordingly:

import { Button, createTheme, MantineProvider, Stack } from '@&#8203;mantine/core';

const theme = createTheme({
  autoContrast: true,
  luminanceThreshold: 0.3,
});

function Wrapper(props: any) {
  const buttons = Array(10)
    .fill(0)
    .map((_, index) => (
      <Button key={index} color={`blue.${index}`}>
        Button
      </Button>
    ));

  return (
    <MantineProvider theme={theme}>
      <Stack>{buttons}</Stack>
    </MantineProvider>
  );
}

Color functions improvements

alpha, lighten and darken functions now support CSS variables (with color-mix) and OKLCH colors.
All functions are available both in @mantine/core (.ts/.js files) and postcss-preset-mantine (.css files, requires version 1.12.0 or higher).

In .css files:

.demo-alpha {
  color: alpha(var(--mantine-color-red-4), 0.5);
  border: 1px solid alpha(#ffc, 0.2);
}

.demo-lighten-darken {
  color: lighten(var(--mantine-color-red-4), 0.5);
  border: 1px solid darken(#ffc, 0.2);
}

Will be transformed to:

.demo-alpha {
  color: color-mix(in srgb, var(--mantine-color-red-4), transparent 50%);
  border: 1px solid color-mix(in srgb, #ffc, transparent 80%);
}

.demo-lighten-darken {
  color: color-mix(in srgb, var(--mantine-color-red-4), white 50%);
  border: 1px solid color-mix(in srgb, #ffc, black 20%);
}

In .ts/.js files:

import { alpha, lighten } from '@&#8203;mantine/core';

alpha('#&#8203;4578FC', 0.45); // -> rgba(69, 120, 252, 0.45)
alpha('var(--mantine-color-gray-4)', 0.74);
// -> color-mix(in srgb, var(--mantine-color-gray-4), transparent 26%)

lighten('#&#8203;4578FC', 0.45); // -> #a3c1ff
lighten('var(--mantine-color-gray-4)', 0.74);
// -> color-mix(in srgb, var(--mantine-color-gray-4), white 74%)

Note that alpha function is a replacement for rgba. It was renamed to
have a more clear meaning, as it can now be used with CSS variables and OKLCH colors.
rgba function is still available as an alias for alpha function.

enhanceGetInputProps

@mantine/form now supports enhanceGetInputProps. enhanceGetInputProps is a function that can be used to add additional props to the object returned by form.getInputProps.
You can define it in useForm hook options. Its argument is an object with the following properties:

inputProps – object returned by form.getInputProps by default
field – field path, first argument of form.getInputProps, for example name, user.email, users.0.name
options – second argument of form.getInputProps, for example { type: 'checkbox' }, can be used to pass additional
options to enhanceGetInputProps function
form – form instance

Example of using enhanceGetInputProps to disable input based on field path:

import { NumberInput, TextInput } from '@&#8203;mantine/core';
import { useForm } from '@&#8203;mantine/form';

interface FormValues {
  name: string;
  age: number | string;
}

function Demo() {
  const form = useForm<FormValues>({
    initialValues: { name: '', age: '' },
    enhanceGetInputProps: (payload) => ({
      disabled: payload.field === 'name',
    }),
  });

  return (
    <>
      <TextInput {...form.getInputProps('name')} label="Name" placeholder="Name" />
      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
    </>
  );
}

Example of using enhanceGetInputProps to add additional props to the input based on option passed to form.getInputProps:

import { NumberInput, TextInput } from '@&#8203;mantine/core';
import { useForm } from '@&#8203;mantine/form';

interface FormValues {
  name: string;
  age: number | string;
}

function Demo() {
  const form = useForm<FormValues>({
    initialValues: { name: '', age: '' },
    enhanceGetInputProps: (payload) => {
      if (payload.options.fieldType === 'name') {
        return {
          label: 'Your name',
          placeholder: 'Your name',
          withAsterisk: true,
          description: 'Your personal information is stored securely. (Just kidding!)',
        };
      }

      return {};
    },
  });

  return (
    <>
      <TextInput {...form.getInputProps('name', { fieldType: 'name' })} />
      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
    </>
  );
}

form.initialize

@mantine/form now supports form.initialize handler.

When called form.initialize handler sets initialValues and values to the same value
and marks form as initialized. It can be used only once, next form.initialize calls
are ignored.

form.initialize is useful when you want to sync form values with backend API response:

import { Button, NumberInput, TextInput } from '@&#8203;mantine/core';
import { isInRange, isNotEmpty, useForm } from '@&#8203;mantine/form';

interface FormValues {
  name: string;
  age: number | string;
}

function apiRequest(): Promise<FormValues> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 25 });
    }, 1000);
  });
}

function Demo() {
  const form = useForm<FormValues>({
    initialValues: { name: '', age: 0 },
    validate: {
      name: isNotEmpty('Name is required'),
      age: isInRange({ min: 18 }, 'You must be at least 18 to register'),
    },
  });

  return (
    <>
      <TextInput {...form.getInputProps('name')} label="Name" placeholder="Name" />
      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
      <Button onClick={() => apiRequest().then((values) => form.initialize(values))} mt="md">
        Initialize form
      </Button>
    </>
  );
}

Example with TanStack Query (react-query):

import { useEffect } from 'react';
import { useQuery } from '@&#8203;tanstack/react-query';
import { useForm } from '@&#8203;mantine/form';

function Demo() {
  const query = useQuery({
    queryKey: ['current-user'],
    queryFn: () => fetch('/api/users/me').then((res) => res.json()),
  });

  const form = useForm({
    initialValues: {
      name: '',
      email: '',
    },
  });

  useEffect(() => {
    if (query.data) {
      // Even if query.data changes, form will be initialized only once
      form.initialize(query.data);
    }
  }, [query.data]);
}

Note that form.initialize will erase all values that were set before it was called.
It is usually a good idea to set readOnly or disabled on all form fields before
form.initialize is called to prevent data loss. You can implement this with
enhanceGetInputProps:

import { NumberInput, TextInput } from '@&#8203;mantine/core';
import { useForm } from '@&#8203;mantine/form';

interface FormValues {
  name: string;
  age: number | string;
}

function Demo() {
  const form = useForm<FormValues>({
    initialValues: { name: '', age: '' },
    enhanceGetInputProps: (payload) => {
      if (!payload.form.initialized) {
        return { disabled: true };
      }

      return {};
    },
  });

  return (
    <>
      <TextInput {...form.getInputProps('name')} label="Your name" placeholder="Your name" />
      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
      <Button onClick={() => form.initialize({ name: 'John', age: 20 })} mt="md">
        Initialize form
      </Button>
    </>
  );
}

valibot form resolver

@mantine/form now supports validbot schema resolver:

yarn add valibot mantine-form-valibot-resolver

Basic fields validation:

import { valibotResolver } from 'mantine-form-valibot-resolver';
import { email, minLength, minValue, number, object, string } from 'valibot';
import { useForm } from '@&#8203;mantine/form';

const schema = object({
  name: string([minLength(2, 'Name should have at least 2 letters')]),
  email: string([email('Invalid email')]),
  age: number([minValue(18, 'You must be at least 18 to create an account')]),
});

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: valibotResolver(schema),
});

form.validate();
form.errors;
// -> {
//  name: 'Name should have at least 2 letters',
//  email: 'Invalid email',
//  age: 'You must be at least 18 to create an account'
// }

Nested fields validation

import { valibotResolver } from 'mantine-form-valibot-resolver';
import { minLength, object, string } from 'valibot';
import { useForm } from '@&#8203;mantine/form';

const nestedSchema = object({
  nested: object({
    field: string([minLength(2, 'Field should have at least 2 letters')]),
  }),
});

const form = useForm({
  initialValues: {
    nested: {
      field: '',
    },
  },
  validate: valibotResolver(nestedSchema),
});

form.validate();
form.errors;
// -> {
//  'nested.field': 'Field should have at least 2 letters',
// }

List fields validation:

import { valibotResolver } from 'mantine-form-valibot-resolver';
import { array, minLength, object, string } from 'valibot';
import { useForm } from '@&#8203;mantine/form';

const listSchema = object({
  list: array(
    object({
      name: string([minLength(2, 'Name should have at least 2 letters')]),
    })
  ),
});

const form = useForm({
  initialValues: {
    list: [{ name: '' }],
  },
  validate: valibotResolver(listSchema),
});

form.validate();
form.errors;
// -> {
//  'list.0.name': 'Name should have at least 2 letters',
// }

ScrollArea scrollbars prop

ScrollArea now supports scrollbars prop, which allows controlling directions at which scrollbars should be rendered.
Supported values are x, y and xy. If scrollbars="y" is set, only the vertical scrollbar will be rendered, and it will not be possible to scroll horizontally:

import { Box, ScrollArea } from '@&#8203;mantine/core';

function Demo() {
  return (
    <ScrollArea w={300} h={200} scrollbars="y">
      <Box w={600}>{/* ... content */}</Box>
    </ScrollArea>
  );
}

Title lineClamp prop

Title component now supports lineClamp prop, which allows truncating text after a specified number of lines:

import { Box, Title } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Box maw={400}>
      <Title order={2} lineClamp={2}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure doloremque quas dolorum. Quo
        amet earum alias consequuntur quam accusamus a quae beatae, odio, quod provident consectetur
        non repudiandae enim adipisci?
      </Title>
    </Box>
  );
}

Primary color CSS variables

CSS variables for primary color are now available, you can use the following variables in your styles:

--mantine-primary-color-0
--mantine-primary-color-1
--mantine-primary-color-2
--mantine-primary-color-3
--mantine-primary-color-4
--mantine-primary-color-5
--mantine-primary-color-6
--mantine-primary-color-7
--mantine-primary-color-8
--mantine-primary-color-9
--mantine-primary-color-contrast
--mantine-primary-color-filled
--mantine-primary-color-filled-hover
--mantine-primary-color-light
--mantine-primary-color-light-hover
--mantine-primary-color-light-color

Help center

Help center is a new website with guides, tutorials and frequently
asked questions. Currently, it has 14 questions, more FAQs will be added in the next releases.

Documentation updates

form.getInputProps guide now has a separate page. It describes form.getInputProps, enhanceGetInputProps and how to integrate form.getInputProps with custom inputs.
assignRef function documentation has been added.
clampUseMovePosition function documentation has been added.
Additional documentation about hook arguments and types has been added to use-hotkeys.
UseListStateHandlers type documentation has been added.
Functions reference page has been added. Currently, it contains all functions that are exported from @mantine/hooks package. It is planned to document functions from other packages in next releases.
Examples on how to change the close icon have been added to Drawer and Modal components.
variantColorsResolver demos have been added to ActionIcon, ThemeIcon and Badge components.

Other changes

RichTextEditor no longer depends on @tabler/icons package. It is no longer required to install @tabler/icons package to use RichTextEditor component. Icons used in the editor are now a part of the @mantine/tiptap package. This change improves bundling performance in several cases (mostly when using RichTextEditor in Next.js apps).
Badge component now supports circle prop which makes the badge round.
You can now reference theme values in ff style prop with mono, text and heading values: <Box ff="mono" />.
RichTextEditor now has RichTextEditor.Undo and RichTextEditor.Redo controls.
A new luminance color function was added

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 is behind base branch, 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.

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

vercel · 2024-02-13T00:52:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
inreach-app	❌ Failed (Inspect)		Feb 13, 2024 0:52am

sonarcloud · 2024-02-13T00:53:06Z

Quality Gate passed

Issues
0 New issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

ghost · 2024-02-13T00:53:10Z

👇 Click on the image for a new way to code review

Legend

socket-security · 2024-02-13T00:53:34Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@iconify-icon/[email protected]	Transitive: environment, network	`+5`	634 kB	cyberalien
npm/@mantine/[email protected]	Transitive: environment	`+41`	20.9 MB	rtivital
npm/@mantine/[email protected]	Transitive: environment	`+38`	20.3 MB	rtivital
npm/@mantine/[email protected]	Transitive: environment	`+40`	22.6 MB	rtivital
npm/@mantine/[email protected]	Transitive: environment	`+5`	751 kB	rtivital
npm/@mantine/[email protected]	Transitive: environment	`+3`	1.23 MB	rtivital
npm/@mantine/[email protected]	Transitive: environment	`+42`	20.8 MB	rtivital
npm/@mantine/[email protected]	Transitive: environment	`+40`	20.4 MB	rtivital
npm/[email protected]	Transitive: environment	`+42`	23.7 MB	aranlucas

🚮 Removed packages: npm/@iconify-icon/[email protected], npm/@mantine/[email protected], npm/@mantine/[email protected], npm/@mantine/[email protected], npm/@mantine/[email protected], npm/@mantine/[email protected], npm/@mantine/[email protected], npm/@mantine/[email protected], npm/[email protected]

View full report↗︎

chore(ui): update mantine & related

de8a5b1

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

renovate bot requested a review from JoeKarow as a code owner February 13, 2024 00:52

renovate bot added automerge Enable Kodiak auto-merge dependencies Change in project dependencies. kodiak: merge.method = 'squash' Kodiak will squash merge this PR. labels Feb 13, 2024

github-actions bot added 📦 app 📦 ui 📦 web labels Feb 13, 2024

JoeKarow closed this Feb 13, 2024

JoeKarow deleted the renovate/major-mantine-and-related branch February 13, 2024 16:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(ui): update mantine & related (major) #1094

chore(ui): update mantine & related (major) #1094

renovate bot commented Feb 13, 2024 •

edited

Loading

vercel bot commented Feb 13, 2024

sonarcloud bot commented Feb 13, 2024

ghost commented Feb 13, 2024

Legend

socket-security bot commented Feb 13, 2024

chore(ui): update mantine & related (major) #1094

chore(ui): update mantine & related (major) #1094

Conversation

renovate bot commented Feb 13, 2024 • edited Loading

Release Notes

v7.5.2

What's Changed

New Contributors

v7.5.1

What's Changed

New Contributors

v7.5.0: ✨ 7.5.0

DonutChart component

PieChart component

@​mantine/dates value formatter

@​mantine/dates consistent weeks

Charts series label

Charts value formatter

Headings text wrap

mod prop

Documentation updates

Help center updates

Other changes

v7.4.2

What's Changed

New Contributors

v7.4.1

What's Changed

New Contributors

v7.4.0: ⭐

@​mantine/charts

AreaChart component

LineChart component

BarChart component

Sparkline component

OKLCH colors support

autoContrast

Color functions improvements

enhanceGetInputProps

form.initialize

valibot form resolver

ScrollArea scrollbars prop

Title lineClamp prop

Primary color CSS variables

Help center

Documentation updates

Other changes

Configuration

vercel bot commented Feb 13, 2024

sonarcloud bot commented Feb 13, 2024

Quality Gate passed

ghost commented Feb 13, 2024

Legend

socket-security bot commented Feb 13, 2024

renovate bot commented Feb 13, 2024 •

edited

Loading

`v7.5.2`

`v7.5.1`

`v7.5.0`: ✨ 7.5.0

@mantine/dates value formatter

@mantine/dates consistent weeks

`v7.4.2`

`v7.4.1`

`v7.4.0`: ⭐

@mantine/charts