Update mantine monorepo to v7.9.0

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/core (source)	`7.6.1` -> `7.9.0`
@mantine/hooks (source)	`7.6.1` -> `7.9.0`
@mantine/tiptap (source)	`7.6.1` -> `7.9.0`

Release Notes

mantinedev/mantine (@mantine/core)

### [`v7.9.0`](https://togithub.com/mantinedev/mantine/compare/7.8.1...2183227fdb84560b2e02e4f697fd2fe611bf6f63) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.8.1...7.9.0) ### [`v7.8.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.8.1) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.8.0...7.8.1) ##### Notes Note that if you've already started using uncontrolled form mode introduced in 7.8.0, you need to include `form.key()` as described in the documentation. ##### What's Changed - `[@mantine/form]` Add `defaultValue` to `form.getInputProps` return type - `[@mantine/form]` Replace `key` spread with `form.getInputProps` with `form.key()` function - `[@mantine/dropzone]` Fix keyboard activation not working ([#6095](https://togithub.com/mantinedev/mantine/issues/6095)) - `[@mantine/dates]` DatePicker: Fix date range being stuck in incorrect state when controlled state changes to an empty value ([#6092](https://togithub.com/mantinedev/mantine/issues/6092)) - `[@mantine/core]` Radio: Allow `null` to be passed to Radio.Group value to clear the value ([#6102](https://togithub.com/mantinedev/mantine/issues/6102)) - `[@mantine/core]` NumberInput: Fix incorrect cursor position when backspace is pressed ([#6072](https://togithub.com/mantinedev/mantine/issues/6072)) - `[@mantine/core]` Fix incorrect empty string handling in style props ([#6078](https://togithub.com/mantinedev/mantine/issues/6078)) ##### New Contributors - [@kgarner7](https://togithub.com/kgarner7) made their first contribution in [https://github.com/mantinedev/mantine/pull/6064](https://togithub.com/mantinedev/mantine/pull/6064) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.8.0...7.8.1 ### [`v7.8.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.8.0) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.7.2...7.8.0) [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-8-0) ##### Auto convert px to rem in .css files Start from version `1.14.4` [postcss-preset-mantine](https://mantine.dev/styles/postcss-preset) supports `autoRem` option that can be used to automatically convert all `px` values to `rem` units in `.css` files. ```js module.exports = { plugins: { 'postcss-preset-mantine': { autoRem: true, }, }, }; ``` This option works similar to `rem` function. The following code: ```scss .demo { font-size: 16px; @media (min-width: 320px) { font-size: 32px; } } ``` Will be transformed to: ```scss .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](https://mantine.dev/form/use-form) hook now supports [uncontrolled mode](https://mantine.dev/form/uncontrolled). 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): ```tsx import { useState } from 'react'; import { Button, Code, Text, TextInput } from '@mantine/core'; import { hasLength, isEmail, useForm } from '@mantine/form'; function Demo() { const form = useForm({ mode: 'uncontrolled', initialValues: { name: '', email: '' }, validate: { name: hasLength({ min: 3 }, 'Must be at least 3 characters'), email: isEmail('Invalid email'), }, }); const [submittedValues, setSubmittedValues] = useState(null); return (

