-
-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(deps): update mantine to v7 (major) #257
Conversation
6754258
to
38620cb
Compare
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
38620cb
to
4c10c7a
Compare
4c10c7a
to
16d5671
Compare
16d5671
to
7395fd5
Compare
7395fd5
to
8dd13aa
Compare
0582eb7
to
b38b7eb
Compare
b38b7eb
to
2796720
Compare
2796720
to
69896c2
Compare
69896c2
to
e7703da
Compare
e7703da
to
450c84a
Compare
450c84a
to
233aaac
Compare
233aaac
to
8f2edae
Compare
8f2edae
to
295134f
Compare
295134f
to
19cdeea
Compare
19cdeea
to
db7af4f
Compare
db7af4f
to
72b5123
Compare
72b5123
to
650624f
Compare
650624f
to
fc0a5ef
Compare
fc0a5ef
to
e7f000e
Compare
e7f000e
to
db01988
Compare
db01988
to
2c4c369
Compare
2c4c369
to
a96c633
Compare
a96c633
to
4290ac2
Compare
4290ac2
to
2e88a7d
Compare
2e88a7d
to
fc7056d
Compare
Renovate Ignore NotificationBecause you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR. |
This PR contains the following updates:
6.0.21
->7.5.2
6.0.21
->7.5.2
6.0.21
->7.5.2
Release Notes
mantinedev/mantine (@mantine/core)
v7.5.2
Compare Source
What's Changed
[@mantine/core]
ActionIcon: Fix icon width and height defined in % not working correctly[@mantine/core]
ScrollArea: FixoffsetScrollbars
not working (#5733)[@mantine/tiptap]
FixinitialExternal
onRichTextEditor.Link
control not working correctly[@mantine/core]
FileInput: Fix incorrectextend
function type[@mantine/core]
PinInput: Fix various issues related to user input and pasting into the input (#5704)[@mantine/form]
Add callback argument support toform.setFieldValue
handler (#5696)[@mantine/core]
Add explicit extension to exports to support NodeNext TypeScript resolution (#5697)[@mantine/hooks]
use-list-state: Addswap
handler support (#5716)[@mantine/core]
Fix NodeNext TypeScript resolution not working correctly for PolymorphicComponentProps and PolymorphicRef types (#5730)[@mantine/core]
Fix cjs builds unable to resolve third-party dependencies with certain TypeScript settings (#5741)[@mantine/core]
Transition: Fix skew-up transition not working (#5714)[@mantine/core]
Select: Fix active option not being scrolled into view when the dropdown opens[@mantine/core]
Menu: Fix unexpected focus trap when keepMounted is false (#4502)[@mantine/core]
ScrollArea: Fixstyle
prop not being passed to the element when used inviewportProps
(#5594)[@mantine/core]
Divider: Fix poor color contrast with light color scheme[@mantine/core]
Modal: Fix incorrect content border-radius whenfullScreen
prop is set[@mantine/core]
Modal: Fix scroll container not working correctly when ScrollArea is used as a scroll container for a full screen modal[@mantine/notifications]
Fix notifications handlers not allowing passing data-* attributes (#5640)New Contributors
Full Changelog: mantinedev/mantine@7.5.1...7.5.2
v7.5.1
Compare Source
What's Changed
[@mantine/core]
Indicator: Improve processing animation for lo-resolution monitors (#5682)[@mantine/hooks]
use-debounced-state: Fix incorrect type definition (#5665)[@mantine/hooks]
use-session-storage: Fix default value not being set in the storage on initial render (#5663)[@mantine/core]
Combobox: Fix incorrect dropdown styles with custom ScrollArea component (#5677)[@mantine/form]
Fix incorrect touch and dirty state handling inform.initialize
(#5623)[@mantine/core]
Chip: Fix error thrown when page is modified with Google Translate (#5586)[@mantine/form]
Add previous value as second argument toonValuesChange
(#5649)[@mantine/core]
FixautoContrast
defined on theme not working in some components (#5655)[@mantine/core]
Fix broken alignment in Checkbox, Radio and Switch (#5648)[@mantine/core-highlight]
AddwithCopyButton
prop support to CodeHighlightTabs (#5608)[@mantine/core]
UpdateuseComputedColorScheme
types to match definition with other similar hooks (#5588)[@mantine/core]
MultiSelect: Forbid select item removal if associated item becomes disabled (#5630)New Contributors
Full Changelog: mantinedev/mantine@7.5.0...7.5.1
v7.5.0
: ✨ 7.5.0Compare Source
View changelog with demos on mantine.dev website
DonutChart component
New DonutChart component:
PieChart component
New PieChart component:
@mantine/dates value formatter
DatePickerInput, MonthPickerInput and
YearPickerInput now support
valueFormatter
prop.valueFormatter
is a more powerful alternative tovalueFormat
prop.It allows formatting value label with a custom function.
The function is the same for all component types (
default
,multiple
andrange
)– you need to perform additional checks inside the function to handle different types.
Example of using a custom formatter function with
type="multiple"
:@mantine/dates consistent weeks
You can now force each month to have 6 weeks by setting
consistentWeeks: true
onDatesProvider. This is useful if you want to avoid layout
shifts when month changes.
Charts series label
It is now possible to change series labels with
label
propertyin
series
object. This feature is supported in AreaChart,BarChart and LineChart components.
Charts value formatter
All
@mantine/charts
components now supportvalueFormatter
prop, which allowsformatting value that is displayed on the y axis and inside the tooltip.
Headings text wrap
New Title
textWrap
prop sets text-wrapCSS property. It controls how text inside an element is wrapped.
You can also set
textWrap
on theme:If set on theme,
textWrap
is also applied to headings in TypographyStylesProvidermod prop
All components now support
mod
prop, which allows adding data attributes tothe root element:
Documentation updates
shift
andflip
middlewares documentationHelp center updates
New articles added to the help center:
Other changes
readOnly
proploading
state animationwithItemsBorder
prop which allows removing border between itemstransitionDuration
prop which controls section width animation durationresize
prop, which allows settingresize
CSS property on the input@mantine/hooks
package now exports readLocalStorageValue and readSessionStorageValue function to get value from storage outside of React componentsv7.4.2
Compare Source
What's Changed
[@mantine/modals]
FixonClose
throwing error iftrapFocus: false
is passed to one of the modals (#5577)[@mantine/dates]
Add missingplaceholder
styles api selector to DatePickerInput, MonthPickerInput and YearPickerInput components[@mantine/tiptap]
Fix incorrect disabled controls in dark color scheme[@mantine/core]
MultiSelect: Fixcombobox.closeDropdown()
called twice inonBlur
method[@mantine/tiptap]
Fix incorrect peer dependencies[@mantine/core]
Fix incorrect colors resolving logic forbg
style prop[@mantine/core]
Remove global height styles from body and html[@mantine/hooks]
use-media-query: FixgetInitialValueInEffect
not working correctly when initial value is provided (#5575, #5549)[@mantine/core]
Divider: Change default colors to match other components (#5480)[@mantine/core]
Fix incorrectforceColorScheme={undefined}
handling (#4959)[@mantine/core]
Menu: Remove duplicated static class on the dropdown element (#5537)[@mantine/core]
Add/
support for rgba calculations (#5544)New Contributors
Full Changelog: mantinedev/mantine@7.4.1...7.4.2
v7.4.1
Compare Source
What's Changed
[@mantine/core]
Combobox: Fix numpad enter not working (#5526)[@mantine/core]
Combobox: FixonClose
prop not working (#5509)[@mantine/core]
AppShell: Fix header height 0 not working (#5514)[@mantine/core]
ColorPicker: Fix incorrect background gradient in AlphaSlider (#5518)[@mantine/core]
Indicator: FixautoContrast
being passed to the dom node as attribute (#5508)[@mantine/core]
NumberInput: FixallowLeadingZeros
prop not working[@mantine/core]
NumberInput: Fix incorrect controls border color in disabled state[@mantine/core]
NumberInput: Fix incorrect -0.0, -0.00, -0.000 ... inputs handling[@mantine/core]
Popover: Improvewidth
prop type[@mantine/core]
Improve types ofdata
prop in Autocomplete and TagsInput components[@mantine/core]
MultiSelect: Fixrequired
prop not displaying required asterisk[@mantine/hooks]
use-scroll-into-view: Improve types (#5426)[@mantine/core]
MultiSelect: Fix incorrectpointer-events
style on the right section (#5472)[@mantine/core]
Fix breakpoints defined in px being transformed into em whenvisibleFrom
andhiddenFrom
props are used (#5457)[@mantine/core]
Rating: Improvesize
type (#5470)[@mantine/core]
ScrollArea: Fix ScrollArea.Autosize working incorrectly with some tables (#5481)[@mantine/core]
NumberInput: Add support for numbers that are larger than Number.MAX_SAFE_INTEGER (#5471)[@mantine/core]
Combobox: Fix readonly data array not being supported (#5477)[@mantine/charts]
Fix incorrect y-axis styles in RTL (#5505)New Contributors
Full Changelog: mantinedev/mantine@7.4.0...7.4.1
v7.4.0
: ⭐Compare Source
View changelog with demos on mantine.dev website
@mantine/charts
New @mantine/charts package provides a set of components
to build charts and graphs. All components are based on recharts.
Currently, the package provides AreaChart, BarChart,
LineChart and Sparkline components.
More components will be added in the next minor releases.
AreaChart component
New AreaChart component:
LineChart component
New LineChart component:
BarChart component
New BarChart component:
Sparkline component
New Sparkline component:
OKLCH colors support
You can now use OKLCH colors in
theme.colors
.OKLCH color model has 88.18% browser support,
it is supported in all modern browsers. OKLCH model provides 30% more colors than HSL model and
has several other advantages.
Example of adding OKLCH color to the theme:
autoContrast
New
theme.autoContrast
property controls whether text color should be changed based on the givencolor
propin the following components:
variant="filled"
onlyvariant="filled"
onlyvariant="filled"
onlyvariant="filled"
onlyvariant="filled"
onlyvariant="filled"
onlyvariant="filled"
onlyvariant="filled"
onlyvariant="filled"
onlyvariant="filled"
onlyvariant="pills"
onlyautoContrast
can be set globally on the theme level or individually for each component viaautoContrast
prop,except for Spotlight and @mantine/dates components, which only support global theme setting.
autoContrast
checks whether the given color luminosity is above or below theluminanceThreshold
valueand changes text color to either
theme.white
ortheme.black
accordingly:Color functions improvements
alpha
,lighten
anddarken
functions now support CSS variables (with color-mix) and OKLCH colors.All functions are available both in
@mantine/core
(.ts
/.js
files) and postcss-preset-mantine (.css
files, requires version 1.12.0 or higher).In
.css
files:Will be transformed to:
In
.ts
/.js
files:Note that
alpha
function is a replacement forrgba
. It was renamed tohave a more clear meaning, as it can now be used with CSS variables and OKLCH colors.
rgba
function is still available as an alias foralpha
function.enhanceGetInputProps
@mantine/form
now supports enhanceGetInputProps.enhanceGetInputProps
is a function that can be used to add additional props to the object returned byform.getInputProps
.You can define it in
useForm
hook options. Its argument is an object with the following properties:inputProps
– object returned byform.getInputProps
by defaultfield
– field path, first argument ofform.getInputProps
, for examplename
,user.email
,users.0.name
options
– second argument ofform.getInputProps
, for example{ type: 'checkbox' }
, can be used to pass additionaloptions to
enhanceGetInputProps
functionform
– form instanceExample of using
enhanceGetInputProps
to disable input based on field path:Example of using
enhanceGetInputProps
to add additional props to the input based on option passed toform.getInputProps
:form.initialize
@mantine/form
now supportsform.initialize
handler.When called
form.initialize
handler setsinitialValues
andvalues
to the same valueand marks form as initialized. It can be used only once, next
form.initialize
callsare ignored.
form.initialize
is useful when you want to sync form values with backend API response:Example with TanStack Query (react-query):
Note that
form.initialize
will erase all values that were set before it was called.It is usually a good idea to set
readOnly
ordisabled
on all form fields beforeform.initialize
is called to prevent data loss. You can implement this withenhanceGetInputProps:
valibot form resolver
@mantine/form
now supports validbot schema resolver:Basic fields validation:
Nested fields validation
List fields validation:
ScrollArea scrollbars prop
ScrollArea now supports
scrollbars
prop, which allows controlling directions at which scrollbars should be rendered.Supported values are
x
,y
andxy
. Ifscrollbars="y"
is set, only the vertical scrollbar will be rendered, and it will not be possible to scroll horizontally:Title lineClamp prop
Title component now supports
lineClamp
prop, which allows truncating text after a specified number of lines:Primary color CSS variables
CSS variables for primary color are now available, you can use the following variables in your styles:
Help center
Help center is a new website with guides, tutorials and frequently
asked questions. Currently, it has 14 questions, more FAQs will be added in the next releases.
Documentation updates
form.getInputProps
,enhanceGetInputProps
and how to integrateform.getInputProps
with custom inputs.@mantine/hooks
package. It is planned to document functions from other packages in next releases.variantColorsResolver
demos have been added to ActionIcon, ThemeIcon and Badge components.Other changes
@tabler/icons
package. It is no longer required to install@tabler/icons
package to useRichTextEditor
component. Icons used in the editor are now a part of the@mantine/tiptap
package. This change improves bundling performance in several cases (mostly when usingRichTextEditor
in Next.js apps).circle
prop which makes the badge round.ff
style prop withmono
,text
andheading
values:<Box ff="mono" />
.RichTextEditor.Undo
andRichTextEditor.Redo
controls.luminance
color function was added. It returns color luminance as a number between 0 and 1.flex
style prop which allows settingflex
CSS property on the root element.stepHoldDelay
andstepHoldInterval
props have been added to NumberInput.errorPriority
configuration which allows controlling the order of errors specified in the schema. This feature requires updatingmantine-form-zod-resolver
to version 1.1.0 or higher.icon
prop, which allows overriding default icon. It is useful when it is not possible to replaceCloseButton
, for example, in Drawer component.onChange
with an additional argument – option object. It containslabel
,value
and optionaldisabled
properties.styles
prop of all components.v7.3.2
Compare Source
What's Changed
[@mantine/core]
Portal: Fix empty className string throwing error (#5400)[@mantine/core]
Select: Fix incorrect empty string as initial value handing[@mantine/core]
Fix error thrown in jest tests when autosize Textarea is used in Next.js application (#5393)[@mantine/core]
Loader: Fix default loaders not being available if custom loader was default with defaultProps on theme[@mantine/core]
Chip: Fixcolor
prop not working without specifying variant[@mantine/core]
MultiSelect: Fix dropdown not being opened when Space key is pressed and the component is not searchable[@mantine/core]
NavLink: Add missing Space key handling for collapse/expand nested links[@mantine/dates]
DateInput: Fix incorrect clear button size[@mantine/core]
Fix text inside MultiSelect, TagsInput and PillsInput search field not being possible to select with mouse[@mantine/core]
Set cursor tonot-allowed
on disabled Checkbox, Radio and Switch[@mantine/core]
NumberInput: Improve disabled increment/decrement controls styles[@mantine/core]
Button: Fix incorrect alignment if button is used in the same container as other buttons withcomponent
prop[@mantine/core]
SegmentedControl: Improve readOnly styles[@mantine/core]
NumberInput: Fix incorrect controls text color in error state[@mantine/core]
Change divs to more semantic elements in Modal and Drawer[@mantine/core]
Make header height of Modal and Drawer consistent to prevent layout shift whenwithCloseButton
prop is changed[@mantine/core]
FixonChange
not being called in Radio, Checkbox and Chip components if they are used insideX.Group
[@mantine/core]
NumberInput: Fix incorrect negative decimal values input handing[@mantine/core]
Button: Fix incorrect Loader vertical alignment[@mantine/vanilla-extract]
Expose all primary colors values[@mantine/core]
Menu: Fix incorrect aria roles (#5372)[@mantine/core]
Table: Fix sticky header being overlayed by elements in table rows in some cases (#5385)[@mantine/core]
Combobox: FixrightSection
andleftSection
nor being visible onCombobox.Search
(#5368)[@mantine/core]
Tabs: Fix clipped border of outline variant (#5370)[@mantine/core]
Fix incorrectrightSectionPointerEvents
in Select and MultiSelect components (#5371)[@mantine/core]
Alert: Fix incorrect margin if title is hidden[@mantine/core]
Overlay: Fix blur styles not working in old SafariNew Contributors
Full Changelog: mantinedev/mantine@7.3.1...7.3.2
v7.3.1
Compare Source
What's Changed
[@mantine/core]
Fix broken default colors override[@mantine/core]
Menu: Improveclick-hover
trigger accessibility (#5335)[@mantine/core]
Fix incorrectlineHeight
theme variables resolving (#5375)[@mantine/core]
Select: Fix error thrown if google translate changes labels (#5377)[@mantine/tiptap]
Add missingcontrol
Styles API selector toRichTextEditor.Link
(#5171)[@mantine/core]
Grid: Fix incorrect Grid.Col auto span handing if one Grid is used inside another Grid (#5278)[@mantine/core]
Grid: Fix incorrect Grid.Col styles when the column isauto
as base value andcontent
as breakpoint value (#5280)[@mantine/core]
Fix various RTL issues (#5250)[@mantine/dates]
FixhideOutsideDates
now working if@mantine/dates
is used as a headless library (#5003)[@mantine/core]
SegmentedControl: Remove animation during initialization (#5182)[@mantine/core]
Menu: Fix broken focus logic whenkeepMounted
is set (#4502)[@mantine/tiptap]
Remove@tabler/icons
dependency to improve bundling performance (#5279)[@mantine/core]
Fix inputs have incorrect left and right sections colors in error state (#5304)[@mantine/core]
Title: AddlineClamp
support (#5321)[@mantine/core]
Grid: Change default overflow to visible (#5276)[@mantine/core]
ScrollArea: Fix incorrect scrollbars styles (#4904)[@mantine/core]
Expose--mantine-primary-color-x
CSS variables (#5331)[@mantine/core]
Combobox: Fix incorrect Enter key handling when dropdown is opened and option is not selected (#5348)[@mantine/core]
NumberInput: FixstartValue
nor working ifmin
is set (#5308)[@mantine/core]
Collapse: Add missing Collapse.extend function (#5313)[@mantine/core]
Fix incorrect clamp() function handing in style props (#5330)[@mantine/core]
PinInput: Trim value on paste before validation (#5340)[@mantine/core]
PinInput: Fix incorrectly assigned ref (#5365)[@mantine/core]
Remove use client from createPolymorphicComponent factory (#5367)New Contributors
Full Changelog: mantinedev/mantine@7.3.0...7.3.1
v7.3.0
: 🌟Compare Source
View changelog with demos on mantine.dev website
smaller-than and larger-than mixins
smaller-than
andlarger-than
mixins can be used to create styles that will be applied only when the screen is smaller or larger than specified breakpoint.Note that to use these mixins, you need to update postcss-preset-mantine to version
1.11.0
or higher.Will be transformed to:
You can also use
smaller-than
andlarger-than
mixins with mantine breakpoints:Form schema resolvers packages
@mantine/form
schema validation resolver packages are now available as separate packages.Moving resolvers to separate packages allows making them type-safe and fully tested.
Old resolvers are still exported from
@mantine/form
package – you will be able to use them without any changesuntil 8.0.0 release.
The new packages are drop-in replacements for old resolvers, they have the same API and can be used in the same way.
Example of zod resolver:
rem/em functions improvements
rem and em function now support space-separated values. This feature is available
both in
rem
function exported from@mantine/core
package and postcss-preset-mantine.Note that y
Configuration
📅 Schedule: Branch creation - "before 4am on Monday" in timezone Europe/Amsterdam, Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
This PR has been generated by Mend Renovate. View repository job log here.