mantine

Rollback Group component changes from 4.0.3 patch

• AppShell no longer parses props of Navbar and Header components, AppShell positioning logic was migraed to context and CSS variables, Navbar and Header components can be wrapped with other components
• useLocalStorageValue hook was renamed to useLocalStorage (old hook is still exported from @mantine/hooks)
• Fix keyboard navigation triggering wrong action when using grouping in @mantine/spotlight package (#995)
• Improve types for @mantine/modals package (#947)
• Add radius prop support to @mantine/spotlight (#959)
• Fix maxSelectedValues counter not being reset after MulstiSelect was cleared (#949)
• Fix Radio squishing when associated label is too large (#970)
• Improve edge cases handling while entering data in TimeInput component (#933)
• Fix fullWidth not working with month view in Calendar component (#957)

• Menu component was migrated to context, it no longer parses children – Menu.Item, Menu.Label components can now be wrapped with other components and stored in fragments
• List component was migrated to context – same new options are available for List.Item as for Menu.Item
• NextLink component was added to @mantine/next package to simplify Next.js Link usage with Menu

• Fix components props with undefined value from collistions with default props (#985)
• Add innerInput to Styles API in PasswordInput component (#963)
• Fix incorrect emotion cache handling for MantineProvider with inheritance
• Fix incorrect Modal and Drawer outside events handling

View changelog with demos on Mantine website

Mantine UI

Mantine UI is a new project with set of more than 120 responsive components built with Mantine.
All components support dark/light color scheme and Mantine theme customizations.
Mantine UI is free for everyone.

• Mantine UI website
• Mantine UI source code

Breaking changes

• @mantine/core package no longer exports CONTAINER_SIZES variable
• Prism now trims code by default, to disable that set <Prism trim={false} />
• useForm hook exported from @mantine/hooks package is now deprecated, it will be removed in one of the next releases.
• @mantine/eslint-config was migrated to eslint-config-mantine

Renamed props

Some props were renamed to make Mantine components more consistent:

• Dialog, Card, Paper, Header and Navbar
  • padding → p
• Container
  • padding → px
• Radio
  • children → label
• RadioGroup:
  • variant → orientation
• Tooltip:
  • delay → closeDelay
• Popover:
  • noClickOutside → closeOnClickOutside
  • noFocusTrap → trapFocus
  • noEscape → closeOnEscape
• Modal:
  • noFocusTrap → trapFocus
  • hideCloseButton → withCloseButton
• Drawer:
  • noFocusTrap → trapFocus
  • hideCloseButton → withCloseButton
  • noOverlay → withOverlay
  • noCloseOnEscape → closeOnEscape
  • noCloseOnClickOutside → closeOnClickOutside
  • noScrollLock → lockScroll

Default props on MantineProvider

Most of components now support default props on MantineProvider:

import { MantineProvider, Button } from '@mantine/core';

function App() {
  return (
    <MantineProvider
      defaultProps={{
        Button: { color: 'red' },
        Badge: { size: 'xl', radius: 0 },
        // ... default props for other components
      }}
    >
      {/* By default, Button will have red color */}
      <Button>Red button</Button>

      {/* Default color can be overwritten by props */}
      <Button color="blue">Blue button</Button>

      {/* By default, Badge will have xl size and 0 radius */}
      <Badge>Badge</Badge>
    </MantineProvider>
  );
}

Styles params on MantineProvider

You can now get component styles params in MantineProvider styles prop.
Each component that has Styles API now exports type that can be assigned to params
ComponentNameStylesParams, for example, ButtonStylesParams. This feature can be used to add more complex context styles that were not possible before:

import { MantineProvider, ButtonStylesParams } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      styles={{
        Button: (theme, params: ButtonStylesParams) => ({
          root: {
            // use params to calculate dynamic styles
            color: theme.colors[params.color || theme.primaryColor][1],
            padding: params.size === 'lg' ? '15px 45px' : undefined,
          },
        }),
      }}
    />
  );
}

Nested MantineProvider inheritance

Nested MantineProviders will now inherit theme override, emotionOptions, defaultProps and styles from
parent provider if inherit prop is set:

import { MantineProvider, Button } from '@mantine/core';

function App() {
  return (
    // Parent MantineProvider
    <MantineProvider
      theme={{ colorScheme: 'dark' }}
      styles={{ Button: { root: { fontWeight: 400 } } }}
      defaultProps={{ Badge: { variant: 'outline' } }}
      emotionOptions={{ key: 'custom-cache' }}
    >
      <Button>Affected only by parent provider</Button>

      {/*
        Child MantineProvider, inherits theme, emotionOptions, defaultProps and styles
        from parent MantineProvider. Other properties specified on child provider will override parent props.
        For example, theme override will be: { colorScheme: 'dark', primaryColor: 'red' }
      */}
      <MantineProvider theme={{ primaryColor: 'red' }} inherit>
        <Button>Affected only by child provider</Button>
      </MantineProvider>
    </MantineProvider>
  );
}

Default radius and focus ring configuration on theme

Mantine theme now includes two new properties: defaultRadius and focusRing.

defaultRadius property is used to set border-radius on most components by default:

import { MantineProvider, Button } from '@mantine/core';

function App() {
  return (
    <MantineProvider theme={{ defaultRadius: 0 }}>
      <Button>Zero radius button</Button>
      <Button radius="xl">xl radius button</Button>
    </MantineProvider>
  );
}

With focusRing property you can configure how focus ring is displayed:

• auto – display focus ring only when user navigates with keyboard (default)
• always – display focus ring when user navigates with keyboard and mouse
• never – focus ring is always hidden (not recommended)

import { MantineProvider, Button } from '@mantine/core';

function App() {
  return (
    <MantineProvider theme={{ focusRing: 'always' }}>
      <Button>Focus ring will be displayed when user clicks the button</Button>
    </MantineProvider>
  );
}

Padding props

All components now support setting following props to control padding:

• p – sets padding property on root element
• py – sets padding-top and padding-bottom properties on root element
• px – sets padding-right and padding-left properties on root element
• pt – sets padding-top property on root element
• pb – sets padding-bottom property on root element
• pl – sets padding-left property on root element
• pr – sets padding-right property on root element

import { Paper, Container } from '@mantine/core';

function Demo() {
  return (
    <>
      <Paper p={20} />
      <Container px="xl" />
    </>
  );
}

createStyles references changes

createStyles function now works differently with references.
Instead of generating unique identifiers with each getRef call it returns the same value for given argument:

// before 4.0.0
// getRef('icon') !== getRef('icon')
createStyles((theme, params, getRef) => {
  const icon = getRef('icon');
  return {
    icon: { ref: icon },
    parent: {
      [`& .${icon}`]: { color: 'red' },
    },
  };
});

// in 4.0.0
// getRef('icon') === getRef('icon')
createStyles((theme, params, getRef) => ({
  icon: { ref: getRef('icon') },
  parent: {
    [`& .${getRef('icon')}`]: { color: 'red' },
  },
}));

@mantine/form package

New @mantine/form package is an enhanced version of useForm hook that was previously exported from
@mantine/hooks package. @mantine/form introduces the following features:

• Improved fields validation logic
• Schema based validation with zod, yup or joi
• Array fields support

@mantine/spotlight package

@mantine/spotlight is a new package that lets you create
a command center for your application. It can be triggered with keyboard shortcut and programmatically
from anywhere in your application.

New components

• AspectRatio
• CheckboxGroup
• BackgroundImage

New features

• NumberInput component now supports formatter and parser props to customize how value is displayed in the input
• Tooltip component now supports openDelay
• Slider and RangeSlider components now support onChangeEnd prop
• Overlay component now supports blur
• New use-disclosure hook
• Text component now inherits color from parent element
• Input component now handles required prop differently to support native browser validation
• RichTextEditor now supports providing extra quill modules via modules prop
• DateRangePicker now displays first selected date
• RangeCalendar now calls onChange with first selected date
• SegmentedControl component now supports vertical orientation and disabled state
• ThemeIcon component now supports outline variant
• Text, Anchor and Highlight components now support underline prop
• Container component now supports sizes configuration with default props on MantineProvider
• All components now support negative margins for theme values with margin props (m, mx, my, mt, etc.): <Button mx="-xl">Negative margins</Button>
• onCancel callback in @mantine/modals is now also called when confirm modal is closed without confirmation
• New OptionalPortal component can be used to switch between rendering within Portal or as a regular child with withinPortal prop
• Modal and Drawer can now be used without Portal
• Title component now inherits color from parent element

3.6.0 – 4.0.0 bug fixes

• Fix incorrect white space handling in Progress component with labels
• Fix incorrect transform prop type in Text and associated components
• Add missing ref type in Navbar component
• Hidden inputs were removed from Select and MultiSelect components to prevent issues with popular form libraries
• Fix incorrect am/pm input handling in TimeInput for non qwerty keyboards
• Fix incorrect initial value in use-hash hook
• Fix incorrect events handling in use-hotkeys hook for input, textarea and select elements
• Improve TypeScript performance for polymorphic components (~ 2x increase in compilation time)
• Fix incorrect RichTextEditor white space handling in Firefox
• Add additional filtering to Group and MediaQuery children to avoid error when components are used with elements that do not support props (numbers, string, fragments)
• Fix incorrect modal size for multiple months in DatePicker and DateRangePicker components
• Add missing right and bottom padding to AppShell component
• Fix initialLevel prop not working in DateRangePicker component
• Add correct input mode to NumberInput – mobile devices will display correct keyboard now
• Fix findDomNode warning in @mantine/notifications while using strict react mode

• Cleanup typescript error for polymorphic components (#924)
• Fix hideOutsideDates and hideWeekdays not working in DatePicker and DateRangePicker
• Fix value text being cut off on the bottom in MultiSelect component
• Fix edit link tooltip z-index in RichTextEditor component

• Fix incorrect click outside events handling in Menu component in some cases (#899)
• Fix DatePicker being closed when level control is clicked (#920)

• Add option to configure modal z-index in DatePicker and DateRangePicker components
• Fix click outside events not working for DatePicker and DateRangePicker when used in Modal and Drawer
• Add missing required attribute to PasswordInput
• Fix disabled and clearable props combination in Select and MultiSelect components (#908)

Fix props passing to Tabs.Tab component

• Fix incorrect font-size applied to body element (#849)
• Fix onDropdownOpen callback called each time value when value changes (#858)
• Add option to override position in Portal component (#845)
• Fix Avatar src prop type to support null (#865)
• Fix datesLocale not being consumed from MantineProvider in DateRangePicker component (#868)
• Fix callback running twice when leaving scrollbar in use-page-leave hook (#891)

• Fix incorrect dropdown callbacks in DatePicker component (#848)
• Fix broken links on home page (#827)

• Add onDropdownOpen and onDropdownClose props support to DatePicker and DateRangePicker components
• Fix incorrect modal size for multiple months in DatePicker and DateRangePicker components
• Add missing right and bottom padding to AppShell component
• Fix initialLevel prop not working in DateRangePicker component
• Fix incorrect openRef type in Dropzone component
• Add option to overwrite autocomplete attribute on Select component
• Add correct input mode to NumberInput – mobile devices will display correct keyboard now

• Fix incorrect events handling in use-hot-keys hook for input, textarea and select elements (#792)
• Improve TypeScript performance for polymorphic components (#812)
• Fix incorrect value type in DatePicker component for strict TypeScript mode
• Fix error thrown y NumberInput for custom formatter (#799)

• Set RangeSlider transition duration to 0 by default to increase responsiveness
• Fix incorrect Image loading logic
• Fix typo PDF_MIME_TYPE typo in @mantine/dropzone package
• Add overlay selector to Modal component Styles API

• RichTextEditor: Fix incorrect white space handling in Firefox (#795)
• Add option to provide imageProps (props spread to the img element) in Avatar component (#780)
• Add parser/formatter support to NumberInput component (#790)
• Add underline prop support Text and Anchor components (#729)

• Add correct white space handling to Progress with labels (#758)
• Fix incorrect transform prop type in Text and associated components (Anchor, Highlight)
• Add missing ref type in Navbar component
• Inherit color by default in Text component
• Change required attribute logic in Input component to enable native browser validation
• Add option to provide external modules to RichTextEditor
• Remove hidden inputs from Select, MultiSelect, TimeInput, TimeRangeInput and DateRangePicker components to prevent errors in common form libraries (#760)

• Improve MantineTheme['colors'] type (#713)
• MantineColor and MantineThemeOther types now can be overwritten (#715)
• DateRangePicker now displays first selected date as input value (#734)
• RangeCalendar now calls onChange with first selected date (#734)
• Fix incorrect radius in TransferList component (#711)
• SegmentedControl component now supports vertical orientation (#712) and disabled state (#733)
• Fix am/pm input handling in TimeInput for non qwerty keyboards (#731)
• Fix incorrect NumberInputHandlers type in NumberInput component
• Fix Menu click outside events not triggering when used inside Modal
• Add missing radius passthrough to @mantine/notifications

• Fix incorrect Enter key handling in DatePicker (#706)
• Fix onChange not being called in TimeInput component (#698)

• Fix incorrect border styles on SegmentedControl
• Fix Popover click outside events not working in Modal and Drawer
• Add initial value to use-hash hook
• Fix Select not scrolling to items when items are not filtered
• Fix incorrect ...others props spreading to ActionIcon component

View changelog with demos on Mantine docs website

RTL support improvements

• Emotion options on MantineProvider now supports dynamic values. This feature allows to create dynamic direction changes.
• @mantine/ssr package now supports RTL with Next.js and any other ssr environment
• All components were tested to work correctly with stylis-plugin-rtl
• Mantine theme object now includes dir property which must be set to rtl to support all features

New hooks

• use-validated-state – useState with state validation and capturing last valid value
• use-event-listener – add event listener to an element using ref

Other changes

• TimeInput component now supports 12h format and empty initial state
• Table component now supports setting vertical and horizontal spacing
  ScrollArea component now supports subscribing to scroll position with onScrollPositionChange handler
• Button component now supports new subtle variant
• Grid.Col component no longer requires to set span, it is set to Grid columns by default
• Dropzone component now supports onReject callback which is called when user tries to drop files that do not meet size or mime type requirements
• Stepper component now supports allowStepSelect prop on Stepper.Step component which can be used to prevent user from reaching next steps before completing previous
• Accordion component now supports changing headings level with order prop
• Tabs component now supports getting tab keys in onTabChange handler
• Slider default label transition is now set to 0 to make component feel more responsive
• Portal now supports setting target with selector instead of element
• Modal and Drawer components now support target prop to specify Portal target container
• TransferList component now supports limit prop that can be used to improve performance of large data sets
• Modals manager now supports ...others props in modals.openContextModal handler
• Select and MultiSelect components now support new selectOnBlur prop
• Transition now supports exitDuration prop to specify unmount transition duration
• Timeline now supports reverseActive prop to reverse active items direction
• Menu now supports auto size
• use-move hook now supports rtl direction
• RichTextEditor now supports readonly state and code format
• All inputs components that are based on Input now support iconWidth prop

3.5.0 – 3.6.0 bug fixes

• Fix incorrect default shouldCreate logic in creatable Select
• Fix incorrect border-radius in TransferList component
• Add color style to UnstyledButton in dark theme
• Fix incorrect Menu body background color in dark theme
• Fix incorrect focus management in DatePicker which resulted in closing dropdown when anything inside was clicked
• Fix incorrect position calculation for SegmentedControl when scale transform is applied to parent node
• Fix Slider initial value not being clamped with min/max
• Fix incorrect value set in RangeSlider when user interacted with slider after value was force updated
• Fix possible permanent placeholder after hydration in Image component
• Fix jumping items in dropdown when item is selected in Select, MultiSelect and Autocomplete components, this fix is also applied to dropdowns with transitions
• Fix Slider and RangeSlider components thumbs and marks overflowing parent element when is the same as min/max
• Fix value not being clamped in DatePicker with allowed free input, now value is clamped on blur