@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 } from '@mantine/core';
function Demo() {
return (
<Card shadow="sm" p="lg" radius="md" withBorder>
<Card.Section component="a" href="https://mantine.dev/">
<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" mt="md" mb="xs">
<Text weight={500}>Norway Fjord Adventures</Text>
<Badge color="pink" variant="light">
On Sale
</Badge>
</Group>
<Text size="sm" color="dimmed">
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 mt="md" radius="md">
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