mantinedev/mantine (@mantine/core)
### [`v7.7.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.1)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.7.0...7.7.1)
##### What's Changed
- `[@mantine/tiptap]` Improve toolbar items alignment for non-native elements ([#5993](https://togithub.com/mantinedev/mantine/issues/5993))
- `[@mantine/spotlight]` Fix incorrect down key handling when the spotlight is opened repeatedly ([#5995](https://togithub.com/mantinedev/mantine/issues/5995))
- `[@mantine/core]` Image: Fix ref not being assigned for fallback images ([#5989](https://togithub.com/mantinedev/mantine/issues/5989))
- `[@mantine/core]` PinInput: Fix incorrect focus logic ([#5963](https://togithub.com/mantinedev/mantine/issues/5963))
- `[@mantine/core]` Table: Fix `highlightOnHoverColor` prop not working
- `[@mantine/core]` AppShell: Adjust footer position to include env(safe-area-inset-bottom) ([#5502](https://togithub.com/mantinedev/mantine/issues/5502))
- `[@mantine/core]` PinInput: Fix placeholder not being visible on the element that had focus when the component becomes disabled ([#5831](https://togithub.com/mantinedev/mantine/issues/5831))
- `[@mantine/dates]` Calendar: Fix double timezone shift ([#5916](https://togithub.com/mantinedev/mantine/issues/5916))
- `[@mantine/hooks]` use-local-storage: Fix value not being updated when key is changed ([#5910](https://togithub.com/mantinedev/mantine/issues/5910))
- `[@mantine/charts]` Fix incorrect charts legends height for multiline values ([#5923](https://togithub.com/mantinedev/mantine/issues/5923))
- `[@mantine/core]` NumberInput: Fix incorrect increment/decrement functions logic when `step` is a float value ([#5926](https://togithub.com/mantinedev/mantine/issues/5926))
- `[@mantine/core]` Combobox: Fix incorrect IME input handling ([#5935](https://togithub.com/mantinedev/mantine/issues/5935))
- `[@mantine/core]` Menu: Fix unexpected focus styles in the dropdown element in Firefox ([#5957](https://togithub.com/mantinedev/mantine/issues/5957))
- `[@mantine/core]` Fix incorrect `disabled` prop handling in TagsInput and MultiSelect ([#5959](https://togithub.com/mantinedev/mantine/issues/5959))
- `[@mantine/core]` Fix `renderOption` not working for grouped items in Combobox-based components ([#5952](https://togithub.com/mantinedev/mantine/issues/5952))
- `[@mantine/core]` AppShell: Fix error when used inside Suspense ([#5979](https://togithub.com/mantinedev/mantine/issues/5979))
- `[@mantine/core]` Update CSS selectors hashing algorithm to prevent collisions with other libraries ([#5968](https://togithub.com/mantinedev/mantine/issues/5968))
- `[@mantine/carousel]` Fix specificity issues of some selectors ([#5973](https://togithub.com/mantinedev/mantine/issues/5973))
- `[@mantine/core]` AppShell: Fix missing Aside offset in Header and Footer for `layout=alt` ([#5974](https://togithub.com/mantinedev/mantine/issues/5974))
##### New Contributors
- [@naughton](https://togithub.com/naughton) made their first contribution in [https://github.com/mantinedev/mantine/pull/5952](https://togithub.com/mantinedev/mantine/pull/5952)
- [@wasamistake](https://togithub.com/wasamistake) made their first contribution in [https://github.com/mantinedev/mantine/pull/5971](https://togithub.com/mantinedev/mantine/pull/5971)
- [@elecdeer](https://togithub.com/elecdeer) made their first contribution in [https://github.com/mantinedev/mantine/pull/5935](https://togithub.com/mantinedev/mantine/pull/5935)
- [@israelins85](https://togithub.com/israelins85) made their first contribution in [https://github.com/mantinedev/mantine/pull/5910](https://togithub.com/mantinedev/mantine/pull/5910)
- [@1g0rrr](https://togithub.com/1g0rrr) made their first contribution in [https://github.com/mantinedev/mantine/pull/5916](https://togithub.com/mantinedev/mantine/pull/5916)
- [@joshua-webdev](https://togithub.com/joshua-webdev) made their first contribution in [https://github.com/mantinedev/mantine/pull/5963](https://togithub.com/mantinedev/mantine/pull/5963)
- [@s-cork](https://togithub.com/s-cork) made their first contribution in [https://github.com/mantinedev/mantine/pull/5989](https://togithub.com/mantinedev/mantine/pull/5989)
- [@xiaohanyu](https://togithub.com/xiaohanyu) made their first contribution in [https://github.com/mantinedev/mantine/pull/5993](https://togithub.com/mantinedev/mantine/pull/5993)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.7.0...7.7.1
### [`v7.7.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.0)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.2...7.7.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-7-0)
##### 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`):
```tsx
import { createTheme, MantineProvider, virtualColor } from '@mantine/core';
const theme = createTheme({
colors: {
primary: virtualColor({
name: 'primary',
dark: 'pink',
light: 'cyan',
}),
},
});
function App() {
return {/* Your app here */};
}
```
##### FloatingIndicator component
New [FloatingIndicator](https://mantine.dev/core/floating-indicator) component:
```tsx
import { useState } from 'react';
import {
IconArrowDown,
IconArrowDownLeft,
IconArrowDownRight,
IconArrowLeft,
IconArrowRight,
IconArrowUp,
IconArrowUpLeft,
IconArrowUpRight,
IconCircle,
} from '@tabler/icons-react';
import { FloatingIndicator, UnstyledButton } from '@mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [rootRef, setRootRef] = useState(null);
const [controlsRefs, setControlsRefs] = useState>({});
const [active, setActive] = useState('center');
const setControlRef = (name: string) => (node: HTMLButtonElement) => {
controlsRefs[name] = node;
setControlsRefs(controlsRefs);
};
return (
setActive('up-left')}
ref={setControlRef('up-left')}
mod={{ active: active === 'up-left' }}
>
setActive('up')}
ref={setControlRef('up')}
mod={{ active: active === 'up' }}
>
setActive('up-right')}
ref={setControlRef('up-right')}
mod={{ active: active === 'up-right' }}
>
setActive('left')}
ref={setControlRef('left')}
mod={{ active: active === 'left' }}
>
setActive('center')}
ref={setControlRef('center')}
mod={{ active: active === 'center' }}
>
setActive('right')}
ref={setControlRef('right')}
mod={{ active: active === 'right' }}
>
setActive('down-left')}
ref={setControlRef('down-left')}
mod={{ active: active === 'down-left' }}
>
setActive('down')}
ref={setControlRef('down')}
mod={{ active: active === 'down' }}
>
setActive('down-right')}
ref={setControlRef('down-right')}
mod={{ active: active === 'down-right' }}
>
setActive('up-left')}
ref={setControlRef('up-left')}
mod={{ active: active === 'up-left' }}
>
setActive('up')}
ref={setControlRef('up')}
mod={{ active: active === 'up' }}
>
setActive('up-right')}
ref={setControlRef('up-right')}
mod={{ active: active === 'up-right' }}
>
setActive('left')}
ref={setControlRef('left')}
mod={{ active: active === 'left' }}
>
setActive('center')}
ref={setControlRef('center')}
mod={{ active: active === 'center' }}
>
setActive('right')}
ref={setControlRef('right')}
mod={{ active: active === 'right' }}
>
setActive('down-left')}
ref={setControlRef('down-left')}
mod={{ active: active === 'down-left' }}
>
setActive('down')}
ref={setControlRef('down')}
mod={{ active: active === 'down' }}
>
setActive('down-right')}
ref={setControlRef('down-right')}
mod={{ active: active === 'down-right' }}
>
);
}
```
##### 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)
```tsx
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](https://mantine.dev/hooks/use-mutation-observer) hook:
```tsx
import { useState } from 'react';
import { Kbd, Text } from '@mantine/core';
import { useMutationObserver } from '@mantine/hooks';
function Demo() {
const [lastMutation, setLastMutation] = useState('');
useMutationObserver(
(mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'dir') {
mutation.target instanceof HTMLElement &&
setLastMutation(mutation.target.getAttribute('dir') || '');
}
});
},
{
attributes: true,
attributeFilter: ['dir'],
},
() => document.documentElement
);
return (
<>
Press Ctrl + Shift + L to change direction
Direction was changed to: {lastMutation || 'Not changed yet'}
>
);
}
```
##### use-state-history hook
New [useStateHistory](https://mantine.dev/hooks/use-state-history) hook:
```tsx
import { Button, Code, Group, Text } from '@mantine/core';
import { useStateHistory } from '@mantine/hooks';
function Demo() {
const [value, handlers, history] = useStateHistory(1);
return (
<>
Current value: {value}{JSON.stringify(history, null, 2)}
>
);
}
```
##### Axis labels
[AreaChart](https://mantine.dev/charts/area-chart), [BarChart](https://mantine.dev/charts/bar-chart) and [LineChart](https://mantine.dev/charts/line-chart)
components now support `xAxisLabel` and `yAxisLabel` props:
```tsx
import { AreaChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### Documentation updates
- New section has been added to the [responsive guide](https://mantine.dev/styles/responsive#hidden-and-visible-from-as-classes) on how to use `mantine-hidden-from-{x}` and `mantine-visible-from-{x}` classes.
- [Remix guide](https://mantine.dev/guides/remix) has been updated to use new Vite bundler
- [Jest](https://mantine.dev/guides/jest) and [Vitest](https://mantine.dev/guides/vitest) guides configuration has been updated to include mocks for `window.HTMLElement.prototype.scrollIntoView`
- [CSS variables](https://mantine.dev/styles/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](https://help.mantine.dev):
- [Can I use SegmentedControl with empty value?](https://help.mantine.dev/q/segmented-control-no-value)
- [Is there a comparison with other libraries?](https://help.mantine.dev/q/other-libs)
- [Can I use Mantine with Vue/Svelte/Angular/etc.?](https://help.mantine.dev/q/vue-svelte-angular)
- [How can I test Select/MultiSelect components?](https://help.mantine.dev/q/combobox-testing)
##### Other changes
- [SegmentedControl](https://mantine.dev/core/segmented-control) indicator positioning logic has been migrated to [FloatingIndicator](https://mantine.dev/core/floating-indicator). It is now more performant and works better when used inside elements with `transform: scale()`.
- New [use-mounted](https://mantine.dev/hooks/use-mounted) hook
- [Sparkline](https://mantine.dev/charts/sparkline) now supports `connectNulls` and `areaProps` props
- [Remix template](https://togithub.com/mantinedev/remix-template) has been updated to use new Vite bundler
- [Select](https://mantine.dev/core/select), [MultiSelect](https://mantine.dev/core/multi-select), [Autocomplete](https://mantine.dev/core/autocomplete) and [TagsInput](https://mantine.dev/core/tags-input) components now support `scrollAreaProps` prop to pass props down to the [ScrollArea](https://mantine.dev/core/scroll-area) component in the dropdown
- [Transition](https://mantine.dev/core/transition) component now supports 4 new transitions: `fade-up`, `fade-down`, `fade-left`, `fade-right`
- Default [Modal](https://mantine.dev/core/modal) transition was changed to `fade-down`. This change resolves issues with [SegmentedControl](https://mantine.dev/core/segmented-control) 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
### [`v7.6.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.6.2)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.1...7.6.2)
#### What's Changed
- `[@mantine/hooks]` use-resize-observer: Fix types ([#5847](https://togithub.com/mantinedev/mantine/issues/5847))
- `[@mantine/hooks]` use-local-storage: Fix `undefined` being written to the local storage when `defaultValue` is not defined ([#5848](https://togithub.com/mantinedev/mantine/issues/5848))
- `[@mantine/core]` NumberInput: Fix `onValueChange` not being called in increment/decrement functions ([#5856](https://togithub.com/mantinedev/mantine/issues/5856))
- `[@mantine/core]` InputWrapper: Fix `className` specified in `labelProps`, `descriptionProps` and `errorProps` not being passed to the corresponding element ([#5862](https://togithub.com/mantinedev/mantine/issues/5862))
- `[@mantine/core]` Fix some functions not working correctly with TypeScript 5.4 ([#5891](https://togithub.com/mantinedev/mantine/issues/5891))
- `[@mantine/form]` Fix `onValuesChange` not using updated function ([#5901](https://togithub.com/mantinedev/mantine/issues/5901))
- `[@mantine/core]` Popover: Fix incorrect dropdown selectors ([#5903](https://togithub.com/mantinedev/mantine/issues/5903))
- `[@mantine/core]` Indicator: Fix processing animation in Safari ([#5908](https://togithub.com/mantinedev/mantine/issues/5908))
- `[@mantine/hooks]` use-headroom: Fix incorrect pinning logic when scrolling up ([#5793](https://togithub.com/mantinedev/mantine/issues/5793))
- `[@mantine/dropzone]` Add heic images format to default mime types ([#5867](https://togithub.com/mantinedev/mantine/issues/5867))
- `[@mantine/core]` Transition: Fix transitions resolving instantly in some cases ([#5873](https://togithub.com/mantinedev/mantine/issues/5873))
- `[@mantine/dropzone]` Add `inputProps` prop support to pass props down to the underlying hidden input element ([#5880](https://togithub.com/mantinedev/mantine/issues/5880))
- `[@mantine/core]` Timeline: Fix `autoContrast` being passed to the dom node as attribute ([#5890](https://togithub.com/mantinedev/mantine/issues/5890))
#### New Contributors
- [@AdarshJais](https://togithub.com/AdarshJais) made their first contribution in [https://github.com/mantinedev/mantine/pull/5833](https://togithub.com/mantinedev/mantine/pull/5833)
- [@Zachary-Kaye](https://togithub.com/Zachary-Kaye) made their first contribution in [https://github.com/mantinedev/mantine/pull/5890](https://togithub.com/mantinedev/mantine/pull/5890)
- [@redachl](https://togithub.com/redachl) made their first contribution in [https://github.com/mantinedev/mantine/pull/5867](https://togithub.com/mantinedev/mantine/pull/5867)
- [@timkrins](https://togithub.com/timkrins) made their first contribution in [https://github.com/mantinedev/mantine/pull/5860](https://togithub.com/mantinedev/mantine/pull/5860)
- [@Alimobasheri](https://togithub.com/Alimobasheri) made their first contribution in [https://github.com/mantinedev/mantine/pull/5793](https://togithub.com/mantinedev/mantine/pull/5793)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.6.1...7.6.2
### [`v7.6.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.6.1)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.0...7.6.1)
##### What's Changed
- `[@mantine/core]` Fix incorrect focus ring styles in Button.Group and ActionIcon.Group components ([#5736](https://togithub.com/mantinedev/mantine/issues/5736))
- `[@mantine/core]` Progress: Fix incorrect border-radius with multiple sections
- `[@mantine/dates]` DateTimePicker: Fix `minDate` and `maxDate` not being respected in time input ([#5819](https://togithub.com/mantinedev/mantine/issues/5819))
- `[@mantine/core]` Switch: Use `role="switch"` for better accessibility ([#5746](https://togithub.com/mantinedev/mantine/issues/5746))
- `[@mantine/hooks]` use-resize-observer: Fix incorrect ref type ([#5780](https://togithub.com/mantinedev/mantine/issues/5780))
- `[@mantine/dates]` Fix `popoverProps.onClose` overriding original component value in DatePickerInput and other similar components ([#4105](https://togithub.com/mantinedev/mantine/issues/4105))
- `[@mantine/core]` Fix incorrect Escape key handling in Modal and Drawer components in some cases ([#2827](https://togithub.com/mantinedev/mantine/issues/2827))
- `[@mantine/core]` Combobox: Fix incorrect Escape key handling in Modal, Drawer and Popover
- `[@mantine/core]` Transition: Fix transition resolving instantly in some cases ([#3126](https://togithub.com/mantinedev/mantine/issues/3126), [#5193](https://togithub.com/mantinedev/mantine/issues/5193))
- `[@mantine/core]` Remove loader from the DOM if `loading` prop is not set on ActionIcon and Button components ([#5795](https://togithub.com/mantinedev/mantine/issues/5795))
- `[@mantine/hooks]` use-local-storage: Fix inconsistent default value persistence if `getInitialValueInEffect` is set ([#5796](https://togithub.com/mantinedev/mantine/issues/5796))
- `[@mantine/core]` Select: Fix `autoComplete` prop not working ([#5813](https://togithub.com/mantinedev/mantine/issues/5813))
- `[@mantine/core]` Tabs: Fix incorrect border styles in outline variant
- `[@mantine/core]` Checkbox: Fix incorrect `indeterminate` + `disabled` styles for outline variant ([#5806](https://togithub.com/mantinedev/mantine/issues/5806))
- `[@mantine/core]` SegmentedControl: Fix indicator state not being updated correctly when controlled state changes to a value that is not present in the data array ([#5689](https://togithub.com/mantinedev/mantine/issues/5689))
- `[@mantine/core]` Fix incorrect label offset with left label position in Checkbox, Switch and Radio components ([#5823](https://togithub.com/mantinedev/mantine/issues/5823))
- `[@mantine/core]` PinInput: Fix updating controlled value to an empty string working incorrectly
- `[@mantine/core]` Menu: Fix incorrect role of dropdown elements
##### New Contributors
- [@gl3nn](https://togithub.com/gl3nn) made their first contribution in [https://github.com/mantinedev/mantine/pull/5689](https://togithub.com/mantinedev/mantine/pull/5689)
- [@ktunador](https://togithub.com/ktunador) made their first contribution in [https://github.com/mantinedev/mantine/pull/5711](https://togithub.com/mantinedev/mantine/pull/5711)
- [@snturk](https://togithub.com/snturk) made their first contribution in [https://github.com/mantinedev/mantine/pull/5819](https://togithub.com/mantinedev/mantine/pull/5819)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.6.0...7.6.1
### [`v7.6.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.6.0): π
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.5.3...7.6.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-6-0)
##### Container queries support
You can now use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)
with Mantine components. `rem` and `em` functions from [postcss-preset-mantine](https://mantine.dev/styles/postcss-preset/#remem-functions)
are available in container queries staring from `postcss-preset-mantine@1.13.0`.
```scss
.root {
min-width: rem(200px);
max-width: 100%;
min-height: rem(120px);
container-type: inline-size;
overflow: auto;
resize: horizontal;
}
.child {
background-color: var(--mantine-color-dimmed);
color: var(--mantine-color-white);
padding: var(--mantine-spacing-md);
@container (max-width: rem(500px)) {
background-color: var(--mantine-color-blue-filled);
}
@container (max-width: rem(300px)) {
background-color: var(--mantine-color-red-filled);
}
}
```
##### RadarChart component
New [RadarChart](https://mantine.dev/charts/radar-chart/) component:
```tsx
import { RadarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### FocusTrap.InitialFocus component
[FocusTrap.InitialFocus](https://mantine.dev/core/focus-trap) is a new component that adds a visually hidden
element which will receive the focus when the focus trap is activated.
Once `FocusTrap.InitialFocus` loses focus, it is removed from the tab order.
For example, it is useful if you do not want to focus any elements inside the [Modal](https://mantine.dev/core/modal) when it is opened:
```tsx
import { Button, FocusTrap, Modal, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
function Demo() {
const [opened, { open, close }] = useDisclosure(false);
return (
<>
>
);
}
```
##### New MantineProvider props
[MantineProvider](https://mantine.dev/theming/mantine-provider) now includes more props to control how styles
are generated and injected. These props are useful if you use Mantine as a headless library
and in test environments.
##### deduplicateCssVariables
`deduplicateCssVariables` prop determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime.
By default, it is set to `true`. If set to `false`, all Mantine CSS variables will be added in `` tag
even if they have the same value as in the default theme.
```tsx
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
);
}
```
##### withStaticClasses
`withStaticClasses` determines whether components should have static classes, for example, `mantine-Button-root`.
By default, static classes are enabled, to disable them set `withStaticClasses` to `false`:
```tsx
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
);
}
```
##### withGlobalClasses
`withGlobalClasses` determines whether global classes should be added with `` tag.
Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work.
By default, global classes are enabled, to disable them set `withGlobalClasses` to `false`. Note that
disabling global classes may break styles of some components.
```tsx
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
);
}
```
##### HeadlessMantineProvider
`HeadlessMantineProvider` is an alternative to [MantineProvider](https://mantine.dev/theming/mantine-provider)
that should be used when you want to use Mantine as a headless UI library. It removes all
features that are related to Mantine styles:
- Mantine classes are not applied to components
- Inline CSS variables are not added with `style` attribute
- All color scheme related features are removed
- Global styles are not generated
Limitations of `HeadlessMantineProvider`:
- [Color scheme switching](https://mantine.dev/theming/color-schemes/) will not work. If your application has a dark mode, you will need to implement it on your side.
- Props that are related to styles in all components (`color`, `radius`, `size`, etc.) will have no effect.
- Some components that rely on styles will become unusable ([Grid](https://mantine.dev/core/grid), [SimpleGrid](https://mantine.dev/core/simple-grid), [Container](https://mantine.dev/core/container), etc.).
- `lightHidden`/`darkHidden`, `visibleFrom`/`hiddenFrom` props will not work.
- [Style props](https://mantine.dev/styles/style-props/) will work only with explicit values, for example `mt="xs"` will not work, but `mt={5}` will.
To use `HeadlessMantineProvider`, follow [getting started guide](https://mantine.dev/getting-started/) and replace `MantineProvider` with `HeadlessMantineProvider`.
Note that you do not need to use [ColorSchemeScript](https://mantine.dev/theming/color-schemes/#colorschemescript) in your application, it will not have any effect,
you can ignore this part of the guide.
```tsx
import { HeadlessMantineProvider } from '@mantine/core';
function App() {
return {/* Your application */};
}
```
##### Sparkline trendColors
[Sparkline](https://mantine.dev/charts/sparkline/) now supports `trendColors` prop to change chart color depending on the trend.
The prop accepts an object with `positive`, `negative` and `neutral` properties:
- `positive` - color for positive trend (first value is less than the last value in `data` array)
- `negative` - color for negative trend (first value is greater than the last value in `data` array)
- `neutral` - color for neutral trend (first and last values are equal)
`neutral` is optional, if not provided, the color will be the same as `positive`.
```tsx
import { Sparkline } from '@mantine/charts';
import { Stack, Text } from '@mantine/core';
const positiveTrend = [10, 20, 40, 20, 40, 10, 50];
const negativeTrend = [50, 40, 20, 40, 20, 40, 10];
const neutralTrend = [10, 20, 40, 20, 40, 10, 50, 5, 10];
function Demo() {
return (
Positive trend:Negative trend:Neutral trend:
);
}
```
##### RichTextEditor tasks extension
[RichTextEditor](https://mantine.dev/x/tiptap/#tasks) now supports tasks [tiptap extension](https://tiptap.dev/docs/editor/api/nodes/task-list):
```tsx
import TaskItem from '@tiptap/extension-task-item';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { getTaskListExtension, RichTextEditor } from '@mantine/tiptap';
function Demo() {
const editor = useEditor({
extensions: [
StarterKit,
getTaskListExtension(TipTapTaskList),
TaskItem.configure({
nested: true,
HTMLAttributes: {
class: 'test-item',
},
}),
],
content: `
A list item
And another one
`,
});
return (
);
}
```
##### renderOption prop
[Select](https://mantine.dev/core/select), [MultiSelect](https://mantine.dev/core/multi-select), [TagsInput](https://mantine.dev/inputs/tags-input) and [Autocomplete](https://mantine.dev/inputs/autocomplete)
components now support `renderOption` prop that allows to customize option rendering:
```tsx
import {
IconAlignCenter,
IconAlignJustified,
IconAlignLeft,
IconAlignRight,
IconCheck,
} from '@tabler/icons-react';
import { Group, Select, SelectProps } from '@mantine/core';
const iconProps = {
stroke: 1.5,
color: 'currentColor',
opacity: 0.6,
size: 18,
};
const icons: Record = {
left: ,
center: ,
right: ,
justify: ,
};
const renderSelectOption: SelectProps['renderOption'] = ({ option, checked }) => (
{icons[option.value]}
{option.label}
{checked && }
);
function Demo() {
return (
);
}
```
##### Styles improvements
All Mantine components have been migrated to [logical CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
(as a replacement for rtl styles) and [:where](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) pseudo-class
(as a replacement for [private CSS variables](https://help.mantine.dev/q/private-css-variables)). These changes
should not impact the usage of Mantine components, but now Mantine CSS files have smaller size. For example,
`@mantine/core/styles.css` now has ~ 8% smaller size (192kb -> 177kb).
##### Pass props to inner recharts components
You can now pass props down to recharts [Bar](https://recharts.org/en-US/api/Bar), [Area](https://recharts.org/en-US/api/Area) and [Line](https://recharts.org/en-US/api/Line) components
with `barProps`, `areaProps` and `lineProps` props on [BarChart](https://mantine.dev/charts/bar-chart), [AreaChart](https://mantine.dev/charts/area-chart) and [LineChart](https://mantine.dev/charts/line-chart) components.
All props accepts either an object with props or a function that receives
series data as an argument and returns an object with props.
##### PieChart percent labels
[PieChart](https://mantine.dev/charts/pie-chart/) now supports `percent` labels:
```tsx
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### Documentation updates
- [Responsive styles guide](https://mantine.dev/styles/responsive) now includes new sections about responsive props and container queries
- New [HeadlessMantineProvider section](https://mantine.dev/styles/unstyled/#headlessmantineprovider) in the unstyled guide
- [ActionIcon](https://mantine.dev/core/action-icon/) now includes additional documentation section on how to make the button the same size as Mantine inputs
- [AreaChart](https://mantine.dev/charts/area-chart) now includes an example of how to rotate x-axis labels
- [Redwood guide](https://mantine.dev/guides/redwood/) has been updated to the latest redwood version with Vite
##### Help center updates
New articles added to the [help center](https://help.mantine.dev):
- [Browser zooms in when input is focused. What should I do?](https://help.mantine.dev/q/browser-zooms-on-focus)
- [It is not possible to pinch to zoom when Modal is opened. What should I do?](https://help.mantine.dev/q/pinch-to-zoom-modal)
- [How can I lock scroll in my application?](https://help.mantine.dev/q/how-to-lock-scroll)
- [Where can I find the roadmap?](https://help.mantine.dev/q/roadmap)
- [How can I change Tabs border color?](https://help.mantine.dev/q/tabs-border-color)
- [How can I change inputs focus styles?](https://help.mantine.dev/q/input-focus-styles)
- [Can I use Mantine with Emotion/styled-components/tailwindcss?](https://help.mantine.dev/q/third-party-styles)
- [Is there a way to add mask to Mantine input?](https://help.mantine.dev/q/input-mask)
- [How to align input with a button in a flex container?](https://help.mantine.dev/q/align-input-button)
- [How can I change component color prop value depending on the color scheme?](https://help.mantine.dev/q/color-scheme-color)
##### Other changes
- [use-list-state](https://mantine.dev/hooks/use-list-state/) hook now supports `swap` handler
- `form.setFieldValue` now supports callback function as an argument
- `px`, `py`, `mx` and `my` [style props](https://mantine.dev/styles/style-props/) now use logical CSS properties `padding-inline`, `padding-block`, `margin-inline` and `margin-block` instead of `padding-left`, `padding-right`, etc.
- All components now support `me`, `ms`, `ps`, `pe` [style props](https://mantine.dev/styles/style-props/) to set `margin-inline-end`, `margin-inline-start`, `padding-inline-start` and `padding-inline-end` CSS properties
- [Tooltip](https://mantine.dev/core/tooltip), [Popover](https://mantine.dev/core/popover) and other components based on `Popover` now support `floatingStrategy` prop to control [Floating UI strategy](https://floating-ui.com/docs/usefloating#strategy)
- All `@mantine/charts` components now support `children` prop which passes children to the root recharts component
- [use-resize-observer](https://mantine.dev/hooks/use-resize-observer/) and [use-element-size](https://mantine.dev/hooks/use-element-size/) hooks now support [ResizeObserver options](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#parameters) as hook argument
- [Select](https://mantine.dev/core/select), [MultiSelect](https://mantine.dev/core/multi-select) and [TagsInput](https://mantine.dev/inputs/tags-input) now support `onClear` prop, the function is called when clear button is clicked
- [MultiSelect](https://mantine.dev/core/multi-select) and [TagsInput](https://mantine.dev/inputs/tags-input) now support `onRemove` prop, the function is called with removed item value when one of the items is deselected
- [Redwood template](https://togithub.com/mantinedev/redwood-template) has been updated to the latest redwood version with Vite
### [`v7.5.3`](https://togithub.com/mantinedev/mantine/releases/tag/7.5.3)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.5.2...7.5.3)
##### What's Changed
- `[@mantine/core]` NumberInput: Fix double border between controls appeared on low resolution screens ([#5753](https://togithub.com/mantinedev/mantine/issues/5753))
- `[@mantine/hooks]` use-hotkeys: Fix incorrect `HotkeyItem` type ([#5705](https://togithub.com/mantinedev/mantine/issues/5705))
- `[@mantine/hooks]` use-resize-observer: Fix incorrect ref type ([#5759](https://togithub.com/mantinedev/mantine/issues/5759))
- `[@mantine/core]` ScrollArea: Fix `offsetScrollbars` not working on y-axis ([#5762](https://togithub.com/mantinedev/mantine/issues/5762))
- `[@mantine/core]` NavLink: Add `collapse` Styles API selector ([#5776](https://togithub.com/mantinedev/mantine/issues/5776))
- `[@mantine/hooks]` Fixed initial value of the `online` attribute returned by `useNetwork()` in Firefox ([#5766](https://togithub.com/mantinedev/mantine/issues/5766))
- `[@mantine/core]` PinInput: Fix inputs not being updated with `length` prop changes
- `[@mantine/core]` PinInput: Fix incorrect `onComplete` behavior ([#5774](https://togithub.com/mantinedev/mantine/issues/5774), [#5771](https://togithub.com/mantinedev/mantine/issues/5771))
- `[@mantine/core]` Card: Fix incorrect margins in first and last sections when `CardSection` component is used instead of `Card.Section` ([#5742](https://togithub.com/mantinedev/mantine/issues/5742))
- `[@mantine/core]` Tooltip: Fix multiline prop not working correctly in `Tooltip.Floating` component
##### New Contributors
- [@nikolaistarostin](https://togithub.com/nikolaistarostin) made their first contribution in [https://github.com/mantinedev/mantine/pull/5772](https://togithub.com/mantinedev/mantine/pull/5772)
- [@rilrom](https://togithub.com/rilrom) made their first contribution in [https://github.com/mantinedev/mantine/pull/5762](https://togithub.com/mantinedev/mantine/pull/5762)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.5.2...7.5.3
### [`v7.5.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.5.2)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.5.1...7.5.2)
##### What's Changed
- `[@mantine/core]` ActionIcon: Fix icon width and height defined in % not working correctly
- `[@mantine/core]` ScrollArea: Fix `offsetScrollbars` not working ([#5733](https://togithub.com/mantinedev/mantine/issues/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](https://togithub.com/mantinedev/mantine/issues/5704))
- `[@mantine/form]` Add callback argument support to `form.setFieldValue` handler ([#5696](https://togithub.com/mantinedev/mantine/issues/5696))
- `[@mantine/core]` Add explicit extension to exports to support NodeNext TypeScript resolution ([#5697](https://togithub.com/mantinedev/mantine/issues/5697))
- `[@mantine/hooks]` use-list-state: Add `swap` handler support ([#5716](https://togithub.com/mantinedev/mantine/issues/5716))
- `[@mantine/core]` Fix NodeNext TypeScript resolution not working correctly for PolymorphicComponentProps and PolymorphicRef types ([#5730](https://togithub.com/mantinedev/mantine/issues/5730))
- `[@mantine/core]` Fix cjs builds unable to resolve third-party dependencies with certain TypeScript settings ([#5741](https://togithub.com/mantinedev/mantine/issues/5741))
- `[@mantine/core]` Transition: Fix skew-up transition not working ([#5714](https://togithub.com/mantinedev/mantine/issues/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](https://togithub.com/mantinedev/mantine/issues/4502))
- `[@mantine/core]` ScrollArea: Fix `style` prop not being passed to the element when used in `viewportProps` ([#5594](https://togithub.com/mantinedev/mantine/issues/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](https://togithub.com/mantinedev/mantine/issues/5640))
##### New Contributors
- [@kblcuk](https://togithub.com/kblcuk) made their first contribution in [https://github.com/mantinedev/mantine/pull/5741](https://togithub.com/mantinedev/mantine/pull/5741)
- [@qweered](https://togithub.com/qweered) made their first contribution in [https://github.com/mantinedev/mantine/pull/5694](https://togithub.com/mantinedev/mantine/pull/5694)
- [@kkaplita](https://togithub.com/kkaplita) made their first contribution in [https://github.com/mantinedev/mantine/pull/5704](https://togithub.com/mantinedev/mantine/pull/5704)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.5.1...7.5.2
### [`v7.5.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.5.1)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.5.0...7.5.1)
##### What's Changed
- `[@mantine/core]` Indicator: Improve processing animation for lo-resolution monitors ([#5682](https://togithub.com/mantinedev/mantine/issues/5682))
- `[@mantine/hooks]` use-debounced-state: Fix incorrect type definition ([#5665](https://togithub.com/mantinedev/mantine/issues/5665))
- `[@mantine/hooks]` use-session-storage: Fix default value not being set in the storage on initial render ([#5663](https://togithub.com/mantinedev/mantine/issues/5663))
- `[@mantine/core]` Combobox: Fix incorrect dropdown styles with custom ScrollArea component ([#5677](https://togithub.com/mantinedev/mantine/issues/5677))
- `[@mantine/form]` Fix incorrect touch and dirty state handling in `form.initialize` ([#5623](https://togithub.com/mantinedev/mantine/issues/5623))
- `[@mantine/core]` Chip: Fix error thrown when page is modified with Google Translate ([#5586](https://togithub.com/mantinedev/mantine/issues/5586))
- `[@mantine/form]` Add previous value as second argument to `onValuesChange` ([#5649](https://togithub.com/mantinedev/mantine/issues/5649))
- `[@mantine/core]` Fix `autoContrast` defined on theme not working in some components ([#5655](https://togithub.com/mantinedev/mantine/issues/5655))
- `[@mantine/core]` Fix broken alignment in Checkbox, Radio and Switch ([#5648](https://togithub.com/mantinedev/mantine/issues/5648))
- `[@mantine/core-highlight]` Add `withCopyButton` prop support to CodeHighlightTabs ([#5608](https://togithub.com/mantinedev/mantine/issues/5608))
- `[@mantine/core]` Update `useComputedColorScheme` types to match definition with other similar hooks ([#5588](https://togithub.com/mantinedev/mantine/issues/5588))
- `[@mantine/core]` MultiSelect: Forbid select item removal if associated item becomes disabled ([#5630](https://togithub.com/mantinedev/mantine/issues/5630))
##### New Contributors
- [@Phirb](https://togithub.com/Phirb) made their first contribution in [https://github.com/mantinedev/mantine/pull/5630](https://togithub.com/mantinedev/mantine/pull/5630)
- [@c0nd3v](https://togithub.com/c0nd3v) made their first contribution in [https://github.com/mantinedev/mantine/pull/5588](https://togithub.com/mantinedev/mantine/pull/5588)
- [@sxflynn](https://togithub.com/sxflynn) made their first contribution in [https://github.com/mantinedev/mantine/pull/5605](https://togithub.com/mantinedev/mantine/pull/5605)
- [@vizath](https://togithub.com/vizath) made their first contribution in [https://github.com/mantinedev/mantine/pull/5648](https://togithub.com/mantinedev/mantine/pull/5648)
- [@mariansimecek](https://togithub.com/mariansimecek) made their first contribution in [https://github.com/mantinedev/mantine/pull/5649](https://togithub.com/mantinedev/mantine/pull/5649)
- [@gabrielmaldi](https://togithub.com/gabrielmaldi) made their first contribution in [https://github.com/mantinedev/mantine/pull/5670](https://togithub.com/mantinedev/mantine/pull/5670)
- [@waweber](https://togithub.com/waweber) made their first contribution in [https://github.com/mantinedev/mantine/pull/5668](https://togithub.com/mantinedev/mantine/pull/5668)
- [@msv96](https://togithub.com/msv96) made their first contribution in [https://github.com/mantinedev/mantine/pull/5663](https://togithub.com/mantinedev/mantine/pull/5663)
- [@cristianghita24](https://togithub.com/cristianghita24) made their first contribution in [https://github.com/mantinedev/mantine/pull/5665](https://togithub.com/mantinedev/mantine/pull/5665)
- [@matthiasfeist](https://togithub.com/matthiasfeist) made their first contribution in [https://github.com/mantinedev/mantine/pull/5682](https://togithub.com/mantinedev/mantine/pull/5682)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.5.0...7.5.1
### [`v7.5.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.5.0): β¨ 7.5.0
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.4.2...7.5.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-5-0)
##### DonutChart component
New [DonutChart](https://mantine.dev/charts/donut-chart) component:
```tsx
import { DonutChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return ;
}
```
##### PieChart component
New [PieChart](https://mantine.dev/charts/pie-chart) component:
```tsx
import { PieChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return ;
}
```
##### [@mantine/dates](https://togithub.com/mantine/dates) value formatter
[DatePickerInput](https://mantine.dev/dates/date-picker-input), [MonthPickerInput](https://mantine.dev/dates/month-picker-input) and
[YearPickerInput](https://mantine.dev/dates/year-picker-input) 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"`:
```tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { DateFormatter, DatePickerInput } from '@mantine/dates';
const formatter: DateFormatter = ({ type, date, locale, format }) => {
if (type === 'multiple' && Array.isArray(date)) {
if (date.length === 1) {
return dayjs(date[0]).locale(locale).format(format);
}
if (date.length > 1) {
return `${date.length} dates selected`;
}
return '';
}
return '';
};
function Demo() {
const [value, setValue] = useState([]);
return (
);
}
```
##### [@mantine/dates](https://togithub.com/mantine/dates) consistent weeks
You can now force each month to have 6 weeks by setting `consistentWeeks: true` on
[DatesProvider](https://mantine.dev/dates/getting-started). This is useful if you want to avoid layout
shifts when month changes.
```tsx
import { DatePicker, DatesProvider } from '@mantine/dates';
function Demo() {
return (
);
}
```
##### Charts series label
It is now possible to change series labels with `label` property
in `series` object. This feature is supported in [AreaChart](https://mantine.dev/charts/area-chart),
[BarChart](https://mantine.dev/charts/bar-chart) and [LineChart](https://mantine.dev/charts/line-chart) components.
```tsx
import { AreaChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### 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.
```tsx
import { AreaChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
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](https://mantine.dev/core/title) `textWrap` prop sets [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
CSS property. It controls how text inside an element is wrapped.
```tsx
import { Title } from '@mantine/core';
function Demo() {
return (
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptatibus inventore iusto
cum dolore molestiae perspiciatis! Totam repudiandae impedit maxime!
);
}
```
You can also set `textWrap` on [theme](https://mantine.dev/theming/theme-object):
```tsx
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
headings: {
textWrap: 'wrap',
},
});
function Demo() {
return (
Some very long title that should wrap
);
}
```
If set on theme, `textWrap` is also applied to headings in [TypographyStylesProvider](https://mantine.dev/core/typography-styles-provider)
##### mod prop
All components now support `mod` prop, which allow
Configuration
π Schedule: Branch creation - "after 9am on monday,before 12am on monday" in timezone Asia/Tokyo, 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.
This PR contains the following updates:
^6.0.16
->^7.0.0
^6.0.16
->^7.0.0
Release Notes
mantinedev/mantine (@mantine/core)
### [`v7.7.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.1) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.7.0...7.7.1) ##### What's Changed - `[@mantine/tiptap]` Improve toolbar items alignment for non-native elements ([#5993](https://togithub.com/mantinedev/mantine/issues/5993)) - `[@mantine/spotlight]` Fix incorrect down key handling when the spotlight is opened repeatedly ([#5995](https://togithub.com/mantinedev/mantine/issues/5995)) - `[@mantine/core]` Image: Fix ref not being assigned for fallback images ([#5989](https://togithub.com/mantinedev/mantine/issues/5989)) - `[@mantine/core]` PinInput: Fix incorrect focus logic ([#5963](https://togithub.com/mantinedev/mantine/issues/5963)) - `[@mantine/core]` Table: Fix `highlightOnHoverColor` prop not working - `[@mantine/core]` AppShell: Adjust footer position to include env(safe-area-inset-bottom) ([#5502](https://togithub.com/mantinedev/mantine/issues/5502)) - `[@mantine/core]` PinInput: Fix placeholder not being visible on the element that had focus when the component becomes disabled ([#5831](https://togithub.com/mantinedev/mantine/issues/5831)) - `[@mantine/dates]` Calendar: Fix double timezone shift ([#5916](https://togithub.com/mantinedev/mantine/issues/5916)) - `[@mantine/hooks]` use-local-storage: Fix value not being updated when key is changed ([#5910](https://togithub.com/mantinedev/mantine/issues/5910)) - `[@mantine/charts]` Fix incorrect charts legends height for multiline values ([#5923](https://togithub.com/mantinedev/mantine/issues/5923)) - `[@mantine/core]` NumberInput: Fix incorrect increment/decrement functions logic when `step` is a float value ([#5926](https://togithub.com/mantinedev/mantine/issues/5926)) - `[@mantine/core]` Combobox: Fix incorrect IME input handling ([#5935](https://togithub.com/mantinedev/mantine/issues/5935)) - `[@mantine/core]` Menu: Fix unexpected focus styles in the dropdown element in Firefox ([#5957](https://togithub.com/mantinedev/mantine/issues/5957)) - `[@mantine/core]` Fix incorrect `disabled` prop handling in TagsInput and MultiSelect ([#5959](https://togithub.com/mantinedev/mantine/issues/5959)) - `[@mantine/core]` Fix `renderOption` not working for grouped items in Combobox-based components ([#5952](https://togithub.com/mantinedev/mantine/issues/5952)) - `[@mantine/core]` AppShell: Fix error when used inside Suspense ([#5979](https://togithub.com/mantinedev/mantine/issues/5979)) - `[@mantine/core]` Update CSS selectors hashing algorithm to prevent collisions with other libraries ([#5968](https://togithub.com/mantinedev/mantine/issues/5968)) - `[@mantine/carousel]` Fix specificity issues of some selectors ([#5973](https://togithub.com/mantinedev/mantine/issues/5973)) - `[@mantine/core]` AppShell: Fix missing Aside offset in Header and Footer for `layout=alt` ([#5974](https://togithub.com/mantinedev/mantine/issues/5974)) ##### New Contributors - [@naughton](https://togithub.com/naughton) made their first contribution in [https://github.com/mantinedev/mantine/pull/5952](https://togithub.com/mantinedev/mantine/pull/5952) - [@wasamistake](https://togithub.com/wasamistake) made their first contribution in [https://github.com/mantinedev/mantine/pull/5971](https://togithub.com/mantinedev/mantine/pull/5971) - [@elecdeer](https://togithub.com/elecdeer) made their first contribution in [https://github.com/mantinedev/mantine/pull/5935](https://togithub.com/mantinedev/mantine/pull/5935) - [@israelins85](https://togithub.com/israelins85) made their first contribution in [https://github.com/mantinedev/mantine/pull/5910](https://togithub.com/mantinedev/mantine/pull/5910) - [@1g0rrr](https://togithub.com/1g0rrr) made their first contribution in [https://github.com/mantinedev/mantine/pull/5916](https://togithub.com/mantinedev/mantine/pull/5916) - [@joshua-webdev](https://togithub.com/joshua-webdev) made their first contribution in [https://github.com/mantinedev/mantine/pull/5963](https://togithub.com/mantinedev/mantine/pull/5963) - [@s-cork](https://togithub.com/s-cork) made their first contribution in [https://github.com/mantinedev/mantine/pull/5989](https://togithub.com/mantinedev/mantine/pull/5989) - [@xiaohanyu](https://togithub.com/xiaohanyu) made their first contribution in [https://github.com/mantinedev/mantine/pull/5993](https://togithub.com/mantinedev/mantine/pull/5993) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.7.0...7.7.1 ### [`v7.7.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.0) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.2...7.7.0) [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-7-0) ##### 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`): ```tsx import { createTheme, MantineProvider, virtualColor } from '@mantine/core'; const theme = createTheme({ colors: { primary: virtualColor({ name: 'primary', dark: 'pink', light: 'cyan', }), }, }); function App() { return{JSON.stringify(history, null, 2)}
> ); } ``` ##### Axis labels [AreaChart](https://mantine.dev/charts/area-chart), [BarChart](https://mantine.dev/charts/bar-chart) and [LineChart](https://mantine.dev/charts/line-chart) components now support `xAxisLabel` and `yAxisLabel` props: ```tsx import { AreaChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return (Configuration
π Schedule: Branch creation - "after 9am on monday,before 12am on monday" in timezone Asia/Tokyo, 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.
This PR has been generated by Mend Renovate. View repository job log here.