5.2.7

What's Changed

• [@mantine/core] ScrollArea: Fix offsetScrollbarsprop not working for horizontal scrollbars
• [@mantine/core] Select: Fix Space key causing page to scroll when used to open dropdown
• [@mantine/hooks] use-focus-trap: Fix scrolling of animated elements (#1753)
• [@mantine/carousel] Remove margin from the last slide (#2336)

New Contributors

• @scarf005 made their first contribution in #2386
• @hotgen made their first contribution in #2267

Full Changelog: 5.2.6...5.2.7

5.2.6

What's Changed

• [@mantine/core] Drawer: Fix withOverlay={false} not letting click-through (#2351)
• [@mantine/core] PasswordInput: Fix inputWrapperOrder prop not working
• [@mantine/core] Modal: Fix content shifting in full screen modal (#2348)
• [@mantine/notifications] Remove unexpected message prop on notification root element (#2327)
• [@mantine/styles] Set prepend: true on default emotion cache to fix styles overriding issues

New Contributors

• @dhrjarun made their first contribution in #2347
• @julamb made their first contribution in #2362
• @italodeandra made their first contribution in #2351

Full Changelog: 5.2.5...5.2.6

5.2.5

What's Changed

• [@mantine/core] ActionIcon: Fix broken styles for loading state (#2281)
• [@mantine/dropzone] Fix Dropzone.Fullscreen not disappearing when mouse is moved slowly outside its wrapper (#2305)
• [@mantine/dates] TimeInput: Hide clear button when input is disabled (#2321)
• [@mantine/styles] Remove prepend: true from default emotion cache (#1734)
• [@mantine/core] Autocomplete: Fix options grouping with dynamic data (#2297)
• [@mantine/core] Fix disabled styles for gradient variants of Button and ActionIcon (#2277)
• [@mantine/core] Autocomplete: Fix outdated styles api selectors (#2269)
• [@mantine/core] Tabs: Add items wrapping to Tabs.List to avoid horizontal scroll
• [@mantine/carousel] Fix incorrect type in useAnimationOffsetEffect hook

New Contributors

• @Motonosuke made their first contribution in #2322
• @song7788q made their first contribution in #2321

Full Changelog: 5.2.4...5.2.5

5.2.4

What's Changed

• [@mantine/hooks] use-focus-return: Allow shouldReturnFocus to be dynamic (#770)
• [@mantine/core] Tooltip: Remove extra markup from disabled Tooltip.Floating (#2220)
• [@mantine/core] TypographyStylesProvider: Fix code tag styles when it is nested within pre tag (#2219)
• [@mantine/prism] Fix copy icon interfering with code (#2171)
• [@mantine/core] Remove hardcodded padding from Select, MultiSelect and Autocomplete dropdowns (#2108)
• [@mantine/dropzone] Change onDrop type from File to FileWithPath (#2250)
• [@mantine/core] Image: Change fit prop type to include all possible object-fit values (#2245)

New Contributors

• @tyeetale made their first contribution in #2212

Full Changelog: 5.2.3...5.2.4

5.2.3

• Fix broken Grid responsive styles introduced in 5.2.2
• Fix Grid responsive order prop not being applied

5.2.2

What's Changed

• [@mantine/hooks] use-focus-within: Fix incorrect useEffect dependencies (#2178)
• [@mantine/core] Grid: Fix offset and order responsive props (#2163)
• [@mantine/core] Title: Fix inline prop being ignored (#2182)
• [@mantine/carousel] Remove strict requirement for embla-carousel-react dependency (#2200)
• [@mantine/core] NumberInput: Fix onKeyDown and onKeyUp events not working

New Contributors

• @jvllmr made their first contribution in #2179
• @ALMaclaine made their first contribution in #2178
• @slk333 made their first contribution in #2189

Full Changelog: 5.2.0...5.2.2

5.2.0

View changelog with demos on documentation website

Styled components support

You can now use styled components syntax with @emotion/styled package:

• It is fully compatible with Mantine server side rendering (@mantine/next, @mantine/remix and gatsby-plugin-mantine packages)
• Mantine theme can now be used in component styles with no extra setup
• Components created with @emotion/styled will use Mantine's emotion cache

import styled from '@emotion/styled';

const StyledComponent = styled.div`
  text-align: center;
  background-color: ${({ theme }) =>
    theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0]};
  padding: 30px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${({ theme }) =>
      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]};
  }
`;

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

withAsterisk prop

All inputs that are based on Input and Input.Wrapper components now
support withAsterisk prop, it allows to display required asterisk without adding required attribute
to the input element. It is useful when you do not need browser validation in your forms but still want
to display the asterisk.

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

// Will display required asterisk and add `required` attribute to the input element
function RequiredDemo() {
  return <TextInput label="test-label" required />;
}

// Will only display the asterisk, `required` attribute is not added to the input element
function AsteriskDemo() {
  return <TextInput label="test-label" withAsterisk />;
}

Progress and RingProgress tooltips

Progress and RingProgress components
now support floating tooltips in sections:

import { RingProgress, Text, Group } from '@mantine/core';

function Demo() {
  return (
    <Group position="center">
      <RingProgress
        size={170}
        thickness={16}
        label={
          <Text size="xs" align="center" px="xs" sx={{ pointerEvents: 'none' }}>
            Hover sections to see tooltips
          </Text>
        }
        sections={[
          { value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' },
          { value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' },
          { value: 15, color: 'grape', tooltip: 'Other – 15 Gb' },
        ]}
      />
    </Group>
  );
}

Title component changes

Title now supports setting size different from order:

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

function Demo() {
  return (
    <>
      <Title order={3} size="h1">
        H3 heading with h1 font-size
      </Title>
      <Title size="h4">H1 heading with h4 font-size</Title>
      <Title size={12}>H1 heading with 12px size</Title>
    </>
  );
}

It also now supports all Text component props:

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

function Demo() {
  return (
    <>
      <Title order={3} weight={100} align="center">
        H3 heading aligned to center with 100 font-weight
      </Title>
      <Title order={4} underline color="blue.5">
        Underlined h4 heading with blue color
      </Title>
      <Title order={5} color="dimmed" italic>
        Italic dimmed h5 heading
      </Title>
    </>
  );
}

@mantine/form changes

New form.isValid handler performs form validation with given validation functions, rules object or schema, but unlike
form.validate it does not set form.errors and just returns boolean value that indicates whether form is valid.

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { name: '', age: 0 },
  validate: {
    name: (value) => (value.trim().length < 2 ? 'Too short' : null),
    age: (value) => (value < 18 ? 'Too young' : null),
  },
});

// get validation status of all values
form.isValid(); // -> false

// get validation status of field
form.isValid('name'); // -> false

form.resetDirty will now memoize form values and compare all next changes with stored values instead of initialValues:

import { useForm } from '@mantine/form';

const form = useForm({ initialValues: { a: 1 } });

form.setFieldValue('a', 2);
form.isDirty(); // -> true

form.setFieldValue('a', 1);
form.isDirty(); // -> false

form.setFieldValue('a', 3);
form.resetDirty();
form.isDirty(); // -> false

form.setFieldValue('a', 3);
form.isDirty(); // -> true

Form rules now receive rule path as third argument:

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { a: [{ b: 1 }, { b: 2 }] },
  validate: {
    a: {
      // path can be used to get field position relative to other fields
      b: (value, values, path) => (path === 'a.0.b' ? 'error' : null),
    },
  },
});

Custom prism themes

Prism component now supports custom themes with getPrismTheme prop:

import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
import { Prism } from '@mantine/prism';

const demoCode = `import { Button } from '@mantine/core';

function Demo() {
  return <Button>Hello</Button>
}`;

function Demo() {
  return (
    <Prism
      language="tsx"
      getPrismTheme={(_theme, colorScheme) =>
        colorScheme === 'light' ? duotoneLight : duotoneDark
      }
    >
      {demoCode}
    </Prism>
  );
}

Other changes

• ActionIcon component now support gradient variant
• Avatar component now supports variant prop
• Carousel component now supports height="100%"
• Grid.Col now supports order prop, it can be used to reorder columns when certain breakpoint is reached
• Tabs component now supports keepMounted prop. If it is set to false then components rendered inside Tabs.Panel will be unmounted when tab is not active.
• DatePicker and DateRangePicker components now have withinPortal prop set to false by default to match other components

New Contributors

• @brunocrosier made their first contribution in #1885
• @mdodell made their first contribution in #2143
• @rodrigopalheiro made their first contribution in #2149

Full Changelog: 5.1.7...5.2.0

5.1.7

What's Changed

• [@mantine/core] Add option to not call onChange in creatable Select and MultiSelect when onCreate function returns null or undefined (#2095)
• [@mantine/core] Fix incorrect Tooltip and Popover arrow styles for RTL (#2104)
• [@mantine/core] Modal: Fix incorrect overflow with fullScreen option (#2118)
• [@mantine/core] MultiSelect: Fix incorrect line-height styles (Windows Chrome and Edge) (#2154)
• [@mantine/core] MultiSelect: Fix incorrect values maxSelectedValues handling (#2115)
• [@mantine/core] Stepper: Fix incorrect styles for vertical lines when step content has large height (#2106)

Full Changelog: 5.1.6...5.1.7

5.1.6

What's Changed

• [@mantine/core] Modal: Fix incorrect scrollbar offset on Windows/Linux (#1721)
• [@mantine/core] Collapse: Fixed error thrown when using component with reduced motion (#2116)
• [@mantine/dates] Add missing yearLabelFormat, nextDecadeLabel, nextYearLabel, previousDecadeLabel and previousYearLabel props forwarding to Calendar component in DatePicker and DateRangePicker components
• [@mantine/core] AppShell: Fix incorect border styles in Navbar, Header, Footer and Aside components when withBorder is set to false

Full Changelog: 5.1.5...5.1.6

5.1.5

What's Changed

• [@mantine/hooks] use-viewport-size: Add missing size calculation to useEffect (#2085)
• [@mantine/carousel] Add dynamic slides handling (#2074)
• [@mantine/core] Fix keys errors in Select and MultiSelect components when items with group are mixed with items without groups (#2045)
• [@mantine/core] Fix incorrect creatable item styles calculation and issue with repeated key (#1662)
• [@mantine/hooks] use-interval: Ensure that only one running interval can be rutting at a time (#2093)
• [@mantine/spotlight] Fix closeOnTrigger with not working correctly with 'Enter' key (#2066)
• [@mantine/core] Button: Fix incorrect overlap between buttons in Button.Group for screens with low resolution (#1979)
• [@mantine/core] Allow usage of Toolip with Popover.Target, HoverCard.Target and Menu.Target (#1897)
• [@mantine/carousel] Add useAnimationOffsetEffect hook to fix issue with incorrect slides offset when Carousel is used in animated container, for example in Modal (#2041)
• [@mantine/core] NumberInput: Fix incorrect events handling for composite events (#1935)
• [@mantine/hooks] use-hotkeys: Add option to use getHotkeyHandler with .addEventListener events (#1952)
• [@mantine/styles] Fix incorrect theme.spacing calculation when it is overridden with 0 values (#1832)

New Contributors

• @morvud made their first contribution in #2066
• @huijiewei made their first contribution in #1935

Full Changelog: 5.1.4...5.1.5