Version 3.4.0

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

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:

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

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

Highlight component now supports changing highlight 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 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

Book classic tour now

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