From b332ff779d70353a6c92a45ea66ab5fe065c4dc0 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 20 Aug 2024 15:46:14 +0000 Subject: [PATCH] Update mantine monorepo to v7.12.1 (#959) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](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) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fcore/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fcore/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fcore/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fcore/7.4.1/7.12.1?slim=true)](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) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fdates/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fdates/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fdates/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fdates/7.4.1/7.12.1?slim=true)](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) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fhooks/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fhooks/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fhooks/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fhooks/7.4.1/7.12.1?slim=true)](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) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fmodals/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fmodals/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fmodals/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fmodals/7.4.1/7.12.1?slim=true)](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) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fnotifications/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fnotifications/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fnotifications/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fnotifications/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
mantinedev/mantine (@​mantine/core) ### [`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) => ( )); return {buttons}; } ``` #### 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 ( ); } ``` #### SemiCircleProgress component New [SemiCircleProgress](https://mantine.dev/core/semi-circle-progress) component: ```tsx import { SemiCircleProgress } from '@​mantine/core'; function Demo() { return ( ); } ``` #### 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 ( (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))} /> tree.toggleExpanded(node.value)}> {node.label} {hasChildren && ( )} ); }; function Demo() { return ; } ``` #### 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` */} Mantine website {/* Component props override default props defined in `withProps` */} ); } ``` ##### 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) => ); return {avatars}; } ``` ##### BubbleChart component New [BubbleChart](https://mantine.dev/charts/bubble-chart) component: ```tsx import { BubbleChart } from '@​mantine/charts'; import { data } from './data'; function Demo() { return ( ); } ``` ##### 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 ( ); } ``` ##### 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 ( `${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 ( ); } ``` ##### 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 ( ); } ``` ##### 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 ( <> ); } ``` ##### 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 ( {(transitionStyle) => ( setOpened(false)} style={{ ...transitionStyle, zIndex: 1 }} > Click to close )} ); } ``` ##### 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 ; } if (name.endsWith('.ts') || name.endsWith('.tsx') || name.endsWith('tsconfig.json')) { return ; } if (name.endsWith('.css')) { return ; } if (isFolder) { return expanded ? ( ) : ( ); } return null; } function Leaf({ node, expanded, hasChildren, elementProps }: RenderTreeNodePayload) { return ( {node.label} ); } function Demo() { return ( } /> ); } ``` ##### 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 (
console.log(values), (errors) => { const firstErrorPath = Object.keys(errors)[0]; form.getInputNode(firstErrorPath)?.focus(); } )} > ); } ``` ##### 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
1
2
3
4
5
); } ``` ##### 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 ( ); } ``` `Radio.Indicator` component: ```tsx import { Group, Radio } from '@​mantine/core'; function Demo() { return ( ); } ``` ##### 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 ( setChecked((c) => !c)} >
@​mantine/core Core components library: inputs, buttons, overlays, etc.
); } ``` `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([]); const cards = data.map((item) => (
{item.name} {item.description}
)); return ( <> {cards} CurrentValue: {value.join(', ') || '–'} ); } ``` `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 ( setChecked((c) => !c)} >
@​mantine/core Core components library: inputs, buttons, overlays, etc.
); } ``` `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(null); const cards = data.map((item) => (
{item.name} {item.description}
)); return ( <> {cards} CurrentValue: {value || '–'} ); } ``` ##### 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 ; } ``` ### [`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 `