Form values: {JSON.stringify(form.values, null, 2)} Submitted values: {submittedValues ? JSON.stringify(submittedValues, null, 2) : '–'} ); } ``` ##### 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: ```tsx 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: ```tsx 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: ```tsx import { TextInput } from '@mantine/core'; import { useForm } from '@mantine/form'; function Demo() { const form = useForm({ mode: 'uncontrolled', initialValues: { name: '', email: '', }, }); form.watch('name', ({ previousValue, value, touched, dirty }) => { console.log({ previousValue, value, touched, dirty }); }); return (

); } ``` ##### Customize Popover middlewares You can now customize `middlewares` options in [Popover](https://mantine.dev/core/popover) component and in other components ([Menu](https://mantine.dev/core/menu), [Select](https://mantine.dev/core/select), [Combobox](https://mantine.dev/core/combobox), etc.) based on Popover. To customize [Floating UI](https://floating-ui.com/) middlewares options, pass them as an object to the `middlewares` prop. For example, to change [shift](https://floating-ui.com/docs/shift) middleware padding to `20px` use the following configuration: ```tsx import { Popover } from '@mantine/core'; function Demo() { return ( {/* Popover content */} ); } ``` ##### use-fetch hook New [use-fetch](https://mantine.dev/hooks/use-fetch) hook: ```tsx import { Box, Button, Code, Group, LoadingOverlay, Text } from '@mantine/core'; import { useFetch } from '@mantine/hooks'; interface Item { userId: number; id: number; title: string; completed: boolean; } function Demo() { const { data, loading, error, refetch, abort } = useFetch( 'https://jsonplaceholder.typicode.com/todos/' ); return (

{error && {error.message}} {data ? JSON.stringify(data.slice(0, 3), null, 2) : 'Fetching'}

); } ``` ##### use-map hook New [use-map](https://mantine.dev/hooks/use-map) hook: ```tsx import { IconPlus, IconTrash } from '@tabler/icons-react'; import { ActionIcon, Group, Table } from '@mantine/core'; import { useMap } from '@mantine/hooks'; function Demo() { const map = useMap([ ['/hooks/use-media-query', 4124], ['/hooks/use-clipboard', 8341], ['/hooks/use-fetch', 9001], ]); const rows = Array.from(map.entries()).map(([key, value]) => ( {key} {value} map.set(key, value + 1)} fw={500}> map.delete(key)} c="red"> )); return ( Page Views last month {rows}

); } ``` ##### use-set hook New [use-set](https://mantine.dev/hooks/use-set) hook: ```tsx import { useState } from 'react'; import { Code, Stack, TextInput } from '@mantine/core'; import { useSet } from '@mantine/hooks'; function Demo() { const [input, setInput] = useState(''); const scopes = useSet(['@mantine', '@mantine-tests', '@mantinex']); const isDuplicate = scopes.has(input.trim().toLowerCase()); const items = Array.from(scopes).map((scope) => {scope}); return ( <> setInput(event.currentTarget.value)} error={isDuplicate && 'Scope already exists'} onKeyDown={(event) => { if (event.nativeEvent.code === 'Enter' && !isDuplicate) { scopes.add(input.trim().toLowerCase()); setInput(''); } }} /> {items} ); } ``` ##### use-debounced-callback hook New [use-debounced-callback](https://mantine.dev/hooks/use-debounced-callback) hook: ```tsx import { useState } from 'react'; import { Loader, Text, TextInput } from '@mantine/core'; import { useDebouncedCallback } from '@mantine/hooks'; function getSearchResults(query: string): Promise<{ id: number; title: string }[]> { return new Promise((resolve) => { setTimeout(() => { resolve( query.trim() === '' ? [] : Array(5) .fill(0) .map((_, index) => ({ id: index, title: `${query} ${index + 1}` })) ); }, 1000); }); } function Demo() { const [search, setSearch] = useState(''); const [searchResults, setSearchResults] = useState<{ id: number; title: string }[]>([]); const [loading, setLoading] = useState(false); const handleSearch = useDebouncedCallback(async (query: string) => { setLoading(true); setSearchResults(await getSearchResults(query)); setLoading(false); }, 500); const handleChange = (event: React.ChangeEvent) => { setSearch(event.currentTarget.value); handleSearch(event.currentTarget.value); }; return ( <> } /> {searchResults.map((result) => ( {result.title} ))} ); } ``` ##### use-throttled-state hook New [use-throttled-state](https://mantine.dev/hooks/use-throttled-state) hook: ```tsx import { Text, TextInput } from '@mantine/core'; import { useThrottledState } from '@mantine/hooks'; function Demo() { const [throttledValue, setThrottledValue] = useThrottledState('', 1000); return ( <> setThrottledValue(event.currentTarget.value)} /> Throttled value: {throttledValue || '–'} ); } ``` ##### use-throttled-value hook New [use-throttled-value](https://mantine.dev/hooks/use-throttled-value) hook: ```tsx import { Text, TextInput } from '@mantine/core'; import { useThrottledValue } from '@mantine/hooks'; function Demo() { const [value, setValue] = useState(''); const throttledValue = useThrottledValue(value, 1000); return ( <> setValue(event.currentTarget.value)} /> Throttled value: {throttledValue || '–'} ); } ``` ##### use-throttled-callback hook New [use-throttled-callback](https://mantine.dev/hooks/use-throttled-callback) hook: ```tsx import { Text, TextInput } from '@mantine/core'; import { useThrottledCallback } from '@mantine/hooks'; function Demo() { const [throttledValue, setValue] = useState(''); const throttledSetValue = useThrottledCallback((value) => setValue(value), 1000); return ( <> throttledSetValue(event.currentTarget.value)} /> Throttled value: {throttledValue || '–'} ); } ``` ##### use-orientation hook New [use-orientation](https://mantine.dev/hooks/use-orientation) hook: ```tsx import { Code, Text } from '@mantine/core'; import { useOrientation } from '@mantine/hooks'; function Demo() { const { angle, type } = useOrientation(); return ( <> Angle: {angle} Type: {type} ); } ``` ##### use-is-first-render hook New [use-is-first-render](https://mantine.dev/hooks/use-is-first-render) hook: ```tsx import { useState } from 'react'; import { Button, Text } from '@mantine/core'; import { useIsFirstRender } from '@mantine/hooks'; function Demo() { const [counter, setCounter] = useState(0); const firstRender = useIsFirstRender(); return (

Is first render:{' '} {firstRender ? 'Yes' : 'No!'}

); } ``` ##### Documentation updates - New [uncontrolled form](https://mantine.dev/form/uncontrolled) guide - [onValuesChange](https://mantine.dev/form/values/#onvalueschange) documentation has been added - A new demo has been added to [tiptap](https://mantine.dev/x/tiptap/#typography-styles) that shows how to customize typography styles - A new guide has been added to customize [Popover](https://mantine.dev/core/popover/#customize-middleware-options) middlewares ##### Other changes - [NumberInput](https://mantine.dev/core/number-input) now supports `withKeyboardEvents={false}` to disable up/down arrow keys handling - [Popover](https://mantine.dev/core/popover) [shift](https://floating-ui.com/docs/shift) middleware now has default padding of 5px to offset dropdown near the edge of the viewport ### [`v7.7.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.2) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.7.1...7.7.2) ##### What's Changed - `[@mantine/core]` CloseButton: Add missing disabled styles ([#6044](https://togithub.com/mantinedev/mantine/issues/6044)) - `[@mantine/core]` AppShell: Fix incorrect app safe area handling by AppShell.Footer ([#6060](https://togithub.com/mantinedev/mantine/issues/6060)) - `[@mantine/core]` NumberInput: Fix cursor position changing when the value is incremented/decremented ([#6004](https://togithub.com/mantinedev/mantine/issues/6004)) - `[@mantine/core]` TagsInput: Fix incorrect IME keyboard input handling for `Backspace` key ([#6011](https://togithub.com/mantinedev/mantine/issues/6011)) - `[@mantine/charts]` Fix incorrect overflow styles of svg element ([#6040](https://togithub.com/mantinedev/mantine/issues/6040)) - `[@mantine/core]` PinInput: Add `rootRef` prop support ([#6032](https://togithub.com/mantinedev/mantine/issues/6032)) - `[@mantine/core]` ScrollArea: Fix `viewportProps.onScroll` not working ([#6055](https://togithub.com/mantinedev/mantine/issues/6055)) - `[@mantine/core]` ScrollArea: Fix incorrect inset position of the horizontal scrollbar ([#6059](https://togithub.com/mantinedev/mantine/issues/6059)) - `[@mantine/hooks]` use-local-storage: Fix infinite rerendering with object values ([#6022](https://togithub.com/mantinedev/mantine/issues/6022)) ##### New Contributors - [@zo-ly](https://togithub.com/zo-ly) made their first contribution in [https://github.com/mantinedev/mantine/pull/6055](https://togithub.com/mantinedev/mantine/pull/6055) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.7.1...7.7.2 ### [`v7.7.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.1) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.7.0...7.7.1) ##### What's Changed - `[@mantine/tiptap]` Improve toolbar items alignment for non-native elements ([#5993](https://togithub.com/mantinedev/mantine/issues/5993)) - `[@mantine/spotlight]` Fix incorrect down key handling when the spotlight is opened repeatedly ([#5995](https://togithub.com/mantinedev/mantine/issues/5995)) - `[@mantine/core]` Image: Fix ref not being assigned for fallback images ([#5989](https://togithub.com/mantinedev/mantine/issues/5989)) - `[@mantine/core]` PinInput: Fix incorrect focus logic ([#5963](https://togithub.com/mantinedev/mantine/issues/5963)) - `[@mantine/core]` Table: Fix `highlightOnHoverColor` prop not working - `[@mantine/core]` AppShell: Adjust footer position to include env(safe-area-inset-bottom) ([#5502](https://togithub.com/mantinedev/mantine/issues/5502)) - `[@mantine/core]` PinInput: Fix placeholder not being visible on the element that had focus when the component becomes disabled ([#5831](https://togithub.com/mantinedev/mantine/issues/5831)) - `[@mantine/dates]` Calendar: Fix double timezone shift ([#5916](https://togithub.com/mantinedev/mantine/issues/5916)) - `[@mantine/hooks]` use-local-storage: Fix value not being updated when key is changed ([#5910](https://togithub.com/mantinedev/mantine/issues/5910)) - `[@mantine/charts]` Fix incorrect charts legends height for multiline values ([#5923](https://togithub.com/mantinedev/mantine/issues/5923)) - `[@mantine/core]` NumberInput: Fix incorrect increment/decrement functions logic when `step` is a float value ([#5926](https://togithub.com/mantinedev/mantine/issues/5926)) - `[@mantine/core]` Combobox: Fix incorrect IME input handling ([#5935](https://togithub.com/mantinedev/mantine/issues/5935)) - `[@mantine/core]` Menu: Fix unexpected focus styles in the dropdown element in Firefox ([#5957](https://togithub.com/mantinedev/mantine/issues/5957)) - `[@mantine/core]` Fix incorrect `disabled` prop handling in TagsInput and MultiSelect ([#5959](https://togithub.com/mantinedev/mantine/issues/5959)) - `[@mantine/core]` Fix `renderOption` not working for grouped items in Combobox-based components ([#5952](https://togithub.com/mantinedev/mantine/issues/5952)) - `[@mantine/core]` AppShell: Fix error when used inside Suspense ([#5979](https://togithub.com/mantinedev/mantine/issues/5979)) - `[@mantine/core]` Update CSS selectors hashing algorithm to prevent collisions with other libraries ([#5968](https://togithub.com/mantinedev/mantine/issues/5968)) - `[@mantine/carousel]` Fix specificity issues of some selectors ([#5973](https://togithub.com/mantinedev/mantine/issues/5973)) - `[@mantine/core]` AppShell: Fix missing Aside offset in Header and Footer for `layout=alt` ([#5974](https://togithub.com/mantinedev/mantine/issues/5974)) ##### New Contributors - [@naughton](https://togithub.com/naughton) made their first contribution in [https://github.com/mantinedev/mantine/pull/5952](https://togithub.com/mantinedev/mantine/pull/5952) - [@wasamistake](https://togithub.com/wasamistake) made their first contribution in [https://github.com/mantinedev/mantine/pull/5971](https://togithub.com/mantinedev/mantine/pull/5971) - [@elecdeer](https://togithub.com/elecdeer) made their first contribution in [https://github.com/mantinedev/mantine/pull/5935](https://togithub.com/mantinedev/mantine/pull/5935) - [@israelins85](https://togithub.com/israelins85) made their first contribution in [https://github.com/mantinedev/mantine/pull/5910](https://togithub.com/mantinedev/mantine/pull/5910) - [@1g0rrr](https://togithub.com/1g0rrr) made their first contribution in [https://github.com/mantinedev/mantine/pull/5916](https://togithub.com/mantinedev/mantine/pull/5916) - [@joshua-webdev](https://togithub.com/joshua-webdev) made their first contribution in [https://github.com/mantinedev/mantine/pull/5963](https://togithub.com/mantinedev/mantine/pull/5963) - [@s-cork](https://togithub.com/s-cork) made their first contribution in [https://github.com/mantinedev/mantine/pull/5989](https://togithub.com/mantinedev/mantine/pull/5989) - [@xiaohanyu](https://togithub.com/xiaohanyu) made their first contribution in [https://github.com/mantinedev/mantine/pull/5993](https://togithub.com/mantinedev/mantine/pull/5993) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.7.0...7.7.1 ### [`v7.7.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.0) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.2...7.7.0) [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-7-0) ##### Virtual colors Virtual color is a special color which values should be different for light and dark color schemes. To define a virtual color, use `virtualColor` function which accepts an object with the following properties as a single argument: - `name` – color name, must be the same as the key in `theme.colors` object - `light` – a key of `theme.colors` object for light color scheme - `dark` – a key of `theme.colors` object for dark color scheme To see the demo in action, switch between light and dark color schemes (`Ctrl + J`): ```tsx import { createTheme, MantineProvider, virtualColor } from '@mantine/core'; const theme = createTheme({ colors: { primary: virtualColor({ name: 'primary', dark: 'pink', light: 'cyan', }), }, }); function App() { return {/* Your app here */}; } ``` ##### FloatingIndicator component New [FloatingIndicator](https://mantine.dev/core/floating-indicator) component: ```tsx import { useState } from 'react'; import { IconArrowDown, IconArrowDownLeft, IconArrowDownRight, IconArrowLeft, IconArrowRight, IconArrowUp, IconArrowUpLeft, IconArrowUpRight, IconCircle, } from '@tabler/icons-react'; import { FloatingIndicator, UnstyledButton } from '@mantine/core'; import classes from './Demo.module.css'; function Demo() { const [rootRef, setRootRef] = useState(null); const [controlsRefs, setControlsRefs] = useState>({}); const [active, setActive] = useState('center'); const setControlRef = (name: string) => (node: HTMLButtonElement) => { controlsRefs[name] = node; setControlsRefs(controlsRefs); }; return (

