[@mantine/core] fix combobox footer and header interactions 6335 #6344
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
stefanzmf
changed the title
|
Thanks! |
This was referenced Jul 5, 2024
This was referenced Jul 18, 2024
github-merge-queue bot
referenced
this pull request
in dotkom/monoweb
Aug 20, 2024
[](https://renovatebot.com)
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@mantine/core](https://mantine.dev/)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/core))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fcore/7.4.1/7.12.1)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/dates](https://mantine.dev/dates/getting-started/)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/dates))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fdates/7.4.1/7.12.1)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/hooks](https://mantine.dev)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/hooks))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fhooks/7.4.1/7.12.1)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/modals](https://mantine.dev/x/modals/)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/modals))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fmodals/7.4.1/7.12.1)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/notifications](https://mantine.dev)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/notifications))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fnotifications/7.4.1/7.12.1)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
[](https://docs.renovatebot.com/merge-confidence/)
|
---
### Release Notes
<details>
<summary>mantinedev/mantine (@​mantine/core)</summary>
###
[`v7.12.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.12.1)
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.12.0...7.12.1)
##### What's Changed
- `[@mantine/dates]` DateInput: Fix default date being set to the
current date when `minDate` is set to the future
([#​6646](https://togithub.com/mantinedev/mantine/issues/6646))
- `[@mantine/core]` ScrollArea: Fix incorrect thumb::before styles
- `[@mantine/core]` Fix incorrect active styles of buttons used inside
disabled fieldset
- `[@mantine/form]` Fix `form.watch` callbacks not being fired when
`form.initialize` is called
([#​6639](https://togithub.com/mantinedev/mantine/issues/6639))
- `[@mantine/core]` Switch: Fix Switch shrinking when large label or
description is used
([#​6531](https://togithub.com/mantinedev/mantine/issues/6531))
- `[@mantine/core]` Combobox: Fix `Combobox.Search` overflow when
`ScrollArea` is used in the dropdown
([#​6562](https://togithub.com/mantinedev/mantine/issues/6562))
- `[@mantine/core]` Accordion: Add missing `withProps` function
([#​6564](https://togithub.com/mantinedev/mantine/issues/6564))
- `[@mantine/core]` Pill: Fix remove icon overflowing pill container if
its background color was changed with Styles API
([#​6565](https://togithub.com/mantinedev/mantine/issues/6565))
- `[@mantine/core]` PinInput: Allow passing props to individual input
elements depending on index with `getInputProps`
([#​6588](https://togithub.com/mantinedev/mantine/issues/6588))
- `[@mantine/charts]`: Fix LineChart Legend and Tooltip to support
nested names
([#​6536](https://togithub.com/mantinedev/mantine/issues/6536))
- `[@mantine/core]` Tooltip: Add missing `Tooltip.Group.extend` function
([#​6576](https://togithub.com/mantinedev/mantine/issues/6576))
- `[@mantine/spotlight]` Fix `limit` prop not working correctly with
actions groups
([#​6632](https://togithub.com/mantinedev/mantine/issues/6632))
- `[@mantine/core]` Badge: Fix text overflow not being handled correctly
([#​6629](https://togithub.com/mantinedev/mantine/issues/6629))
- `[@mantine/core]` SegmentedControl: Add `data-disabled` attribute to
the root element to simplify styling with Styles API
([#​6625](https://togithub.com/mantinedev/mantine/issues/6625))
- `[@mantine/core]` SegmentedControl: Fix initial position of indicator
being broken when the component is used inside other element that has
transitions on mount
([#​6622](https://togithub.com/mantinedev/mantine/issues/6622))
- `[@mantine/core]` TagsInput: Fix `onKeyDown` prop not working
([#​6569](https://togithub.com/mantinedev/mantine/issues/6569))
- `[@mantine/charts]` PieChart: Fix `valueFormatter` not working on
outside labels
([#​6616](https://togithub.com/mantinedev/mantine/issues/6616))
- `[@mantine/core]` Popover: Fix `apply` function of `size` middleware
not being handled correctly
([#​6598](https://togithub.com/mantinedev/mantine/issues/6598))
- `[@mantine/core]` Chip: Fix incorrect checked padding for `size="xl"`
([#​6586](https://togithub.com/mantinedev/mantine/issues/6586))
- `[@mantine/dates]` TimeInput: Fix incorrect focus styles of am/pm
input
([#​6579](https://togithub.com/mantinedev/mantine/issues/6579))
- `[@mantine/hook]` use-os: Fix incorrect iPadOS detection
([#​6535](https://togithub.com/mantinedev/mantine/issues/6535))
- `[@mantine/core]` DatePickerInput: Fix incorrect `aria-label` being
set on the input element
([#​6530](https://togithub.com/mantinedev/mantine/issues/6530))
- `[@mantine/core]` Menu: Fix incorrect Escape key handling inside Modal
([#​6580](https://togithub.com/mantinedev/mantine/issues/6580))
##### New Contributors
- [@​vorant94](https://togithub.com/vorant94) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6530](https://togithub.com/mantinedev/mantine/pull/6530)
- [@​hajimism](https://togithub.com/hajimism) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6539](https://togithub.com/mantinedev/mantine/pull/6539)
- [@​ziimakc](https://togithub.com/ziimakc) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6561](https://togithub.com/mantinedev/mantine/pull/6561)
- [@​th3fallen](https://togithub.com/th3fallen) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6579](https://togithub.com/mantinedev/mantine/pull/6579)
- [@​david-szabo97](https://togithub.com/david-szabo97) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6586](https://togithub.com/mantinedev/mantine/pull/6586)
- [@​bastiankistner](https://togithub.com/bastiankistner) made
their first contribution in
[https://github.com/mantinedev/mantine/pull/6607](https://togithub.com/mantinedev/mantine/pull/6607)
- [@​inx-fldu](https://togithub.com/inx-fldu) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6569](https://togithub.com/mantinedev/mantine/pull/6569)
- [@​michaelperros](https://togithub.com/michaelperros) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6622](https://togithub.com/mantinedev/mantine/pull/6622)
- [@​risen228](https://togithub.com/risen228) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6625](https://togithub.com/mantinedev/mantine/pull/6625)
- [@​ddoemonn](https://togithub.com/ddoemonn) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6629](https://togithub.com/mantinedev/mantine/pull/6629)
- [@​yorkeJohn](https://togithub.com/yorkeJohn) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6632](https://togithub.com/mantinedev/mantine/pull/6632)
- [@​raulfpl](https://togithub.com/raulfpl) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6639](https://togithub.com/mantinedev/mantine/pull/6639)
- [@​uriFrischman](https://togithub.com/uriFrischman) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6645](https://togithub.com/mantinedev/mantine/pull/6645)
**Full Changelog**:
https://github.com/mantinedev/mantine/compare/7.12.0...7.12.1
###
[`v7.12.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.12.0):
🌟
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.11.2...7.12.0)
[View changelog with demos on mantine.dev
website](https://mantine.dev/changelog/7-12-0)
#### Notifications at any position
It is now possible to display notifications at any position on the
screen
with [@​mantine/notifications
package](https://mantine.dev/x/notifications):
```tsx
import { Button } from '@​mantine/core';
import { notifications } from '@​mantine/notifications';
const positions = [
'top-left',
'top-right',
'bottom-left',
'bottom-right',
'top-center',
'bottom-center',
] as const;
function Demo() {
const buttons = positions.map((position) => (
<Button
key={position}
onClick={() =>
notifications.show({
title: `Notification at ${position}`,
message: `Notification at ${position} message`,
position,
})
}
>
{position}
</Button>
));
return <Group>{buttons}</Group>;
}
```
#### Subscribe to notifications state
You can now subscribe to notifications state changes with
`useNotifications` hook:
```tsx
import { Button } from '@​mantine/core';
import { notifications } from '@​mantine/notifications';
function Demo() {
return (
<Button
onClick={() =>
notifications.show({
title: 'Default notification',
message: 'Do not forget to star Mantine on GitHub! 🌟',
})
}
>
Show notification
</Button>
);
}
```
#### SemiCircleProgress component
New [SemiCircleProgress](https://mantine.dev/core/semi-circle-progress)
component:
```tsx
import { SemiCircleProgress } from '@​mantine/core';
function Demo() {
return (
<SemiCircleProgress
fillDirection="left-to-right"
orientation="up"
filledSegmentColor="blue"
size={200}
thickness={12}
value={40}
label="Label"
/>
);
}
```
#### Tree checked state
[Tree](https://mantine.dev/core/tree) component now supports checked
state:
```tsx
import { IconChevronDown } from '@​tabler/icons-react';
import { Checkbox, Group, RenderTreeNodePayload, Tree } from '@​mantine/core';
import { data } from './data';
const renderTreeNode = ({
node,
expanded,
hasChildren,
elementProps,
tree,
}: RenderTreeNodePayload) => {
const checked = tree.isNodeChecked(node.value);
const indeterminate = tree.isNodeIndeterminate(node.value);
return (
<Group gap="xs" {...elementProps}>
<Checkbox.Indicator
checked={checked}
indeterminate={indeterminate}
onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
/>
<Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
<span>{node.label}</span>
{hasChildren && (
<IconChevronDown
size={14}
style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
/>
)}
</Group>
</Group>
);
};
function Demo() {
return <Tree data={data} levelOffset={23} expandOnClick={false} renderNode={renderTreeNode} />;
}
```
#### Disable specific features in postcss-preset-mantine
You can now disable specific features of the
[postcss-preset-mantine](https://mantine.dev/styles/postcss-preset)
by setting them to `false` in the configuration object. This feature is
available starting from
`postcss-preset-mantine@1.17.0`.
```tsx
module.exports = {
'postcss-preset-mantine': {
features: {
// Turn off `light-dark` function
lightDarkFunction: false,
// Turn off `postcss-nested` plugin
nested: false,
// Turn off `lighten`, `darken` and `alpha` functions
colorMixAlpha: false,
// Turn off `rem` and `em` functions
remEmFunctions: false,
// Turn off `postcss-mixins` plugin
mixins: false,
},
},
};
```
#### Help Center updates
- [Server components
guide](https://help.mantine.dev/q/server-components) has been updated to
include `Component.extend` usage in server components.
- [A guide on applying input focus
styles](https://help.mantine.dev/q/input-focus-styles) has been updated
to work correctly with
[PasswordInput](https://mantine.dev/core/password-input) and other
components in which the `input` selector is not used for actual input
element.
- The guide on [how to disable all inputs in the
form](https://help.mantine.dev/q/disable-all-inputs-in-form) now
includes additional instructions for
[use-form](https://mantine.dev/form/use-form).
- New [Can I have color schemes other than light and
dark?](https://help.mantine.dev/q/light-dark-is-not-enough) guide
explains the difference between color scheme and theme and why Mantine
does not support custom color schemes.
- New [Why VSCode cannot autoimport Text
component?](https://help.mantine.dev/q/why-vscode-cannot-autoimport-text)
guide explains why VSCode cannot automatically import `Text` component.
- New [Are Mantine components
accessible?](https://help.mantine.dev/q/are-mantine-components-accessible)
question
- New [How can I focus the first input with error with
use-form?](https://help.mantine.dev/q/focus-first-input-with-error)
question
- New [How to scroll to the top of the form if the form is submitted
with errors?](https://help.mantine.dev/q/scroll-to-the-top-of-the-form)
question
- New [Why my notifications are displayed at a wrong
position?](https://help.mantine.dev/q/notifications-missing-styles)
question
- New [Why my screen is completely empty after I've added notifications
package?](https://help.mantine.dev/q/notifications-empty-screen)
question
- New [Why can I not use value/label data structure with
Autocomplete/TagsInput?](https://help.mantine.dev/q/autocomplete-value-label)
question
- New [Why FileButton does not work in
Menu?](https://help.mantine.dev/q/file-button-in-menu) question
- New [How can I display different elements in light and dark color
schemes?](https://help.mantine.dev/q/light-dark-elements) question
#### Other changes
- [use-interval](https://mantine.dev/hooks/use-interval) hook now
supports `autoInvoke` option to start the interval automatically when
the component mounts.
- [use-form](https://mantine.dev/form/use-form) with
`mode="uncontrolled"` now triggers additional rerender when dirty state
changes to allow subscribing to form state changes.
- [ScrollArea](https://mantine.dev/core/scroll-area) component now
supports `onTopReached` and `onBottomReached` props. The functions are
called when the user scrolls to the top or bottom of the scroll area.
- [Accordion.Panel](https://mantine.dev/core/accordion) component now
supports `onTransitionEnd` prop that is called when the panel animation
completes.
###
[`v7.11.2`](https://togithub.com/mantinedev/mantine/compare/7.11.1...b27d64babc72a6f82384216aa8010cb395d62ad8)
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.11.1...7.11.2)
###
[`v7.11.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.11.1)
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.11.0...7.11.1)
##### What's Changed
- `[@mantine/core]` Add option to display `nothingFoundMessage` when
data is empty in Select and MultiSelect components
([#​6477](https://togithub.com/mantinedev/mantine/issues/6477))
- `[@mantine/core]` Tooltip: Add `defaultOpened` prop support
([#​6466](https://togithub.com/mantinedev/mantine/issues/6466))
- `[@mantine/core]` PinInput: Fix incorrect rtl logic
([#​6382](https://togithub.com/mantinedev/mantine/issues/6382))
- `[@mantine/core]` Popover: Fix `floatingStrategy="fixed"` not having
`position:fixed` styles
([#​6419](https://togithub.com/mantinedev/mantine/issues/6419))
- `[@mantine/spotlight]` Fix spotlight not working correctly with shadow
DOM
([#​6400](https://togithub.com/mantinedev/mantine/issues/6400))
- `[@mantine/form]` Fix `onValuesChange` using stale values
([#​6392](https://togithub.com/mantinedev/mantine/issues/6392))
- `[@mantine/carousel]` Fix `onSlideChange` using stale props values
([#​6393](https://togithub.com/mantinedev/mantine/issues/6393))
- `[@mantine/charts]` Fix unexpected padding on the right side of the
chart in BarChart, AreaChart and LineChart components
([#​6467](https://togithub.com/mantinedev/mantine/issues/6467))
- `[@mantine/core]` Select: Fix `onChange` being called with the already
selected if it has been picked from the dropdown
([#​6468](https://togithub.com/mantinedev/mantine/issues/6468))
- `[@mantine/dates]` DatePickerInput: Fix `highlightToday` not working
([#​6471](https://togithub.com/mantinedev/mantine/issues/6471))
- `[@mantine/core]` NumberInput: Fix incorrect handling of numbers
larger than max safe integer on blur
([#​6407](https://togithub.com/mantinedev/mantine/issues/6407))
- `[@mantine/core]` Tooltip: Fix tooltip arrow being incompatible with
headless mode
([#​6458](https://togithub.com/mantinedev/mantine/issues/6458))
- `[@mantine/core]` ActionIcon: Fix loading styles inconsistency with
Button component
([#​6460](https://togithub.com/mantinedev/mantine/issues/6460))
- `[@mantine/charts]` PieChart: Fix key error for duplicated `name` data
([#​6067](https://togithub.com/mantinedev/mantine/issues/6067))
- `[@mantine/core]` Modal: Fix `removeScrollProps.ref` not being
compatible with React 19
([#​6446](https://togithub.com/mantinedev/mantine/issues/6446))
- `[@mantine/core]` TagsInput: Fix `selectFirstOptionOnChange` prop not
working
([#​6337](https://togithub.com/mantinedev/mantine/issues/6337))
- `[@mantine/hooks]` use-eye-dropper: Fix Opera being incorrectly
detected as a supported browser
([#​6307](https://togithub.com/mantinedev/mantine/issues/6307))
- `[@mantine/core]` Fix `:host` selector now working correctly in
`cssVariablesSelector` of MantineProvider
([#​6404](https://togithub.com/mantinedev/mantine/issues/6404))
- `[@mantine/core]` TagsInput: Fix `onChange` being called twice when
Enter key is pressed in some cases
([#​6416](https://togithub.com/mantinedev/mantine/issues/6416))
- `[@mantine/modals]` Fix Modal overrides type augmentation not working
with TypeScript 5.5
([#​6443](https://togithub.com/mantinedev/mantine/issues/6443))
- `[@mantine/core]` Tree: Fix `levelOffset` prop being added to the root
DOM element
([#​6461](https://togithub.com/mantinedev/mantine/issues/6461))
##### New Contributors
- [@​bsl-zcs](https://togithub.com/bsl-zcs) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6461](https://togithub.com/mantinedev/mantine/pull/6461)
- [@​florisdg](https://togithub.com/florisdg) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6443](https://togithub.com/mantinedev/mantine/pull/6443)
- [@​snlacks](https://togithub.com/snlacks) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6425](https://togithub.com/mantinedev/mantine/pull/6425)
- [@​lid0a](https://togithub.com/lid0a) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6415](https://togithub.com/mantinedev/mantine/pull/6415)
- [@​Knamer95](https://togithub.com/Knamer95) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6416](https://togithub.com/mantinedev/mantine/pull/6416)
- [@​yyytae0](https://togithub.com/yyytae0) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6404](https://togithub.com/mantinedev/mantine/pull/6404)
- [@​toanxyz](https://togithub.com/toanxyz) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6388](https://togithub.com/mantinedev/mantine/pull/6388)
- [@​viktorkasap](https://togithub.com/viktorkasap) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6307](https://togithub.com/mantinedev/mantine/pull/6307)
- [@​alexlapp](https://togithub.com/alexlapp) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6337](https://togithub.com/mantinedev/mantine/pull/6337)
- [@​brycefranzen](https://togithub.com/brycefranzen) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6446](https://togithub.com/mantinedev/mantine/pull/6446)
- [@​marcobiedermann](https://togithub.com/marcobiedermann) made
their first contribution in
[https://github.com/mantinedev/mantine/pull/6442](https://togithub.com/mantinedev/mantine/pull/6442)
- [@​mullwar](https://togithub.com/mullwar) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6067](https://togithub.com/mantinedev/mantine/pull/6067)
- [@​gruschis](https://togithub.com/gruschis) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6400](https://togithub.com/mantinedev/mantine/pull/6400)
- [@​jpranays](https://togithub.com/jpranays) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6466](https://togithub.com/mantinedev/mantine/pull/6466)
**Full Changelog**:
https://github.com/mantinedev/mantine/compare/7.11.0...7.11.1
###
[`v7.11.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.11.0):
👁️
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.10.2...7.11.0)
[View changelog with demos on mantine.dev
website](https://mantine.dev/changelog/7-11-0)
##### withProps function
All Mantine components now have `withProps` static function that can be
used to
add default props to the component:
```tsx
import { IMaskInput } from 'react-imask';
import { Button, InputBase } from '@​mantine/core';
const LinkButton = Button.withProps({
component: 'a',
target: '_blank',
rel: 'noreferrer',
variant: 'subtle',
});
const PhoneInput = InputBase.withProps({
mask: '+7 (000) 000-0000',
component: IMaskInput,
label: 'Your phone number',
placeholder: 'Your phone number',
});
function Demo() {
return (
<>
{/* You can pass additional props to components created with `withProps` */}
<LinkButton href="https://mantine.dev">Mantine website</LinkButton>
{/* Component props override default props defined in `withProps` */}
<PhoneInput placeholder="Personal phone" />
</>
);
}
```
##### Avatar initials
[Avatar](https://mantine.dev/core/avatar) component now supports
displaying initials with auto generated color based on the given `name`
value.
To display initials instead of the default placeholder, set `name` prop
to the name of the person, for example, `name="John Doe"`. If the name
is set, you can use `color="initials"` to generate color based on the
name:
```tsx
import { Avatar, Group } from '@​mantine/core';
const names = [
'John Doe',
'Jane Mol',
'Alex Lump',
'Sarah Condor',
'Mike Johnson',
'Kate Kok',
'Tom Smith',
];
function Demo() {
const avatars = names.map((name) => <Avatar key={name} name={name} color="initials" />);
return <Group>{avatars}</Group>;
}
```
##### BubbleChart component
New [BubbleChart](https://mantine.dev/charts/bubble-chart) component:
```tsx
import { BubbleChart } from '@​mantine/charts';
import { data } from './data';
function Demo() {
return (
<BubbleChart
h={60}
data={data}
range={[16, 225]}
label="Sales/hour"
color="lime.6"
dataKey={{ x: 'hour', y: 'index', z: 'value' }}
/>
);
}
```
##### BarChart waterfall type
[BarChart](https://mantine.dev/charts/bar-chart) component now supports
`waterfall` type
which is useful for visualizing changes in values over time:
```tsx
import { BarChart } from '@​mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="item"
type="waterfall"
series={[{ name: 'Effective tax rate in %', color: 'blue' }]}
withLegend
/>
);
}
```
##### LineChart gradient type
[LineChart](https://mantine.dev/charts/line-chart) component now
supports `gradient` type
which renders line chart with gradient fill:
```tsx
import { LineChart } from '@​mantine/charts';
import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
series={[{ name: 'temperature', label: 'Avg. Temperature' }]}
dataKey="date"
type="gradient"
gradientStops={[
{ offset: 0, color: 'red.6' },
{ offset: 20, color: 'orange.6' },
{ offset: 40, color: 'yellow.5' },
{ offset: 70, color: 'lime.5' },
{ offset: 80, color: 'cyan.5' },
{ offset: 100, color: 'blue.5' },
]}
strokeWidth={5}
curveType="natural"
yAxisProps={{ domain: [-25, 40] }}
valueFormatter={(value) => `${value}°C`}
/>
);
}
```
##### Right Y axis
[LineChart](https://mantine.dev/charts/line-chart),
[BarChart](https://mantine.dev/charts/bar-chart) and
[AreaChart](https://mantine.dev/charts/area-chart) components
now support `rightYAxis` prop which renders additional Y axis on the
right side of the chart:
```tsx
import { LineChart } from '@​mantine/charts';
import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
dataKey="name"
withRightYAxis
yAxisLabel="uv"
rightYAxisLabel="pv"
series={[
{ name: 'uv', color: 'pink.6' },
{ name: 'pv', color: 'cyan.6', yAxisId: 'right' },
]}
/>
);
}
```
##### RadarChart legend
[RadarChart](https://mantine.dev/charts/radar-chart) component now
supports legend:
```tsx
import { RadarChart } from '@​mantine/charts';
import { data } from './data';
function Demo() {
return (
<RadarChart
h={300}
data={data}
dataKey="product"
withPolarRadiusAxis
withLegend
series={[
{ name: 'Sales January', color: 'blue.6', opacity: 0.2 },
{ name: 'Sales February', color: 'orange.6', opacity: 0.2 },
]}
/>
);
}
```
##### TagsInput acceptValueOnBlur
[TagsInput](https://mantine.dev/core/tags-input) component behavior has
been changed. Now By default,
if the user types in a value and blurs the input, the value is added to
the list.
You can change this behavior by setting `acceptValueOnBlur` to `false`.
In this case, the value is added
only when the user presses `Enter` or clicks on a suggestion.
```tsx
import { TagsInput } from '@​mantine/core';
function Demo() {
return (
<>
<TagsInput
label="Value IS accepted on blur"
placeholder="Enter text, then blur the field"
data={['React', 'Angular', 'Svelte']}
acceptValueOnBlur
/>
<TagsInput
label="Value IS NOT accepted on blur"
placeholder="Enter text, then blur the field"
data={['React', 'Angular', 'Svelte']}
acceptValueOnBlur={false}
mt="md"
/>
</>
);
}
```
##### Transition delay
[Transition](https://mantine.dev/core/transition) component now supports
`enterDelay` and `exitDelay` props to delay transition start:
```tsx
import { useState } from 'react';
import { Button, Flex, Paper, Transition } from '@​mantine/core';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
<Flex maw={200} pos="relative" justify="center" m="auto">
<Button onClick={() => setOpened(true)}>Open dropdown</Button>
<Transition mounted={opened} transition="pop" enterDelay={500} exitDelay={300}>
{(transitionStyle) => (
<Paper
shadow="md"
p="xl"
h={120}
pos="absolute"
inset={0}
bottom="auto"
onClick={() => setOpened(false)}
style={{ ...transitionStyle, zIndex: 1 }}
>
Click to close
</Paper>
)}
</Transition>
</Flex>
);
}
```
##### Documentation updates
- New [segmented
progress](https://mantine.dev/core/progress/#example-progress-with-segments)
example has been added to `Progress` component documentation
- [Select](https://mantine.dev/core/select),
[TagsInput](https://mantine.dev/core/tags-input) and
[MultiSelect](https://mantine.dev/core/multi-select) components
documentation now includes additional demo on how to change the dropdown
width
- New
[DatePicker](https://mantine.dev//dates/date-picker/#exclude-dates)
example for `excludeDate` prop
##### Other changes
- [Pagination](https://mantine.dev/core/pagination) component now
supports `hideWithOnePage` prop which hides pagination when there is
only one page
- [Spoiler](https://mantine.dev/core/spoiler) component now supports
controlled expanded state with `expanded` and `onExpandedChange` props
- [Burger](https://mantine.dev/core/burger) component now supports
`lineSize` prop to change lines height
- [Calendar](https://mantine.dev/dates/calendar),
[DatePicker](https://mantine.dev/dates/date-picker) and other similar
components now support `highlightToday` prop to highlight today's date
###
[`v7.10.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.10.2)
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.10.1...7.10.2)
##### What's Changed
- `[@mantine/core]` Select: Fix incorrect state changes handling when
both `value` and `searchValue` are controlled
([#​6272](https://togithub.com/mantinedev/mantine/issues/6272))
- `[@mantine/core]` Stepper: Fix `autoContrast` prop being added to the
DOM element
- `[@mantine/charts]` PieChart: Fix inner label not using formatted
value
([#​6328](https://togithub.com/mantinedev/mantine/issues/6328))
- `[@mantine/core]` Fix incorrect color resolving logic in border style
prop resolver
([#​6326](https://togithub.com/mantinedev/mantine/issues/6326))
- `[@mantine/modals]` Fix incorrect styles of the confirmation modal
when it is used without any description
([#​6325](https://togithub.com/mantinedev/mantine/issues/6325))
- `[@mantine/core]` ScrollArea: Fix click events being triggered when
scrollbar drag is released over an interactive element in Firefox
([#​6354](https://togithub.com/mantinedev/mantine/issues/6354))
- `[@mantine/core]` Combobox: Fix clicks on footer and header triggering
dropdown close
([#​6344](https://togithub.com/mantinedev/mantine/issues/6344))
- `[@mantine/core]` PasswordInput: Fix `withErrorStyles` prop being
passed to the DOM element
([#​6348](https://togithub.com/mantinedev/mantine/issues/6348))
##### New Contributors
- [@​stefanzmf](https://togithub.com/stefanzmf) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6344](https://togithub.com/mantinedev/mantine/pull/6344)
- [@​Prasiddha22](https://togithub.com/Prasiddha22) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6325](https://togithub.com/mantinedev/mantine/pull/6325)
- [@​ShionTerunaga](https://togithub.com/ShionTerunaga) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6332](https://togithub.com/mantinedev/mantine/pull/6332)
- [@​djdduty](https://togithub.com/djdduty) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6326](https://togithub.com/mantinedev/mantine/pull/6326)
- [@​Jones-Griffin](https://togithub.com/Jones-Griffin) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6328](https://togithub.com/mantinedev/mantine/pull/6328)
- [@​floriankapaun](https://togithub.com/floriankapaun) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6272](https://togithub.com/mantinedev/mantine/pull/6272)
**Full Changelog**:
https://github.com/mantinedev/mantine/compare/7.10.1...7.10.2
###
[`v7.10.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.10.1)
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.10.0...7.10.1)
##### What's Changed
- `[@mantine/charts]` BarChart: Add waterfall type
([#​6231](https://togithub.com/mantinedev/mantine/issues/6231))
- `[@mantine/form]` Fix `form.setFieldError` called inside
`form.onSubmit` not working correctly in some cases
([#​6101](https://togithub.com/mantinedev/mantine/issues/6101))
- `[@mantine/core]` SegmentedControl: Fix false error reported by React
18.3+ for incorrect key prop usage
- `[@mantine/hooks]` use-fetch: Fix incorrect error handling
([#​6278](https://togithub.com/mantinedev/mantine/issues/6278))
- `[@mantine/core]` Fix `bd` style prop not being applied in some
components
([#​6282](https://togithub.com/mantinedev/mantine/issues/6282))
- `[@mantine/core]` NumberInput: Fix incorrect leading zeros handling
([#​6232](https://togithub.com/mantinedev/mantine/issues/6232))
- `[@mantine/core]` NumberInput: Fix incorrect logic while editing
decimal values
([#​6232](https://togithub.com/mantinedev/mantine/issues/6232))
- `[@mantine/core]` ScrollArea: Fix scrollbar flickering on reveal with
hover and scroll types
([#​6218](https://togithub.com/mantinedev/mantine/issues/6218))
- `[@mantine/hooks]` Update use-throttled-\* hooks to emit updates on
trailing edges
([#​6257](https://togithub.com/mantinedev/mantine/issues/6257))
- `[@mantine/core]` Input: Add `inputSize` prop to set `size` html
attribute on the input element
##### New Contributors
- [@​a-kon](https://togithub.com/a-kon) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6265](https://togithub.com/mantinedev/mantine/pull/6265)
- [@​dfaust](https://togithub.com/dfaust) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6257](https://togithub.com/mantinedev/mantine/pull/6257)
- [@​ElTupac](https://togithub.com/ElTupac) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6278](https://togithub.com/mantinedev/mantine/pull/6278)
**Full Changelog**:
https://github.com/mantinedev/mantine/compare/7.10.0...7.10.1
###
[`v7.10.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.10.0):
😎
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.9.2...7.10.0)
[View changelog with demos on mantine.dev
website](https://mantine.dev/changelog/7-10-0)
##### Tree component
New [Tree](https://mantine.dev/core/tree) component:
```tsx
import { IconFolder, IconFolderOpen } from '@​tabler/icons-react';
import { Group, RenderTreeNodePayload, Tree } from '@​mantine/core';
import { CssIcon, NpmIcon, TypeScriptCircleIcon } from '@​mantinex/dev-icons';
import { data, dataCode } from './data';
import classes from './Demo.module.css';
interface FileIconProps {
name: string;
isFolder: boolean;
expanded: boolean;
}
function FileIcon({ name, isFolder, expanded }: FileIconProps) {
if (name.endsWith('package.json')) {
return <NpmIcon size={14} />;
}
if (name.endsWith('.ts') || name.endsWith('.tsx') || name.endsWith('tsconfig.json')) {
return <TypeScriptCircleIcon size={14} />;
}
if (name.endsWith('.css')) {
return <CssIcon size={14} />;
}
if (isFolder) {
return expanded ? (
<IconFolderOpen color="var(--mantine-color-yellow-9)" size={14} stroke={2.5} />
) : (
<IconFolder color="var(--mantine-color-yellow-9)" size={14} stroke={2.5} />
);
}
return null;
}
function Leaf({ node, expanded, hasChildren, elementProps }: RenderTreeNodePayload) {
return (
<Group gap={5} {...elementProps}>
<FileIcon name={node.value} isFolder={hasChildren} expanded={expanded} />
<span>{node.label}</span>
</Group>
);
}
function Demo() {
return (
<Tree
classNames={classes}
selectOnClick
clearSelectionOnOutsideClick
data={data}
renderNode={(payload) => <Leaf {...payload} />}
/>
);
}
```
##### form.getInputNode
New `form.getInputNode(path)` handler returns input DOM node for the
given field path.
Form example, it can be used to focus input on form submit if there is
an error:
```tsx
import { Button, Group, TextInput } from '@​mantine/core';
import { isEmail, isNotEmpty, useForm } from '@​mantine/form';
function Demo() {
const form = useForm({
mode: 'uncontrolled',
initialValues: {
name: '',
email: '',
},
validate: {
name: isNotEmpty('Name is required'),
email: isEmail('Invalid email'),
},
});
return (
<form
onSubmit={form.onSubmit(
(values) => console.log(values),
(errors) => {
const firstErrorPath = Object.keys(errors)[0];
form.getInputNode(firstErrorPath)?.focus();
}
)}
>
<TextInput
withAsterisk
label="Your name"
placeholder="Your name"
key={form.key('name')}
{...form.getInputProps('name')}
/>
<TextInput
withAsterisk
label="Your email"
placeholder="your@email.com"
key={form.key('email')}
{...form.getInputProps('email')}
/>
<Group justify="flex-end" mt="md">
<Button type="submit">Submit</Button>
</Group>
</form>
);
}
```
##### Container queries in SimpleGrid
You can now use [container
queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
in [SimpleGrid](https://mantine.dev/core/simple-grid) component. With
container queries, grid columns and spacing
will be adjusted based on the container width, not the viewport width.
Example of using container queries. To see how the grid changes, resize
the root element
of the demo with the resize handle located at the bottom right corner of
the demo:
```tsx
import { SimpleGrid } from '@​mantine/core';
function Demo() {
return (
// Wrapper div is added for demonstration purposes only,
// it is not required in real projects
<div style={{ resize: 'horizontal', overflow: 'hidden', maxWidth: '100%' }}>
<SimpleGrid
type="container"
cols={{ base: 1, '300px': 2, '500px': 5 }}
spacing={{ base: 10, '300px': 'xl' }}
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</SimpleGrid>
</div>
);
}
```
##### Checkbox and Radio indicators
New
[Checkbox.Indicator](https://mantine.dev/core/checkbox/#checkboxindicator)
and [Radio.Indicator](https://mantine.dev/core/radio/#radioindicator)
components look exactly the same as `Checkbox` and `Radio` components,
but they do not
have any semantic meaning, they are just visual representations of
checkbox and radio states.
`Checkbox.Indicator` component:
```tsx
import { Checkbox, Group } from '@​mantine/core';
function Demo() {
return (
<Group>
<Checkbox.Indicator />
<Checkbox.Indicator checked />
<Checkbox.Indicator indeterminate />
<Checkbox.Indicator disabled />
<Checkbox.Indicator disabled checked />
<Checkbox.Indicator disabled indeterminate />
</Group>
);
}
```
`Radio.Indicator` component:
```tsx
import { Group, Radio } from '@​mantine/core';
function Demo() {
return (
<Group>
<Radio.Indicator />
<Radio.Indicator checked />
<Radio.Indicator disabled />
<Radio.Indicator disabled checked />
</Group>
);
}
```
##### Checkbox and Radio cards
New
[Checkbox.Card](https://mantine.dev/core/checkbox/#checkboxcard-component)
and [Radio.Card](https://mantine.dev/core/radio/#radiocard-component)
components can be used as replacements for `Checkbox` and `Radio` to
build custom cards/buttons/etc.
that work as checkboxes and radios. Components are accessible by default
and support the same
keyboard interactions as `input[type="checkbox"]` and
`input[type="radio"]`.
`Checkbox.Card` component:
```tsx
import { useState } from 'react';
import { Checkbox, Group, Text } from '@​mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [checked, setChecked] = useState(false);
return (
<Checkbox.Card
className={classes.root}
radius="md"
checked={checked}
onClick={() => setChecked((c) => !c)}
>
<Group wrap="nowrap" align="flex-start">
<Checkbox.Indicator />
<div>
<Text className={classes.label}>@​mantine/core</Text>
<Text className={classes.description}>
Core components library: inputs, buttons, overlays, etc.
</Text>
</div>
</Group>
</Checkbox.Card>
);
}
```
`Checkbox.Card` component with `Checkbox.Group`:
```tsx
import { useState } from 'react';
import { Checkbox, Group, Stack, Text } from '@​mantine/core';
import classes from './Demo.module.css';
const data = [
{
name: '@​mantine/core',
description: 'Core components library: inputs, buttons, overlays, etc.',
},
{ name: '@​mantine/hooks', description: 'Collection of reusable hooks for React applications.' },
{ name: '@​mantine/notifications', description: 'Notifications system' },
];
function Demo() {
const [value, setValue] = useState<string[]>([]);
const cards = data.map((item) => (
<Checkbox.Card className={classes.root} radius="md" value={item.name} key={item.name}>
<Group wrap="nowrap" align="flex-start">
<Checkbox.Indicator />
<div>
<Text className={classes.label}>{item.name}</Text>
<Text className={classes.description}>{item.description}</Text>
</div>
</Group>
</Checkbox.Card>
));
return (
<>
<Checkbox.Group
value={value}
onChange={setValue}
label="Pick packages to install"
description="Choose all packages that you will need in your application"
>
<Stack pt="md" gap="xs">
{cards}
</Stack>
</Checkbox.Group>
<Text fz="xs" mt="md">
CurrentValue: {value.join(', ') || '–'}
</Text>
</>
);
}
```
`Radio.Card` component:
```tsx
import { useState } from 'react';
import { Group, Radio, Text } from '@​mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [checked, setChecked] = useState(false);
return (
<Radio.Card
className={classes.root}
radius="md"
checked={checked}
onClick={() => setChecked((c) => !c)}
>
<Group wrap="nowrap" align="flex-start">
<Radio.Indicator />
<div>
<Text className={classes.label}>@​mantine/core</Text>
<Text className={classes.description}>
Core components library: inputs, buttons, overlays, etc.
</Text>
</div>
</Group>
</Radio.Card>
);
}
```
`Radio.Card` component with `Radio.Group`:
```tsx
import { useState } from 'react';
import { Group, Radio, Stack, Text } from '@​mantine/core';
import classes from './Demo.module.css';
const data = [
{
name: '@​mantine/core',
description: 'Core components library: inputs, buttons, overlays, etc.',
},
{ name: '@​mantine/hooks', description: 'Collection of reusable hooks for React applications.' },
{ name: '@​mantine/notifications', description: 'Notifications system' },
];
function Demo() {
const [value, setValue] = useState<string | null>(null);
const cards = data.map((item) => (
<Radio.Card className={classes.root} radius="md" value={item.name} key={item.name}>
<Group wrap="nowrap" align="flex-start">
<Radio.Indicator />
<div>
<Text className={classes.label}>{item.name}</Text>
<Text className={classes.description}>{item.description}</Text>
</div>
</Group>
</Radio.Card>
));
return (
<>
<Radio.Group
value={value}
onChange={setValue}
label="Pick one package to install"
description="Choose a package that you will need in your application"
>
<Stack pt="md" gap="xs">
{cards}
</Stack>
</Radio.Group>
<Text fz="xs" mt="md">
CurrentValue: {value || '–'}
</Text>
</>
);
}
```
##### bd style prop
New [bd style prop](https://mantine.dev/styles/style-props/) can be used
to set `border` CSS property.
It is available in all components that support style props.
Border width value is automatically converted to rem. For border color
you can reference
theme colors similar to other style props:
```tsx
import { Box } from '@​mantine/core';
function Demo() {
return <Box bd="1px solid red.5" />;
}
```
###
[`v7.9.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.9.2)
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.9.1...7.9.2)
##### What's Changed
- `[@mantine/dates]` DateTimePicker: Fix some of `timeInputProps` not
being respected
([#​6204](https://togithub.com/mantinedev/mantine/issues/6204))
- `[@mantine/core]` NavLink: Add react-router support to display active
route
([#​6180](https://togithub.com/mantinedev/mantine/issues/6180))
- `[@mantine/core]` Fix `nonce` attribute not being set on `<style />`
tag generated in color scheme switching script
- `[@mantine/core]` Input: Fix incorrect margins when input wrapper
order is explicitly set
- `[@mantine/core]` Pagination: Fix types definition being incompatible
with
[@​tabler/icons-react](https://togithub.com/tabler/icons-react)
3.x
- `[@mantine/charts]` Fix incorrect tooltip position in LineChart,
AreaChart and BarChart with vertical orientation
- `[@mantine/core]` Rating: Fix `readOnly` prop now working on touch
devices
([#​6202](https://togithub.com/mantinedev/mantine/issues/6202))
- `[@mantine/core]` TagsInput: Fix existing search value being ignored
in `onPaste` even handler
([#​6073](https://togithub.com/mantinedev/mantine/issues/6073))
- `[@mantine/core]` TagsInput: Improve `clearable` prop logic related to
dropdown
([#​6115](https://togithub.com/mantinedev/mantine/issues/6115))
##### New Contributors
- [@​corydeppen](https://togithub.com/corydeppen) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6180](https://togithub.com/mantinedev/mantine/pull/6180)
- [@​rodda-kyusu](https://togithub.com/rodda-kyusu) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6204](https://togithub.com/mantinedev/mantine/pull/6204)
- [@​iguit0](https://togithub.com/iguit0) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6233](https://togithub.com/mantinedev/mantine/pull/6233)
- [@​Shadowfita](https://togithub.com/Shadowfita) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6238](https://togithub.com/mantinedev/mantine/pull/6238)
**Full Changelog**:
https://github.com/mantinedev/mantine/compare/7.9.1...7.9.2
###
[`v7.9.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.9.1)
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.9.0...7.9.1)
##### What's Changed
- `[@mantine/core]` Fix `theme.scale` being ignored in Input, Paper and
Table border styles
- `[@mantine/core]` Fix `virtualColor` function requring `use client` in
Next.js
- `[@mantine/core]` FloatingIndicator: Fix incorrect resize observer
logic
([#​6129](https://togithub.com/mantinedev/mantine/issues/6129))
- `[@mantine/core]` NumberInput: Fix incorrect `allowNegative` handling
with up/down arrows
([#​6170](https://togithub.com/mantinedev/mantine/issues/6170))
- `[@mantine/core]` Fix `error={true}` prop set on Checkbox, Radio and
Switch rendering unxpected error element with margin
- `[@mantine/core]` SegmentedControl: Fix `theme.primaryColor` not being
respected in the focus ring styles
- `[@mantine/core]` CloseButton: Fix incorrect specificity of some
selectors
- `[@mantine/core]` Fix incorrect `aria-label` handling in Select,
Autocomplete, MultiSelect and TagsInputs components
([#​6123](https://togithub.com/mantinedev/mantine/issues/6123))
- `[@mantine/core]` Modal: Prevent `onClose` from being called when
modal is not opened
([#​6156](https://togithub.com/mantinedev/mantine/issues/6156))
- `[@mantine/core]` PasswordInput: Fix duplicated password visibility
icon in Edge browser
([#​6126](https://togithub.com/mantinedev/mantine/issues/6126))
- `[@mantine/hooks]` use-hash: Fix hash value not being updated
correctly
([#​6145](https://togithub.com/mantinedev/mantine/issues/6145))
- `[@mantine/emotion]` Fix incorrect transform logic that was causing
extra hooks to render
([#​6159](https://togithub.com/mantinedev/mantine/issues/6159))
##### New Contributors
- [@​lachtanek](https://togithub.com/lachtanek) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6145](https://togithub.com/mantinedev/mantine/pull/6145)
- [@​hsskey](https://togithub.com/hsskey) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6156](https://togithub.com/mantinedev/mantine/pull/6156)
- [@​ataldev](https://togithub.com/ataldev) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6198](https://togithub.com/mantinedev/mantine/pull/6198)
- [@​OliverWales](https://togithub.com/OliverWales) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6188](https://togithub.com/mantinedev/mantine/pull/6188)
- [@​AustinWildgrube](https://togithub.com/AustinWildgrube) made
their first contribution in
[https://github.com/mantinedev/mantine/pull/6170](https://togithub.com/mantinedev/mantine/pull/6170)
- [@​theca11](https://togithub.com/theca11) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6178](https://togithub.com/mantinedev/mantine/pull/6178)
**Full Changelog**:
https://github.com/mantinedev/mantine/compare/7.9.0...7.9.1
###
[`v7.9.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.9.0):
✨
[Compare
Source](https://togithub.com/mantinedev/mantine/compare/7.8.1...7.9.0)
[View changelog with demos on mantine.dev
website](https://mantine.dev/changelog/7-9-0)
##### [@​mantine/emotion](https://togithub.com/mantine/emotion)
package
New [@​mantine/emotion](https://mantine.dev/styles/emotion)
package is now available to simplify migration
from [6.x to 7.x](https://mantine.dev/guides/6x-to-7x/). It includes
`createStyles` function and additional
functionality for `sx` and `styles` props for all components similar to
what was available
in `@mantine/core` package in v6.
If you still haven't migrated to 7.x because of the change in styling
approach, you can now
have a smoother transition by using `@mantine/emotion` package. To learn
more about the package,
visit the [documentation page](https://mantine.dev/styles/emotion) and
updated [6.x to 7.x migration
guide](https://mantine.dev/guides/6x-to-7x/).
```tsx
import { rem } from '@​mantine/core';
import { createStyles } from '@​mantine/emotion';
const useStyles = createStyles((theme, _, u) => ({
wrapper: {
maxWidth: rem(400),
width: '100%',
height: rem(180),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: theme.radius.sm,
// Use light and dark selectors to change styles based on color scheme
[u.light]: {
backgroundColor: theme.colors.gray[1],
},
[u.dark]: {
backgroundColor: theme.colors.dark[5],
},
// Reference theme.breakpoints in smallerThan and largerThan functions
[u.smallerThan('sm')]: {
// Child reference in nested selectors via ref
[`& .${u.ref('child')}`]: {
fontSize: theme.fontSizes.xs,
},
},
},
child: {
// Assign selector to a ref to reference it in other styles
ref: u.ref('child'),
padding: theme.spacing.md,
borderRadius: theme.radius.sm,
boxShadow: theme.shadows.md,
[u.light]: {
backgroundColor: theme.white,
color: theme.black,
},
[u.dark]: {
backgroundColor: theme.colors.dark[8],
color: theme.white,
},
},
}));
function Demo() {
const { classes } = useStyles();
return (
<div className={classes.wrapper}>
<div className={classes.child}>createStyles demo</div>
</div>
);
}
```
##### React 18.3 support
All `@mantine/*` components and hooks have been updated to support React
18.3. It is
recommended to update your application as well to prepare for the
upcoming [React 19 release](https://react.dev/blog/2024/04/25/react-19).
##### use-field hook
New [use-field](https://mantine.dev/form/use-field) hook is now
available in `@mantine/form` package.
It can be used as a simpler alternative to
[use-form](https://mantine.dev/form/use-form) hook to manage state of a
single input without the need to create a form.
The hook supports most of `use-form` hook features: validation with
function, touched and
dirty state, error message, validation on change/blur and more.
```tsx
import { TextInput } from '@​mantine/core';
import { isEmail, useField } from '@​mantine/form';
function Demo() {
const field = useField({
initialValue: '',
validateOnChange: true,
validate: isEmail('Invalid email'),
});
return <TextInput {...field.getInputProps()} label="Email" placeholder="Enter your email" />;
}
```
`use-field` hook also supports async validation:
```tsx
import { Button, Loader, TextInput } from '@​mantine/core';
import { useField } from '@​mantine/form';
function validateAsync(value: string): Promise<string | null> {
return new Promise((resolve) => {
window.setTimeout(() => {
resolve(value === 'mantine' ? null : 'Value must be "mantine"');
}, 800);
});
}
function Demo() {
const field = useField({
initialValue: '',
validate: validateAsync,
});
return (
<>
<TextInput
{...field.getInputProps()}
label="Enter 'mantine'"
placeholder="Enter 'mantine'"
rightSection={field.isValidating ? <Loader size={18} /> : null}
mb="md"
/>
<Button onClick={field.validate}>Validate async</Button>
</>
);
}
```
##### Custom PostCSS mixins
You can now define custom mixins that are not included in
[mantine-postcss-preset](https://mantine.dev/styles/postcss-preset) by
specifying them
in the `mixins` option. To learn about mixins syntax, follow
[postcss-mixins
documentation](https://togithub.com/postcss/postcss-mixins#readme).
Note that this feature is available in `postcss-preset-mantine` starting
from version 1.15.0.
Example of adding `clearfix` and `circle` mixins:
```tsx
module.exports = {
plugins: {
'postcss-preset-mantine': {
autoRem: true,
mixins: {
clearfix: {
'&::after': {
content: '""',
display: 'table',
clear: 'both',
},
},
circle: (_mixin, size) => ({
borderRadius: '50%',
width: size,
height: size,
}),
},
},
// ... Other plugins
},
};
```
Then you can use these mixins in your styles:
```scss
.demo {
@​mixin clearfix;
@​mixin circle 100px;
}
```
##### use-matches hook
New `use-matches` hook exported from `@mantine/core` is an alternative
to [use-media-query](https://mantine.dev/hooks/use-media-query/)
if you need to match multiple media queries and values. It accepts an
object with media queries as keys and
values at given breakpoint as values.
Note that `use-matches` hook uses the same logic as
[use-media-query](https://mantine.dev/hooks/use-media-query/) under the
hood,
it is not recommended to be used as a primary source of responsive
styles, especially if you have ssr in your application.
In the following example:
- Starting from `theme.breakpoints.lg`, color will be `red.9`
- Between `theme.breakpoints.sm` and `th
</details>
---
### 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.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box
---
This PR was generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View the
[repository job log](https://developer.mend.io/github/dotkom/monoweb).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC4yNi4xIiwidXBkYXRlZEluVmVyIjoiMzguMjYuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #6335