fix(deps): update mantine monorepo to v9

[renovate]

ℹ️ Note

This PR body was truncated due to platform limits.

This PR contains the following updates:

Package	Change	Age	Confidence
@mantine/core (source)	8.3.18 → 9.3.1
@mantine/dates (source)	8.3.18 → 9.3.1
@mantine/form (source)	8.3.18 → 9.3.1
@mantine/hooks (source)	8.3.18 → 9.3.1
@mantine/modals (source)	^8.3.18 → ^9.0.0
@mantine/notifications (source)	8.3.18 → 9.3.1

---

Release Notes

mantinedev/mantine (@​mantine/core)

v9.3.1

Compare Source

What's Changed

• [@mantine/notifications] Fix stale DOM nodes references not being cleaned up when notifications is closed (#​8955)
• [@mantine/dates] DateInput: Add presets support (#​8954)
• [@mantine/core] Collapse: Fix keepMounted prop not being set correctly (#​8949)
• [@mantine/core] Menu: Add controlled state support for Menu.Sub opened state
• [@mantine/schedule] Fix incorrect current time indicator position when time does not divide evenly with interval minutes in DayView and WeekView (#​8945)
• [@mantine/core] Popover: Fix context menu not working on iOS touch devices (#​8942)
• [@mantine/core] SegemntedControl: Fix incorrect indicator border-radius calculation (#​8904)
• [@mantine/core] PinInput: Fix incorrect placeholder text centering (#​8943)
• [@mantine/core] Tree: Fix arrow key navigation focusing hidden nodes when keepMounted is set (#​8939)
• [@mantine/core] MaskInput: Fix compatibility issues with uncontrolled use-form (#​8947)
• [@mantine/hooks] use-id: Fix id changing to new value with Activity (#​8925)

New Contributors

• @​spokodev made their first contribution in #​8925
• @​cyphercodes made their first contribution in #​8947
• @​KasperiP made their first contribution in #​8939

Full Changelog: mantinedev/mantine@9.3.0...9.3.1

v9.3.0: 🥵

Compare Source

View changelog with demos on mantine.dev website

Support Mantine development

You can now sponsor Mantine development with OpenCollective.
All funds are used to improve Mantine and create new features and components.

Pagination responsive layout

Pagination component now supports layout="responsive" prop that uses CSS container
queries to switch between page number buttons and a compact "Page X of Y" label based on the available width.

import { Box, Pagination } from '@​mantine/core';

function Demo() {
  return (
    <Box style={{ resize: 'horizontal', overflow: 'auto', minWidth: 200, maxWidth: '100%' }}>
      <Pagination total={20} layout="responsive" />
    </Box>
  );
}

Text textWrap prop

Text and Blockquote components now support
textWrap prop that controls the text-wrap CSS property. You can use it to balance line lengths
or prevent orphaned words in paragraphs.

import { Text } from '@​mantine/core';

function Demo() {
  return (
    <Text textWrap="wrap">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptatibus inventore iusto
      cum dolore molestiae perspiciatis! Totam repudiandae impedit maxime!
    </Text>
  );
}

use-splitter hook

New use-splitter hook provides resizable split-pane functionality
with pointer drag, keyboard navigation (WAI-ARIA Window Splitter pattern), collapsible panels
and min/max constraints:

import React from 'react';
import { DotsSixVerticalIcon } from '@​phosphor-icons/react';
import { useSplitter } from '@​mantine/hooks';

const colors = ['var(--mantine-color-blue-filled)', 'var(--mantine-color-teal-filled)'];
const labels = ['Panel A', 'Panel B'];

function Demo() {
  const splitter = useSplitter({
    panels: [
      { defaultSize: 50, min: 20 },
      { defaultSize: 50, min: 20 },
    ],
  });

  return (
    <div
      ref={splitter.ref}
      style={{
        display: 'flex',
        height: 200,
        borderRadius: 'var(--mantine-radius-md)',
        overflow: 'hidden',
      }}
    >
      {splitter.sizes.map((size, i) => (
        <React.Fragment key={i}>
          {i > 0 && (
            <div
              {...splitter.getHandleProps({ index: i - 1 })}
              style={{
                width: 4,
                flexShrink: 0,
                cursor: 'col-resize',
                touchAction: 'none',
                backgroundColor: 'var(--mantine-color-default-border)',
                position: 'relative',
              }}
            >
              <div
                style={{
                  position: 'absolute',
                  top: '50%',
                  left: '50%',
                  transform: 'translate(-50%, -50%)',
                  width: 8,
                  height: 40,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 'var(--mantine-radius-xs)',
                  backgroundColor: 'var(--mantine-color-default)',
                  border: '1px solid var(--mantine-color-default-border)',
                  color: 'var(--mantine-color-dimmed)',
                }}
              >
                <DotsSixVerticalIcon />
              </div>
            </div>
          )}
          <div
            style={{
              width: `${size}%`,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: colors[i],
              color: 'var(--mantine-color-white)',
              fontWeight: 500,
              whiteSpace: 'nowrap',
              gap: 2,
            }}
          >
            {labels[i]} ({Math.round(size)}%)
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

Splitter component

New Splitter component provides declarative resizable split pane layout
built on top of the use-splitter hook:

import { Splitter } from '@​mantine/core';

function Demo() {
  return (
    <Splitter orientation="horizontal" h={200}>
      <Splitter.Pane defaultSize={50} min={20} bg="blue">
        First pane
      </Splitter.Pane>
      <Splitter.Pane defaultSize={50} min={20} bg="teal">
        Second pane
      </Splitter.Pane>
    </Splitter>
  );
}

CodeHighlight line numbers

CodeHighlight component now supports withLineNumbers prop
to display line numbers alongside the code:

import { CodeHighlight } from '@​mantine/code-highlight';

const exampleCode = `...`;

function Demo() {
  return <CodeHighlight code={exampleCode} language="tsx" withLineNumbers />;
}

OverflowList collapseFrom

OverflowList component now supports collapseFrom prop that controls
from which direction items are collapsed when they overflow. Set collapseFrom="start" to
collapse items from the beginning – this is useful for breadcrumb-like patterns where
the last items should remain visible.

// OverflowListDemo.tsx
import { Badge, OverflowList } from '@​mantine/core';
import { data } from './data';

function Demo() {
  return (
    <div style={{ resize: 'horizontal', overflow: 'auto', maxWidth: '100%' }}>
      <OverflowList
        data={data}
        gap={4}
        collapseFrom="start"
        renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
        renderItem={(item, index) => <Badge key={index}>{item}</Badge>}
      />
    </div>
  );
}

// data.ts
export const data = [
  'Apple',
  'Banana',
  'Cherry',
  'Date',
  'Elderberry',
  'Fig',
  'Grape',
  'Honeydew',
  'Indian Fig',
  'Jackfruit',
  'Kiwi',
  'Lemon',
  'Mango',
  'Nectarine',
  'Orange',
  'Papaya',
];

Textarea bottomSection

Textarea component now supports bottomSection prop that renders content
inside the input border at the bottom. This is useful for displaying character counters
or other supplementary information:

import { useState } from 'react';
import { Text, Textarea } from '@​mantine/core';

function Demo() {
  const maxLength = 500;
  const [value, setValue] = useState('');

  return (
    <Textarea
      label="Your message"
      placeholder="Type your message..."
      autosize
      minRows={4}
      value={value}
      onChange={(event) => setValue(event.currentTarget.value.slice(0, maxLength))}
      bottomSection={
        <Text size="xs" c="dimmed">
          {value.length}/{maxLength} characters
        </Text>
      }
    />
  );
}

Combobox floatingHeight

Combobox, Select, MultiSelect,
Autocomplete and TagsInput now support
floatingHeight="viewport". When set, the dropdown grows to fill the available vertical
space in the viewport and the flip middleware is disabled – useful when working with
large option lists:

import { useState } from 'react';
import { Combobox, Input, InputBase, ScrollArea, useCombobox } from '@​mantine/core';

const countries = [
  'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Argentina', 'Armenia', 'Australia',
  'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium',
  'Belize', 'Benin', 'Bhutan', 'Bolivia', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso',
  'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Chad', 'Chile', 'China', 'Colombia',
  'Comoros', 'Costa Rica', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti',
  'Dominica', 'Ecuador', 'Egypt', 'El Salvador', 'Estonia', 'Eswatini', 'Ethiopia', 'Fiji',
  'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Grenada',
  'Guatemala', 'Guinea', 'Guyana', 'Haiti', 'Honduras', 'Hungary', 'Iceland', 'India', 'Indonesia',
  'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya',
  'Kiribati', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya',
  'Liechtenstein', 'Lithuania', 'Luxembourg', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives',
  'Mali', 'Malta', 'Mauritania', 'Mauritius', 'Mexico', 'Moldova', 'Monaco', 'Mongolia',
];

function Demo() {
  const combobox = useCombobox({
    onDropdownClose: () => combobox.resetSelectedOption(),
  });

  const [value, setValue] = useState<string | null>(null);

  const options = countries.map((item) => (
    <Combobox.Option value={item} key={item}>
      {item}
    </Combobox.Option>
  ));

  return (
    <Combobox
      store={combobox}
      floatingHeight="viewport"
      onOptionSubmit={(val) => {
        setValue(val);
        combobox.closeDropdown();
      }}
    >
      <Combobox.Target>
        <InputBase
          component="button"
          type="button"
          pointer
          rightSection={<Combobox.Chevron />}
          rightSectionPointerEvents="none"
          onClick={() => combobox.toggleDropdown()}
        >
          {value || <Input.Placeholder>Pick a country</Input.Placeholder>}
        </InputBase>
      </Combobox.Target>

      <Combobox.Dropdown>
        <Combobox.Options>
          <ScrollArea.Autosize mah="var(--combobox-floating-options-max-height)" type="scroll">
            {options}
          </ScrollArea.Autosize>
        </Combobox.Options>
      </Combobox.Dropdown>
    </Combobox>
  );
}

Menu submenu safe polygon

Menu submenus now use a safe polygon when moving the cursor from
the parent item to the dropdown. This allows you to move the cursor diagonally
across other menu items without accidentally closing the submenu.

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

function Demo() {
  return (
    <Menu width={200} position="bottom-start">
      <Menu.Target>
        <Button>Toggle Menu</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Item>Dashboard</Menu.Item>

        <Menu.Sub openDelay={120} closeDelay={150}>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Products</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>All products</Menu.Item>
            <Menu.Item>Categories</Menu.Item>
            <Menu.Item>Tags</Menu.Item>
            <Menu.Item>Attributes</Menu.Item>
            <Menu.Item>Shipping classes</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>

        <Menu.Item>Customers</Menu.Item>
        <Menu.Item>Reports</Menu.Item>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Orders</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>Open</Menu.Item>
            <Menu.Item>Completed</Menu.Item>
            <Menu.Item>Cancelled</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Settings</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>Profile</Menu.Item>
            <Menu.Item>Security</Menu.Item>
            <Menu.Item>Notifications</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>
      </Menu.Dropdown>
    </Menu>
  );
}

Menu search

Menu now supports Menu.Search – a search input that filters items
without taking focus away from the input. Use ArrowUp/ArrowDown to move the
highlight, Enter to trigger the highlighted item. Filtering logic is controlled
by the user: pass value/onChange and filter Menu.Item children based on the query.
The search value is cleared automatically after the menu close transition completes; set
clearSearchOnClose={false} to keep the query between openings.

import { useState } from 'react';
import { Button, Menu, Text } from '@​mantine/core';

const data = [
  'Dashboard',
  'Customers',
  'Products',
  'Orders',
  'Reports',
  'Settings',
  'Integrations',
  'Billing',
  'Team members',
  'Help center',
];

function Demo() {
  const [query, setQuery] = useState('');
  const items = data.filter((item) => item.toLowerCase().includes(query.toLowerCase().trim()));

  return (
    <Menu shadow="md" width={240}>
      <Menu.Target>
        <Button>Toggle menu</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Search
          value={query}
          onChange={(event) => setQuery(event.currentTarget.value)}
          placeholder="Search items"
        />

        {items.length > 0 ? (
          items.map((item) => <Menu.Item key={item}>{item}</Menu.Item>)
        ) : (
          <Text c="dimmed" size="sm" ta="center" py="xs">
            Nothing found
          </Text>
        )}
      </Menu.Dropdown>
    </Menu>
  );
}

Menu checkbox and radio items

Menu now supports Menu.CheckboxItem, Menu.RadioItem, and Menu.RadioGroup
for building option menus. Checkbox and radio items render an indicator slot at the start
and do not close the menu on click by default. The new alignItemsLabels prop on Menu
controls how indicator slot space is reserved so labels stay aligned when mixing plain
and indicator items.

import { useState } from 'react';
import { Button, Menu } from '@​mantine/core';

function Demo() {
  const [columns, setColumns] = useState({
    name: true,
    email: true,
    role: false,
    lastSeen: false,
  });

  const setColumn = (key: keyof typeof columns) => (checked: boolean) =>
    setColumns((current) => ({ ...current, [key]: checked }));

  return (
    <Menu shadow="md" width={220} closeOnItemClick={false}>
      <Menu.Target>
        <Button>Columns</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Label>Visible columns</Menu.Label>
        <Menu.CheckboxItem checked={columns.name} onChange={setColumn('name')}>
          Name
        </Menu.CheckboxItem>
        <Menu.CheckboxItem checked={columns.email} onChange={setColumn('email')}>
          Email
        </Menu.CheckboxItem>
        <Menu.CheckboxItem checked={columns.role} onChange={setColumn('role')}>
          Role
        </Menu.CheckboxItem>
        <Menu.CheckboxItem checked={columns.lastSeen} onChange={setColumn('lastSeen')}>
          Last seen
        </Menu.CheckboxItem>
      </Menu.Dropdown>
    </Menu>
  );
}

import { useState } from 'react';
import { Button, Menu } from '@​mantine/core';

function Demo() {
  const [sort, setSort] = useState('newest');

  return (
    <Menu shadow="md" width={220} closeOnItemClick={false}>
      <Menu.Target>
        <Button>Sort by</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Label>Order</Menu.Label>
        <Menu.RadioGroup value={sort} onChange={setSort}>
          <Menu.RadioItem value="newest">Newest first</Menu.RadioItem>
          <Menu.RadioItem value="oldest">Oldest first</Menu.RadioItem>
          <Menu.RadioItem value="popular">Most popular</Menu.RadioItem>
          <Menu.RadioItem value="commented">Most commented</Menu.RadioItem>
        </Menu.RadioGroup>
      </Menu.Dropdown>
    </Menu>
  );
}

Menu context menu

Menu now supports Menu.ContextMenu – a target replacement that opens the
dropdown at the cursor position when the wrapped element is right-clicked. The browser's
default context menu is suppressed, and right-clicking again repositions the dropdown to
the new coordinates.

import { Menu, Paper, Text } from '@​mantine/core';

function Demo() {
  return (
    <Menu shadow="md" width={200}>
      <Menu.ContextMenu>
        <Paper withBorder p="xl" radius="md" style={{ userSelect: 'none', textAlign: 'center' }}>
          <Text fw={500}>Right-click anywhere inside this area</Text>
          <Text c="dimmed" size="sm" mt={4}>
            The menu will open at the cursor position
          </Text>
        </Paper>
      </Menu.ContextMenu>

      <Menu.Dropdown>
        <Menu.Label>Actions</Menu.Label>
        <Menu.Item>Open</Menu.Item>
        <Menu.Item>Rename</Menu.Item>
        <Menu.Item>Duplicate</Menu.Item>
        <Menu.Divider />
        <Menu.Item color="red">Delete</Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}

Popover context menu

Popover now supports Popover.ContextMenu – a target replacement that
opens the dropdown at the cursor position on right-click. Unlike Menu.ContextMenu,
Popover.Dropdown can contain any content.

import { Avatar, Button, Group, Paper, Popover, Stack, Text } from '@​mantine/core';

function Demo() {
  return (
    <Popover width={260} shadow="md" position="bottom-start" offset={0}>
      <Popover.ContextMenu>
        <Paper withBorder p="xl" radius="md" style={{ userSelect: 'none', textAlign: 'center' }}>
          <Text fw={500}>Right-click anywhere inside this area</Text>
          <Text c="dimmed" size="sm" mt={4}>
            A popover will open at the cursor position
          </Text>
        </Paper>
      </Popover.ContextMenu>

      <Popover.Dropdown>
        <Stack gap="xs">
          <Group gap="sm" wrap="nowrap">
            <Avatar radius="xl" color="blue">JD</Avatar>
            <div>
              <Text size="sm" fw={500}>Jane Doe</Text>
              <Text size="xs" c="dimmed">[email protected]</Text>
            </div>
          </Group>
          <Group grow gap="xs">
            <Button size="xs" variant="default">Message</Button>
            <Button size="xs">Follow</Button>
          </Group>
        </Stack>
      </Popover.Dropdown>
    </Popover>
  );
}

Menu type-ahead navigation

When focus is inside Menu dropdown (and Menu.Search is not used), pressing a
printable character key now moves focus to the next item whose label starts with the typed
character. Pressing the same character cycles through matches, and multiple characters typed
within 500ms match items by full prefix.

import { Menu, Button, Text } from '@​mantine/core';
import { GearSixIcon, MagnifyingGlassIcon, ImageIcon, ChatCircleIcon, TrashIcon, IconArrowsLeftRight } from '@​phosphor-icons/react';

function Demo() {
  return (
    <Menu shadow="md" width={200}>
      <Menu.Target>
        <Button>Toggle menu</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Label>Application</Menu.Label>
        <Menu.Item leftSection={<GearSixIcon size={14} />}>
          Settings
        </Menu.Item>
        <Menu.Item leftSection={<ChatCircleIcon size={14} />}>
          Messages
        </Menu.Item>
        <Menu.Item leftSection={<ImageIcon size={14} />}>
          Gallery
        </Menu.Item>
        <Menu.Item
          leftSection={<MagnifyingGlassIcon size={14} />}
          rightSection={
            <Text size="xs" c="dimmed">
              ⌘K
            </Text>
          }
        >
          Search
        </Menu.Item>

        <Menu.Divider />

        <Menu.Label>Danger zone</Menu.Label>
        <Menu.Item
          leftSection={<IconArrowsLeftRight size={14} />}
        >
          Transfer my data
        </Menu.Item>
        <Menu.Item
          color="red"
          leftSection={<TrashIcon size={14} />}
        >
          Delete my account
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}

Highlight accent and case insensitive matching

Highlight component now supports caseInsensitive and accentInsensitive
props. Both are enabled by default – matching is case-insensitive and accent-insensitive,
so cafe matches café, CAFÉ, etc. Set either prop to false to opt out:

import { Highlight, Stack, Text } from '@​mantine/core';

function Demo() {
  return (
    <Stack gap="md">
      <div>
        <Text size="sm" fw={500} mb={5}>
          With accent-insensitive matching (default)
        </Text>
        <Highlight highlight="cafe">We visited café and cafe.</Highlight>
      </div>

      <div>
        <Text size="sm" fw={500} mb={5}>
          {'With accent-sensitive matching (accentInsensitive={false})'}
        </Text>
        <Highlight highlight="cafe" accentInsensitive={false}>
          We visited café and cafe.
        </Highlight>
      </div>
    </Stack>
  );
}

PieChart and DonutChart labelsType="name"

PieChart and DonutChart components now support
labelsType="name" to display segment names as labels instead of values or percentages:

// Demo.tsx
import { PieChart } from '@​mantine/charts';
import { data } from './data';

function Demo() {
  return <PieChart data={data} withLabelsLine labelsPosition="outside" labelsType="name" withLabels />;
}

// data.ts
export const data = [
  { name: 'USA', value: 400, color: 'indigo.6' },
  { name: 'India', value: 300, color: 'yellow.6' },
  { name: 'Japan', value: 300, color: 'teal.6' },
  { name: 'Other', value: 200, color: 'gray.6' },
];

Tooltip merge arrow position

Tooltip, Popover and other components based on Popover
now support arrowPosition="merge". When set, the arrow forms a right triangle merged
with the corresponding corner of the dropdown, and the border radius of that corner is removed.

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

function Demo() {
  return (
    <Tooltip arrowPosition="center" arrowOffset={10} arrowSize={4} arrowRadius={0} label="Tooltip" withArrow opened position="top-start">
      <Button>Button with tooltip</Button>
    </Tooltip>
  );
}

Popover preventPositionChangeWhenVisible default

Popover and all components built on top of it (Combobox,
Select, MultiSelect, Autocomplete,
TagsInput, Menu, HoverCard, Tooltip,
ColorInput, date pickers and others) now treat preventPositionChangeWhenVisible
as true by default.

With this behavior, the dropdown picks its side once on open – respecting the position prop
when there is enough room – and then stays on that side until the dropdown is closed. Scrolling,
resizing, or changes to the dropdown content (for example narrowing a searchable Select) no
longer cause the dropdown to flip between top and bottom while it is open. The next open recalculates
the side from scratch.

The flip is also more predictable: when neither side fits, the dropdown falls back to the
preferred position prop instead of the side with marginally more space.

To restore the previous behavior – where the dropdown could re-flip while open whenever
available space changed – pass preventPositionChangeWhenVisible={false}:

<Select
  comboboxProps={{ preventPositionChangeWhenVisible: false }}
  data={['React', 'Angular', 'Svelte']}
/>

Schedule getCurrentTime

DayView and WeekView components now support getCurrentTime
prop – a function that returns the current time used by the current time indicator. It is called on
every tick, so the indicator keeps updating automatically. Combined with the timezone-agnostic event
strings, this allows displaying the indicator in any timezone without re-implementing the update loop:

// Demo.tsx
import { useState } from 'react';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { Select, Stack } from '@​mantine/core';
import { DayView } from '@​mantine/schedule';
import { getEvents } from './data';

dayjs.extend(utc);
dayjs.extend(timezone);

const timezones = ['UTC', 'America/New_York', 'Europe/Berlin', 'Asia/Kolkata', 'Asia/Tokyo'];

function Demo() {
  const [tz, setTz] = useState('UTC');

  // getCurrentTime is called on every tick, so the indicator keeps updating
  const getCurrentTime = () => dayjs().tz(tz).format('YYYY-MM-DD HH:mm:ss');
  const currentDate = getCurrentTime().split(' ')[0];

  return (
    <Stack>
      <Select
        label="Display timezone"
        data={timezones}
        value={tz}
        onChange={(value) => setTz(value!)}
        allowDeselect={false}
      />

      <DayView
        date={currentDate}
        events={getEvents(currentDate)}
        getCurrentTime={getCurrentTime}
        startScrollTime={dayjs(getCurrentTime()).subtract(2, 'hour').format('HH:mm:ss')}
        withCurrentTimeIndicator
        withCurrentTimeBubble
      />
    </Stack>
  );
}

// data.ts
import dayjs from 'dayjs';
import { ScheduleEventData } from '@&#8203;mantine/schedule';

export function getEvents(date: string): ScheduleEventData[] {
  return [
    { id: 1, title: 'Morning standup', start: `${date} 09:00:00`, end: `${date} 09:30:00`, color: 'blue' },
    { id: 2, title: 'Team meeting', start: `${date} 12:00:00`, end: `${date} 13:00:00`, color: 'teal' },
    { id: 3, title: 'Code review', start: `${date} 16:00:00`, end: `${date} 17:00:00`, color: 'grape' },
  ];
}

v9.2.2

Compare Source

What's Changed

• [@mantine/core] Pill: Fix incorrect overflow handling (#​8929)
• [@mantine/dates] TimePicker: Fix incorrect am/pm switching in some cases in production builds (#​8911)
• [@mantine/hooks] use-mask: Fix undo keyboard shortcut not working (#​8927)
• [@mantine/hooks] use-mask: Fix cursor jumping on paste/cut (#​8926)
• [@mantine/core] Input: Fix sections misplaced when dir overrides parent direction (#​8905)
• [@mantine/core] Select: Fix clear button not showing for falsy primitive values (#​8901)
• [@mantine/core] Fix incorrect attributes type in Modal, Drawer and Spotlight
• [@mantine/tiptap] Fix controls throwing errors when editor is destroyed/not initialized (#​8900)
• [@mantine/core] Menu: Add option to pass safe area polygon options down to Menu.Sub (#​8908)

New Contributors

• @​chbaefront made their first contribution in #​8908
• @​krusche made their first contribution in #​8900
• @​hyeongjun6364 made their first contribution in #​8901
• @​Israadaassi1 made their first contribution in #​8921

Full Changelog: mantinedev/mantine@9.2.1...9.2.2

v9.2.1

Compare Source

What's Changed

• [@mantine/tiptap] Fix controls having stale state when built with react compiler (#​8725)
• [@mantine/charts] Fix highlighted are being stuck at the previously hovered chart legend section if mouse is moved quickly (#​8768)
• [@mantine/modals] Fix incorrect duplicate modals ids handling (#​8736)
• [@mantine/core] Table: Fix th borders being rendered transparent if sticky prop set (#​8778)
• [@mantine/core] Fix error id not being passed to aria-describedby in Checkbox, Radio and Switch components (#​8820)
• [@mantine/core] Add aria-valuetext support to Slider and RangeSlider (#​8871)
• [@mantine/schedule] MonthView: Improve multi-day events overlap rendering for maxed-out days (#​8874)
• [@mantine/core] Fix mergeMantineTheme mutated DEFAULT_THEME.headings (#​8875)
• [@mantine/hooks] use-debounced-value: Fix leading callback not being reset on timeout (#​8833)
• [@mantine/core] Highlight: Add accent insensitive option support (#​8890)
• [@mantine/form] Fix some handlers not being stable reference (#​8891)
• [@mantine/dropzone] Change useFsAccessApi to false by default to make Dropzone compatible with all current browsers (#​8876)
• [@mantine/schedule] Fix incorrect events positioning with intervalMinutes={60} (#​8887)
• [@mantine/core] PinInput: Fix keyboard shorcuts being blocked on numeric input type (#​8889)
• [@mantine/form] Fix default validators making form.validate return value async (#​8880)
• [@mantine/core] Menu: Add safe polygon support for sub menus (#​8888)
• [@mantine/core] ScrollArea: Fix Maximum update depth exceeded error
• [@mantine/core] TreeSelect: Fix focus to moving to input after clear button click

New Contributors

• @​oab24413gmai made their first contribution in #​8892
• @​sarioglu made their first contribution in #​8890
• @​noahsilas made their first contribution in #​8833
• @​chaitanya-bhagavan made their first contribution in #​8875
• @​liamdon made their first contribution in #​8874
• @​oozan made their first contribution in #​8820
• @​Pirulax made their first contribution in #​8736

Full Changelog: mantinedev/mantine@9.2.0...9.2.1

v9.2.0: 🔥

Compare Source

View changelog with demos on mantine.dev website

Support Mantine development

You can now sponsor Mantine development with OpenCollective.
All funds are used to improve Mantine and create new features and components.

TreeSelect component

New TreeSelect component allows picking one or more values from hierarchical tree data.
It supports three selection modes: single, multiple, and checkbox (with parent-child cascade):

import { TreeSelect } from '@​mantine/core';
import { data } from './data';

function Demo() {
  return (
    <TreeSelect
      label="Your favorite item"
      placeholder="Pick value"
      data={data}
    />
  );
}

Tree select Combobox examples

New Combobox examples showing how to build tree select components
from Combobox primitives with connecting lines, expand/collapse chevrons, and proper indentation:

• Tree select – basic single-value tree select
• Tree multi select – multi select with checkbox cascade
• Searchable tree select – tree select with search filtering
• Tree select with checkboxes – single select with expand-on-click
• Virtualized tree select – large tree (~500 nodes) with @​tanstack/react-virtual

Notifications swipe dismissal

@​mantine/notifications now supports dismissing notifications by dragging them
left or right, and with horizontal scroll swipe while hovered. Both interactions can be disabled
on Notifications, and individual items can opt out with allowClose: false.

import { Button } from '@​mantine/core';
import { notifications } from '@​mantine/notifications';

function Demo() {
  return (
    <Button
      onClick={() =>
        notifications.show({
          title: 'Default notification',
          message: 'Do not forget to star Mantine on GitHub! 🌟',
        })
      }
    >
      Show notification
    </Button>
  );
}

use-drag hook

New use-drag hook handles pointer drag gestures with movement tracking,
velocity, direction and axis constraints. It uses the Pointer Events API and works with
both mouse and touch input:

import { useState } from 'react';
import { Button, Group, Paper, Text } from '@​mantine/core';
import { useDrag } from '@​mantine/hooks';

interface NotificationItem {
  id: number;
  text: string;
}

function SwipeNotification({
  notification,
  onDismiss,
}: {
  notification: NotificationItem;
  onDismiss: (id: number) => void;
}) {
  const [offset, setOffset] = useState(0);
  const [dismissed, setDismissed] = useState(false);

  const { ref, active } = useDrag(
    (state) => {
      if (state.last) {
        const shouldDismiss =
          Math.abs(state.movement[0]) > 120 || state.velocity[0] > 0.5;
        if (shouldDismiss) {
          setDismissed(true);
          setTimeout(() => onDismiss(notification.id), 300);
        } else {
          setOffset(0);
        }
      } else {
        setOffset(state.movement[0]);
      }
    },
    { axis: 'x', threshold: 5, filterTaps: true }
  );

  return (
    <Paper
      ref={ref}
      p="sm"
      mb="xs"
      withBorder
      radius="md"
      style={{
        transform: dismissed
          ? `translateX(${offset > 0 ? 400 : -400}px)`
          : `translateX(${offset}px)`,
        opacity: dismissed ? 0 : 1 - Math.min(Math.abs(offset) / 200, 1) * 0.6,
        transition: active ? 'none' : 'transform 300ms ease, opacity 300ms ease',
        cursor: active ? 'grabbing' : 'grab',
        touchAction: 'pan-y',
        userSelect: 'none',
      }}
    >
      {notification.text}
    </Paper>
  );
}

const initialItems: NotificationItem[] = [
  { id: 1, text: 'New message from Alice' },
  { id: 2, text: 'Build succeeded' },
  { id: 3, text: 'Deployment complete' },
  { id: 4, text: 'Review requested' },
];

function Demo() {
  const [notifications, setNotifications] = useState(initialItems);

  return (
    <div style={{ height: 300 }}>
      {notifications.map((n) => (
        <SwipeNotification
          key={n.id}
          notification={n}
          onDismiss={(id) =>
            setNotifications((items) => items.filter((item) => item.id !== id))
          }
        />
      ))}

      {notifications.length === 0 && (
        <Text ta="center" c="dimmed" py="md">All cleared!</Text>
      )}

      <Group justify="center" mt="md">
        <Button onClick={() => setNotifications(initialItems)}>
          Reset
        </Button>
      </Group>
    </div>
  );
}

InlineDateTimePicker component

New InlineDateTimePicker component renders a calendar
with a time picker inline, without a dropdown. It supports both default and range modes:

import { InlineDateTimePicker } from '@​mantine/dates';

function Demo() {
  return <InlineDateTimePicker />;
}

Set type="range" to select a date and time range with two time inputs:

import { InlineDateTimePicker } from '@​mantine/dates';

function Demo() {
  return <InlineDateTimePicker type="range" />;
}

DateTimePicker range support

DateTimePicker now supports type="range" to select
a date and time range. In range mode, two time inputs are displayed in the dropdown
for start and end times:

import { DateTimePicker } from '@​mantine/dates';

function Demo() {
  return (
    <DateTimePicker
      type="range"
      label="Pick dates and times range"
      placeholder="Pick dates and times range"
    />
  );
}

DateTimePicker valueFormat function

DateTimePicker valueFormat prop now accepts a function in addition
to a dayjs format string. The callback receives the value as a YYYY-MM-DD HH:mm:ss string and
returns the formatted value, which is useful for cases that cannot be expressed with a dayjs
format string:

import dayjs from 'dayjs';
import { DateTimePicker } from '@​mantine/dates';

function Demo() {
  return (
    <DateTimePicker
      valueFormat={(date) => dayjs(date).format('dddd, MMMM D [at] h:mm A')}
      defaultValue="2024-04-11 14:45:00"
      label="Pick date and time"
      placeholder="Pick date and time"
    />
  );
}

RollingNumber component

New RollingNumber component animates value changes with rolling digit
transitions. Each digit independently rolls to its new position when the value changes:

import { useState } from 'react';
import { Button, Group, RollingNumber } from '@​mantine/core';

function Demo() {
  const [value, setValue] = useState(1234);

  return (
    <>
      <RollingNumber value={value} fz="36px" />
      <Group mt="md">
        <Button onClick={() => setValue((v) => v + 1)}>Increment</Button>
        <Button onClick={() => setValue((v) => v - 1)}>Decrement</Button>
        <Button onClick={() => setValue(Math.floor(Math.random() * 10000))}>Random</Button>
      </Group>
    </>
  );
}

MaskInput improvements

MaskInput now supports a resetRef prop that assigns a function that
clears the input value imperatively. This is useful because MaskInput is uncontrolled
internally, so setting value from a parent does not clear it:

import { useRef } from 'react';
import { MaskInput, Button, Group } from '@​mantine/core';

function Demo() {
  const resetRef = useRef<() => void>(null);

  return (
    <>
      <MaskInput
        label="Phone number"
        placeholder="(___) ___-____"
        mask="(999) 999-9999"
        resetRef={resetRef}
      />

      <Group mt="md">
        <Button onClick={() => resetRef.current?.()}>Reset</Button>
      </Group>
    </>
  );
}

MaskInput integration with use-form is now documented. Use defaultValue
to seed the initial value and onChangeRaw to write the raw value to form state:

import { Button, MaskInput } from '@​mantine/core';
import { useForm } from '@​mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { phone: '' },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <MaskInput
        mask="(999) 999-9999"
        placeholder="(___) ___-____"
        label="Phone"
        onChangeRaw={(raw) => form.setFieldValue('phone', raw)}
      />

      <Button type="submit" mt="md">
        Submit
      </Button>
    </form>
  );
}

SankeyChart component

New SankeyChart component visualizes flow between nodes as a Sankey diagram
where the width of each link is proportional to the flow value:

// Demo.tsx
import { SankeyChart } from '@​mantine/charts';
import { data } from './data';

function Demo() {
  return <SankeyChart data={data} />;
}

// data.ts
export const data = {
  nodes: [
    { name: 'Visit' },
    { name: 'Direct-Favourite' },
    { name: 'Page-Click' },
    { name: 'Detail-Favourite' },
    { name: 'Lost' },
  ],
  links: [
    { source: 0, target: 1, value: 3728.3 },
    { source: 0, target: 2, value: 354170 },
    { source: 2, target: 3, value: 62429 },
    { source: 2, target: 4, value: 291741 },
  ],
};

Reorder pills in MultiSelect and TagsInput

MultiSelect and TagsInput now support reordering
selected pills. Set the new withPillsReorder prop to enable it. Pills can be reordered with
a mouse (drag-and-drop) or keyboard:

• Pills are not part of the Tab order. ArrowLeft from the input (caret at start) moves
  focus to the last pill.
• ArrowLeft and ArrowRight navigate between pills (RTL-aware). ArrowRight on the last
  pill returns focus to the input.
• Alt + ArrowLeft and Alt + ArrowRight reorder the focused pill (RTL-aware). Focus follows
  the moved pill so chained moves work.

Reordering is automatically disabled when disabled or readOnly is set. Custom pill renderers
receive a reorderProps payload that can be spread onto the pill element to keep reordering
working:

import { useState } from 'react';
import { MultiSelect } from '@​mantine/core';

function Demo() {
  const [value, setValue] = useState(['React', 'Angular', 'Vue']);

  return (
    <MultiSelect
      label="Drag pills to reorder"
      description="Selected values can be reordered by dragging pills"
      placeholder="Pick value"
      data={['React', 'Angular', 'Vue', 'Svelte', 'Solid', 'Ember']}
      value={value}
      onChange={setValue}
      withPillsReorder
    />
  );
}

Restrict Tree drop targets

Tree component now supports restricting drop targets with the new allowDrop prop.
The callback receives { draggedNode, targetNode, position } and returning false hides the drop
indicator and rejects the drop, so users get proper visual feedback before releasing:

import { useState } from 'react';
import { CaretDownIcon } from '@​phosphor-icons/react';
import { Group, moveTreeNode, RenderTreeNodePayload, Tree, TreeNodeData } from '@​mantine/core';

const data: TreeNodeData[] = [
  {
    label: 'Pages',
    value: 'pages',
    children: [
      { label: 'index.tsx', value: 'pages/index.tsx' },
      { label: 'about.tsx', value: 'pages/about.tsx' },
    ],
  },
  {
    label: 'Components (locked)',
    value: 'components',
    children: [
      { label: 'Header.tsx', value: 'components/Header.tsx' },
      { label: 'Footer.tsx', value: 'components/Footer.tsx' },
    ],
  },
  { label: 'package.json', value: 'package.json' },
];

function Leaf({ node, expanded, hasChildren, elementProps }: RenderTreeNodePayload) {
  return (
    <Group gap={5} {...elementProps}>
      {hasChildren && (
        <CaretDownIcon
          size={18}
          style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
        />
      )}
      <span>{node.label}</span>
    </Group>
  );
}

function Demo() {
  const [treeData, setTreeData] = useState(data);

  return (
    <Tree
      data={treeData}
      // Forbid dropping into or onto "components" branch
      allowDrop={({ draggedNode, targetNode, position }) => {
        if (draggedNode === 'components' || draggedNode.startsWith('components/')) {
          return false;
        }

        if (targetNode === 'components' && position === 'inside') {
          return false;
        }

        return !targetNode.startsWith('components/');
      }}
      onDragDrop={(payload) =>
        setTreeData((current) => moveTreeNode(current, payload))
      }
      renderNode={(payload) => <Leaf {...payload} />}
    />
  );
}

Tree drag handle

Tree component now supports restricting drag initiation to a dedicated handle with
the new withDragHandle prop. The handle spreads dragHandleProps from the renderNode payload.
This is useful when a node contains interactive controls (inputs, buttons) that would otherwise
interfere with dragging:

import { useState } from 'react';
import { CaretDownIcon, DotsSixVerticalIcon } from '@​phosphor-icons/react';
import { Group, moveTreeNode, RenderTreeNodePayload, Tree, TreeNodeData } from '@​mantine/core';

const data: TreeNodeData[] = [
  {
    label: 'Pages',
    value: 'pages',
    children: [
      { label: 'index.tsx', value: 'pages/index.tsx' },
      { label: 'about.tsx', value: 'pages/about.tsx' },
    ],
  },
  {
    label: 'Components',
    value: 'components',
    children: [
      { label: 'Header.tsx', value: 'components/Header.tsx' },
      { label: 'Footer.tsx', value: 'components/Footer.tsx' },
    ],
  },
  { label: 'package.json', value: 'package.json' },
];

function Leaf({ node, expanded, hasChildren, elementProps, dragHandleProps }: RenderTreeNodePayload) {
  return (
    <Group gap={4} {...elementProps}>
      <DotsSixVerticalIcon
        {...dragHandleProps}
        size={16}
        style={{ cursor: 'grab' }}
      />
      {hasChildren && (
        <CaretDownIcon
          size={18}
          style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
        />
      )}
      <span>{node.label}</span>
    </Group>
  );
}

function Demo() {
  const [treeData, setTreeData] = useState(data);

  return (
    <Tree
      data={treeData}
      withDragHandle
      onDragDrop={(payload) =>
        setTreeData((current) => moveTreeNode(current, payload))
      }
      renderNode={(payload) => <Leaf {...payload} />}
    />
  );
}

Shared default props for all inputs

Default props set on Input and Input.Wrapper in theme.components now cascade to every
component built on top of them (TextInput, Textarea,
NumberInput, Select, DateInput,
and others). This makes it possible to apply shared size, radius, variant, withAsterisk
and other props to all inputs at once, while still overriding individual components with their
own default props:

import { TextInput, NumberInput, NativeSelect, MantineProvider, createTheme, Input } from '@​mantine/core';

const theme = createTheme({
  components: {
    Input: Input.extend({
      defaultProps: {
        size: 'md',
        radius: 'md',
      },
    }),

    InputWrapper: Input.Wrapper.extend({
      defaultProps: {
        withAsterisk: true,
      },
    }),

    NumberInput: NumberInput.extend({
      defaultProps: {
        size: 'lg',
      },
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <TextInput label="Text input" placeholder="Inherits size and radius from Input" />

      <NativeSelect
        mt="md"
        label="Native select"
        data={['React', 'Angular', 'Vue', 'Svelte']}
      />

      <NumberInput mt="md" label="Number input" placeholder="Overrides shared size with lg" />
    </MantineProvider>
  );
}

Per-day business hours in WeekView

WeekView businessHours prop now accepts a per-day object keyed by day of
the week (0 – Sunday, 6 – Saturday) in addition to the shared [start, end] tuple. Days
missing from the object or set to null are rendered as fully outside business hours, making it
easy to model partial workdays and non-working days:

import { WeekView } from '@​mantine/schedule';
import { events } from './data';

function Demo() {
  return (
    <WeekView
      date={new Date()}
      events={events}
      highlightBusinessHours
      businessHours={{
        1: ['09:00:00', '17:00:00'],
        2: ['09:00:00', '17:00:00'],
        3: ['09:00:00', '17:00:00'],
        4: ['09:00:00', '17:00:00'],
        5: ['09:00:00', '13:00:00'],
      }}
      startTime="07:00:00"
      endTime="20:00:00"
    />
  );
}

v9.1.1

Compare Source

What's Changed

• [@mantine/spotlight] Fix error thrown when listId is empty (#​8863)
• [@mantine/schedule] Fix onEventClick not being passed down to MoreEvents in DayView and MonthView components (#​8862)
• [@mantine/core] Tree: Add dnd handle and dnd lock support
• [@mantine/schedule] Fix labels not propagating to custom schedule header and more events lists
• [@mantine/modals] Add ModalsSettings type export
• [@mantine/schedule] Fix renderEvent not working in MoreEvents
• [@mantine/mcp-server] Update displayed version
• [@mantine/core] Combobox: Fix key

✂ Note

PR body was truncated to here.

---

Configuration

📅 Schedule: (UTC)

• 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.

🔕 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 was generated by Mend Renovate. View the repository job log.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d23c354

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR