7 8 0

import { FormDemos, UseDebouncedCallbackDemos, UseFetchDemos, UseIsFirstRenderDemos, UseMapDemos, UseOrientationDemos, UseSetDemos, UseThrottledCallbackDemos, UseThrottledStateDemos, UseThrottledValueDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog780);

Auto convert px to rem in .css files

Start from version 1.14.4 postcss-preset-mantine supports autoRem option that can be used to automatically convert all px values to rem units in .css files.

module.exports = {
  plugins: {
    'postcss-preset-mantine': {
      autoRem: true,
    },
  },
};

This option works similar to rem function. The following code:

.demo {
  font-size: 16px;

  @media (min-width: 320px) {
    font-size: 32px;
  }
}

Will be transformed to:

.demo {
  font-size: calc(1rem * var(--mantine-scale));

  @media (min-width: 320px) {
    font-size: calc(2rem * var(--mantine-scale));
  }
}

Note that autoRem converts only CSS properties, values in @media queries are not converted automatically – you still need to use em function to convert them.

autoRem option does not convert values in the following cases:

• Values in calc(), var(), clamp() and url() functions
• Values in content property
• Values that contain rgb(), rgba(), hsl(), hsla() colors

If you want to convert above values to rem units, use rem function manually.

Uncontrolled form mode

useForm hook now supports uncontrolled mode. Uncontrolled mode provides a significant performance improvement by reducing the number of re-renders and the amount of state updates almost to 0. Uncontrolled mode is now the recommended way to use the useForm hook for almost all use cases.

Example of uncontrolled form (form.values are not updated):

form.getValues

With uncontrolled mode, you can not access form.values as a state variable, instead, you can use form.getValues() method to get current form values at any time:

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

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { name: 'John Doe' },
});

form.getValues(); // { name: 'John Doe' }

form.setValues({ name: 'John Smith' });
form.getValues(); // { name: 'John Smith' }

form.getValues() always returns the latest form values, it is safe to use it after state updates:

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

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { name: 'John Doe' },
});

const handleNameChange = () => {
  form.setFieldValue('name', 'Test Name');

  // ❌ Do not use form.values to get the current form values
  // form.values has stale name value until next rerender in controlled mode
  // and is always outdated in uncontrolled mode
  console.log(form.values); // { name: 'John Doe' }

  // ✅ Use form.getValues to get the current form values
  // form.getValues always returns the latest form values
  console.log(form.getValues()); // { name: 'Test Name' }
};

form.watch

form.watch is an effect function that allows subscribing to changes of a specific form field. It accepts field path and a callback function that is called with new value, previous value, touched and dirty field states:

Customize Popover middlewares

You can now customize middlewares options in Popover component and in other components (Menu, Select, Combobox, etc.) based on Popover.

To customize Floating UI middlewares options, pass them as an object to the middlewares prop. For example, to change shift middleware padding to 20px use the following configuration:

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

function Demo() {
  return (
    <Popover
      middlewares={{ shift: { padding: 20 } }}
      position="bottom"
    >
    </Popover>
  );
}

use-fetch hook

New use-fetch hook:

use-map hook

New use-map hook:

use-set hook

New use-set hook:

use-debounced-callback hook

New use-debounced-callback hook:

use-throttled-state hook

New use-throttled-state hook:

use-throttled-value hook

New use-throttled-value hook:

use-throttled-callback hook

New use-throttled-callback hook:

use-orientation hook

New use-orientation hook:

use-is-first-render hook

New use-is-first-render hook:

Documentation updates

• New uncontrolled form guide
• onValuesChange documentation has been added
• A new demo has been added to tiptap that shows how to customize typography styles
• A new guide has been added to customize Popover middlewares

Other changes

• NumberInput now supports withKeyboardEvents={false} to disable up/down arrow keys handling
• Popover shift middleware now has default padding of 5px to offset dropdown near the edge of the viewport