v4.2.12

Version 3.4.0

Source code
Release on GitHub
Release date
December 13th, 2021

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

Mo
Tu
We
Th
Fr
Sa
Su

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:

Mouse left the page 0 times
import { useState } from 'react';
import { usePageLeave } from '@mantine/hooks';


function Demo() {
  const [leftsCount, setLeftsCount] = useState(0);
  usePageLeave(() => setLeftsCount((p) => p + 1));
  return <>Mouse left the page {leftsCount} times</>;
}

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:

DropdownPosition
import { Select } from '@mantine/core';


function Demo() {
  return <Select />;
}

Highlight component now supports changing highlight styles:

You can change styles of highlighted part if you do not like default styles
import { Highlight } from '@mantine/core';


function Demo() {
  return (
    <Highlight
      align="center"
      highlight={['highlighted', 'default']}
      highlightStyles={(theme) => ({
        backgroundImage: theme.fn.linearGradient(45, theme.colors.cyan[5], theme.colors.indigo[5]),
        fontWeight: 700,
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      })}
    >
      You can change styles of highlighted part if you do not like default styles
    </Highlight>
  );
}

Card.Section component now supports changing root element:

Norway
Norway Fjord Adventures
On Sale
With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway
import { Card, Image, Text, Badge, Button, Group, useMantineTheme } from '@mantine/core';


function Demo() {
  const theme = useMantineTheme();
  const secondaryColor = theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7];


  return (
    <Card shadow="sm" p="lg">
      <Card.Section component="a" href="https://mantine.dev" target="_blank">
        <Image
          src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=720&q=80"
          height={160}
          alt="Norway"
        />
      </Card.Section>


      <Group position="apart" style={{ marginBottom: 5, marginTop: theme.spacing.sm }}>
        <Text weight={500}>Norway Fjord Adventures</Text>
        <Badge color="pink" variant="light">
          On Sale
        </Badge>
      </Group>


      <Text size="sm" style={{ color: secondaryColor, lineHeight: 1.5 }}>
        With Fjord Tours you can explore more of the magical fjord landscapes with tours and
        activities on and around the fjords of Norway
      </Text>


      <Button variant="light" color="blue" fullWidth style={{ marginTop: 14 }}>
        Book classic tour now
      </Button>
    </Card>
  );
}

Other changes

  • 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

3.3.0 – 3.4.0 bug fixes

  • Fix missing support for margin props in UnstyledButton component
  • Fix incorrect initial month displayed for controlled free form DatePicker
  • Fix incorrect use-form getInputProps type
  • Fix incorrect Drawer default z-index property
  • Fix incorrect value set n hidden input in Select component
  • Fix issue when it was not possible to delete last character in controlled searchable Select component
  • Fix items filtering logic for searchable Select – now items state can be fully controlled with filter function
  • Fix Group component styles with column direction and apart position
  • Fix Select, MultiSelect and Autocomplete dropdowns positioning when components are out of viewport
  • Fix Popper component not being unmounted when reference element is removed from the dom
  • Fix scrollbars displaying under Modal overlay for modals with outside overflow
  • Remove unexpected scrollbar from TransferList, Select and MultiSelect components
Go back
Version 3.3.0 – Changelog
Up next
Version 3.5.0 – Changelog
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter