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';
import { Text } from '@mantine/core';

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:

<Select />

Highlight component now supports changing highlight styles:

<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

<Card shadow="sm" padding="lg">
  <Card.Section component="a" href="https://mantine.dev" target="_blank">
    <Image src="./image" height={160} alt="Norway" />
  </Card.Section>

  {/* ... other card content */}
</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