fix(deps): update mantine (major) #245

renovate · 2023-05-21T20:15:56Z

This PR contains the following updates:

Package	Change	Age	Confidence
@mantine/core (source)	`4.2.12` -> `8.3.5`
@mantine/hooks (source)	`4.2.12` -> `8.3.5`
@mantine/prism (source)	`4.2.12` -> `6.0.22`
gatsby-plugin-mantine (source)	`4.0.0` -> `5.0.0`

Release Notes

mantinedev/mantine (@mantine/core)

`v8.3.5`

Compare Source

What's Changed

[@mantine/code-highlight] Add option to load custom shiki themes (#8356)
[@mantine/form] Export more types (#8357)
[@mantine/hooks] use-local-storage: Fix value not resetting to the default value when value is cleared from the local storage (#8361)
[@mantine/core] Checkbox: Fix incorrect data-indeterminate attribute removal on state change (#8363)
[@mantine/core] Alert: Fix invalid aria-describedby and arialabelled-by if title or children props are not used (#8345)

New Contributors

@chlee1001 made their first contribution in #8363
@snelsi made their first contribution in #8361
@keshane made their first contribution in #8357
@onurcancamci made their first contribution in #8356

Full Changelog: mantinedev/mantine@8.3.4...8.3.5

`v8.3.4`

Compare Source

What's Changed

[@mantine/core] Select: Allow overriding rightSection with null (#8328)
[@mantine/dates] Calendar: Fix incorrect props types for hasNextLevel (#8344)
[@mantine/core] Transition: Fix some animations being blurry (#8070, #8324)
[@mantine/dates] TimePicker: Fix custom amPmLabels being truncated in input and dropdown (#8336)
[@mantine/dates] DatePicker: Add missing multiple handling to DatePickerPreset type (#8341)

Full Changelog: mantinedev/mantine@8.3.3...8.3.4

`v8.3.3`

Compare Source

What's Changed

[@mantine/core] Checkbox: Fix iconColor prop not working as intended in some cases (#8271)
[@mantine/spotlight] Add scrollareaProps to pass props down to the actions list wrapper (#8300)
[@mantine/core] Tabs: Fix aria-controls not being overriden by ...others (#8248)
[@mantine/dates] DateInput: Fix invalid date value crashing component (#8290)
[@mantine/hooks] use-did-update: Fix hook not working in react strict mode (#8306)
[@mantine/core] Popover: Fix excessive dropdown position recalculations (#8308)
[@mantine/core] AppShell: Fix performance issues on first render (#8287)

New Contributors

@macaroni10y made their first contribution in #8308
@barkinkaradeniz-tr made their first contribution in #8306
@sjroesink made their first contribution in #8290

Full Changelog: mantinedev/mantine@8.3.2...8.3.3

`v8.3.2`

Compare Source

What's Changed

[@mantine/dates] Fix getDayProps not including types for data-* attributes (#8275)
[@mantine/date] DateInput: Fix allowDeselect not allowing to clear the input value with Backspace key (#8229)
[@mantine/date] DateInput: Fix allowDeselect not allowing to clear the input value with Backspace key
[@mantine/charts] Heatmap: Fix months displaying as splitted even if splitMonths is not set
[@mantine/hooks] use-click-outside: Pass event object as an argument to the callback function (#8282)
[@mantine/core] NavLink: Fix passed onClick/onKeyDown preventing expand/collapse of child nodes (#8294)
[@mantine/hooks] use-window-scroll: Limit number of state updates with requestAnimationFrame (#8287)
[@mantine/dates] TimePicker: Fix page scrolling to the top on keyboard navigation (#8237)
[@mantine/core] Menu: Add missing onChange type to Menu.Sub (#8292)
[@mantine/core] List: Fix nested list items overflowing parent list container (#8269)
[@mantine/core] Input: Fix alignment of right section with clear button (#8254)
[@mantine/form] Fix nodenext resolutions (#8260)
[@mantine/spotlight] Improve group label encoding logic (#8264)

New Contributors

@ahmedsemih made their first contribution in #8266
@terrydkim made their first contribution in #8269
@samuelkarani made their first contribution in #8176
@narminmolina made their first contribution in #8291
@wo-o29 made their first contribution in #8287
@Redbird10 made their first contribution in #8294
@ThoDon made their first contribution in #8282

Full Changelog: mantinedev/mantine@8.3.1...8.3.2

`v8.3.1`

Compare Source

What's new

[@mantine/hooks] use-scroll-spy: Fix scroll events not being reassigned when scrollHost changes (#8251)
[@mantine/modals] Update updateModal to include types for confirm modal
[@mantine/core] Tabs: Allow overriding aria attributes with ...others
[@mantine/core] Select: Fix clear button overlaying selected option (#8249)
[@mantine/core] Combobox: Update focusTarget handler to correctly handle missing DOM node (#8185)
[@mantine/core] ColorPicker: Fix unexpected margin-top (#8247)
[@mantine/core] Allow specifying generic component in default props in the theme object (#8188)
[@mantine/form] Fix incorrect type of matchesField validator (#8201)
[@mantine/modals] Fix data-* attributes triggering type error (#8217)
[@mantine/dates] DateInput: Fix allowDeselect prop not working (#8229)
[@mantine/charts] Fix long tooltip names overflowing on the series color swatch in the tooltip (#8230)

`v8.3.0`: 🔥

Compare Source

View changelog with demos on mantine.dev website

MiniCalendar component

New MiniCalendar component:

import { useState } from 'react';
import { MiniCalendar } from '@&#8203;mantine/dates';

function Demo() {
  const [value, onChange] = useState<string | null>('2025-04-15');
  return <MiniCalendar value={value} onChange={onChange} numberOfDays={6} />;
}

Progress vertical orientation

Progress now supports vertical orientation:

import { Progress } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Group>
      <Progress value={80} orientation="vertical" h={200} />
      <Progress value={60} color="orange" size="xl" orientation="vertical" h={200} animated />

      <Progress.Root size="xl" autoContrast orientation="vertical" h={200}>
        <Progress.Section value={40} color="lime.4">
          <Progress.Label>Documents</Progress.Label>
        </Progress.Section>
        <Progress.Section value={20} color="yellow.4">
          <Progress.Label>Apps</Progress.Label>
        </Progress.Section>
        <Progress.Section value={20} color="cyan.7">
          <Progress.Label>Other</Progress.Label>
        </Progress.Section>
      </Progress.Root>
    </Group>
  );
}

Heatmap splitMonths

Heatmap now supports splitMonths prop to visually separate months with a spacer column and render only days that belong to each month in its columns.

import { Heatmap } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <Heatmap
      data={data}
      startDate="2024-02-16"
      endDate="2025-02-16"
      withMonthLabels
      splitMonths
    />
  );
}

Improved clearable prop handling

Select, MultiSelect, and other components with
clearable prop now allow displaying the clear button next to the right section:

import { Select } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Select
      label="Your favorite library"
      placeholder="Pick value"
      data={['React', 'Angular', 'Vue', 'Svelte']}
      defaultValue="React"
      clearable
    />
  );
}

Tiptap 3 support

@mantine/tiptap now supports Tiptap 3. It is
recommended to update all @tiptap/* packages to version 3.2.0 or later.

Your application might require some modifications related to Tiptap 3.
If you want to update your application to TipTap 3, follow
migration guide.

LLMs.txt

You can now use LLMs.txt file with Cursor and other IDEs.
The file is automatically updated with each release and includes
every demo and documentation page from mantine.dev. It is about 1.8mb.
You can find the latest version of LLMs.txt here
and further documentation here.

Other changes

MultiSelect now supports clearSearchOnChange prop to clear search input when an item is selected.
Reordering list items example now uses dnd-kit instead of @hello-pangea/dnd
TimePicker now supports reverseTimeControlsList prop to reverse the order of time controls in the dropdown. Use this option if you want the order of controls to match keyboard controls (up and down arrow) direction.
DirectionProvider now automatically subscribes to the dir attribute mutations of the root element (usually <html />) and updates internal state automatically.
Select and MultiSelect now retain references to selected options that are no longer present in data prop.
Active color swatch now has check icon in ColorPicker and ColorInput components.

`v8.2.8`

Compare Source

What's Changed

[@mantine/charts] LineChart: Fix gridColor prop being passed down to the root DOM node
[@mantine/carousel] Add data-type="next" and data-type="previous" to controls
[@mantine/hooks] use-scroll-spy: Add offset prop support (#8209)
[@mantine/core] ScrollArea: Fix incorrect horizontal size calculations in ScrollArea.Autosize (#8199)
[@mantine/core] JsonInput: Fix font-size not scaling with size prop (#8206)
[@mantine/hooks] Fix incorrect ESM exports for nodenext module resolution (#8211)
[@mantine/hooks] use-document-visibility: Fix initial document visibility state not being set (#8215)
[@mantine/dates] DateTimePicker: Fix onDropdownClose not working (#8212)

New Contributors

@k-utsumi made their first contribution in #8212
@sky0014 made their first contribution in #8215
@seanwu1105 made their first contribution in #8211
@nayounsang made their first contribution in #8199
@andreaspersson-sciber made their first contribution in #8209

Full Changelog: mantinedev/mantine@8.2.7...8.2.8

`v8.2.7`

Compare Source

[@mantine/hooks] use-media-query: Fix hook crashing inside iframe in Safari (#8189)
[@mantine/hooks] use-debounced-value: Make cancel a stable reference (#8181)
[@mantine/core] Combobox: Fix incorrect flipping logic (#8179, #8194)
[@mantine/core] InputBase: Fix broken padding in multiline inputs (#8177)

`v8.2.6`

Compare Source

`v8.2.5`

Compare Source

What's Changed

[@mantine/core] ScrollArea: Fix ScrollArea.Autosize not resizing when width of children changes (#8160)
[@mantine/core] ScrollArea: Fix scrollbars not resizing correctly with dynamic content (#8162)
[@mantine/core] TagsInput: Fix backspace key removing values with readOnly prop set (#8066)
[@mantine/core] NumberInput: Fix incorrect trailing zeros handling for decimal values (#8089)
[@mantine/core] Fix incorrect padding of multiline inputs (#8156)
[@mantine/hooks] use-list-state: Update types to allow state function initializer (#8157)

New Contributors

@Jannchie made their first contribution in #8156
@mrdjohnson made their first contribution in #8169
@davlatsultonov made their first contribution in #8168
@brofar made their first contribution in #8163
@monam2 made their first contribution in #8162
@pgrones made their first contribution in #8160

Full Changelog: mantinedev/mantine@8.2.4...8.2.5

`v8.2.4`

Compare Source

What's Changed

[@mantine/dates] DateInput: Fix disabled and clearable props collision (#8098)
[@mantine/modals] Fix incorrect confirmProps and cancelProps types (#8099)
[@mantine/dates] TimePicker: Fix controlled incorrect controlled value updates handling (#8108)
[@mantine/core] NumberInput: Fix incorrect value sanitization in onBlur for max value clamping (#8114)
[@mantine/core] Fix MultiSelect and TagsInput pills not being centered (#8145)
[@mantine/core] Table: Fix 1px gap on thead with sticky + withTableBorder combination (#8109)
[@mantine/core] Fix caret being invisible in some inputs (#8149)
[@mantine/tiptap] Fix controls props being overridden by default props (#8148)
[@mantine/code-highlight] Fix aria-label not being set on the copy button (#8130)
[@mantine/code-highlight] Fix incorrect overscroll behavior

New Contributors

@M1n01 made their first contribution in #8130
@vicke4 made their first contribution in #8148
@EdwardEB made their first contribution in #8149
@themm-s made their first contribution in #8109

Full Changelog: mantinedev/mantine@8.2.3...8.2.4

`v8.2.3`

Compare Source

What's Changed

[@mantine/dates] DatePickerInput: Fix incorrect handling of multiline values (#8116)
[@mantine/code-highlight] Fix gradient of expand button not being visible on mobile Safari
[@mantine/core] Combobox: Fix Combobox.Group not having aria-labelledby attribute
[@mantine/core] Switch: Fix tap highlight color not being disabled on touch devices
[@mantine/core] Remove transition with loader in ActionIcon and Button components if loading prop is not set to improve performance
[@mantine/core] Combobox: Fix unexpected closed dropdown position calculation reducing performance
[@mantine/charts] Fix tooltip not being aligned for some fonts
[@mantine/dates] DatePickerInput: Fix incorrect Styles API selectors
[@mantine/core] Table: Fix missing border when rowspan is set (#8137)
[@mantine/hooks] use-move: Fix error dsiplayed in console for touch devices (#8065)
[@mantine/dates] Fix incorrect props assigned to CalendarAriaLables props

New Contributors

@sublimemm made their first contribution in #8124
@TheMineWay made their first contribution in #8137

Full Changelog: mantinedev/mantine@8.2.2...8.2.3

`v8.2.2`

Compare Source

What's Changed

[@mantine/core] Menu: Fix incorrect overflow handling of submenu (#8123)
[@mantine/hooks] use-merged-ref: Fix incorrect handling of React 19 cleanup ref callback (#8118)
[@mantine/dates] TimePicker: Fix incorrect leading zero handling in 12h format (#8120)
[@mantine/dates] TimePicker: Fix min/max values not being enforced for 12h time format (#8107)
[@mantine/core] HoverCard: Improve outside clicks handling (#8097)
[@mantine/dates] Add month and year switching with keyboard to Calendar-based components (#7959)
[@mantine/core] ScrollArea: Add onOverflowChange prop support to ScrollArea.Autosize (#7972)
[@mantine/core] MultiSelect: Add clearSearchOnChange prop support (#8068)
[@mantine/core] Select: Fix caret being visible in Firefox when the component is read only (#8063)

New Contributors

@pradip-v2 made their first contribution in #8083
@MidnightDesign made their first contribution in #8071
@jobrk made their first contribution in #8068
@amansachdev made their first contribution in #7959
@idealconceptz made their first contribution in #8107
@seansps made their first contribution in #8118

Full Changelog: mantinedev/mantine@8.2.0...8.2.2

`v8.2.1`

Compare Source

`v8.2.0`: 🔥

Compare Source

View changelog with demos on mantine.dev website

Styles API attributes

You now can pass attributes to inner elements of all components that support Styles API with attributes prop.
For example, it can be used to add data attributes for testing purposes:

import { Button } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Button
      attributes={{
        root: { 'data-test-id': 'root' },
        label: { 'data-test-id': 'label' },
        inner: { 'data-test-id': 'inner' },
      }}
    >
      Button
    </Button>
  );
}

Container grid strategy

Container now supports strategy="grid" prop which enables more
features.

Differences from the default strategy="block":

Uses display: grid instead of display: block
Does not include default inline padding
Does not set max-width on the root element (uses grid template columns instead)

Features supported by strategy="grid":

Everything that is supported by strategy="block"
Children with data-breakout attribute take the entire width of the container's parent element
Children with data-container inside data-breakout have the same width as the main grid column

Example of using breakout feature:

import { Box, Container } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Container strategy="grid" size={500}>
      <Box bg="var(--mantine-color-indigo-light)" h={50}>
        Main content
      </Box>

      <Box data-breakout bg="var(--mantine-color-indigo-light)" mt="xs">
        <div>Breakout</div>

        <Box data-container bg="indigo" c="white" h={50}>
          <div>Container inside breakout</div>
        </Box>
      </Box>
    </Container>
  );
}

Tooltip target

New Tooltip target prop is an alternative to children. It accepts a string (selector),
an HTML element or a ref object with HTML element. Use target prop when you do
not render tooltip target as JSX element.

Example of using target prop with a string selector:

import { Button, Tooltip } from '@&#8203;mantine/core';

function Demo() {
  return (
    <>
      <Tooltip target="#hover-me" label="Tooltip over button" />
      <Button id="hover-me">Hover me to see tooltip</Button>
    </>
  );
}

HoverCard.Group

HoverCard now supports delay synchronization between multiple instances using HoverCard.Group component:

import { HoverCard, Button, Text, Group } from '@&#8203;mantine/core';

function Demo() {
  return (
    <HoverCard.Group openDelay={500} closeDelay={100}>
      <Group justify="center">
        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>First</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">First hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Second</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Second hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Third</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Third hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </HoverCard.Group>
  );
}

use-selection hook

New use-selection hook:

import { Checkbox, Table } from '@&#8203;mantine/core';
import { useSelection } from '@&#8203;mantine/hooks';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function Demo() {
  const positions = useMemo(() => elements.map((element) => element.position), [elements]);

  const [selection, handlers] = useSelection({
    data: positions,
    defaultSelection: [39, 56],
  });

  const rows = elements.map((element) => {
    const isSelected = selection.includes(element.position);
    return (
      <Table.Tr key={element.name} bg={isSelected ? 'var(--mantine-color-blue-light)' : undefined}>
        <Table.Td>
          <Checkbox
            aria-label="Select row"
            checked={isSelected}
            onChange={(event) => {
              if (event.target.checked) {
                handlers.select(element.position);
              } else {
                handlers.deselect(element.position);
              }
            }}
          />
        </Table.Td>
        <Table.Td>{element.position}</Table.Td>
        <Table.Td>{element.name}</Table.Td>
        <Table.Td>{element.symbol}</Table.Td>
        <Table.Td>{element.mass}</Table.Td>
      </Table.Tr>
    );
  });

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>
            <Checkbox
              aria-label="Select deselect all rows"
              indeterminate={handlers.isSomeSelected()}
              checked={handlers.isAllSelected()}
              onChange={() => {
                if (handlers.isAllSelected()) {
                  handlers.resetSelection();
                } else {
                  handlers.setSelection(elements.map((el) => el.position));
                }
              }}
            />
          </Table.Th>
          <Table.Th>Element position</Table.Th>
          <Table.Th>Element name</Table.Th>
          <Table.Th>Symbol</Table.Th>
          <Table.Th>Atomic mass</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}

autoSelectOnBlur prop

Select and Autocomplete components now support autoSelectOnBlur prop.
Use it to automatically select the highlighted option when the input loses focus.
To see this feature in action: select an option with up/down arrows, then click outside the input:

import { Select } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Select
      label="Your favorite library"
      placeholder="Pick value"
      autoSelectOnBlur
      searchable
      data={['React', 'Angular', 'Vue', 'Svelte']}
    />
  );
}

Source edit mode in RichTextEditor

RichTextEditor now supports source edit mode:

import { useEditor } from '@&#8203;tiptap/react';
import StarterKit from '@&#8203;tiptap/starter-kit';
import { RichTextEditor } from '@&#8203;mantine/tiptap';
import { useState } from 'react';

function Demo() {
  const [isSourceCodeModeActive, onSourceCodeTextSwitch] = useState(false)

  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>',
  });

  return (
    <RichTextEditor editor={editor} onSourceCodeTextSwitch={onSourceCodeTextSwitch}>
      <RichTextEditor.Toolbar>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.SourceCode icon={BoldIcon} />
        </RichTextEditor.ControlsGroup>
        {!isSourceCodeModeActive && (
          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Blockquote />
            <RichTextEditor.Bold />
            <RichTextEditor.Italic />
            <RichTextEditor.Underline />
            <RichTextEditor.Strikethrough />
            <RichTextEditor.ClearFormatting />
            <RichTextEditor.Highlight />
          </RichTextEditor.ControlsGroup>
        )}
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

Recharts 3 support

You can now use the latest Recharts 3 version with Mantine charts.
@mantine/charts package was validated to work with both Recharts 2 and Recharts 3 versions.
Note that, there might still be some minor issues with Recharts 3, you are welcome to report issues on GitHub.

Other changes

Accordion default chevronSize prop value was changed to auto to allow using dynamic icon sizes
Accordion now supports chevronIconSize prop to configure size of the default chevron icon
AffixPosition type is now exported from @mantine/core package
errorProps, labelProps and descriptionProps props of all inputs now have stricter types and better IDE autocomplete
TypographyStylesProvider was renamed to just Typography to simplify usage. TypographyStylesProvider name is still available but marked as deprecated – it will be removed in 9.0.0 release.
Slider and RangeSlider components now have separate documentation pages

`v8.1.3`

Compare Source

What's Changed

[@mantine/core] Container: Fix base responsive props value not being handled correctly (#8054)
[@mantine/form] Fix type errors with read only array types (#7950)
[@mantine/core] Fix incorrect disabled border color of Checkbox, Radio and Slider (#8053)
[@mantine/core] Combobox: Fix aria-expanded attribute not being assigned correctly to combobox target
[@mantine/core] Menu: Fix SubMenu having visual arrow offset when default props are set for Popover on theme (#8027)
[@mantine/form] Fix form.resetField not updating DOM with mode: 'uncontrolled' (#8050)
[@mantine/form] Add option to trigger watch callbacks when nested field value changes (#8026)
[@mantine/hooks] use-move: Fix React 18 compatibility (#8018)
[@mantine/dates] DateTimePicker: Add defaultDate prop support (#8023)
[@mantine/dates] DatePickerInput: Fix size="xs being slightly different from other inputs
[@mantine/dates] TimePicker: Fix dropdown being visible even when withDropdown={false} is set
[@mantine/core] Popover: Fix onClick not firing on the child of Popover.Target
[@mantine/spotlight] Fix incorrect query prop with empty string handling
[@mantine/core] Text: Fix autocomplete not working for size prop
[@mantine/hooks] use-debounced-callback: Fix incorrect leading behavior (#8021)
[@mantine/core] Collapse: Add keepMounted prop support (#8013)
[@mantine/date] TimePicker: Fix disabled and readOnly props not working (#8011)

New Contributors

@Retwix made their first contribution in #8032
@crehard made their first contribution in #8018
@erwijet made their first contribution in #8026
@evantrimboli made their first contribution in #7950

Full Changelog: mantinedev/mantine@8.1.2...8.1.3

`v8.1.2`

Compare Source

What's Changed

[@mantine/dates] DatePickerInput: Fix incorrect presets handling
[@mantine/dates] DatePickerInput: Fix onDropdownClose not being called in some cases
[@mantine/hooks] use-scroll-spy: Add scrollHost option support (#8003)
[@mantine/core] PinInput: Fix incorrect default size (#7990)
[@mantine/core] Fix bdrs prop not working (#7996)
[@mantine/core] Fix env prop not being available on HeadlessMantineProvider (#7992)
[@mantine/core] Fix placeholder overflowing MultiSelect and TagsInput components
[@mantine/core] Popover: fix autoUpdate triggering extra rerenders with keepMounted (#7983)

New Contributors

@chumba-wamba made their first contribution in #7992

Full Changelog: mantinedev/mantine@8.1.1...8.1.2

`v8.1.1`

Compare Source

What's Changed

[@mantine/hooks] use-set: Fix union method not working correctly (#7981)
[@mantine/core] Popover: Fix incorrect position handling (#7955, #7953)
[@mantine/dates] TimePicker: Fix incorrect empty string handling (#7927)
[@mantine/dates] DatePickerInput: Fix incorrect onChange type (#7943)
[@mantine/dates] TimePicker: Fix incorrect handling of min/max values in some cases (#7904)
[@mantine/hooks] use-hotkeys: Fix Escape key not being handled correctly in some browsers (#7928)
[@mantine/core] Tree: Fix detached DOM nodes memory leak (#7940)
[@mantine/hooks] use-debounced-callback: Add cancel method support (#7965)
[@mantine/dates] DatePicker: Fix incorrect value type for type="range" (#7937)
[@mantine/dates] DatePicker: Fix className and style props not working when presets prop is set (#7960)

New Contributors

@JeonJaewon made their first contribution in #7978
@KevinLu made their first contribution in #7942

Full Changelog: mantinedev/mantine@8.1.0...8.1.1

`v8.1.0`

Compare Source

View changelog with demos on mantine.dev website

DatePicker presets

DatePicker, DatePickerInput and DateTimePicker now support presets prop that allows you to add custom date presets. Presets are displayed next to the calendar:

import dayjs from 'dayjs';
import { DatePicker } from '@&#8203;mantine/dates';

function Demo() {
  const today = dayjs();

  return (
    <DatePicker
      type="range"
      presets={[
        {
          value: [today.subtract(2, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'Last two days',
        },
        {
          value: [today.subtract(7, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'Last 7 days',
        },
        {
          value: [today.startOf('month').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'This month',
        },
        {
          value: [
            today.subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
            today.subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),
          ],
          label: 'Last month',
        },
        {
          value: [
            today.subtract(1, 'year').startOf('year').format('YYYY-MM-DD'),
            today.subtract(1, 'year').endOf('year').format('YYYY-MM-DD'),
          ],
          label: 'Last year',
        },
      ]}
    />
  );
}

Calendar headerControlsOrder

Calendar and other components based on it now support headerControlsOrder prop.
You can use headerControlsOrder prop to change the order of header controls. The prop accepts an array of
'next' | 'previous' | 'level. Note that each control can be used only once in the array.

import { DatePicker } from '@&#8203;mantine/dates';

function Demo() {
  return (
    <DatePicker
      defaultDate="2022-02-01"
      headerControlsOrder={['level', 'previous', 'next']}
      styles={{
        calendarHeaderLevel: {
          justifyContent: 'flex-start',
          paddingInlineStart: 8,
        },
      }}
    />
  );
}

Popover middlewares improvements

Popover component now handles shift and flip Floating UI
differently. Starting from 8.1.0 version, the popover dropdown position is not
changed when the popover is opened. shift and flip middlewares are used only
once to calculate the initial position of the dropdown.

This change fixes incorrect flipping/shifting behavior when there is dynamic content
in the dropdown. For example, searchable Select and DatePickerInput without consistentWeeks option.

use-long-press hook

New use-long-press hook:

import { Button } from '@&#8203;mantine/core';
import { useLongPress } from '@&#8203;mantine/hooks';
import { notifications } from '@&#8203;mantine/notifications';

function Demo() {
  const handlers = useLongPress(() => notifications.show({ message: 'Long press triggered' }));
  return <Button {...handlers}>Press and hold</Button>;
}

Reference area support in charts

BarChart, AreaChart and LineChart
components now support reference area. Reference area is a rectangular area
that can be used to highlight a specific region of the chart:

import { ReferenceArea } from 'recharts';
import { BarChart } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="month"
      series={[
        { name: 'Smartphones', color: 'violet.6' },
        { name: 'Laptops', color: 'blue.6' },
        { name: 'Tablets', color: 'teal.6' },
      ]}
    >
      <ReferenceArea
        x1="January"
        x2="March"
        y1={0}
        y2={1250}
        yAxisId="left"
        fillOpacity={0.3}
        strokeOpacity={0.9}
        fill="var(--mantine-color-gray-4)"
        stroke="var(--mantine-color-gray-6)"
        strokeWidth={1}
        label={{
          value: 'Q1 sales threshold',
          position: 'insideTopRight',
          fontSize: 12,
          fill: 'var(--mantine-color-bright)',
        }}
      />
    </BarChart>
  );
}

use-form resetField handler

use-form now has a resetField method that resets field value to its initial value:

import { useForm } from '@&#8203;mantine/form'

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

form.resetField('name'); // resets name field to 'John Doe'

TagsInput isDuplicate prop

You can now use isDuplicate prop in TagsInput component
to control how duplicates are detected. It is a function that receives two arguments:
tag value and current tags. The function must return true if the value is duplicate.

Example of using isDuplicate to allow using the same value with different casing:

import { TagsInput } from '@&#8203;mantine/core';

function Demo() {
  return (
    <TagsInput
      label="Press Enter to submit a tag"
      placeholder="Enter tag"
      isDuplicate={(tagValue, currentTags) => currentTags.some((val) => val === tagValue)}
      defaultValue={['Tag', 'TAG', 'tag']}
    />
  );
}

Slider domain prop

Slider component now support domain prop that allows setting
the possible range of values independently of the min and max values:

import { Slider } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Slider
      domain={[0, 100]}
      min={10}
      max={90}
      defaultValue={25}
      marks={[
        { value: 10, label: 'min' },
        { value: 90, label: 'max' },
      ]}
    />
  );
}

RangeSlider pushOnOverlap prop

RangeSlider component now supports pushOnOverlap prop that defines
whether the slider should push the overlapping thumb when the user drags it.

import { RangeSlider } from '@&#8203;mantine/core';

function Demo() {
  return <RangeSlider pushOnOverlap={false} defaultValue={[25, 65]} minRange={20} />;
}

Hooks types exports

@mantine/hooks package now exports all types used in hooks options and return values.
For example, you can now import use-uncontrolled types like this:

import type { UseUncontrolledOptions, UseUncontrolledReturnValue } from '@&#8203;mantine/hooks';

Types exported from the library:

interface UseUncontrolledOptions<T> {
  /** Value for controlled state */
  value?: T;

  /** Initial value for uncontrolled state */
  defaultValue?: T;

  /** Final value for uncontrolled state when value and defaultValue are not provided */
  finalValue?: T;

  /** Controlled state onChange handler */
  onChange?: (value: T) => void;
}

type UseUncontrolledReturnValue<T> = [
  /** Current value */
  T,

  /** Handler to update the state, passes `value` and `payload` to `onChange` */
  (value: T, ...payload: any[]) => void,

  /** True if the state is controlled, false if uncontrolled */
  boolean,
];

zod v4 with use-form

You can now use zod v4 with use-form. To use zod 4:

Update mantine-form-zod-resolver to 1.2.1 or later version
Update zod to version 3.25.0 or later
Replace zod imports with zod/v4 (only if you have zod@3 in your package.json)
Replace zodResolver with zod4Resolver in your code
All other code remains the same

Example with zod v4:

import { z } from 'zod/v4';
import { zod4Resolver } from 'mantine-form-zod-resolver';

const schema = z.object({
  name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
  email: z.email({ message: 'Invalid email' }),
  age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
});

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: zod4Resolver(schema),
})

Documentation updates

use-debounced-callback documentation was updated to include new flush and flushOnUnmount features
Documentation about exported types was added to all applicable hooks

Other changes

All components now support bdrs style prop to set border radius.
DateTimePicker now supports defaultTimeValue prop
Tooltip now supports autoContrast prop.
Handlers returned from use-counter are now memoized.
Return value of use-event-listener, use-focus-within, use-focus-trap, use-hover, use-move, use-radial-move changed (React.RefObject -> React.RefCallback), required to fix incorrect ref handling in several cases. For more information, see the issue on GitHub – #7406.
Deprecated React.MutableRefObject type was replaced with React.RefObject in all packages to better support React 19 types.
positionDependencies prop is now deprecated in Tooltip, Popover and other components based on Popover. The prop is no longer required and can be safely removed. positionDependencies prop will be removed in 9.0 release.

`v8.0.2`

Compare Source

What's Changed

[@mantine/dates] DateTimePicker: Fix incorrect onChange value type
[@mantine/core] ScrollArea: Fix onBottomReached not being called when the container size has sub-pixel value
[@mantine/dates] TimePicker: Improve leading zero input handling
[@mantine/dates] TimePicker: Fix setting value to an empty string not reseting displayed time in some cases
[@mantine/form] Fix form.reorderItem reordering only the first item (#7892)
[@mantine/dates] DateInput: Fix selected month and year not being highlighted ([#7897](https://redirect.github.com/mantine

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), 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.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

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

This PR was generated by Mend Renovate. View the repository job log.

netlify · 2023-05-21T20:16:03Z

❌ Deploy Preview for operate-first-cloud failed.

Name	Link
🔨 Latest commit	`b6994c9`
🔍 Latest deploy log	https://app.netlify.com/sites/operate-first-cloud/deploys/6479ca645be95300085ff6ba

op1st-prow · 2023-05-21T20:16:08Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign schwesig for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

renovate · 2023-09-21T13:59:40Z

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

any of the package files in this branch needs updating, or
the branch becomes conflicted, or
you click the rebase/retry checkbox if found above, or
you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from @mantine/[email protected]
npm ERR! node_modules/@mantine/hooks
npm ERR!   @mantine/hooks@"7.9.0" from the root project
npm ERR!   peer @mantine/hooks@"7.9.0" from @mantine/[email protected]
npm ERR!   node_modules/@mantine/core
npm ERR!     @mantine/core@"7.9.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /tmp/renovate/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/renovate/cache/others/npm/_logs/2024-05-09T06_46_39_016Z-debug-0.log

renovate · 2024-05-09T12:10:09Z

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

any of the package files in this branch needs updating, or
the branch becomes conflicted, or
you click the rebase/retry checkbox if found above, or
you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.x || ^19.x" from @mantine/[email protected]
npm ERR! node_modules/@mantine/hooks
npm ERR!   @mantine/hooks@"8.3.5" from the root project
npm ERR!   peer @mantine/hooks@"8.3.5" from @mantine/[email protected]
npm ERR!   node_modules/@mantine/core
npm ERR!     @mantine/core@"8.3.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /runner/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /runner/cache/others/npm/_logs/2025-10-29T10_47_08_533Z-debug-0.log

op1st-prow bot added the size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. label May 21, 2023

Update mantine

b6994c9

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

renovate bot force-pushed the renovate/major-mantine branch from 1573ddf to b6994c9 Compare June 2, 2023 10:54

renovate bot changed the title ~~Update mantine (major)~~ fix(deps): update mantine (major) Nov 6, 2023

renovate bot changed the title ~~fix(deps): update mantine (major)~~ fix(deps): update dependency @mantine/prism to v6 Dec 8, 2024

renovate bot changed the title ~~fix(deps): update dependency @mantine/prism to v6~~ fix(deps): update mantine (major) Dec 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(deps): update mantine (major) #245

fix(deps): update mantine (major) #245

Uh oh!

renovate bot commented May 21, 2023 •

edited

Loading

Uh oh!

netlify bot commented May 21, 2023 •

edited

Loading

Uh oh!

op1st-prow bot commented May 21, 2023

Uh oh!

renovate bot commented Sep 21, 2023 •

edited

Loading

Uh oh!

renovate bot commented May 9, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

fix(deps): update mantine (major) #245

Are you sure you want to change the base?

fix(deps): update mantine (major) #245

Uh oh!

Conversation

renovate bot commented May 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

What's Changed

New Contributors

What's Changed

What's Changed

New Contributors

What's Changed

New Contributors

What's new

v8.3.0: 🔥

MiniCalendar component

Progress vertical orientation

Heatmap splitMonths

Improved clearable prop handling

Tiptap 3 support

LLMs.txt

Other changes

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

v8.2.0: 🔥

Styles API attributes

Container grid strategy

Tooltip target

HoverCard.Group

use-selection hook

autoSelectOnBlur prop

Source edit mode in RichTextEditor

Recharts 3 support

Other changes

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

DatePicker presets

Calendar headerControlsOrder

Popover middlewares improvements

use-long-press hook

Reference area support in charts

use-form resetField handler

TagsInput isDuplicate prop

Slider domain prop

RangeSlider pushOnOverlap prop

Hooks types exports

zod v4 with use-form

Documentation updates

Other changes

What's Changed

Configuration

Uh oh!

netlify bot commented May 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for operate-first-cloud failed.

Uh oh!

op1st-prow bot commented May 21, 2023

Uh oh!

renovate bot commented Sep 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠ Artifact update problem

File name: package-lock.json

Uh oh!

renovate bot commented May 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

renovate bot commented May 21, 2023 •

edited

Loading

`v8.3.0`: 🔥

`v8.2.0`: 🔥

netlify bot commented May 21, 2023 •

edited

Loading

renovate bot commented Sep 21, 2023 •

edited

Loading

renovate bot commented May 9, 2024 •

edited

Loading