Version 3.5.0

Release date

@mantine/prism changes

Prism component now uses ScrollArea instead of native browser scrollbars:

With ScrollArea component (default):
<p>
Long code that will force Prism to have a horizontal scrollbar, by default, scroll behavior is handled by ScrollArea component, but it can be changed to native browser scrollbars
</p>
With native scrollbars:
<p>
Long code that will force Prism to have a horizontal scrollbar, by default, scroll behavior is handled by ScrollArea component, but it can be changed to native browser scrollbars
</p>

Prism now supports organizing code with tabs:

@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
--heading-1: 30px/32px Helvetica, sans-serif;
}
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
@requires_authorization
def somefunc(param1='', param2=0):
r'''A docstring'''
if param1 > param2: # interesting
print 'Gre\'ater'
return (param2 - param1 + 1 + 0b10l) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt'''
import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}

NumberInput component improvements

NumberInput component now supports the following new features:

  • decimal separator configuration
  • value increment/decrement when user clicks and holds up/down controls
import { NumberInput } from '@mantine/core';
function Demo() {
return (
<NumberInput
decimalSeparator=","
label="Number input with a custom decimal separator"
defaultValue={0.5}
precision={2}
step={0.5}
/>
);
}
Step the value when clicking and holding the arrows
Step value will increase incrementally when control is hold
import { NumberInput } from '@mantine/core';
function Demo() {
return (
<>
<NumberInput
style={{ marginTop: 15 }}
label="Step on hold"
description="Step the value when clicking and holding the arrows"
stepHoldDelay={500}
stepHoldInterval={100}
/>
<NumberInput
label="Step the value with interval function"
description="Step value will increase incrementally when control is hold"
stepHoldDelay={500}
stepHoldInterval={(t) => Math.max(1000 / t ** 2, 25)}
/>
</>
);
}

New features

RingProgress component now supports round caps:

import { RingProgress } from '@mantine/core';
function Demo() {
return (
<RingProgress
size={120}
thickness={12}
roundCaps
sections={[
{ value: 40, color: 'cyan' },
{ value: 15, color: 'orange' },
{ value: 15, color: 'grape' },
]}
/>
)
}

Stepper component now supports Stepper.Completed to display content after final step is completed:

Step 2 content: Verify email
import { useState } from 'react';
import { Stepper, Button, Group } from '@mantine/core';
function Demo() {
const [active, setActive] = useState(1);
const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
return (
<>
<Stepper active={active} onStepClick={setActive} breakpoint="sm">
<Stepper.Step label="First step" description="Create an account">
Step 1 content: Create an account
</Stepper.Step>
<Stepper.Step label="Second step" description="Verify email">
Step 2 content: Verify email
</Stepper.Step>
<Stepper.Step label="Final step" description="Get full access">
Step 3 content: Get full access
</Stepper.Step>
<Stepper.Completed>
Completed, click back button to get to previous step
</Stepper.Completed>
</Stepper>
<Group position="center" mt="xl">
<Button variant="default" onClick={prevStep}>Back</Button>
<Button onClick={nextStep}>Next step</Button>
</Group>
</>
);
}

Progress component now supports labels and animations:

75%
Documents
Apps
Other
import { Progress } from '@mantine/core';
function Demo() {
return <Progress value={75} animate />;
}

Switch component now supports inner labels:

import { Switch } from '@mantine/core';
function Demo() {
return <Switch onLabel="ON" offLabel="OFF" />;
}

RichTextEditor now supports mentions:

TransferList now supports items grouping:

Other changes

  • New use-element-size hook – subscribe to element width and height with ResizeObserver, simpler alternative to use-resize-observer
  • Select component now has an option to enable active item deselection when user clicks on active item
  • Skeleton component now supports animations disabling
  • Alert, Tooltip and Notification components now support radius prop
  • Alert component now supports 3 variants: filled, light and outline
  • Center component is now polymorphic, it supports component prop
  • Grid component now exposes Col component as Grid.Col
  • Progress and RingProgress components now support setting colors with css color values instead of allowing only values from theme.colors
  • Modal component now has an option to disable closing when escape key is pressed with closeOnEscape={false}
  • @mantine/core package now exports MantineProviderProps type
  • @mantine/hooks package now exports UseForm type

3.4.0 - 3.5.0 bug fixes

  • Fix incorrect click outside events handling in Modal and Drawer components
  • Fix incorrect max-width calculated for Group with falsy children
  • Fix incorrect animations applied to Collapse component with animateOpacity prop set to false
  • Fix HueSlider and AlphaSlider components breaking when used without size prop
  • Fix size prop not applied to Divider with label
  • Fix onChange function called with incorrect precision in NumberInput component
  • Fix Linux detected as undetermined is use-os hook
  • Fix incorrect MediaQuery component largerThan and smallerThan props handling (breaking bug fix)
  • Fix incorrect DateRangePicker types for strict TypeScript mode
  • Fix unexpected vertical scrollbars in TransferList component
  • Fix unexpected onChange function called onBlur in DatePicker component