mantine

• Add more direct way to apply styles to ranges in RangeCalendar and DateRangePicker components
• Fix incorrect TransferList controls border-radius

• Fix incorrect width of main element in AppShell component when it has children with margins (#637)
• Remove unexpected console.log from Modal component

• Fix #629
• Add option to specify target in Modal and Drawer components to render Portal in specified node

Fix incorrect position calculation for SegmentedControl when scale transform is applied to parent node (#585)

Fix incorrect focus management in DatePicker which resulted in closing dropdown when anything inside was clicked

View changelog with demos on Mantine docs website

New features

• NumberInput component now supports the following new features:
  • decimal separator configuration
  • value increment/decrement when user clicks and holds up/down controls
• Prism component now:
  • uses ScrollArea instead of native browser scrollbars
  • supports organizing code with tabs
• RingProgress component now supports round caps
• Stepper component now supports Stepper.Completed to display content after final step is completed
• Progress component now supports labels and animations
• Switch component now supports inner labels
• RichTextEditor now supports mentions
• TransferList now supports items grouping
• 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

• Fix incorrect MediaQuery component largerThan and smallerThan props handling (breaking bug fix)
• Fix incorrect DateRangePicker types for strict TypeScript mode
• Fix unexpected scrollbars in TransferList component (#542)
• Fix onChange function called onBlur in DatePicker (#532)
• Set default delay on Menu component to 100ms

Add UseForm type exports from @mantine/hooks

• Fix incorrect @mantine/modals modal closing logic
• Fix onChange function called with incorrect precision in NumberInput component (#516)
• Fix Linux detected as undetermined is use-os hook (#519)

View changelog with demos on Mantine website

@mantine/dates improvements

Calendar component was rebuilt to improved date picking experience.
Now user can change level by clicking label between next and previous controls:

This change is applied to all components that use Calendar: DatePicker, DateRangePicker and RangeCalendar.
There are several breaking changes associated with this improvement:

• All @mantine/dates components that use Calendar no longer support withSelect and yearsRange props
• Styles API names were changed to include new calendar header

New hooks

• use-page-leave hook calls given function when mouse leaves page
• use-input-state hook lets you handle state of native inputs (with event in onChange handler) and custom inputs (with value in onChange handler):

import { useInputState } from '@mantine/hooks';
import { TextInput, NumberInput } from '@mantine/core';

function Demo() {
  const [stringValue, setStringValue] = useInputState('');
  const [numberValue, setNumberValue] = useInputState(0);

  return (
    <>
      <input type="text" value={stringValue} onChange={setStringValue} />
      <TextInput value={stringValue} onChange={setStringValue} />
      <NumberInput value={numberValue} onChange={setNumberValue} />
    </>
  );
}

New features

• Select, MultiSelect and Autocomplete components now support forcing dropdown position.
• Highligh component now supports changing highlight styles.
• Card.Section component now supports changing root element.
• Popover component now supports width prop to set popover body width without Styles API
• Modal component now supports radius prop
• Modals manager now supports onClose prop for all modals, callback is called when modal is closed no matter the reason

• Add injectStylesIntoStaticMarkup function to @mantine/ssr package for server side rendering with remix
• Fix incorrect initial month for DatePicker with allowed free input
• Fix incorrect use-form types

• Remove src folders of @mantine/dropzone, @mantine/styles, @mantine/next and @mantine/ssr packages from publishing to npm
• Fix use-form hook onChange type in getInputProps handler

• Fix incorrect Drawer default z-index (#481)
• Fix incorrect value set on Select hidden input (#484)
• Fix issue when it was not possible to delete last character in controlled searchable Select
• Fix items filtering logic for searchable Select – now items state can be fully controlled with filter function
• Fix incorrect type of onChange function produced by use-form getInputProps function
• Fix Group component styles with column direction and apart position

• Fix Select, MultiSelect and Autocomplete dropdowns flip logic
• Fix Select, MultiSelect and Autocomplete dropdowns positioning when components are out of viewport
• Unmount Popper when reference element is removed from the dom (#458)

• Fix option to change individual tab color (#476)
• Remove unexpected scrollbar from TransferList component (#475)

View changelog with demos on Mantine website

ScrollArea component

• New ScrollArea component lets you easily manage custom scrollbars
  without any external libraries
• ScrollArea is now rendered as default dropdown element in Select, MultiSelect
  and TransferList components:

use-form hook improvements

• use-form hook now includes new getInputProps handler to simplify inputs:

import { TextInput, Checkbox, Button } from '@mantine/core';
import { useForm } from '@mantine/hooks';

export function Demo() {
  const form = useForm({
    initialValues: {
      email: '',
      termsOfService: false,
    },

    validationRules: {
      email: (value) => /^\S+@\S+$/.test(value),
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <TextInput
        required
        label="Email"
        placeholder="[email protected]"
        {...form.getInputProps('email')}
      />

      <Checkbox
        mt="md"
        label="I agree to sell my privacy to this corporation"
        {...form.getInputProps('termsOfService', { type: 'checkbox' })}
      />

      <Button type="submit">Submit</Button>
    </form>
  );
}

• Also use-form hook now supports optional error messages (hook will work as before if messages are not provided):

const form = useForm({
  initialValues: { name: '', age: 0 },
  validationRules: {
    name: (value) => value.trim().length >= 2,
    age: (value) => value > 21,
  },
  errorMessages: {
    name: 'Name must include at least 2 characters',
    age: 'You must be 21 or older to enter',
  },
});

form.validate();
form.errors;
// -> { name: 'Name must include at least 2 characters', age: 'You must be 21 or older to enter' }

form.setFieldValue('name', 'John');
form.validate();
form.errors;
// -> { name: null, age: 'You must be 21 or older to enter' }

New features and improvements

• Modal component can now be centered
• Accordion component now supports controlled state with useAccordionState hook
• Components that use Popper (Select, Menu, DatePicker, etc.) now support an option to disable rendering within portal
• Rich text editor now has an option to get editor ref, it can be used, for example, to focus/blur editor or to extend editor with plugins
• Components that use Popper now support rendering without Portal by setting withinPortal={false}. This option is useful when you want to use Select and other components inside Popover or other components that use use-click-outside.
• Accordion component now supports iconSize and offsetIcon props
• Menu component now support disabled items
• You can now change default locale that is used in all @mantine/dates components with dateLocale on MantineProvider

Bug fixes

• Collapse component now works correctly with transitionDuration={0}
• use-focus-trap hook is now less restrictive, it fixes issue with Popover and Menu scrolling page when being closed
• Fix click outside not working with Modal with outside overflow
• InputWrapper label now has display: inline-block styles, these styles will prevent input focusing when empty area above the input is clicked
• Select component now correctly handles up and down arrow keys with selected value
• Fix incorrect opened dropdown state in Select component when search results are empty and nothing found message is not provided
• Fix incorrect enter key handling in Autocomplete, Select, MultiSelect and DatePicker components which resulted in unexpected form submits
• Fix incorrect space key handling in Select and MultiSelect components
• Fix focus shifting to input when date is selected with keyboard in DateRangePicker

• Fix incorrectly calculated dynamic popper position
• Fix incorrect focus logic in DatePicker component
• Fix incorrect other field type on MantineProvider theme

• Add regex special characters escaping to Highlight component (#439)
• Fix Select dropdown appearing under Modal (#448)
• Fix incorrect max-width calculation in Group component (#447)
• Add zIndex prop support to Select, Autocomplete and MultiSelect components (#448)

Fix dark theme styles on TransferList component

View changelog with demos on Mantine website

Breaking changes

• Group component was migrated to flexbox gap, it no longer uses hack with negative margins, thus withGutter prop is not longer supported.
• Button component no longer supports link variant due to Styles API limitations, use Anchor component instead.
• @mantine/core package no longer exports getFontStyles, getFocusStyles and hexToRgba functions, replace them with theme functions: theme.fn.fontStyles(), theme.fn.focusStyles(), theme.fn.rgba().
• AppShell component was migrated to mobile-first approach, the way Navbar width is set was changed

Normalize.css and global styles on MantineProvider

MantineProvider now supports adding global styles and normalize.css
with props:

<MantineProvider withGlobalStyles withNormalizeCSS>
  <App />
</MantineProvider>

Functions on theme

Mantine theme now adds several functions (full list) that can help you
write styles in createStyles function, styles and sx props:

import { createStyles } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  myResponsiveText: {
    fontSize: theme.fontSizes.md,

    [theme.fn.smallerThan('sm')]: {
      fontSize: theme.fontSizes.sm,
    },

    [theme.fn.smallerThan(500)]: {
      fontSize: theme.fontSizes.xs,
    },
  },
}));

function MyResponsiveText() {
  const { classes } = useStyles();
  return <div className={classes.myResponsiveText}>My responsive text</div>;
}

Custom properties on theme

You can now add any amount of custom properties on Mantine theme using other key:

// Add any other properties on theme
<MantineProvider
  theme={{
    other: {
      fontFamilySecondary: 'Arial',
      lineHeights: [1.2, 1.4, 1.6, 1.8, 1.95],
      reduceMotion: true,
    },
  }}
>
  <App />
</MantineProvider>

// Then use your custom properties
<Box sx={(theme) => ({
  fontFamily: theme.other.fontFamilySecondary,
  lineHeight: theme.other.lineHeight[2],
  transitionDuration: theme.other.reduceMotion ? '0ms' : '200ms',
})} />

Mobile first approach

All layout components now support mobile first approach:

• SimpleGrid component now supports minWidth breakpoints (cols prop is no longer required):

<SimpleGrid
  breakpoints={[
    { minWidth: 'sm', cols: 2 },
    { minWidth: 'md', cols: 3 },
    { minWidth: 1200, cols: 4 },
  ]}
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</SimpleGrid>

• AppShell component was migrated to use mobile first approach (breaking change) – you will need to change how Navbar width is set:

// old way
<Navbar width={{ base: 400, breakpoints: { sm: '100%', lg: 500 } }} />

// new way (mobile first), base width defaults to 100%
<Navbar width={{ sm: 400, lg: 500 }} />

New @mantine/modals package

New @mantine/modals package is similar to @mantine/notification but for modals.
It includes modals manager that allows you to:

• create shared modals context storage
• show confirm modals
• handle multiple modals layers

import { Button, Text } from '@mantine/core';
import { useModals } from '@mantine/modals';

function Demo() {
  const modals = useModals();

  const openDeleteModal = () =>
    modals.openConfirmModal({
      title: 'Delete your profile',
      children: (
        <Text size="sm">
          Are you sure you want to delete your profile? This action is destructive and you will have
          to contact support to restore your data.
        </Text>
      ),
      labels: { confirm: 'Delete account', cancel: "No don't delete it" },
      confirmProps: { color: 'red' },
      onCancel: () => console.log('Cancel'),
      onConfirm: () => console.log('Confirmed'),
    });

  return <Button onClick={openDeleteModal} color="red">Delete account</Button>;
}

New components and hooks

New Stepper component:

New TransferList component:

With new use-os hook you can detect user os:

import { useOs } from '@mantine/hooks';

function Demo() {
  const os = useOs();
  return <>Your os is <b>{os}</b></>;
}

New use-set-state lets you work with state like in class components:

const [state, setState] = useSetState({ name: 'John', age: 35, job: 'Engineer' });

state; // -> { name: 'John', age: 35, job: 'Engineer' }

setState({ name: 'Jane' }); // -> { name: 'Jane', age: 35, job: 'Engineer' }
setState({ age: 25, job: 'Manager' }); // -> { name: 'Jane', age: 25, job: 'Manager' }
setState((current) => ({ age: current.age + 7 })); // -> { name: 'Jane', age: 32, job: 'Manager' }

Other changes

• 3 new guides were added: RTL Support, sx prop and Responsive styles
• All date picking components from @mantine/dates package now support first day of week customization (either sunday or monday)
• Tabs component pills variant was redesigned to be more neutral
• Button and ActionIcon component now have hover effects
• SegmentedControl component is now a generic – it accepts values as single type argument
• Autocomplete, Select and MultiSelect dropdowns are now rendered within Popper. This means that dropdown element is now aware of its position on screen and will change placement based on container scroll position. You should also experience less issues with z-index configuration.
• Col component now supports responsive offset props: offsetXs={5}, offsetMd={10}, etc.
• NumberInput component now supports empty value
• You can now set default date format on MantineProvider, it will be used to format DatePicker and DateRangePicker inputs values
• Checkbox component now supports default icons replacement
• use-list-state hook now supports pop and shift handlers
• use-idle hook now supports setting initial state
• use-merged-ref hook now exports mergeRefs function, it supports refs merging for dynamic lists
• use-focus-return hook now includes an option to disable automatic focus return and returns a function that can be used to return focus
• use-move hook now supports onScrubStart and onScrubEnd callbacks
• PasswordInput component now supports visibility toggle icon changing
• DatePicker component now supports free input
• MultiSelect component now supports limiting maximum selected values
• DatePicker, DateRangePicker, Calendar and RangeCalendar components now support multiple months rendering