setActive('up-left')} ref={setControlRef('up-left')} mod={{ active: active === 'up-left' }} > setActive('up')} ref={setControlRef('up')} mod={{ active: active === 'up' }} > setActive('up-right')} ref={setControlRef('up-right')} mod={{ active: active === 'up-right' }} >

setActive('left')} ref={setControlRef('left')} mod={{ active: active === 'left' }} > setActive('center')} ref={setControlRef('center')} mod={{ active: active === 'center' }} > setActive('right')} ref={setControlRef('right')} mod={{ active: active === 'right' }} >

setActive('down-left')} ref={setControlRef('down-left')} mod={{ active: active === 'down-left' }} > setActive('down')} ref={setControlRef('down')} mod={{ active: active === 'down' }} > setActive('down-right')} ref={setControlRef('down-right')} mod={{ active: active === 'down-right' }} >

); } ``` ##### ScatterChart component New [ScatterChart](https://mantine.dev/charts/scatter-chart) component: ```tsx import { useState } from 'react'; import { IconArrowDown, IconArrowDownLeft, IconArrowDownRight, IconArrowLeft, IconArrowRight, IconArrowUp, IconArrowUpLeft, IconArrowUpRight, IconCircle, } from '@tabler/icons-react'; import { FloatingIndicator, UnstyledButton } from '@mantine/core'; import classes from './Demo.module.css'; function Demo() { const [rootRef, setRootRef] = useState(null); const [controlsRefs, setControlsRefs] = useState>({}); const [active, setActive] = useState('center'); const setControlRef = (name: string) => (node: HTMLButtonElement) => { controlsRefs[name] = node; setControlsRefs(controlsRefs); }; return (

); } ``` ##### colorsTuple function New `colorsTuple` function can be used to: - Use single color as the same color for all shades - Transform dynamic string arrays to Mantine color tuple (the array should still have 10 values) ```tsx import { colorsTuple, createTheme } from '@mantine/core'; const theme = createTheme({ colors: { custom: colorsTuple('#FFC0CB'), dynamic: colorsTuple(Array.from({ length: 10 }, (_, index) => '#FFC0CB')), }, }); ``` ##### use-mutation-observer hook New [useMutationObserver](https://mantine.dev/hooks/use-mutation-observer) hook: ```tsx import { useState } from 'react'; import { Kbd, Text } from '@mantine/core'; import { useMutationObserver } from '@mantine/hooks'; function Demo() { const [lastMutation, setLastMutation] = useState(''); useMutationObserver( (mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'dir') { mutation.target instanceof HTMLElement && setLastMutation(mutation.target.getAttribute('dir') || ''); } }); }, { attributes: true, attributeFilter: ['dir'], }, () => document.documentElement ); return ( <> Press Ctrl + Shift + L to change direction Direction was changed to: {lastMutation || 'Not changed yet'} ); } ``` ##### use-state-history hook New [useStateHistory](https://mantine.dev/hooks/use-state-history) hook: ```tsx import { Button, Code, Group, Text } from '@mantine/core'; import { useStateHistory } from '@mantine/hooks'; function Demo() { const [value, handlers, history] = useStateHistory(1); return ( <> Current value: {value} {JSON.stringify(history, null, 2)} ); } ``` ##### Axis labels [AreaChart](https://mantine.dev/charts/area-chart), [BarChart](https://mantine.dev/charts/bar-chart) and [LineChart](https://mantine.dev/charts/line-chart) components now support `xAxisLabel` and `yAxisLabel` props: ```tsx import { AreaChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( ); } ``` ##### Documentation updates - New section has been added to the [responsive guide](https://mantine.dev/styles/responsive#hidden-and-visible-from-as-classes) on how to use `mantine-hidden-from-{x}` and `mantine-visible-from-{x}` classes. - [Remix guide](https://mantine.dev/guides/remix) has been updated to use new Vite bundler - [Jest](https://mantine.dev/guides/jest) and [Vitest](https://mantine.dev/guides/vitest) guides configuration has been updated to include mocks for `window.HTMLElement.prototype.scrollIntoView` - [CSS variables](https://mantine.dev/styles/css-variables) documentation has been updated to include more information about typography and colors variables ##### Help center updates New articles added to the [help center](https://help.mantine.dev): - [Can I use SegmentedControl with empty value?](https://help.mantine.dev/q/segmented-control-no-value) - [Is there a comparison with other libraries?](https://help.mantine.dev/q/other-libs) - [Can I use Mantine with Vue/Svelte/Angular/etc.?](https://help.mantine.dev/q/vue-svelte-angular) - [How can I test Select/MultiSelect components?](https://help.mantine.dev/q/combobox-testing) ##### Other changes - [SegmentedControl](https://mantine.dev/core/segmented-control) indicator positioning logic has been migrated to [FloatingIndicator](https://mantine.dev/core/floating-indicator). It is now more performant and works better when used inside elements with `transform: scale()`. - New [use-mounted](https://mantine.dev/hooks/use-mounted) hook - [Sparkline](https://mantine.dev/charts/sparkline) now supports `connectNulls` and `areaProps` props - [Remix template](https://togithub.com/mantinedev/remix-template) has been updated to use new Vite bundler - [Select](https://mantine.dev/core/select), [MultiSelect](https://mantine.dev/core/multi-select), [Autocomplete](https://mantine.dev/core/autocomplete) and [TagsInput](https://mantine.dev/core/tags-input) components now support `scrollAreaProps` prop to pass props down to the [ScrollArea](https://mantine.dev/core/scroll-area) component in the dropdown - [Transition](https://mantine.dev/core/transition) component now supports 4 new transitions: `fade-up`, `fade-down`, `fade-left`, `fade-right` - Default [Modal](https://mantine.dev/core/modal) transition was changed to `fade-down`. This change resolves issues with [SegmentedControl](https://mantine.dev/core/segmented-control) indicator positioning when used inside modals. - You can now reference headings font sizes and line heights in `fz` and `lh` style props with `h1`, `h2`, `h3`, `h4`, `h5`, `h6` values ### [`v7.6.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.6.2) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.1...7.6.2) #### What's Changed - `[@mantine/hooks]` use-resize-observer: Fix types ([#5847](https://togithub.com/mantinedev/mantine/issues/5847)) - `[@mantine/hooks]` use-local-storage: Fix `undefined` being written to the local storage when `defaultValue` is not defined ([#5848](https://togithub.com/mantinedev/mantine/issues/5848)) - `[@mantine/core]` NumberInput: Fix `onValueChange` not being called in increment/decrement functions ([#5856](https://togithub.com/mantinedev/mantine/issues/5856)) - `[@mantine/core]` InputWrapper: Fix `className` specified in `labelProps`, `descriptionProps` and `errorProps` not being passed to the corresponding element ([#5862](https://togithub.com/mantinedev/mantine/issues/5862)) - `[@mantine/core]` Fix some functions not working correctly with TypeScript 5.4 ([#5891](https://togithub.com/mantinedev/mantine/issues/5891)) - `[@mantine/form]` Fix `onValuesChange` not using updated function ([#5901](https://togithub.com/mantinedev/mantine/issues/5901)) - `[@mantine/core]` Popover: Fix incorrect dropdown selectors ([#5903](https://togithub.com/mantinedev/mantine/issues/5903)) - `[@mantine/core]` Indicator: Fix processing animation in Safari ([#5908](https://togithub.com/mantinedev/mantine/issues/5908)) - `[@mantine/hooks]` use-headroom: Fix incorrect pinning logic when scrolling up ([#5793](https://togithub.com/mantinedev/mantine/issues/5793)) - `[@mantine/dropzone]` Add heic images format to default mime types ([#5867](https://togithub.com/mantinedev/mantine/issues/5867)) - `[@mantine/core]` Transition: Fix transitions resolving instantly in some cases ([#5873](https://togithub.com/mantinedev/mantine/issues/5873)) - `[@mantine/dropzone]` Add `inputProps` prop support to pass props down to the underlying hidden input element ([#5880](https://togithub.com/mantinedev/mantine/issues/5880)) - `[@mantine/core]` Timeline: Fix `autoContrast` being passed to the dom node as attribute ([#5890](https://togithub.com/mantinedev/mantine/issues/5890)) #### New Contributors - [@AdarshJais](https://togithub.com/AdarshJais) made their first contribution in [https://github.com/mantinedev/mantine/pull/5833](https://togithub.com/mantinedev/mantine/pull/5833) - [@Zachary-Kaye](https://togithub.com/Zachary-Kaye) made their first contribution in [https://github.com/mantinedev/mantine/pull/5890](https://togithub.com/mantinedev/mantine/pull/5890) - [@redachl](https://togithub.com/redachl) made their first contribution in [https://github.com/mantinedev/mantine/pull/5867](https://togithub.com/mantinedev/mantine/pull/5867) - [@timkrins](https://togithub.com/timkrins) made their first contribution in [https://github.com/mantinedev/mantine/pull/5860](https://togithub.com/mantinedev/mantine/pull/5860) - [@Alimobasheri](https://togithub.com/Alimobasheri) made their first contribution in [https://github.com/mantinedev/mantine/pull/5793](https://togithub.com/mantinedev/mantine/pull/5793) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.6.1...7.6.2

mantinedev/mantine (@mantine/hooks)

{error && {error.message}} {data ? JSON.stringify(data.slice(0, 3), null, 2) : 'Fetching'}

Is first render:{' '} {firstRender ? 'Yes' : 'No!'}

Configuration

📅 Schedule: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

[ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

Faith-UnFeigned / cis-web

Update mantine monorepo to v7.9.0 #66

Release Notes

Configuration