mantinedev/mantine
Compare Source
What's Changed
[@mantine/core]
NumberInput: Fix removeTrailingZeros
prop not working for initial value (#2638)
[@mantine/core]
Modal: Fix issue when it was impossible to interact with scrollbars behind overlay (#2669)
[@mantine/styles]
Fix incorrect params handling in DefaultProps type in strict mode
[@mantine/core]
Select: Fix component scrolling page when it is focused without any data or nothing found message (#2628)
[@mantine/core]
Fix Avatar and ThemeIcon components not respecting theme.defaultGradient
(#2649)
[@mantine/dates]
Calendar: Fix error in console when up/down error is pressed and next/previous date is disabled
[@mantine/core]
Menu: Close menu when target changes (#2646)
[@mantine/hooks]
use-focus-return: Add preventScroll: true to avoid scrolling to element when dropdown/modal is closed outside of current viewport
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.4...5.5.5
What was changed
[@mantine/core]
ColorInput: Prevent dropdown from opening if withPicker={false} and there are no swatches
[@mantine/core]
List: Fix styles params not being inherited by List.Item (#2495)
[@mantine/core]
Grid: Fix incorrect responsive offsets handling (#2556)
[@mantine/core]
Popover: Add option to configure focus returning logic with returnFocus prop
[@mantine/core]
Popover: Fix onKeydownCapture prop overriding Escape key handler
Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.2...5.5.4
Compare Source
What's Changed
[@mantine/core]
List: Fix incorrect list items styles (#2624)
[@mantine/core]
NumberInput: Fix incorrect removeTrailingZeros default prop value (#2621)
[@mantine/core]
ScrollArea: Fix incorrect thumb hover area (#2610)
[@mantine/hooks]
use-focus-trap: Fix incorrect focus trapping logic when setRef
is called with null
(#2623)
[@mantine/core]
Fix incorrect cursor type on Checkbox, Radio and Switch when cursorType is set on theme
[@mantine/core]
Remove unexpected styles from Checkbox, Radio and Switch components
Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.1...5.5.2
Compare Source
What's Changed
[@mantine/core]
Fix incorrect selectors used to style Radio, Checkbox and Switch components
[@mantine/core]
Input: Fix size not being applied when set from error props and descriptionProps (#2603)
[@mantine/core]
Fix incorrect loading state styles in Button and ActionIcon components (#2618)
[@mantine/core]
Fix scrollbar appearing in Select, MultiSelect and Autocomplete dropdown when withNormalizeCSS and withGlobalStyles are not set on MantineProvider
[@mantine/core]
Revert Collapse axis prop to avoid issues with regular Collapse
[@mantine/core]
Fix missing font styles in Select, MultiSelect and Autocomplete dropdown when withGlobalStyles is not set on MantineProvider
[@mantine/core]
MultiSelect: fix dropdown flicker and onDropdownClose/onDropdownOpen handlers being called when dropdown isn't visible (#2602)
[@mantine/core]
Select: Fix incorrect dropdown opened state when input is clicked (#2605)
[@mantine/core]
List: Fix incorrect indentation for nested list items (#2606)
[@mantine/core]
SegmentedControl: Fix error with hook call order (#2608)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.0...5.5.1
Compare Source
View changelog with demos on mantine.dev website
Global styles on theme
You can now add global styles with theme.globalStyles
,
this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):
import { MantineProvider } from '@​mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
globalStyles: (theme) => ({
'*, *::before, *::after': {
boxSizing: 'border-box',
},
body: {
...theme.fn.fontStyles(),
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
lineHeight: theme.lineHeight,
},
'.your-class': {
backgroundColor: 'red',
},
'#your-id > [data-active]': {
backgroundColor: 'pink',
},
}),
}}
>
<App />
</MantineProvider>
);
}
form.setValues partial
form.setValues
can now be used to set multiple values at once, payload will be shallow merged with current values state:
import { useForm } from '@​mantine/form';
const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
form.setValues({ name: 'John', age: 21 });
form.values; // -> { name: 'John', email: '', age: 21 }
Documentation updates
Other changes
- Checkbox
indeterminate
state now has separate styles for checked and unchecked states
- Modal component now supports
size="auto"
- Checkbox, Radio and Switch
components now support
error
, description
and labelPosition
props
- Tooltip and Popover components now can be used with inline elements
- Slider and RangeSlider components now support
inverted
prop
- Collapse component now supports
axis
prop
- Table component now supports
withBorder
and withColumnBorders
props
- NumberInput component now supports
removeTrailingZeros
prop
- Popover and Menu components now support
disabled
prop
- nprogress now supports new
completeNavigationProgress
handler
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.2...5.5.0
Compare Source
What's Changed
[@mantine/form]
Add options argument support to joiResolver
(#2562)
[@mantine/carousel]
Fix incorrect slidesToScroll
type (#2548)
[@mantine/carousel]
Fix wrong carousel size calculation (#2572)
[@mantine/core]
Image: Allow src attribute to be null
[@mantine/core]
Image: Fix race condition between hydration and image load event (#629)
- Fix incorrect types for static components (
Navbar.Section
, Tabs.Tab
, etc.) for older versions of TypeScript
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.1...5.4.2
Compare Source
What's Changed
[@mantine/core]
Grid: Fix offset={0} not working (#2346)
[@mantine/core]
SegmentedControl: Fix colors index reference not working
[@mantine/dropzone]
Fix incorrect ref handling
[@mantine/core]
Integrate Floating UI tooltip middleware in Tooltip, Popover and other components that are based on Popover (#2521)
[@mantine/core]
Fix missing ref type in components with static parts (#2505)
[@mantine/core]
Add data-disabled + change color when disabled on label to Switch and Checkbox components (#2508)
[@mantine/nprogress]
Add option to add aria-label (#2526)
[@mantine/rte]
Fix issue with ImageUploader index null error (#2529)
[@mantine/hooks]
use-local-storage: Fix incorrect method called when item is removed from local storage (#2490)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.0...5.4.1
Compare Source
View changelog with demos on mantine.dev website
validateInputOnBlur
use-form now supports validateInputOnBlur
option,
it works similar to validateInputOnChange
:
import { useForm } from '@​mantine/form';
import { NumberInput, TextInput, Button } from '@​mantine/core';
function Demo() {
const form = useForm({
validateInputOnBlur: ['name', 'email'],
initialValues: { name: '', email: '', age: 0 },
// functions will be used to validate values at corresponding key
validate: {
name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
email: (value) => (/^\S+@​\S+$/.test(value) ? null : 'Invalid email'),
age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
},
});
return (
<form onSubmit={form.onSubmit(console.log)}>
<TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
<TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
<NumberInput
mt="sm"
label="Age"
placeholder="Age"
min={0}
max={99}
{...form.getInputProps('age')}
/>
<Button type="submit" mt="sm">
Submit
</Button>
</form>
);
}
Non-linear Slider scale
Slider and RangeSlider components now support non-linear scale:
import { RangeSlider, Slider, Stack } from '@​mantine/core';
function Demo() {
function valueLabelFormat(value: number) {
const units = ['KB', 'MB', 'GB', 'TB'];
let unitIndex = 0;
let scaledValue = value;
while (scaledValue >= 1024 && unitIndex < units.length - 1) {
unitIndex += 1;
scaledValue /= 1024;
}
return `${scaledValue} ${units[unitIndex]}`;
}
return (
<Stack spacing="xl" p="xl">
<Slider
py="xl"
scale={(v) => 2 ** v}
step={1}
min={2}
max={30}
labelAlwaysOn
defaultValue={10}
label={valueLabelFormat}
/>
<RangeSlider
py="xl"
scale={(v) => 2 ** v}
step={1}
min={2}
max={30}
labelAlwaysOn
defaultValue={[10, 20]}
label={valueLabelFormat}
/>
</Stack>
);
}
Switch.Group component
New Switch.Group component lets you organize Switch
components the same way as Checkbox.Group
and Radio.Group
:
import { Switch } from '@​mantine/core';
function Demo() {
return (
<Switch.Group
defaultValue={['react']}
label="Select your favorite framework/library"
description="This is anonymous"
withAsterisk
>
<Switch value="react" label="React" />
<Switch value="svelte" label="Svelte" />
<Switch value="ng" label="Angular" />
<Switch value="vue" label="Vue" />
</Switch.Group>
);
}
Controlled Select/MultiSelect search value
Select and MultiSelect search value can now be controlled:
import { Select } from '@​mantine/core';
function Demo() {
const [searchValue, onSearchChange] = useState('');
return (
<Select
label="Your favorite framework/library"
placeholder="Pick one"
searchable
onSearchChange={onSearchChange}
searchValue={searchValue}
nothingFound="No options"
data={['React', 'Angular', 'Svelte', 'Vue']}
/>
);
}
Controlled PasswordInput visibility
PasswordInput now supports controlled visibility state with visible
and onVisibilityChange
props, for example, the props can be used to sync visibility state between two inputs:
import { useDisclosure } from '@​mantine/hooks';
import { PasswordInput, Stack } from '@​mantine/core';
function Demo() {
const [visible, { toggle }] = useDisclosure(false);
return (
<Stack sx={{ maxWidth: 380 }} mx="auto">
<PasswordInput
label="Password"
defaultValue="secret"
visible={visible}
onVisibilityChange={toggle}
/>
<PasswordInput
label="Confirm password"
defaultValue="secret"
visible={visible}
onVisibilityChange={toggle}
/>
</Stack>
);
}
New Mantine UI components
10 new components were added to Mantine UI, view changelog here
Other changes
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.3.3...5.4.0
Compare Source
What's Changed
[@mantine/core]
Modal: Fix closeOnClickOutside not working (#2458)
[@mantine/dropzone]
Upgrade react-dropzone version to fix mime types issue (#2476)
[@mantine/core]
PasswordInput: Fix incorrect selection styles (#2473)
[@mantine/modals]
Fix closeModal not working correctly when called inside nested modals (#2436)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.3.2...5.3.3
Compare Source
What's Changed
[@mantine/rte]
Update react-quill to 2.0.0 to avoid dependencies collisions with React 18 (#2449)
[@mantine/core]
SegmetedControl: Fix floating indicator being invisible in uncontrolled component (#2454)
[@mantine/core]
Fix Button and ActionIcon not being disabled when rendered inside disabled fieldset (#2440)
[@mantine/core]
Modal: Prevent overlay from sitting on top of scrollbar (#2445)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.3.1...5.3.2
Compare Source
What's Changed
[@mantine/core]
Indicator: Fix incorrect default props that prevented indicator from showing without label
[@mantine/Prism]
Fix lines highlight color not respecting colorScheme prop (#2404)
[@mantine/core]
SegmentedControl: Fix incorrect empty string value handling (#2400)
[@mantine/rte]
Fix incorrect props types (#2420)
[@mantine/core]
Indicator: Disable processing animation on disabled state (#2410)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.3.0...5.3.1
Compare Source
View changelog with demos on mantine.dev
Form context
@mantine/form
package now exports createFormContext
function to create provider component,
hook to get form object from context and use-form hook with predefined type:
import { createFormContext } from '@​mantine/form';
import { TextInput } from '@​mantine/core';
// Definition of form values is required
interface FormValues {
age: number;
name: string;
}
// createFormContext returns a tuple with 3 items:
// FormProvider is a component that sets form context
// useFromContext hook return form object that was previously set in FormProvider
// useForm hook works the same way as useForm exported from the package but has predefined type
const [FormProvider, useFormContext, useForm] = createFormContext<FormValues>();
function ContextField() {
const form = useFormContext();
return <TextInput label="Your name" {...form.getInputProps('name')} />;
}
export function Context() {
// Create form as described in use-form documentation
const form = useForm({
initialValues: {
age: 0,
name: '',
},
});
// Wrap your form with FormProvider
return (
<FormProvider form={form}>
<form onSubmit={form.onSubmit(() => {})}>
<ContextField />
</form>
</FormProvider>
);
}
New features
- Indicator component now includes more features to work with number labels and
precessing
prop
- Switch component now supports
thumbIcon
prop and any React node can now be used on onLabel
and offLabel
props
- Grid.Col component now supports setting column span (and other related responsive props) to
auto
and content
:
use-previous hook
use-previous hook stores the previous value of a state in a ref,
it returns undefined on initial render and the previous value of a state after rerender:
import { TextInput, Text } from '@​mantine/core';
import { usePrevious, useInputState } from '@​mantine/hooks';
function Demo() {
const [value, setValue] = useInputState('');
const previousValue = usePrevious(value);
return (
<div>
<TextInput
label="Enter some text here"
placeholder="Enter some text here"
id="previous-demo-input"
value={value}
onChange={setValue}
/>
<Text mt="md">Current value: {value}</Text>
<Text>Previous value: {previousValue}</Text>
</div>
);
}
Other changes
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.7...5.3.0
Compare Source
What's Changed
[@mantine/core]
ScrollArea: Fix offsetScrollbarsprop not working for horizontal scrollbars
[@mantine/core]
Select: Fix Space key causing page to scroll when used to open dropdown
[@mantine/hooks]
use-focus-trap: Fix scrolling of animated elements (#1753)
[@mantine/carousel]
Remove margin from the last slide (#2336)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.6...5.2.7
Compare Source
What's Changed
[@mantine/core]
Drawer: Fix withOverlay={false}
not letting click-through (#2351)
[@mantine/core]
PasswordInput: Fix inputWrapperOrder prop not working
[@mantine/core]
Modal: Fix content shifting in full screen modal (#2348)
[@mantine/notifications]
Remove unexpected message
prop on notification root element (#2327)
[@mantine/styles]
Set prepend: true on default emotion cache to fix styles overriding issues
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.5...5.2.6
Compare Source
What's Changed
[@mantine/core]
ActionIcon: Fix broken styles for loading state (#2281)
[@mantine/dropzone]
Fix Dropzone.Fullscreen not disappearing when mouse is moved slowly outside its wrapper (#2305)
[@mantine/dates]
TimeInput: Hide clear button when input is disabled (#2321)
[@mantine/styles]
Remove prepend: true
from default emotion cache (#1734)
[@mantine/core]
Autocomplete: Fix options grouping with dynamic data (#2297)
[@mantine/core]
Fix disabled styles for gradient variants of Button and ActionIcon (#2277)
[@mantine/core]
Autocomplete: Fix outdated styles api selectors (#2269)
[@mantine/core]
Tabs: Add items wrapping to Tabs.List to avoid horizontal scroll
[@mantine/carousel]
Fix incorrect type in useAnimationOffsetEffect hook
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.4...5.2.5
Compare Source
What's Changed
[@mantine/hooks]
use-focus-return: Allow shouldReturnFocus to be dynamic (#770)
[@mantine/core]
Tooltip: Remove extra markup from disabled Tooltip.Floating (#2220)
[@mantine/core]
TypographyStylesProvider: Fix code tag styles when it is nested within pre tag (#2219)
[@mantine/prism]
Fix copy icon interfering with code (#2171)
[@mantine/core]
Remove hardcodded padding from Select, MultiSelect and Autocomplete dropdowns (#2108)
[@​mantine/dropzone]
Change onDrop type from File to FileWithPath (#2250)
[@mantine/core]
Image: Change fit
prop type to include all possible object-fit values (#2245)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.3...5.2.4
Compare Source
- Fix broken Grid responsive styles introduced in 5.2.2
- Fix Grid responsive
order
prop not being applied
What's Changed
[@mantine/hooks]
use-focus-within: Fix incorrect useEffect dependencies (#2178)
[@mantine/core]
Grid: Fix offset and order responsive props (#2163)
[@mantine/core]
Title: Fix inline
prop being ignored (#2182)
[@mantine/carousel]
Remove strict requirement for embla-carousel-react dependency (#2200)
[@mantine/core]
NumberInput: Fix onKeyDown and onKeyUp events not working
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.0...5.2.2
Compare Source
View changelog with demos on documentation website
Styled components support
You can now use styled components syntax with @emotion/styled package:
- It is fully compatible with Mantine server side rendering (
@mantine/next
, @mantine/remix
and gatsby-plugin-mantine
packages)
- Mantine theme can now be used in component styles with no extra setup
- Components created with
@emotion/styled
will use Mantine's emotion cache
import styled from '@​emotion/styled';
const StyledComponent = styled.div`
text-align: center;
background-color: ${({ theme }) =>
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0]};
padding: 30px;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: ${({ theme }) =>
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]};
}
`;
function Demo() {
return <StyledComponent />;
}
withAsterisk prop
All inputs that are based on Input and Input.Wrapper components now
support withAsterisk
prop, it allows to display required asterisk without adding required
attribute
to the input element. It is useful when you do not need browser validation in your forms but still want
to display the asterisk.
import { TextInput } from '@​mantine/core';
// Will display required asterisk and add `required` attribute to the input element
function RequiredDemo() {
return <TextInput label="test-label" required />;
}
// Will only display the asterisk, `required` attribute is not added to the input element
function AsteriskDemo() {
return <TextInput label="test-label" withAsterisk />;
}
Progress and RingProgress tooltips
Progress and RingProgress components
now support floating tooltips in sections:
import { RingProgress, Text, Group } from '@​mantine/core';
function Demo() {
return (
<Group position="center">
<RingProgress
size={170}
thickness={16}
label={
<Text size="xs" align="center" px="xs" sx={{ pointerEvents: 'none' }}>
Hover sections to see tooltips
</Text>
}
sections={[
{ value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' },
{ value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' },
{ value: 15, color: 'grape', tooltip: 'Other – 15 Gb' },
]}
/>
</Group>
);
}
Title component changes
Title now supports setting size
different from order
:
import { Title } from '@​mantine/core';
function Demo() {
return (
<>
<Title order={3} size="h1">
H3 heading with h1 font-size
</Title>
<Title size="h4">H1 heading with h4 font-size</Title>
<Title size={12}>H1 heading with 12px size</Title>
</>
);
}
It also now supports all Text component props:
import { Title } from '@​mantine/core';
function Demo() {
return (
<>
<Title order={3} weight={100} align="center">
H3 heading aligned to center with 100 font-weight
</Title>
<Title order={4} underline color="blue.5">
Underlined h4 heading with blue color
</Title>
<Title order={5} color="dimmed" italic>
Italic dimmed h5 heading
</Title>
</>
);
}
New form.isValid
handler performs form validation with given validation functions, rules object or schema, but unlike
form.validate
it does not set form.errors
and just returns boolean value that indicates whether form is valid.
import { useForm } from '@​mantine/form';
const form = useForm({
initialValues: { name: '', age: 0 },
validate: {
name: (value) => (value.trim().length < 2 ? 'Too short' : null),
age: (value) => (value < 18 ? 'Too young' : null),
},
});
// get validation status of all values
form.isValid(); // -> false
// get validation status of field
form.isValid('name'); // -> false
form.resetDirty
will now memoize form values and compare all next changes with stored values instead of initialValues
:
import { useForm } from '@​mantine/form';
const form = useForm({ initialValues: { a: 1 } });
form.setFieldValue('a', 2);
form.isDirty(); // -> true
form.setFieldValue('a', 1);
form.isDirty(); // -> false
form.setFieldValue('a', 3);
form.resetDirty();
form.isDirty(); // -> false
form.setFieldValue('a', 3);
form.isDirty(); // -> true
Form rules now receive rule path as third argument:
import { useForm } from '@​mantine/form';
const form = useForm({
initialValues: { a: [{ b: 1 }, { b: 2 }] },
validate: {
a: {
// path can be used to get field position relative to other fields
b: (value, values, path) => (path === 'a.0.b' ? 'error' : null),
},
},
});
Custom prism themes
Prism component now supports custom themes with getPrismTheme
prop:
import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
import { Prism } from '@​mantine/prism';
const demoCode = `import { Button } from '@​mantine/core';
function Demo() {
return <Button>Hello</Button>
}`;
function Demo() {
return (
<Prism
language="tsx"
getPrismTheme={(_theme, colorScheme) =>
colorScheme === 'light' ? duotoneLight : duotoneDark
}
>
{demoCode}
</Prism>
);
}
Other changes
- ActionIcon component now support
gradient
variant
- Avatar component now supports
variant
prop
- Carousel component now supports
height="100%"
- Grid.Col now supports
order
prop, it can be used to reorder columns when certain breakpoint is reached
- Tabs component now supports
keepMounted
prop. If it is set to false
then components rendered inside Tabs.Panel
will be unmounted when tab is not active.
- DatePicker and DateRangePicker components now have
withinPortal
prop set to false
by default to match other components
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.7...5.2.0
Compare Source
What's Changed
[@mantine/core]
Add option to not call onChange in creatable Select and MultiSelect when onCreate function returns null or undefined (#2095)
[@mantine/core]
Fix incorrect Tooltip and Popover arrow styles for RTL (#2104)
[@mantine/core]
Modal: Fix incorrect overflow with fullScreen option (#2118)
[@mantine/core]
MultiSelect: Fix incorrect line-height styles (Windows Chrome and Edge) (#2154)
[@mantine/core]
MultiSelect: Fix incorrect values maxSelectedValues
handling (#2115)
[@mantine/core]
Stepper: Fix incorrect styles for vertical lines when step content has large height (#2106)
Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.6...5.1.7
Compare Source
What's Changed
[@mantine/core]
Modal: Fix incorrect scrollbar offset on Windows/Linux (#1721)
[@mantine/core]
Collapse: Fixed error thrown when using component with reduced motion (#2116)
[@mantine/dates]
Add missing yearLabelFormat, nextDecadeLabel, nextYearLabel, previousDecadeLabel and previousYearLabel props forwarding to Calendar component in DatePicker and DateRangePicker components
[@mantine/core]
AppShell: Fix incorect border styles in Navbar, Header, Footer and Aside components when withBorder is set to false
Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.5...5.1.6
Compare Source
What's Changed
[@mantine/hooks]
use-viewport-size: Add missing size calculation to useEffect (#2085)
[@mantine/carousel]
Add dynamic slides handling (#2074)
[@mantine/core]
Fix keys errors in Select and MultiSelect components when items with group are mixed with items without groups (#2045)
[@mantine/core]
Fix incorrect creatable item styles calculation and issue with repeated key (#1662)
[@mantine/hooks]
use-interval: Ensure that only one running interval can be rutting at a time (#2093)
[@mantine/spotlight]
Fix closeOnTrigger
with not working correctly with 'Enter' key (#2066)
[@mantine/core]
Button: Fix incorrect overlap between buttons in Button.Group
for screens with low resolution (#1979)
[@mantine/core]
Allow usage of Toolip with Popover.Target
, HoverCard.Target
and Menu.Target
(#1897)
[@mantine/carousel]
Add useAnimationOffsetEffect
hook to fix issue with incorrect slides offset when Carousel is used in animated container, for example in Modal (#2041)
[@mantine/core]
NumberInput: Fix incorrect events handling for composite events (#1935)
[@mantine/hooks]
use-hotkeys: Add option to use getHotkeyHandler
with .addEventListener
events (#1952)
[@mantine/styles]
Fix incorrect theme.spacing
calculation when it is overridden with 0 values (#1832)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.4...5.1.5
Compare Source
[@mantine/core]
Input: Add role="alert"
to Input.Error to make it visible for screen readers (#2023)
[@mantine/core]
Add withFocusReturn
prop support to Modal and Drawer components to allow focus behavior configuration (#770)
[@mantine/utils]
Fix custom events not firing in strict mode (#2081)
[@mantine/core]
AppShell: Fix Navbar cut off for mobile users with address bar on top (#1171)
[@mantine/core]
Alert: Allow usage of close button when title is not set (#1348)
[@mantine/core]
Notification: Reduce description styles selector specificity to allow color overriding with Styles API (#1627)
[@mantine/core]
Slider: Fix "Unable to preventDefault inside passive event listener invocation" error appearing in console for touch devices (#1751)
[@mantine/hooks]
Move initial value calculation to useEffect to avoid hydration mismatches (#1764) in the following hooks: use-window-scroll, use-viewport-size, use-media-query, use-reduced-motion, use-network, use-local-storage, use-hash, use-document-visibility, use-color-scheme.
Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.3...5.1.4
[@mantine/form]
Fix incorrect onChange events in getInputProps for select element
[@mantine/form]
Fix incorrect dirty state detection when list item is added and then removed
[@mantine/notifications]
Fix openNotification
function not being called in useEffect
on component mount
[@mantine/spotlight]
Fix registerActions
function not being called in useEffect
on component mount
[@mantine/nprogress]
Fix resetNavigationProgress
function not being called in useEffect
on component mount
[@mantine/core]
FileInput: Fix issue when user was unable to select the same file after the field was cleared
[@mantine/core]
Indicator: Fix incorrect color applied if color prop is not set
Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.1...5.1.3
Compare Source
What's Changed
- Loader: Fix incorrect color being applied when color prop is not set (#2047)
- Spoiler: Fix incorrect height when used inside Accordion (#2037)
- Spotlight: Add
closeOnTrigger
prop to allow overriding behavior on action level (#2050)
New Contributors
Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.0...5.1.1
Compare Source
Colors index reference
You can now reference colors from theme by index in all components:
import { Button, Text, Stack } from '@​mantine/core';
function Demo() {
return (
<Stack align="flex-start">
<Text color="blue.3">Text with theme.colors.blue[3] color</Text>
<Button color="pink.4">Button with theme.colors.pink[4] color</Button>
</Stack>
);
}
use-form touched and dirty state
use-form
hook now exposes fields touched and dirty state:
import { useForm } from '@​mantine/form';
import { TextInput, Text } from '@​mantine/core';
function Demo() {
const form = useForm({ initialValues: { text: 'initial value' } });
return (
<>
<TextInput
{...form.getInputProps('text')}
label="Touched/dirty demo"
placeholder="Touched/dirty demo"
/>
<Text size="sm" mt="sm">
Touched:{' '}
<Text span color={form.isTouched('text') ? 'blue' : 'red'}>
{form.isTouched('text') ? 'touched' : 'not touched'}
</Text>
</Text>
<Text size="sm">
Dirty:{' '}
<Text span color={form.isDirty('text') ? 'blue' : 'red'}>
{form.isDirty('text') ? 'dirty' : 'not dirty'}
</Text>
</Text>
</>
);
}
RichTextEditor formats
RichTextEditor component now supports formats
prop to restrict formats
that user can use in the editor.
In the following example three formats are enabled: bold
, italic
and underline
,
toolbar includes italic
and underline
controls, bold
format can be added with Ctrl + B
keyboard
shortcut, other formats are not available:
import { useState } from 'react';
import { RichTextEditor } from '@​mantine/rte';
function Demo() {
const [value, onChange] = useState('<p>Rich text editor content</p>');
return (
<RichTextEditor
value={value}
onChange={onChange}
formats={['bold', 'italic', 'underline']}
controls={[['italic', 'underline']]}
/>
);
}
use-text-selection hook
use-text-selection allows to get current selected text on the page:
import { useTextSelection } from '@​mantine/hooks';
function Demo() {
const selection = useTextSelection();
return (
<>
<div>Select some text here or anywhere on the page and it will be displayed below</div>
<div>Selected text: {selection?.toString()}</div>
</>
);
}
use-debounced-state hook
use-debounced-state is an alternative for
use-debounced-value for uncontrolled components:
import { useDebouncedState } from '@​mantine/hooks';
import { TextInput, Text } from '@​mantine/core';
function Demo() {
const [value, setValue] = useDebouncedState('', 200);
return (
<>
<TextInput
label="Enter value to see debounce effect"
defaultValue={value}
style={{ flex: 1 }}
onChange={(event) => setValue(event.currentTarget.value)}
/>
<Text>Debounced value: {value}</Text>
</>
);
}
Minimal Next.js template
You can now use minimal Next.js template
that includes only basic server side rendering setup. It is useful when you want to set up your own tooltip
(configuration for Jest, Storybook, ESLint, prettier and other tools is not included).
Other changes
- New theme functions:
theme.fn.primaryShade
and theme.fn.primaryColor
- Text component now supports
strikethrough
and italic
props to add text-decoration and font-style styles.
- Text component now supports
span
prop as a shorthand for component="span"
.
- Carousel component now support keyboard events (switching slides with right/left arrows)
- [Accordion.Con