Update mantine monorepo to v7 (major) #97

renovate · 2023-12-20T19:03:27Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/core (source)	`^5.10.0` -> `^7.0.0`
@mantine/dates (source)	`^5.10.0` -> `^7.0.0`
@mantine/form (source)	`^5.10.0` -> `^7.0.0`
@mantine/hooks (source)	`^5.10.0` -> `^7.0.0`
@mantine/notifications (source)	`^5.10.0` -> `^7.0.0`

Release Notes

mantinedev/mantine (@mantine/core)

`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

@abdulbasithqb made their first contribution in https://github.com/mantinedev/mantine/pull/5385

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

@manuelbosi made their first contribution in https://github.com/mantinedev/mantine/pull/5377
@riettsruff made their first contribution in https://github.com/mantinedev/mantine/pull/5375

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 you need to update postcss-preset-mantine to 1.11.0 to use this feature.

import { rem } from '@&#8203;mantine/core';

rem('16px 32px');
// -> calc(1rem * var(--mantine-scale)) calc(2rem * var(--mantine-scale))

All components props that are converted to rem units now support space-separated values as well.
For example, space-separated values can be used in radius prop of Modal component:

import { Modal } from '@&#8203;mantine/core';

function Demo() {
  return <Modal radius="10px 10px 0 0" opened onClose={() => {}} />;
}

component and renderRoot props for non-polymorphic components

All Mantine components now support component and renderRoot props event if they are not polymorphic.
The difference between polymorphic and non-polymorphic components is that polymorphic components
include the full set of props of the component passed to the component prop, while non-polymorphic
components only include props that are specific to the original component. It is done this way to
improve TypeScript performance.

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

// Group is not polymorphic component,
// but it still supports component and renderRoot props
function Demo() {
  return (
    <Group component="nav">
      <a>Item 1</a>
      <a>Item 2</a>
      <a>Item 3</a>
    </Group>
  );
}

Outline Checkbox and Radio variant

Checkbox and Radio components now support outline variant:

import { Radio, Checkbox, Stack } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Stack gap={7}>
      <Checkbox variant="outline" label="Outline Checkbox" defaultChecked />
      <Checkbox variant="outline" label="Outline indeterminate Checkbox" indeterminate />
      <Radio variant="outline" label="Outline Radio" defaultChecked />
    </Stack>
  );
}

HueSlider and AlphaSlider components

HueSlider and AlphaSlider components were added back:

import { useState } from 'react';
import { HueSlider, Text } from '@&#8203;mantine/core';

function Demo() {
  const [value, onChange] = useState(250);

  return (
    <>
      <Text>Hue value: {value}</Text>
      <HueSlider value={value} onChange={onChange} />
    </>
  );
}

import { useState } from 'react';
import { AlphaSlider, Text } from '@&#8203;mantine/core';

function Demo() {
  const [value, onChange] = useState(0.55);

  return (
    <>
      <Text>Alpha value: {value}</Text>
      <AlphaSlider color="#&#8203;1c7ed6" value={value} onChange={onChange} />
    </>
  );
}

Button loading state animation

Button component now has loading state animation:

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

function Demo() {
  const [loading, { toggle }] = useDisclosure();
  return (
    <>
      <Group>
        <Button loading={loading}>Filled button</Button>
        <Button variant="light" loading={loading}>
          Light button
        </Button>
        <Button variant="outline" loading={loading}>
          Outline button
        </Button>
      </Group>

      <Switch checked={loading} onChange={toggle} label="Loading state" mt="md" />
    </>
  );
}

Drawer offset

Drawer now supports offset prop. It changes drawer offset from the edge of the viewport:

import { useDisclosure } from '@&#8203;mantine/hooks';
import { Drawer, Button } from '@&#8203;mantine/core';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Drawer offset={8} radius="md" opened={opened} onClose={close} title="Authentication">
        {/* Drawer content */}
      </Drawer>

      <Button onClick={open}>Open Drawer</Button>
    </>
  );
}

z-index CSS variables

You can now use Mantine z-index CSS variables:

--mantine-z-index-app – value 100
--mantine-z-index-modal – value 200
--mantine-z-index-popover – value 300
--mantine-z-index-overlay – value 400
--mantine-z-index-max – value 9999

Example of using --mantine-z-index-modal variable:

/* Display content above the modal */
.my-content {
  z-index: calc(var(--mantine-z-index-modal) + 1);
}

Improved dark color scheme colors

theme.colors.dark colors were slightly changed to improve contrast and make it easier to read text.
You can preview new colors on this page. New colors values are:

--mantine-color-dark-0: #c9c9c9;
--mantine-color-dark-1: #b8b8b8;
--mantine-color-dark-2: #&#8203;828282;
--mantine-color-dark-3: #&#8203;696969;
--mantine-color-dark-4: #&#8203;4a4a4a;
--mantine-color-dark-5: #&#8203;404040;
--mantine-color-dark-6: #&#8203;383838;
--mantine-color-dark-7: #&#8203;2e2e2e;
--mantine-color-dark-8: #&#8203;242424;
--mantine-color-dark-9: #&#8203;212121;

If you prefer old colors, change theme settings on MantineProvider:

import { createTheme } from '@&#8203;mantine/core';

const theme = createTheme({
  colors: {
    dark: [
      '#C1C2C5',
      '#A6A7AB',
      '#&#8203;909296',
      '#&#8203;5c5f66',
      '#&#8203;373A40',
      '#&#8203;2C2E33',
      '#&#8203;25262b',
      '#&#8203;1A1B1E',
      '#&#8203;141517',
      '#&#8203;101113',
    ],
  },
});

function Demo() {
  return <MantineProvider theme={theme}>{/* Your app here */}</MantineProvider>;
}

Documentation updates

Schema-based validation with @mantine/form now has a dedicated page. It includes more examples for basic, nested and list fields validation for each resolver.
Autocomplete, Select, MultiSelect and TagsInput now include new demos that show how to customize dropdown behavior and styles.
Example of using Mantine with disabled JavaScript was added to the color schemes guide.
Pagination now includes an additional example with chunked content handling.
A new section about dayjs localization with Next.js app router and server components has been added to the dates getting started page
Modals manager now includes a guide on how to pass props down to the underlying Modal component.
Slider now has sections about decimal values and minRange prop.
You can now view all 200+ releases with release dates on the all releases page.

Other changes

use-hash hook now supports getInitialValueInEffect: false option to get initial value during state initialization.
New useMantineColorScheme({ keepTransitions: true }) option allows keeping transitions when color scheme changes. Note that it is false by default.
All templates were migrated to yarn v4 – this change significantly improves installation speed.
TypographyStylesProvider now has styles for <kbd /> element.
MultiSelect and TagsInput components now support hiddenValuesDivider prop. It allows customizing divider character between values in value prop of the hidden input.
Grid component now supports overflow prop, which allows controlling overflow CSS property on the root element. It is hidden by default.
Modal and Drawer components now support removeScrollProps prop. It allows configuring react-remove-scroll.
AppShell now supports offsetScrollbars prop. It determines whether scrollbars should be offset, it is true by default. The logic of scrollbars offset is controlled by react-remove-scroll.
Menu now supports trigger="click-hover" prop, to open menu both on click and on hover.
It is now possible to set keepMounted prop on Tabs.Panel components individually, not only on Tabs component.
mantine-flagpack has been migrated to support 7.x versions of @mantine/core. To use it, update mantine-flagpack to 4.0.0.
vite-template was migrated from Jest to Vitest.
The main Mantine repository was migrated to yarn v4. The process of getting started locally was changed
@mantine/ds package has been deprecated. You can use @mantinex/mantine-logo package to use MantineLogo component in your project.

`v7.2.2`

Compare Source

What's new

[@mantine/core] HoverCard: Remove opened and onChange props from types
[@mantine/core] RingProgress: Fix error thrown when thickness is larger than size / 4
[@mantine/dates] DateInput: Fix unexpected values updates when the user tries to type in value with closed dropdown (#3818)
[@mantine/core] NumberInput: Fix onChange called when value is changed by external state (#5235)
[@mantine/core] NumberInput: Fix onChange function called in onBlur when the value does not require updating
[@mantine/core] NumberInput: Improve onChange handler to be called with number unless the input is empty (#5037)
[@mantine/core] SegmentedControl: Fix incorrect indicator position if padding is set on the root element
[@mantine/core] Select: Fix empty string not being handled correctly as option value
[@mantine/core] Blockquote: Fix incorrect border-radius
[@mantine/core] Chip: Fix incorrect disabled styles in dark color scheme
[@mantine/core] Table: Set backgound-color on thead only if strickyHeader prop is set
[@mantine/core] Radio: Fix radio icon size being the same width and height at every size
[@mantine/tiptap] Fix incorrect rtl controls styles (#5223)
[@mantine/tiptap] Fix unexpected background-color set on code element

`v7.2.1`

Compare Source

What's Changed

[@mantine/core] Numberinput: Reduce width of the right section to match controls width (#5033)
[@mantine/core] Popover: Add size floating-ui middleware to prevent large dropdown from exceeding screen size (#5213)
[@mantine/code-highlight] Prevent error thowing if language is not recognized by highlight.js (#5099)
[@mantine/notifications] Fix limit prop not working (#5105)
[@mantine/dropzone] Allow overriding props from react-dropzone-esm with component props (#5114)
[@mantine/core] Remove "use client"; directive from rem, createTheme and other utility theme functions (#5119)
[@mantine/hooks] use-hash: Add option to retrieve value initially without useEffect (#5140)
[@mantine/core] PasswordInput: Fix incorrect styles when the component is wrapper with element with data-disabled attribute (#5149)
[@mantine/core] Add support for values separated by space to rem and em functions (#5174)
[@mantine/code-highlight] Fix CodeHighlightTabs throwing error if language of the tab is nor specified (#5178)
[@mantine/core] Fieldset: Fix some elements overflowing the viewport width when rendered inside fieldset (#5179)
[@mantine/core] Modal: Fix ScrollArea not working as scroll container (#5189)
[@mantine/core] Text: Fix inline prop not working (#5194)
[@mantine/core] Alert: Fix incorrect styles when the component is used without children (#5196)
[@mantine/core] Set aria-hidden on Checkbox and Radio icons to prevent them being announced by screen readers (#5202)
[@mantine/form] Fix form.reset not reseting values to updated initialValues (#5123)

New Contributors

@kavinda1995 made their first contribution in https://github.com/mantinedev/mantine/pull/5145
@dodas made their first contribution in https://github.com/mantinedev/mantine/pull/5123
@gorkunov made their first contribution in https://github.com/mantinedev/mantine/pull/5194
@ranquild made their first contribution in https://github.com/mantinedev/mantine/pull/5213
@SecondThundeR made their first contribution in https://github.com/mantinedev/mantine/pull/5210

Full Changelog: mantinedev/mantine@7.2.0...7.2.1

`v7.2.0`: ⭐

Community templates

You are welcome to share your GitHub templates with the community. Community templates are
featured on the getting started page. You can find a guide on how to
create and submit a template here.

Examples of templates that you can submit:

Next.js pages router + MDX + Mantine blog template
Next.js app router + Mantine + styled-components template
Vite + Mantine + Emotion template

NumberFormatter component

New NumberFormatter component allows to format numbers
with thousands separators, decimal separators, and custom number of decimal places.
It supports the same formatting related props as NumberInput component.

import { NumberFormatter } from '@&#8203;mantine/core';

function Demo() {
  return <NumberFormatter prefix="$ " value={1000000} thousandSeparator />;
}

Form actions

@mantine/form package now exports createFormActions function that
can be used to change form state from anywhere in your application.
The mechanism of form actions is similar to notifications system,
modals manager and other similar packages.

To use form actions, set name property in use-form settings:

import { useForm } from '@&#8203;mantine/form';

export interface DemoFormValues {
  name: string;
  age: number;
}

function Demo() {
  const form = useForm<DemoFormValues>({
    name: 'demo-form',
    initialValues: {
      name: '',
      age: 0,
    },
  });
}

Then call createFormActions function with the same form name as specified in useForm settings:

// Import type of form values from the file where you defined useForm
import type { DemoFormValues } from './DemoForm';
import { createFormActions } from '@&#8203;mantine/form';

export const demoFormActions = createFormActions<DemoFormValues>('demo-form');

After that, you can use demoFormActions to change form state from anywhere in your application.
For example, after a fetch request or after a user interaction with a component that does not have access
to the form state:

import { useEffect } from 'react';
import { Button } from '@&#8203;mantine/core';
import { demoFormActions } from './demoFormActions';

function ExternalComponent() {
  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then((res) =>
        demoFormActions.setValues({
          name: res.name,
          age: res.age,
        })
      );
  }, []);

  return <Button onClick={() => demoFormActions.reset()}>Reset demo form</Button>;
}

Table data prop

Table component now supports data prop which can be used to generate table rows
from given data:

import { Table, TableData } from '@&#8203;mantine/core';

const tableData: TableData = {
  caption: 'Some elements from periodic table',
  head: ['Element position', 'Atomic mass', 'Symbol', 'Element name'],
  body: [
    [6, 12.011, 'C', 'Carbon'],
    [7, 14.007, 'N', 'Nitrogen'],
    [39, 88.906, 'Y', 'Yttrium'],
    [56, 137.33, 'Ba', 'Barium'],
    [58, 140.12, 'Ce', 'Cerium'],
  ],
};

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

Table sticky header

Table component now supports stickyHeader prop, which can be used to make the table header
stick to the top of the table:

import { Table } from '@&#8203;mantine/core';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function Demo() {
  const rows = elements.map((element) => (
    <Table.Tr key={element.name}>
      <Table.Td>{element.position}</Table.Td>
      <Table.Td>{element.name}</Table.Td>
      <Table.Td>{element.symbol}</Table.Td>
      <Table.Td>{element.mass}</Table.Td>
    </Table.Tr>
  ));

  return (
    <Table stickyHeader stickyHeaderOffset={60}>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Element position</Table.Th>
          <Table.Th>Element name</Table.Th>
          <Table.Th>Symbol</Table.Th>
          <Table.Th>Atomic mass</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
      <Table.Caption>Scroll page to see sticky thead</Table.Caption>
    </Table>
  );
}

Usage with Sass

It is now possible to use Mantine with Sass. You can find documentation
on this page. Note that it is still required to set up postcss-preset-mantine
in order for all functions to work properly. Sass can be used as a replacement for CSS modules
– it supports all features that CSS modules support.

You can find examples of Mantine + Sass usage in separate branches of templates:

Inline loaders

Loader component now supports children prop. The prop allows overriding the default
loader with any React node. It is useful in components that support loaderProps (Button, LoadingOverlay, Dropzone, etc.)
– with loaderProps.children you can now display any React node instead of the loader.

import { useDisclosure } from '@&#8203;mantine/hooks';
import { LoadingOverlay, Button, Group, Box } from '@&#8203;mantine/core';

function Demo() {
  const [visible, { toggle }] = useDisclosure(false);

  return (
    <>
      <Box pos="relative">
        <LoadingOverlay visible={visible} loaderProps={{ children: 'Loading...' }} />
        {/* ...other content */}
      </Box>

      <Group position="center">
        <Button onClick={toggle}>Toggle overlay</Button>
      </Group>
    </>
  );
}

lightHidden and darkHidden props

All Mantine components now support lightHidden and darkHidden props that can be used to hide
components in a specific color scheme:

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

function Demo() {
  return (
    <>
      <Button color="cyan" lightHidden>
        Visible in dark color scheme only
      </Button>

      <Button color="pink" darkHidden>
        Visible in light color scheme only
      </Button>
    </>
  );
}

light-root and dark-root mixins

New light-root and dark-root mixins were added to postcss-preset-mantine.
These mixins can be used to add color scheme specific styles to the :root/html element.
Note that to use these mixins, you need to update postcss-preset-mantine to 1.9.0 or higher.

:root {
  @&#8203;mixin light-root {
    --color: red;
  }

  @&#8203;mixin dark-root {
    --color: blue;
  }
}

Documentation updates

New Styles overview guide
New Usage with Sass guide
Storybook guide was updated to use new @storybook/addon-styling-webpack with separate instructions for Vite and other frameworks
CSS modules guide now includes new section about global class names reference with :global selector
Getting started guide now includes new section about setting up VS Code with PostCSS Language Support and CSS Variable Autocomplete extensions
Popover documentation now includes a guide on how to use nested popovers
AspectRatio documentation now includes a guide on how to use it in flexbox containers
Additional AppShell.Section documentation was added
8 new Checkbox examples and demos were added

Other changes

Dropzone now supports loaderProps prop to pass props down to the Loader component
theme.variantColorResolver now supports hoverColor prop, which allows controlling color property when the component is hovered. New property is supported in Button and ActionIcon components.
Flex is now a polymorphic component – it accepts renderRoot and component props
Checkbox root element now has data-checked attribute when the checkbox is checked
Checkbox and Radio components now support changing icon color with iconColor prop
use-form now supports onValuesChange option which can be used to sync form values with external state

`v7.1.6`: 7.1.7

Compare Source

What's Changed

[@mantine/core] Change how primary color fallback is applied in default theme.variantColorResolver to allow setting custom fallback values and undefined handling
[@mantine/core] Select: Fix error thrown on blur when given value is not in the data array
[@mantine/core] Fix option icon being smaller when option text has multiple lines
[@mantine/core] Spoiler: Fix unexpected empty space when hide label is null (#5126)
[@mantine/core] Button: Fix different border width of regular and disabled buttons
[@mantine/core] Table: Fix row background changing on hover in dark color scheme even when highlightOnHover prop is not set
[@mantine/carousel] Fix slideSize prop not handling number values (#5050)
[@mantine/core] Add option to keep transitions when color scheme changes in useMantineColorScheme hook (#5092)
[@mantine/core] Improve pop-* transitions animations (#5096)
[@mantine/hooks] use-local-storage: Fix error throwing if localStorage/sessionStorage is blocked by browser (#5091)
[@mantine/dates] Calendar: Fix incorrect focus logic when first item is disabled (#5078)

New Contributors

@yongwee made their first contribution in https://github.com/mantinedev/mantine/pull/5091
@sartak made their first contribution in https://github.com/mantinedev/mantine/pull/5126
@yogabonito made their first contribution in https://github.com/mantinedev/mantine/pull/5107

Full Changelog: mantinedev/mantine@7.1.5...7.1.6

`v7.1.5`

Compare Source

What's Changed

[@mantine/core] HoverCard: Fix dropdown not visible when Checkbox/Switch is used as target (#5072)
[@mantine/code-highlight] Fix code not updating when content changes (#5073)
[@mantine/core] Highlight: Fix incorrect highlighted parts when one of the array items includes substrings of other item (#5045)
[@mantine/core] Rating: Fix container overflow when the width of total item exceeds parent element width (#5057)
[@mantine/core] Radio: Fix checked icon clipping and not being centered with some sizes (#5064)
[@mantine/core] Fix incorrect callback arguments values types (#5067)
[@mantine/core] TagsInput: Fix required prop not working correctly (#5032)

New Contributors

@sunadoi made their first contribution in https://github.com/mantinedev/mantine/pull/5032
@MarcoLotz made their first contribution in https://github.com/mantinedev/mantine/pull/5047
@Refansa made their first contribution in https://github.com/mantinedev/mantine/pull/5061
@teh23 made their first contribution in https://github.com/mantinedev/mantine/pull/5064
@hannahrfowler made their first contribution in https://github.com/mantinedev/mantine/pull/5057
@wgpsutherland made their first contribution in https://github.com/mantinedev/mantine/pull/5045

Full Changelog: mantinedev/mantine@7.1.3...7.1.5

`v7.1.3`

Compare Source

What's Changed

[@mantine/core] Paper: Fix incorrect withBorder prop cascading to nested Paper components (#4930)
[@mantine/core] MultiSelect: Fix incorrect input styles without placeholder (#4954)
[@mantine/core] NumberInput: Fix focus shifting from the input when one of the controls is pressed (#5013)
[@mantine/notifications] Fix style prop breaking animations (#5007)
[@mantine/core] Rating: Fix incorrect touch events handling (#4976)
[@mantine/carousel] Fix onClick handler from nextControlProps being overwritten by internal props (#4985)
[@mantine/core] MultiSelect: Fix selectFirstOptionOnChange prop not working (#4997)
[@mantine/core] Select: Fix incorrect behavior when both searchValue and value are controlled (#4998)
[@mantine/spotlight] Fix DOM error thrown after HMR and several other cases (#4992)
[@mantine/hooks] use-timeout: Fix callback not running after state change (#4968)
[@mantine/hooks] use-focus-trap: Fix incorrect input[type="radio"] handling (#4856)

New Contributors

@spicybackend made their first contribution in https://github.com/mantinedev/mantine/pull/4953
@Shresth72 made their first contribution in https://github.com/mantinedev/mantine/pull/4856
@DenisBessa made their first contribution in https://github.com/mantinedev/mantine/pull/4992
@thealmarques made their first contribution in https://github.com/mantinedev/mantine/pull/4976
@Devon-Dickson made their first contribution in https://github.com/mantinedev/mantine/pull/4969

Full Changelog: mantinedev/mantine@7.1.2...7.1.3

`v7.1.2`

Compare Source

[@mantine/dropzone] Fix incorrect pointer events of inner element (#4934)
[@mantine/dropzone] Fix broken exports from react-dropzone-esm package

Full Changelog: mantinedev/mantine@7.1.1...7.1.2

`v7.1.1`

Compare Source

What's Changed

[@mantine/core] Radio: Fix description and error being misaligned when the component is rendered inside Radio.Group
[@mantine/core] HoverCard: Add missing HoverCard.extend
[@mantine/core] Drawer: Fix incorrect transitions in rtl direction (#4917)
[@mantine/core] TagsInput: Fix incorrect IME keyboard input handling (#4947)
[@mantine/core] Container: Fix nested Container components inheriting some properties from parent Container component (#4859)
[@mantine/core] Menu: Fix incorrect Menu.Item rtl styles (#4936)
[@mantine/core] Spoiler: remove margin-bottom when "Show more" is hidden (#4928)
[@mantine/dropzone] Migrate to react-dropzone-esm package to support frameworks that work only with esm (#4920)
[@mantine/core] Button: Fix incorrect border-radius of loading overlay (#4939)
[@mantine/core] Portal: Fix error when value of className prop contained whitespace (#4935)
[@mantine/core] MultiSelect: Fix incorrect input sizes values (#4925)
[@mantine/core] Affix: Fix position prop set as attribute on the root element (#4932)
[@mantine/core] Update react-textarea-autosize dependency to the latest version to fix issues with edge runtime (#4923)
[@mantine/core] Select: Fix search value not changing when component value is controlled (#4915)
[@mantine/core] Fix incorrect ActionIcon.Group, Button.Group and Rating components RTL styles (#4907)
[@mantine/core] TagsInput: Fix onOptionSubmit not being called when tag is submitted with Enter key (#4892)
[@mantine/core] NumberInput: Fix value reset to zero when leading non-zero number is deleted (#4916)

New Contributors

@ShaifArfan made their first contribution in https://github.com/mantinedev/mantine/pull/4916
@Yhprum made their first contribution in https://github.com/mantinedev/mantine/pull/4892
@tatthien made their first contribution in https://github.com/mantinedev/mantine/pull/4903
@m074554n made their first contribution in https://github.com/mantinedev/mantine/pull/4907
@Raicuparta made their first contribution in https://github.com/mantinedev/mantine/pull/4914
@wuifdesign made their first contribution in https://github.com/mantinedev/mantine/pull/4915
@martis900 made their first contribution in https://github.com/mantinedev/mantine/pull/4923
@Jacouille made their first contribution in https://github.com/mantinedev/mantine/pull/4928
@a-ryang made their first contribution in https://github.com/mantinedev/mantine/pull/4947

Full Changelog: mantinedev/mantine@7.1.0...7.1.1

`v7.1.0`: ⭐

Compare Source

CSS layers

Starting from 7.1.0 it is possible to import all @mantine/* packages styles with rules
defined in mantine CSS layer.
CSS rules within a layer are grouped together and applied before rules without a layer. This means that
even if you do not have control over styles import order, you can still override Mantine styles with
regular styles.

// If your styles are not wrapped in @&#8203;layer directive,
// they will be applied after Mantine styles.
// Import order does not affect styles in this case
import classes from './Demo.module.css';
import '@&#8203;mantine/core/styles.layer.css';

You can import styles within a layer by importing @mantine/*/styles.layer.css files.
Note that these files are a full replacement for @mantine/*/styles.css files –
you should not import both of them.

import '@&#8203;mantine/core/styles.layer.css';
import '@&#8203;mantine/dates/styles.layer.css';
// ... other styles

CSS layers are also useful if you want to combine Mantine components with other libraries which also
provide styles. You can use @layer directive to control the order of styles:

@&#8203;layer base, mantine, components;

In this example, Mantine styles will take precedence over other library base styles, but other library
components styles will take precedence over Mantine component styles.

As of September 2023, CSS layers are supported in all modern browsers and have 90% browser support.

renderRoot prop

All polymorphic components now support renderRoot prop, which
is an alternative to component prop. renderRoot prop allows changing the root element
to any other component or HTML tag with a callback function. It can be used in cases when
component prop is not flexible enough:

Target component props are incompatible with Mantine component. For example, Button component expects className
to be a string, but react-router-dom NavLink expects
className to be a function.
Target component is a generic – it either accepts type as a parameter or its type changes depending
on its props. Examples: typed Next.js Link, TanStack router Link

renderRoot example with react-router-dom NavLink:

import cx from 'clsx';
import { Button } from '@&#8203;mantine/core';
import { NavLink } from 'react-router-dom';

function Demo() {
  return (
    <Button
      renderRoot={({ className, ...others }) => (
        <NavLink
          className={({ isActive }) => cx(className, { 'active-class': isActive })}
          {...others}
        />
      )}
    >
      React router NavLink
    </Button>
  );
}

renderRoot example with typed Next.js Link:

import Link from 'next/link';
import { Button } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Button renderRoot={(props) => <Link href="/hello" {...props} />}>
      Typed Next link button
    </Button>
  );
}

Improved ESM support

All @mantine/* packages now have improved ESM support:

Files in esm folder now have .mjs extension
You can use @mantine/* packages with type: module in package.json without any additional configuration
All packages are now fully compatible with Remix v2
Tree shaking was improved for some bundlers

CSS variables in style prop

It is now possible to define CSS variables in style prop in all Mantine components –
style prop is no longer restricted by React.CSSProperties type:

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

function Demo() {
  return <Box style={{ '--radius': '0.5rem', borderRadius: 'var(--radius)' }} />;
}

form.setInitialValues

@mantine/form now supports form.setInitialValues method
which allows updating initial values after the form was initialized. This method is useful when you
want to update values that are used in form.reset and to compare values for dirty fields state:

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

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

  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then((data) => {
        // Update initial values after form was initialized
        // These values will be used in form.reset
        // and to compare values to get dirty state
        form.setInitialValues(data);
        form.setValues(data);
      });
  }, []);
}

`v7.0.2`

Compare Source

What's Changed

[@mantine/dates] Fix DatePickerInput and other similar inputs not having correct height when used without placeholder
[@mantine/core] Mult

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 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.

renovate · 2023-12-22T17:59:43Z

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.

Update mantine monorepo to v7

6554aed

maximilianruesch closed this Dec 22, 2023

renovate bot deleted the renovate/major-mantine-monorepo branch December 22, 2023 17:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update mantine monorepo to v7 (major) #97

Update mantine monorepo to v7 (major) #97

renovate bot commented Dec 20, 2023

renovate bot commented Dec 22, 2023

Update mantine monorepo to v7 (major) #97

Update mantine monorepo to v7 (major) #97

Conversation

renovate bot commented Dec 20, 2023

Release Notes

What's Changed

New Contributors

What's Changed

New Contributors

v7.3.0: 🌟

smaller-than and larger-than mixins

Form schema resolvers packages

rem/em functions improvements

component and renderRoot props for non-polymorphic components

Outline Checkbox and Radio variant

HueSlider and AlphaSlider components

Button loading state animation

Drawer offset

z-index CSS variables

Improved dark color scheme colors

Documentation updates

Other changes

What's new

What's Changed

New Contributors

v7.2.0: ⭐

Community templates

NumberFormatter component

Form actions

Table data prop

Table sticky header

Usage with Sass

Inline loaders

lightHidden and darkHidden props

light-root and dark-root mixins

Documentation updates

Other changes

v7.1.6: 7.1.7

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

v7.1.0: ⭐

CSS layers

renderRoot prop

Improved ESM support

CSS variables in style prop

form.setInitialValues

What's Changed

Configuration

renovate bot commented Dec 22, 2023

Renovate Ignore Notification

`v7.3.0`: 🌟

`v7.2.0`: ⭐

`v7.1.6`: 7.1.7

`v7.1.0`: ⭐