Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(deps): update mantine to v7 (major) #257

Closed
wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Oct 2, 2023

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mantine/core (source) 6.0.21 -> 7.5.2 age adoption passing confidence
@mantine/form (source) 6.0.21 -> 7.5.2 age adoption passing confidence
@mantine/hooks (source) 6.0.21 -> 7.5.2 age adoption passing confidence

Release Notes

mantinedev/mantine (@​mantine/core)

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

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

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 '@&#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
Help center updates

New articles added to the help center:

Other changes

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

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

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:

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. It returns color luminance as a number between 0 and 1.
  • All components now support new flex style prop which allows setting flex CSS property on the root element.
  • Collapse markup was reduced to single element, it can now be used in contexts that were previously not supported, for example, table rows.
  • stepHoldDelay and stepHoldInterval props have been added to NumberInput.
  • mantine-form-zod-resolver now supports errorPriority configuration which allows controlling the order of errors specified in the schema. This feature requires updating mantine-form-zod-resolver to version 1.1.0 or higher.
  • CloseButton now supports icon prop, which allows overriding default icon. It is useful when it is not possible to replace CloseButton, for example, in Drawer component.
  • Select component now calls onChange with an additional argument – option object. It contains label, value and optional disabled properties.
  • It is now possible to define CSS variables in styles prop of all components.
  • New use-in-viewport hook
  • All Vite templates have been updated to Vite 5.0 and Vitest 1.0

v7.3.2

Compare Source

