7 7 0

import { AreaChartDemos, FloatingIndicatorDemos, ScatterChartDemos, ThemingDemos, UseMutationObserverDemos, UseStateHistoryDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog770);

Virtual colors

Virtual color is a special color which values should be different for light and dark color schemes. To define a virtual color, use virtualColor function which accepts an object with the following properties as a single argument:

• name – color name, must be the same as the key in theme.colors object
• light – a key of theme.colors object for light color scheme
• dark – a key of theme.colors object for dark color scheme

To see the demo in action, switch between light and dark color schemes (Ctrl + J):

FloatingIndicator component

New FloatingIndicator component:

ScatterChart component

New ScatterChart component:

colorsTuple function

New colorsTuple function can be used to:

• Use single color as the same color for all shades
• Transform dynamic string arrays to Mantine color tuple (the array should still have 10 values)

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

const theme = createTheme({
  colors: {
    custom: colorsTuple('#FFC0CB'),
    dynamic: colorsTuple(
      Array.from({ length: 10 }, (_, index) => '#FFC0CB')
    ),
  },
});

use-mutation-observer hook

New useMutationObserver hook:

use-state-history hook

New useStateHistory hook:

Axis labels

AreaChart, BarChart and LineChart components now support xAxisLabel and yAxisLabel props:

Documentation updates

• New section has been added to the responsive guide on how to use mantine-hidden-from-{x} and mantine-visible-from-{x} classes.
• Jest and Vitest guides configuration has been updated to include mocks for window.HTMLElement.prototype.scrollIntoView
• CSS variables documentation has been updated to include more information about typography and colors variables

Help center updates

New articles added to the help center:

• Can I use SegmentedControl with empty value?
• Is there a comparison with other libraries?
• Can I use Mantine with Vue/Svelte/Angular/etc.?
• How can I test Select/MultiSelect components?

Other changes

• SegmentedControl indicator positioning logic has been migrated to FloatingIndicator. It is now more performant and works better when used inside elements with transform: scale().
• New use-mounted hook
• Sparkline now supports connectNulls and areaProps props
• Select, MultiSelect, Autocomplete and TagsInput components now support scrollAreaProps prop to pass props down to the ScrollArea component in the dropdown
• Transition component now supports 4 new transitions: fade-up, fade-down, fade-left, fade-right
• Default Modal transition was changed to fade-down. This change resolves issues with SegmentedControl indicator positioning when used inside modals.
• You can now reference headings font sizes and line heights in fz and lh style props with h1, h2, h3, h4, h5, h6 values