2.2.1

• Add multiline handling to unstyled Input variant
• Fix incorrect MultiSelect styles applied with unstyled variant

2.2.0

View release demos

New hooks and components

• MultiSelect component allows you to create searchable select with option to customize labels and options
• Mark component – mark tag with theme styles
• use-move hook handles move behavior over any element, you can use it to build custom sliders, color pickers, etc.
• use-fullscreen hook allows to work with Fullscreen API (built by @yoroshikun)
• use-idle hook allows to detect if user does nothing on the page (built by @achmurali)
• use-shallow-effect hook – a drop in replacement for useEffect with shallow comparison instead of referential (built by @achmurali)
• use-logger hook will log given values each time component renders (built by @yoroshikun)

Other changes

• use-scroll-lock hook now support state managing inside hook (built by @yoroshikun)
• Select, NativeSelect and Autocomplete components now support data as an array of strings, e.g., ['React', 'Angular', 'Vue'] (built by @cstrat)
• Menu component now has new design and animations, support for labels in menu body and behavior customization (focus trap and close on scroll)
• Button component now supports compact prop – it reduces height and horizontal padding if applied
• Modal component now supports shadow and padding customization via props
• Card component now has better spacing API with CardSection component instead of context styles for images and dividers
• Menu and RadioGroup components now works differently with Styles API – all styles and classNames should be added to root Menu/RadioGroup component instead of MenuItem/Radio
• @mantine/tag-picker package is deprecated in favor of Select and MultiSelect
• 4 new premade pop-* transitions were added to Transition component

2.1.5

Fix Popover and Tooltip components z-index during transitions #188

2.1.4

Fix TypeScript definitions to work with strict mode (strict null checks) in following hooks:

• use-uncontrolled
• use-intersection
• use-hash
• use-focus-trap

2.1.3

• Fix incorrect styles applied to Input component during validation
• Fix user-select property on Input placeholder

2.1.2

• Add clearable option support to DatePicker and DateRangePicker components
• Fix incorrect className passthrough in DatePicker and DateRangePicker components
• Add more correct way of handling grow prop in Group component – now when grow prop set to true items will always take equal amount of space and will never wrap to next line

2.1.1

• Fix preact guide to work with new preact-cli #142
• Fix issue when month cannot be changed after value was selected in DatePicker and DateRangePicker components
• Fix peer dependencies warnings for normalize-jss during @mantine/core installation

2.1.0

This release is almost fully built by Mantine community, lots of thanks for these awesome people who contributed these features!

use-hotkeys hook

Built by @steschwa

use-hotkeys hook allows you to subscribe to multiple hotkeys with single hook (document element) or function (any other element)

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

function Demo() {
  // ctrl + J and ⌘ + J to toggle color scheme
  // ctrl + K and ⌘ + K to search
  useHotkeys([
    ['mod+J', () => toggleColorScheme()],
    ['ctrl+K', () => search()],
    ['alt+mod+shift+X', () => rickRoll()],
  ]);

  return null;
}

use-intersection

Built by @kosciolek

use-intersection hook allows you to get information about intersection of given element with its scroll container or document.body

import { useIntersection } from '@mantine/hooks';
import { Paper, Text, useMantineTheme } from '@mantine/core';

function Demo() {
  const containerRef = useRef();
  const theme = useMantineTheme();
  const [ref, observer] = useIntersection({
    root: containerRef.current,
    threshold: 1,
  });

  return (
    <Paper elementRef={containerRef} style={{ overflowY: 'scroll', height: 300 }}>
      <div style={{ paddingTop: 260, paddingBottom: 280 }}>
        <Paper
          elementRef={ref}
          padding="xl"
          style={{
            backgroundColor: observer?.isIntersecting ? theme.colors.green[9] : theme.colors.red[9],
            minWidth: '50%',
          }}
        >
          <Text style={{ color: theme.white }} weight={700}>
            {observer?.isIntersecting ? 'Fully visible' : 'Obscured'}
          </Text>
        </Paper>
      </div>
    </Paper>
  );
}

use-hash

Built by @ghana7989

Get and set hash in url with use-hash hook:

import { useHash, randomId } from '@mantine/hooks';
import { Button } from '@mantine/core';

export function Demo() {
  const [hash, setHash] = useHash();
  return <Button onClick={() => setHash(randomId())}>Set hash to random string</Button>
}

Highlight component multiple substrings support

Built by @yoroshikun

Highlight component now supports:

• multiple substrings highlight
• highlighting of the same string multiple times

// Highlight all 3 "this" substrings
<Highlight highlight="this">Highlight This, definitely THIS and also this!</Highlight>

// Highlights both "this" and "that" substrings
<Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>

Tabs vertical orientation

Built by @wyze

Tabs component now supports vertical orientation:

Other changes and bug fixes

• Documentation now has search for quick props filters (built by @ghana7989)
• Input and all other components that use it (Select, Textarea, TextInput, Autocomplete, etc.) now supports headless variant without Mantine styles to help you create your own custom input styles with Styles API
• Checkbox component now supports animations
• Fixed bug in Select and Autocomplete components which made focus to shift to body element when inputs were blurred
• Fixed incorrect Slider marks background color

2.0.7

Fix Grid columns collapsing to next row when column has overflow content and grow option set to false

2.0.6

Value can no longer be changed in internal state of controlled components built with use-uncontrolled hook #157 (thanks to @Kukkimonsuta for reporting and fixing the issue)