mantinedev/mantine (@mantine/core)
### [`v7.14.1`](https://redirect.github.com/mantinedev/mantine/releases/tag/7.14.1)
[Compare Source](https://redirect.github.com/mantinedev/mantine/compare/7.14.0...7.14.1)
##### What's Changed
- `[@mantine/hooks]` use-hotkeys: Fix `+` sign not being supported (syntax: `shift+[plus]`) ([#7123](https://redirect.github.com/mantinedev/mantine/issues/7123))
- `[@mantine/core]` Popover: Fix `styles` prop being handled incorrectly ([#7120](https://redirect.github.com/mantinedev/mantine/issues/7120))
- `[@mantine/charts]` Fix `valueFormatter` not working in point labels of LineChant, AreaChart and CompositeChart components ([#6989](https://redirect.github.com/mantinedev/mantine/issues/6989))
- `[@mantine/core]` Popover: Fix `onOpen` and `onClose` callbacks being called on each render ([#7022](https://redirect.github.com/mantinedev/mantine/issues/7022), [#7111](https://redirect.github.com/mantinedev/mantine/issues/7111), [#7115](https://redirect.github.com/mantinedev/mantine/issues/7115))
- `[@mantine/core]` Menu: Fix `Blocked aria-hidden` warning when an interactive element is clicked outside of the Menu.Dropdown when the Menu is opened ([#7035](https://redirect.github.com/mantinedev/mantine/issues/7035))
- `[@mantine/core]` Fix `top` style prop not being conveted to rem ([#7112](https://redirect.github.com/mantinedev/mantine/issues/7112))
- `[@mantine/dates]` DateInput: Fix `defaultDate` prop not working when the value is set to `null` ([#4426](https://redirect.github.com/mantinedev/mantine/issues/4426))
- `[@mantine/core]` NumberInput: Remove increment/decrement control if value cannot be safely incremented (is larger than Number.MAX_SAFE_INTEGER) ([#7033](https://redirect.github.com/mantinedev/mantine/issues/7033))
- `[@mantine/core]` NumberInput: Fix value being reverted to start value if intial component value is a string
- `[@mantine/notifications]` Fix `NotificationData` type being too broad ([#7097](https://redirect.github.com/mantinedev/mantine/issues/7097))
- `[@mantine/core]` RingProgress: Add `transitionDuration` prop support ([#7103](https://redirect.github.com/mantinedev/mantine/issues/7103))
- `[@mantine/core]` TagsInput: Fix incorrect tag remove logic with duplicated tags ([#7105](https://redirect.github.com/mantinedev/mantine/issues/7105))
- `[@mantine/core]` Combobox: Fix incorrect `aria-controls` attribute being set on the target element when the dropdown is closed ([#7114](https://redirect.github.com/mantinedev/mantine/issues/7114))
##### New Contributors
- [@Samy0412](https://redirect.github.com/Samy0412) made their first contribution in [https://github.com/mantinedev/mantine/pull/7114](https://redirect.github.com/mantinedev/mantine/pull/7114)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.14.0...7.14.1
### [`v7.14.0`](https://redirect.github.com/mantinedev/mantine/releases/tag/7.14.0): 💋
[Compare Source](https://redirect.github.com/mantinedev/mantine/compare/7.13.5...7.14.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-14-0)
##### AngleSlider component
New [AngleSlider](https://mantine.dev/core/angle-slider/) component:
```tsx
import { AngleSlider, Group } from '@mantine/core';
function Demo() {
return (
`${value}°`}
size={100}
restrictToMarks
marks={[
{ value: 0 },
{ value: 45 },
{ value: 90 },
{ value: 135 },
{ value: 180 },
{ value: 225 },
{ value: 270 },
{ value: 315 },
]}
/>
`${value}°`}
size={100}
marks={[
{ value: 0, label: '0°' },
{ value: 45, label: '45°' },
{ value: 90, label: '90°' },
{ value: 135, label: '135°' },
{ value: 180, label: '180°' },
{ value: 225, label: '225°' },
{ value: 270, label: '270°' },
{ value: 315, label: '315°' },
]}
/>
);
}
```
##### RadialBarChart component
New [RadialBarChart](https://mantine.dev/charts/radial-bar-chart/) component:
```tsx
import { RadialBarChart } from '@mantine/charts';
const data = [
{ name: '18-24', value: 31.47, color: 'blue.7' },
{ name: '25-29', value: 26.69, color: 'orange.6' },
{ name: '30-34', value: 15.69, color: 'yellow.7' },
{ name: '35-39', value: 8.22, color: 'cyan.6' },
{ name: '40-49', value: 8.63, color: 'green' },
{ name: '50+', value: 2.63, color: 'pink' },
{ name: 'unknown', value: 6.67, color: 'gray' },
];
function Demo() {
return ;
}
```
##### FunnelChart component
New [FunnelChart](https://mantine.dev/charts/funnel-chart/) component:
```tsx
import { FunnelChart } from '@mantine/charts';
const data = [
{ name: 'USA', value: 400, color: 'indigo.6' },
{ name: 'India', value: 300, color: 'yellow.6' },
{ name: 'Japan', value: 100, color: 'teal.6' },
{ name: 'Other', value: 200, color: 'gray.6' },
];
function Demo() {
return ;
}
```
##### Modal.Stack and Drawer.Stack components
New [Modal.Stack](https://mantine.dev/core/modal/) and [Drawer.Stack](https://mantine.dev/core/drawer) components simplify usage of multiple modals/drawers at the same time.
Use `Modal.Stack` component to render multiple modals at the same time.
`Modal.Stack` keeps track of opened modals, manages z-index values, focus trapping
and `closeOnEscape` behavior. `Modal.Stack` is designed to be used with `useModalsStack` hook.
Differences from using multiple `Modal` components:
- `Modal.Stack` manages z-index values – modals that are opened later will always have higher z-index value disregarding their order in the DOM
- `Modal.Stack` disables focus trap and `Escape` key handling for all modals except the one that is currently opened
- Modals that are not currently opened are present in the DOM but are hidden with `opacity: 0` and `pointer-events: none`
- Only one overlay is rendered at a time
```tsx
import { Button, Group, Modal, useModalsStack } from '@mantine/core';
function Demo() {
const stack = useModalsStack(['delete-page', 'confirm-action', 'really-confirm-action']);
return (
<>
Are you sure you want to delete this page? This action cannot be undone.
Are you sure you want to perform this action? This action cannot be undone. If you are
sure, press confirm button below.
Jokes aside. You have confirmed this action. This is your last chance to cancel it. After
you press confirm button below, action will be performed and cannot be undone. For real
this time. Are you sure you want to proceed?
);
}
```
##### useModalsStack/useDrawersStack hooks
`useModalsStack` hook provides an easy way to control multiple modals at the same time.
It accepts an array of unique modals ids and returns an object with the following properties:
```tsx
interface ModalStackReturnType {
// Current opened state of each modal
state: Record;
// Opens modal with the given id
open: (id: T) => void;
// Closes modal with the given id
close: (id: T) => void;
// Toggles modal with the given id
toggle: (id: T) => void;
// Closes all modals within the stack
closeAll: () => void;
// Returns props for modal with the given id
register: (id: T) => {
opened: boolean;
onClose: () => void;
stackId: T;
};
}
```
Example of using `useModalsStack` with `Modal` component:
```tsx
import { Modal, useModalsStack } from '@mantine/core';
function Demo() {
const stack = useModalsStack(['first', 'second']);
return (
<>
FirstSecond
);
}
```
##### Restrict Slider selection to marks
[Slider](https://mantine.dev/core/slider) component now supports `restrictToMarks` prop that restricts slider value to marks only.
Note that in this case `step` prop is ignored:
```tsx
import { Slider } from '@mantine/core';
function Demo() {
return (
({ value: index * 25 }))}
/>
);
}
```
##### BarChart SVG pattern fill
[BarChart](https://mantine.dev/charts/bar-chart) now can be used with SVG pattern fill:
```tsx
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### Help center updates
- New [Can I use nested inline styles with Mantine components?](https://help.mantine.dev/q/nested-inline-styles) question
- New [Can I use PostCSS function in inline styles?](https://help.mantine.dev/q/postcss-fns-inline) question
- New [Why my Carousel slides are in vertical orientation?](https://help.mantine.dev/q/carousel-missing-styles) question
- New [My buttons are transparent and the background is visible only on hover, what is wrong?](https://help.mantine.dev/q/transparent-buttons) question
- New [Can I have different primary color for light and dark color schemes?](https://help.mantine.dev/q/primary-virtual-color) question
- New [How can I change body background color?](https://help.mantine.dev/q/body-background) question
- New [My Popover dropdown closes when I click on the dropdown of nested Popover](https://help.mantine.dev/q/nested-popover-closes) question
##### Other changes
- [useTree](https://mantine.dev/core/tree/) hook now accepts `onNodeExpand` and `onNodeCollapse` callbacks
- [useTree](https://mantine.dev/core/tree/) hook now returns additional `checkAllNodes`, `uncheckAllNodes` and `setCheckedState` handlers
- [Tree](https://mantine.dev/core/tree) component now includes `getTreeExpandedState` to generate expanded state based on the tree data
- [use-form](https://mantine.dev/form/use-form) now supports `form.replaceListItem` handler to replace list item at given index
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
[ ] If you want to rebase/retry this PR, check this box
This PR contains the following updates:
^7.13.5->^7.14.1^7.13.5->^7.14.1^7.13.5->^7.14.1^7.13.5->^7.14.1^7.13.5->^7.14.1^7.13.5->^7.14.1Release Notes
mantinedev/mantine (@mantine/core)
### [`v7.14.1`](https://redirect.github.com/mantinedev/mantine/releases/tag/7.14.1) [Compare Source](https://redirect.github.com/mantinedev/mantine/compare/7.14.0...7.14.1) ##### What's Changed - `[@mantine/hooks]` use-hotkeys: Fix `+` sign not being supported (syntax: `shift+[plus]`) ([#7123](https://redirect.github.com/mantinedev/mantine/issues/7123)) - `[@mantine/core]` Popover: Fix `styles` prop being handled incorrectly ([#7120](https://redirect.github.com/mantinedev/mantine/issues/7120)) - `[@mantine/charts]` Fix `valueFormatter` not working in point labels of LineChant, AreaChart and CompositeChart components ([#6989](https://redirect.github.com/mantinedev/mantine/issues/6989)) - `[@mantine/core]` Popover: Fix `onOpen` and `onClose` callbacks being called on each render ([#7022](https://redirect.github.com/mantinedev/mantine/issues/7022), [#7111](https://redirect.github.com/mantinedev/mantine/issues/7111), [#7115](https://redirect.github.com/mantinedev/mantine/issues/7115)) - `[@mantine/core]` Menu: Fix `Blocked aria-hidden` warning when an interactive element is clicked outside of the Menu.Dropdown when the Menu is opened ([#7035](https://redirect.github.com/mantinedev/mantine/issues/7035)) - `[@mantine/core]` Fix `top` style prop not being conveted to rem ([#7112](https://redirect.github.com/mantinedev/mantine/issues/7112)) - `[@mantine/dates]` DateInput: Fix `defaultDate` prop not working when the value is set to `null` ([#4426](https://redirect.github.com/mantinedev/mantine/issues/4426)) - `[@mantine/core]` NumberInput: Remove increment/decrement control if value cannot be safely incremented (is larger than Number.MAX_SAFE_INTEGER) ([#7033](https://redirect.github.com/mantinedev/mantine/issues/7033)) - `[@mantine/core]` NumberInput: Fix value being reverted to start value if intial component value is a string - `[@mantine/notifications]` Fix `NotificationData` type being too broad ([#7097](https://redirect.github.com/mantinedev/mantine/issues/7097)) - `[@mantine/core]` RingProgress: Add `transitionDuration` prop support ([#7103](https://redirect.github.com/mantinedev/mantine/issues/7103)) - `[@mantine/core]` TagsInput: Fix incorrect tag remove logic with duplicated tags ([#7105](https://redirect.github.com/mantinedev/mantine/issues/7105)) - `[@mantine/core]` Combobox: Fix incorrect `aria-controls` attribute being set on the target element when the dropdown is closed ([#7114](https://redirect.github.com/mantinedev/mantine/issues/7114)) ##### New Contributors - [@Samy0412](https://redirect.github.com/Samy0412) made their first contribution in [https://github.com/mantinedev/mantine/pull/7114](https://redirect.github.com/mantinedev/mantine/pull/7114) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.14.0...7.14.1 ### [`v7.14.0`](https://redirect.github.com/mantinedev/mantine/releases/tag/7.14.0): 💋 [Compare Source](https://redirect.github.com/mantinedev/mantine/compare/7.13.5...7.14.0) [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-14-0) ##### AngleSlider component New [AngleSlider](https://mantine.dev/core/angle-slider/) component: ```tsx import { AngleSlider, Group } from '@mantine/core'; function Demo() { return (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.
This PR was generated by Mend Renovate. View the repository job log.