3.5.3

• Fix #629
• Add option to specify target in Modal and Drawer components to render Portal in specified node

3.5.2

Fix incorrect position calculation for SegmentedControl when scale transform is applied to parent node (#585)

3.5.1

Fix incorrect focus management in DatePicker which resulted in closing dropdown when anything inside was clicked

3.5.0

View changelog with demos on Mantine docs website

New features

• NumberInput component now supports the following new features:
  • decimal separator configuration
  • value increment/decrement when user clicks and holds up/down controls
• Prism component now:
  • uses ScrollArea instead of native browser scrollbars
  • supports organizing code with tabs
• RingProgress component now supports round caps
• Stepper component now supports Stepper.Completed to display content after final step is completed
• Progress component now supports labels and animations
• Switch component now supports inner labels
• RichTextEditor now supports mentions
• TransferList now supports items grouping
• New use-element-size hook – subscribe to element width and height with ResizeObserver, simpler alternative to use-resize-observer
• Select component now has an option to enable active item deselection when user clicks on active item
• Skeleton component now supports animations disabling
• Alert, Tooltip and Notification components now support radius prop
• Alert component now supports 3 variants: filled, light and outline
• Center component is now polymorphic, it supports component prop
• Grid component now exposes Col component as Grid.Col
• Progress and RingProgress components now support setting colors with css color values instead of allowing only values from theme.colors
• Modal component now has an option to disable closing when escape key is pressed with closeOnEscape={false}
• @mantine/core package now exports MantineProviderProps type
• @mantine/hooks package now exports UseForm type

3.4.0 - 3.5.0 bug fixes

• Fix incorrect click outside events handling in Modal and Drawer components
• Fix incorrect max-width calculated for Group with falsy children
• Fix incorrect animations applied to Collapse component with animateOpacity prop set to false
• Fix HueSlider and AlphaSlider components breaking when used without size prop
• Fix size prop not applied to Divider with label
• Fix onChange function called with incorrect precision in NumberInput component
• Fix Linux detected as undetermined is use-os hook
• Fix incorrect MediaQuery component largerThan and smallerThan props handling (breaking bug fix)
• Fix incorrect DateRangePicker types for strict TypeScript mode
• Fix unexpected vertical scrollbars in TransferList component
• Fix unexpected onChange function called onBlur in DatePicker component

3.4.3

• Fix incorrect MediaQuery component largerThan and smallerThan props handling (breaking bug fix)
• Fix incorrect DateRangePicker types for strict TypeScript mode
• Fix unexpected scrollbars in TransferList component (#542)
• Fix onChange function called onBlur in DatePicker (#532)
• Set default delay on Menu component to 100ms

3.4.2

Add UseForm type exports from @mantine/hooks

3.4.1

• Fix incorrect @mantine/modals modal closing logic
• Fix onChange function called with incorrect precision in NumberInput component (#516)
• Fix Linux detected as undetermined is use-os hook (#519)

3.4.0

View changelog with demos on Mantine website

@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
• 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.
• Highligh component now supports changing highlight styles.
• Card.Section component now supports changing root element.
• 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.5

• Add injectStylesIntoStaticMarkup function to @mantine/ssr package for server side rendering with remix
• Fix incorrect initial month for DatePicker with allowed free input
• Fix incorrect use-form types

3.3.4

• Remove src folders of @mantine/dropzone, @mantine/styles, @mantine/next and @mantine/ssr packages from publishing to npm
• Fix use-form hook onChange type in getInputProps handler