Version 3.5.0

@mantine/prism changes

Prism component now uses ScrollArea instead of native browser 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>

<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)
  }
}

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

<NumberInput
  decimalSeparator=","
  label="Number input with a custom decimal separator"
  defaultValue={0.5}
  precision={2}
  step={0.5}
/>

<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:

<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:

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="Fist 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:

<Progress value={75} animate />

Switch component now supports inner labels:

<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