What's Changed
  • [@mantine/core] Portal: Fix empty className string throwing error (#​5400)
  • [@mantine/core] Select: Fix incorrect empty string as initial value handing
  • [@mantine/core] Fix error thrown in jest tests when autosize Textarea is used in Next.js application (#​5393)
  • [@mantine/core] Loader: Fix default loaders not being available if custom loader was default with defaultProps on theme
  • [@mantine/core] Chip: Fix color prop not working without specifying variant
  • [@mantine/core] MultiSelect: Fix dropdown not being opened when Space key is pressed and the component is not searchable
  • [@mantine/core] NavLink: Add missing Space key handling for collapse/expand nested links
  • [@mantine/dates] DateInput: Fix incorrect clear button size
  • [@mantine/core] Fix text inside MultiSelect, TagsInput and PillsInput search field not being possible to select with mouse
  • [@mantine/core] Set cursor to not-allowed on disabled Checkbox, Radio and Switch
  • [@mantine/core] NumberInput: Improve disabled increment/decrement controls styles
  • [@mantine/core] Button: Fix incorrect alignment if button is used in the same container as other buttons with component prop
  • [@mantine/core] SegmentedControl: Improve readOnly styles
  • [@mantine/core] NumberInput: Fix incorrect controls text color in error state
  • [@mantine/core] Change divs to more semantic elements in Modal and Drawer
  • [@mantine/core] Make header height of Modal and Drawer consistent to prevent layout shift when withCloseButton prop is changed
  • [@mantine/core] Fix onChange not being called in Radio, Checkbox and Chip components if they are used inside X.Group
  • [@mantine/core] NumberInput: Fix incorrect negative decimal values input handing
  • [@mantine/core] Button: Fix incorrect Loader vertical alignment
  • [@mantine/vanilla-extract] Expose all primary colors values
  • [@mantine/core] Menu: Fix incorrect aria roles (#​5372)
  • [@mantine/core] Table: Fix sticky header being overlayed by elements in table rows in some cases (#​5385)
  • [@mantine/core] Combobox: Fix rightSection and leftSection nor being visible on Combobox.Search (#​5368)
  • [@mantine/core] Tabs: Fix clipped border of outline variant (#​5370)
  • [@mantine/core] Fix incorrect rightSectionPointerEvents in Select and MultiSelect components (#​5371)
  • [@mantine/core] Alert: Fix incorrect margin if title is hidden
  • [@mantine/core] Overlay: Fix blur styles not working in old Safari
New Contributors

Full Changelog: mantinedev/mantine@7.3.1...7.3.2

v7.3.1

Compare Source

What's Changed

  • [@mantine/core] Fix broken default colors override
  • [@mantine/core] Menu: Improve click-hover trigger accessibility (#​5335)
  • [@mantine/core] Fix incorrect lineHeight theme variables resolving (#​5375)
  • [@mantine/core] Select: Fix error thrown if google translate changes labels (#​5377)
  • [@mantine/tiptap] Add missing control Styles API selector to RichTextEditor.Link (#​5171)
  • [@mantine/core] Grid: Fix incorrect Grid.Col auto span handing if one Grid is used inside another Grid (#​5278)
  • [@mantine/core] Grid: Fix incorrect Grid.Col styles when the column is auto as base value and content as breakpoint value (#​5280)
  • [@mantine/core] Fix various RTL issues (#​5250)
  • [@mantine/dates] Fix hideOutsideDates now working if @mantine/dates is used as a headless library (#​5003)
  • [@mantine/core] SegmentedControl: Remove animation during initialization (#​5182)
  • [@mantine/core] Menu: Fix broken focus logic when keepMounted is set (#​4502)
  • [@mantine/tiptap] Remove @tabler/icons dependency to improve bundling performance (#​5279)
  • [@mantine/core] Fix inputs have incorrect left and right sections colors in error state (#​5304)
  • [@mantine/core] Title: Add lineClamp support (#​5321)
  • [@mantine/core] Grid: Change default overflow to visible (#​5276)
  • [@mantine/core] ScrollArea: Fix incorrect scrollbars styles (#​4904)
  • [@mantine/core] Expose --mantine-primary-color-x CSS variables (#​5331)
  • [@mantine/core] Combobox: Fix incorrect Enter key handling when dropdown is opened and option is not selected (#​5348)
  • [@mantine/core] NumberInput: Fix startValue nor working if min is set (#​5308)
  • [@mantine/core] Collapse: Add missing Collapse.extend function (#​5313)
  • [@mantine/core] Fix incorrect clamp() function handing in style props (#​5330)
  • [@mantine/core] PinInput: Trim value on paste before validation (#​5340)
  • [@mantine/core] PinInput: Fix incorrectly assigned ref (#​5365)
  • [@mantine/core] Remove use client from createPolymorphicComponent factory (#​5367)

New Contributors

Full Changelog: mantinedev/mantine@7.3.0...7.3.1

v7.3.0: 🌟

Compare Source

View changelog with demos on mantine.dev website

smaller-than and larger-than mixins

smaller-than and larger-than mixins can be used to create styles that will be applied only when the screen is smaller or larger than specified breakpoint.
Note that to use these mixins, you need to update postcss-preset-mantine to version 1.11.0 or higher.

.demo {
  @&#8203;mixin smaller-than 320px {
    color: red;
  }

  @&#8203;mixin larger-than 320px {
    color: blue;
  }
}

Will be transformed to:

// Breakpoint values are converted to em units
// In smaller-than mixin 0.1px is subtracted from breakpoint value
// to avoid intersection with larger-than mixin
@&#8203;media (max-width: 19.99375em) {
  .demo {
    color: red;
  }
}

@&#8203;media (min-width: 20em) {
  .demo {
    color: blue;
  }
}

You can also use smaller-than and larger-than mixins with mantine breakpoints:

.demo {
  @&#8203;mixin smaller-than $mantine-breakpoint-sm {
    color: red;
  }

  @&#8203;mixin larger-than $mantine-breakpoint-sm {
    color: blue;
  }
}
Form schema resolvers packages

@mantine/form schema validation resolver packages are now available as separate packages.
Moving resolvers to separate packages allows making them type-safe and fully tested.
Old resolvers are still exported from @mantine/form package – you will be able to use them without any changes
until 8.0.0 release.

The new packages are drop-in replacements for old resolvers, they have the same API and can be used in the same way.

Example of zod resolver:

yarn add zod mantine-form-zod-resolver
import { z } from 'zod';
import { useForm } from '@&#8203;mantine/form';
import { zodResolver } from 'mantine-form-zod-resolver';

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

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: zodResolver(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'
// }
rem/em functions improvements

rem and em function now support space-separated values. This feature is available
both in rem function exported from @mantine/core package and postcss-preset-mantine.
Note that y


Configuration

📅 Schedule: Branch creation - "before 4am on Monday" in timezone Europe/Amsterdam, 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 has been generated by Mend Renovate. View repository job log here.

@vercel
Copy link

vercel bot commented Oct 3, 2023

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

Name Status Preview Comments Updated (UTC)
cpt-movements-tracker ❌ Failed (Inspect) Oct 3, 2023 5:47am

@renovate renovate bot force-pushed the renovate/major-mantine branch from 38620cb to 4c10c7a Compare October 6, 2023 20:23
@renovate renovate bot force-pushed the renovate/major-mantine branch from 4c10c7a to 16d5671 Compare October 6, 2023 20:24
@renovate renovate bot force-pushed the renovate/major-mantine branch from 16d5671 to 7395fd5 Compare October 12, 2023 12:32
@renovate renovate bot force-pushed the renovate/major-mantine branch from 7395fd5 to 8dd13aa Compare October 19, 2023 10:39
@renovate renovate bot force-pushed the renovate/major-mantine branch 3 times, most recently from 0582eb7 to b38b7eb Compare October 21, 2023 10:27
@renovate renovate bot force-pushed the renovate/major-mantine branch from b38b7eb to 2796720 Compare October 26, 2023 08:19
@renovate renovate bot force-pushed the renovate/major-mantine branch from 2796720 to 69896c2 Compare October 26, 2023 13:34
@renovate renovate bot force-pushed the renovate/major-mantine branch from 69896c2 to e7703da Compare October 31, 2023 10:48
@renovate renovate bot force-pushed the renovate/major-mantine branch from e7703da to 450c84a Compare November 6, 2023 17:09
@renovate renovate bot force-pushed the renovate/major-mantine branch from 450c84a to 233aaac Compare November 7, 2023 19:48
@renovate renovate bot force-pushed the renovate/major-mantine branch from 233aaac to 8f2edae Compare November 8, 2023 21:00
@renovate renovate bot force-pushed the renovate/major-mantine branch from 8f2edae to 295134f Compare November 13, 2023 12:56
@renovate renovate bot force-pushed the renovate/major-mantine branch from 295134f to 19cdeea Compare December 4, 2023 11:01
@renovate renovate bot force-pushed the renovate/major-mantine branch from 19cdeea to db7af4f Compare December 7, 2023 15:11
@renovate renovate bot force-pushed the renovate/major-mantine branch from db7af4f to 72b5123 Compare December 14, 2023 18:01
@renovate renovate bot force-pushed the renovate/major-mantine branch from 72b5123 to 650624f Compare January 3, 2024 07:29
@renovate renovate bot force-pushed the renovate/major-mantine branch from 650624f to fc0a5ef Compare January 9, 2024 08:32
@renovate renovate bot force-pushed the renovate/major-mantine branch from fc0a5ef to e7f000e Compare January 17, 2024 22:14
@renovate renovate bot force-pushed the renovate/major-mantine branch from e7f000e to db01988 Compare January 21, 2024 09:13
@renovate renovate bot force-pushed the renovate/major-mantine branch from db01988 to 2c4c369 Compare January 21, 2024 09:44
@renovate renovate bot force-pushed the renovate/major-mantine branch from 2c4c369 to a96c633 Compare January 26, 2024 11:36
@renovate renovate bot force-pushed the renovate/major-mantine branch from a96c633 to 4290ac2 Compare February 1, 2024 07:26
@renovate renovate bot force-pushed the renovate/major-mantine branch from 4290ac2 to 2e88a7d Compare February 1, 2024 20:50
@renovate renovate bot changed the title fix(deps): update mantine (major) fix(deps): update mantine to v7 (major) Feb 1, 2024
Copy link
Contributor Author

renovate bot commented Feb 9, 2024

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 7.x releases. But if you manually upgrade to 7.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.

@renovate renovate bot deleted the renovate/major-mantine branch February 9, 2024 13:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant