Version 3.5.0

@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

Number input with a custom decimal separator

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 on hold

Step the value when clicking and holding the arrows

Step the value with interval function

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:

Size

Thickness

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:

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

Go back

Version 3.4.0 – Changelog

Up next

Version 3.6.0 – Changelog