fix(deps): update mantine monorepo to v9 (major)

[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.2.0
@mantine/dates (source)	8.3.18 → 9.2.0
@mantine/form (source)	8.3.18 → 9.2.0
@mantine/hooks (source)	8.3.18 → 9.2.0
@mantine/modals (source)	^8.3.18 → ^9.0.0
@mantine/notifications (source)	8.3.18 → 9.2.0

---

Release Notes

mantinedev/mantine (@​mantine/core)

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 keyboard events not triggering in Safari after click on the inout (#​7386)
• [@mantine/hooks] use-focus-return: Fix incorrect logic when used with nested focus traps (#​8857)
• [@mantine/core] ScrollArea: Fix scrollbar never visible with offsetScrollbars="present" (#​8844)
• [@mantine/core] Fix incorrect renderOption type in Combobox-based components (#​8858)
• [@mantine/hooks] use-mask: Fix stale mask partial remaining as input value on blur after input field was cleared
• [@mantine/hooks] use-mask: Fix incorrect cursor position handling
• [@mantine/hooks] use-mask: Fix part of the mask remaining as input value on blur
• [@mantine/core] Radio: Fix icon not being centered on some low-density screens (#​8845)
• [@mantine/core] Highlight: Fix wholeWord matching for non-ASCII characters
• [@mantine/core] Card: Fix Card.Section not being handled correctly during server-side rendering of server components (#​8846))
• [@mantine/core] Fix clearButtonProps={{ size: lg }} not working when passed to Select and other similar components (#​8855)
• [@mantine/core] Fix Styles API defined for Input not being applied to Select and MultiSelect components (#​8851)

New Contributors

• @​malekmimouna made their first contribution in #​8856
• @​dfedoryshchev made their first contribution in #​8853
• @​stasyzon made their first contribution in #​8845
• @​atinary-ybouzonie made their first contribution in #​8863

Full Changelog: mantinedev/mantine@9.1.0...9.1.1

v9.1.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.

deduplicateInlineStyles

New deduplicateInlineStyles prop on MantineProvider enables
React 19 style tag deduplication for responsive style props.
When many components share the same responsive style prop values, only a single <style />
tag is generated and hoisted to <head /> instead of each component injecting its own:

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

function Demo() {
  return (
    <MantineProvider deduplicateInlineStyles>
      {/* Your app here */}
    </MantineProvider>
  );
}

This can significantly improve performance when rendering large lists of components
with identical responsive style props. See the
styles performance guide for more details.

use-mask hook

New use-mask hook attaches real-time input masking to any <input> element via
a ref callback. It formats user input against a defined pattern and exposes both the masked display
value and the raw unmasked value. The hook supports built-in and custom tokens, dynamic masks,
character transforms, optional segments, and regex array format:

import { TextInput, Text } from '@​mantine/core';
import { useMask } from '@​mantine/hooks';

function Demo() {
  const { ref, value, rawValue } = useMask({ mask: '(999) 999-9999' });

  return (
    <>
      <TextInput ref={ref} label="Phone number" placeholder="(___) ___-____" />
      <Text size="sm" mt="sm">Masked value: {value}</Text>
      <Text size="sm">Raw value: {rawValue}</Text>
    </>
  );
}

MaskInput component

New MaskInput component is a wrapper around use-mask hook
that provides all standard input props (label, description, error, etc.) and supports all mask options:

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

function Demo() {
  return (
    <MaskInput
       variant="default" size="sm" radius="md" label="Input label" withAsterisk={false} description="Input description" error=""
      mask="(999) 999-9999"
      placeholder="(___) ___-____"
    />
  );
}

Treemap component

New Treemap component displays hierarchical data as a set of nested
rectangles. It is based on the Treemap recharts component:

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

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

// data.ts
export const data = [
  {
    name: 'Frontend',
    color: 'blue.8',
    children: [
      { name: 'React', value: 400 },
      { name: 'Vue', value: 200 },
      { name: 'Angular', value: 150 },
    ],
  },
  {
    name: 'Backend',
    color: 'teal.8',
    children: [
      { name: 'Node', value: 300 },
      { name: 'Python', value: 250 },
      { name: 'Go', value: 100 },
    ],
  },
  {
    name: 'Mobile',
    color: 'red.8',
    children: [
      { name: 'React Native', value: 200 },
      { name: 'Flutter', value: 180 },
    ],
  },
];

TimePicker duration type

TimePicker component now supports type="duration" prop that allows
entering durations that exceed 24 hours. In this mode, the hours field has no upper limit
and the input width adjusts dynamically based on the entered value:

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

function Demo() {
  return <TimePicker label="Enter duration" type="duration" withSeconds />;
}

Heatmap legend

Heatmap component now supports withLegend prop that displays
a color legend below the chart. Use legendLabels prop to customize labels
(default: ['Less', 'More']):

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

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

// data.ts
export const data = ${JSON.stringify(data, null, 2)};

MonthPicker and YearPicker presets

MonthPicker and YearPicker components now support
presets prop that allows adding predefined values to pick from. Presets are also available
in MonthPickerInput and YearPickerInput
components:

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

function Demo() {
  return (
    <MonthPicker
      presets={[
        { value: dayjs().startOf('month').format('YYYY-MM-DD'), label: 'This month' },
        { value: dayjs().add(1, 'month').startOf('month').format('YYYY-MM-DD'), label: 'Next month' },
        { value: dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD'), label: 'Last month' },
        { value: dayjs().add(6, 'month').startOf('month').format('YYYY-MM-DD'), label: 'In 6 months' },
        { value: dayjs().add(1, 'year').startOf('month').format('YYYY-MM-DD'), label: 'Next year' },
        { value: dayjs().subtract(1, 'year').startOf('month').format('YYYY-MM-DD'), label: 'Last year' },
      ]}
    />
  );
}

use-roving-index hook

New use-roving-index hook implements the
roving tabindex
keyboard navigation pattern. It manages tabIndex state for a group of focusable elements,
handles arrow key navigation with disabled item skipping, and supports both 1D lists and 2D grids:

import { Button, Group } from '@​mantine/core';
import { useRovingIndex } from '@​mantine/hooks';

const items = ['Bold', 'Italic', 'Underline', 'Strikethrough', 'Code'];

function Demo() {
  const { getItemProps } = useRovingIndex({
    total: items.length,
    orientation: 'horizontal',
    loop: true,
  });

  return (
    <Group gap="xs">
      {items.map((item, index) => (
        <Button key={item} variant="default" {...getItemProps({ index })}>
          {item}
        </Button>
      ))}
    </Group>
  );
}

Tree drag and drop

Tree component now supports drag-and-drop reordering of nodes.
Provide onDragDrop callback to enable it, and use the moveTreeNode utility
to update data based on the result:

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: 'contact.tsx', value: 'pages/contact.tsx' },
    ],
  },
  {
    label: 'Components',
    value: 'components',
    children: [
      { label: 'Header.tsx', value: 'components/Header.tsx' },
      { label: 'Footer.tsx', value: 'components/Footer.tsx' },
      { label: 'Sidebar.tsx', value: 'components/Sidebar.tsx' },
    ],
  },
  { label: 'package.json', value: 'package.json' },
  { label: 'tsconfig.json', value: 'tsconfig.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}
      onDragDrop={(payload) =>
        setTreeData((current) => moveTreeNode(current, payload))
      }
      renderNode={(payload) => <Leaf {...payload} />}
    />
  );
}

Tree async loading

Tree now supports lazy loading of children. Set hasChildren: true
on a node without providing children – when the node is expanded for the first time,
onLoadChildren callback passed to useTree is called. Use mergeAsyncChildren
utility to splice loaded children into your data:

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

const initialData: TreeNodeData[] = [
  { label: 'Documents', value: 'documents', hasChildren: true },
  { label: 'Photos', value: 'photos', hasChildren: true },
  { label: 'README.md', value: 'readme' },
];

// Simulates an API call to load children
async function fetchChildren(parentValue: string): Promise<TreeNodeData[]> {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return [
    { label: `${parentValue}/file-1.txt`, value: `${parentValue}/file-1.txt` },
    { label: `${parentValue}/file-2.txt`, value: `${parentValue}/file-2.txt` },
    {
      label: `${parentValue}/subfolder`,
      value: `${parentValue}/subfolder`,
      hasChildren: true,
    },
  ];
}

function Leaf({ node, expanded, hasChildren, elementProps, isLoading }: RenderTreeNodePayload) {
  return (
    <Group gap={5} wrap="nowrap" {...elementProps}>
      {isLoading ? (
        <SpinnerIcon size={18} style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }} />
      ) : (
        hasChildren && (
          <CaretDownIcon
            size={18}
            style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)', flexShrink: 0 }}
          />
        )
      )}
      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {node.label}
      </span>
    </Group>
  );
}

function Demo() {
  const [data, setData] = useState(initialData);
  const tree = useTree({
    onLoadChildren: async (value) => {
      const children = await fetchChildren(value);
      setData((prev) => mergeAsyncChildren(prev, value, children));
    },
  });

  return (
    <Tree
      data={data}
      tree={tree}
      renderNode={(payload) => <Leaf {...payload} />}
    />
  );
}

Tree search and filtering

Tree now includes filterTreeData utility to filter tree data based on
a search query. Matching nodes and their ancestors are preserved in the result. You can
provide a custom filter function for advanced matching (for example, fuzzy search with fuse.js):

import { useMemo, useState } from 'react';
import {
  filterTreeData,
  getTreeExpandedState,
  TextInput,
  Tree,
  TreeNodeData,
  useTree,
} from '@​mantine/core';

const data: TreeNodeData[] = [
  {
    label: 'src',
    value: 'src',
    children: [
      {
        label: 'components',
        value: 'src/components',
        children: [
          { label: 'Accordion.tsx', value: 'src/components/Accordion.tsx' },
          { label: 'Tree.tsx', value: 'src/components/Tree.tsx' },
          { label: 'Button.tsx', value: 'src/components/Button.tsx' },
          { label: 'Input.tsx', value: 'src/components/Input.tsx' },
        ],
      },
      {
        label: 'hooks',
        value: 'src/hooks',
        children: [
          { label: 'use-debounce.ts', value: 'src/hooks/use-debounce.ts' },
          { label: 'use-media-query.ts', value: 'src/hooks/use-media-query.ts' },
        ],
      },
    ],
  },
  {
    label: 'public',
    value: 'public',
    children: [
      { label: 'favicon.ico', value: 'public/favicon.ico' },
      { label: 'logo.svg', value: 'public/logo.svg' },
    ],
  },
  { label: 'package.json', value: 'package.json' },
  { label: 'tsconfig.json', value: 'tsconfig.json' },
];

function Demo() {
  const [search, setSearch] = useState('');
  const tree = useTree();

  const filteredData = useMemo(
    () => filterTreeData(data, search),
    [search]
  );

  const handleSearchChange = (value: string) => {
    setSearch(value);
    if (value.trim()) {
      const next = filterTreeData(data, value);
      tree.setExpandedState(getTreeExpandedState(next, '*'));
    } else {
      tree.collapseAllNodes();
    }
  };

  return (
    <div>
      <TextInput
        placeholder="Search..."
        mb="sm"
        value={search}
        onChange={(event) => handleSearchChange(event.currentTarget.value)}
      />
      <Tree data={filteredData} tree={tree} />
    </div>
  );
}

Tree connecting lines

Tree now supports withLines prop to display connecting lines
showing parent-child relationships. Lines adapt to levelOffset spacing automatically:

import { getTreeExpandedState, Tree, useTree } from '@​mantine/core';
import { data } from './data';

function Demo() {
  const tree = useTree({
    initialExpandedState: getTreeExpandedState(data, '*'),
  });

  return <Tree data={data} tree={tree} withLines />;
}

Tree virtualization

Tree now provides flattenTreeData utility and FlatTreeNode component
for virtualized rendering of large trees. The component does not depend on any
virtualization library – you supply one yourself (e.g., @tanstack/react-virtual):

import { useMemo, useRef } from 'react';
import { useVirtualizer } from '@​tanstack/react-virtual';
import {
  FlatTreeNode,
  flattenTreeData,
  getTreeExpandedState,
  TreeNodeData,
  useTree,
} from '@​mantine/core';

const ITEM_HEIGHT = 30;

function generateTreeData(count: number): TreeNodeData[] {
  const result: TreeNodeData[] = [];
  let id = 0;

  function addChildren(
    parent: TreeNodeData[],
    depth: number,
    remaining: { count: number }
  ) {
    const childCount = depth === 0 ? 20 : Math.floor(Math.random() * 8) + 2;

    for (let i = 0; i < childCount && remaining.count > 0; i++) {
      id++;
      remaining.count--;
      const hasChild =
        depth < 3 && remaining.count > 0 && Math.random() > 0.3;
      const node: TreeNodeData = {
        label: `${hasChild ? 'Folder' : 'File'} ${id}`,
        value: `node-${id}`,
        children: hasChild ? [] : undefined,
      };

      if (hasChild) {
        addChildren(node.children!, depth + 1, remaining);
      }

      parent.push(node);
    }
  }

  addChildren(result, 0, { count });
  return result;
}

const largeData = generateTreeData(2000);
const initialExpandedState = getTreeExpandedState(largeData, '*');

function Demo() {
  const tree = useTree({
    initialExpandedState,
  });

  const flatList = useMemo(
    () => flattenTreeData(largeData, tree.expandedState),
    [tree.expandedState]
  );

  const scrollParentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: flatList.length,
    getScrollElement: () => scrollParentRef.current,
    estimateSize: () => ITEM_HEIGHT,
    overscan: 20,
  });

  return (
    <div ref={scrollParentRef} style={{ height: 400, overflow: 'auto' }}>
      <div
        data-tree-root
        role="tree"
        style={{
          height: virtualizer.getTotalSize(),
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map((virtualItem) => (
          <FlatTreeNode
            key={flatList[virtualItem.index].node.value}
            {...flatList[virtualItem.index]}
            tree={tree}
            expandOnClick
            selectOnClick
            tabIndex={virtualItem.index === 0 ? 0 : -1}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: virtualItem.size,
              transform: `translateY(${virtualItem.start}px)`,
            }}
          />
        ))}
      </div>
    </div>
  );
}

Tree checkStrictly mode

useTree hook now supports checkStrictly option. When enabled, checking
a parent node does not affect children and vice versa – each node's checked state is
fully independent:

import { CaretDownIcon } from '@​phosphor-icons/react';
import { Checkbox, Group, RenderTreeNodePayload, Tree, useTree } from '@​mantine/core';
import { data } from './data';

const renderTreeNode = ({
  node,
  expanded,
  hasChildren,
  elementProps,
  tree,
}: RenderTreeNodePayload) => {
  const checked = tree.isNodeChecked(node.value);

  return (
    <Group gap="xs" {...elementProps}>
      <Checkbox.Indicator
        checked={checked}
        onClick={() =>
          checked
            ? tree.uncheckNode(node.value)
            : tree.checkNode(node.value)
        }
      />

      <Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
        <span>{node.label}</span>

        {hasChildren && (
          <CaretDownIcon
            size={14}
            style={{
              transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
            }}
          />
        )}
      </Group>
    </Group>
  );
};

function Demo() {
  const tree = useTree({ checkStrictly: true });
  return (
    <Tree
      data={data}
      tree={tree}
      levelOffset={23}
      expandOnClick={false}
      renderNode={renderTreeNode}
    />
  );
}

Slider startPointValue

Slider component now supports startPointValue prop that changes
the origin of the filled bar. When set, the bar extends from the given value toward the
current value – to the left for values below the start point and to the right for values above it:

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

function Demo() {
  return (
    <Slider
      startPointValue={0}
      min={-100}
      max={100}
      defaultValue={40}
      marks={[
        { value: -100, label: '-100' },
        { value: -50, label: '-50' },
        { value: 0, label: '0' },
        { value: 50, label: '50' },
        { value: 100, label: '100' },
      ]}
    />
  );
}

WeekView forceCurrentTimeIndicator

WeekView component now supports forceCurrentTimeIndicator prop.
When set, the current time indicator is displayed on the same day of week even when viewing
a different week:

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

function Demo() {
  return (
    <WeekView
      date="2030-06-10"
      events={events}
      withCurrentTimeIndicator
      forceCurrentTimeIndicator
    />
  );
}

New demo: MonthView events rendering

New MonthView demo shows how to use renderEvent to visually
differentiate all-day and timed events. All-day events render as regular colored bars,
while timed events display as a colored dot with the start time and title:

// Demo.tsx
import dayjs from 'dayjs';
import { Box, UnstyledButton } from '@​mantine/core';
import { MonthView, ScheduleEventData } from '@​mantine/schedule';

function isAllDayEvent(event: ScheduleEventData) {
  const start = dayjs(event.start);
  const end = dayjs(event.end);
  return start.isSame(start.startOf('day')) && end.isSame(end.startOf('day'));
}

const events: ScheduleEventData[] = [/* ...events */];

function Demo() {
  return (
    <MonthView
      date={new Date()}
      events={events}
      renderEvent={(event, props) => {
        if (isAllDayEvent(event)) {
          return <UnstyledButton {...props} />;
        }

        const { children, className, style, ...others } = props;
        return (
          <UnstyledButton
            {...others}
            style={{
              ...style,
              display: 'flex',
              alignItems: 'center',
              gap: 4,
              fontSize: 10,
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              pointerEvents: 'all',
              cursor: 'pointer',
              paddingInline: 2,
            }}
          >
            <Box
              component="span"
              style={{
                width: 8,
                height: 8,
                borderRadius: '50%',
                backgroundColor: `var(--event-bg)`,
                flexShrink: 0,
              }}
            />
            <span style={{ width: 28, flexShrink: 0 }}>{dayjs(event.start).format('h:mm')}</span>
            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {event.title}
            </span>
          </UnstyledButton>
        );
      }}
    />
  );
}

Other changes

• Tabs component now supports keepMountedMode prop that controls how inactive tab panels are hidden when keepMounted is true. Set keepMountedMode="display-none" to use display: none styles instead of the default Activity component.
• useClickOutside hook now supports enabled parameter to dynamically enable/disable the listener. The hook also uses event.composedPath() in both ref and nodes branches for consistent Shadow DOM support and correctly ignores clicks on detached DOM nodes in the single-ref mode.
• useCounter hook now supports step option to configure increment/decrement step size (default 1).
• useDebouncedCallback hook now supports maxWait option to guarantee execution within a maximum time window during continuous calls, and isPending() method to check if a debounced call is waiting.
• useDebouncedValue hook now returns a flush method to immediately apply the pending debounced value.
• useScrollIntoView hook now supports onScrollCancel callback that fires when the scroll animation is interrupted by the user, and returns a scrolling boolean to indicate whether a scroll animation is in progress.

v9.0.2

Compare Source

What's Changed

• [@mantine/schedule] Change default events border-radius to sm
• [@mantine/dates] DateTimePicker: Fix formatting not working with withSeconds set on timePickerProps only
• [@mantine/core] Textarea: Fix error thrown on resize in some cases
• [@mantine/modals] Fix modals.closeAll() called from comtext modal causing infinite rerendering
• [@mantine/tiptap] RichTextEditor: Fix invisible caret in empty task list items
• [@mantine/schedule] Fix rrule package imports bot being compatible with esm only bundlers
• [@mantine/schedule] Fix onEventClick called when event is resizing
• [@mantine/core] Fix incorrect default colors resolver for custom colors in light variant

New Contributors

• @​dkpark10 made their first contribution in #​8807
• @​sdelpercio made their first contribution in #​8826

Full Changelog: mantinedev/mantine@9.0.1...9.0.2

v9.0.1

Compare Source

What's Changed

• [@mantine/core] LoadingOverlay: Fix double overlay visible with dark color scheme (#​8811)
• [@mantine/core] RingProgress: Add missing viewBox (#​8806)
• [@mantine/core] Input: Add rootRef prop support
• [@mantine/core] Combobox: Fix refProp not working on Combobox.Target (#​8798)
• [@mantine/mcp-server] Fix stdio transport to comply with MCP spec (#​8792)
• [@mantine/core] Input: Fix aria-invalid="false" attribute being set (#​8785)
• [@mantine/core] Slider: Fix incorrect orientation inheritance from the parent markup (#​8791)
• [@mantine/core] Fix incorrect default placeholder size in PasswordInput and other components (#​8793)
• [@mantine/core] Badge: Fix text being cut off with some fonts (#​8788)
• [@mantine/hooks] use-scroller: Fix element dynamic resizing not being handled correctly (#​8800)
• [@mantine/core] Fix Checkbox.Group, Switch.Group, Radio.Group and Chip.Group not working with generic primitive values (#​8801)
• [@mantine/core] Popover: Fix missing withProps (#​8802)
• [@mantine/core] Accordion: Fix focus ring being cut off (#​8797)
• [@mantine/charts] Add option to fully customize reference lines label (#​8790)
• [@mantine/core] Fix loading prop not being handled correctly in TagsInput and MultiSelect (#​8803)

Full Changelog: mantinedev/mantine@9.0.0...9.0.1

v9.0.0: 🤩

Compare Source

View changelog with demos on mantine.dev website

Migration guide

This changelog covers breaking changes and new features in Mantine 9.0.
To migrate your application to Mantine 9.0, follow 8.x → 9.x migration guide.

Peer dependencies requirements updates

Starting from Mantine 9.0, the following dependencies are required:

• React 19.2+ for all @mantine/* packages
• Tiptap 3+ for @mantine/tiptap (migration guide)
• Recharts 3+ for @mantine/charts (no migration required)

New @​mantine/schedule package

New @mantine/schedule package provides a complete set of
calendar scheduling components for React applications. It includes multiple view levels,
drag-and-drop event management, and extensive customization options.

Schedule

Schedule is a unified container component that combines all views with built-in navigation and view switching. Drag events to reschedule them:

import { useState } from 'react';
import dayjs from 'dayjs';
import { Schedule, ScheduleEventData } from '@​mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');
const tomorrow = dayjs().add(1, 'day').format('YYYY-MM-DD');

const initialEvents: ScheduleEventData[] = [
  {
    id: 1,
    title: 'Morning Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Team Meeting',
    start: `${today} 10:00:00`,
    end: `${today} 11:30:00`,
    color: 'green',
  },
  {
    id: 3,
    title: 'Lunch Break',
    start: `${today} 12:00:00`,
    end: `${today} 13:00:00`,
    color: 'orange',
  },
  {
    id: 4,
    title: 'Code Review',
    start: `${tomorrow} 14:00:00`,
    end: `${tomorrow} 15:00:00`,
    color: 'violet',
  },
  {
    id: 5,
    title: 'Client Call',
    start: `${tomorrow} 15:30:00`,
    end: `${tomorrow} 16:30:00`,
    color: 'cyan',
  },
  {
    id: 6,
    title: 'All Day Conference',
    start: `${today} 00:00:00`,
    end: dayjs(today).add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'red',
  },
];

function Demo() {
  const [events, setEvents] = useState(initialEvents);

  const handleEventDrop = ({ eventId, newStart, newEnd }: { eventId: string | number; newStart: string; newEnd: string }) => {
    setEvents((prev) =>
      prev.map((event) =>
        event.id === eventId ? { ...event, start: newStart, end: newEnd } : event
      )
    );
  };

  return (
    <Schedule
      events={events}
      withEventsDragAndDrop
      onEventDrop={handleEventDrop}
    />
  );
}

DayView

DayView displays a single day with configurable time slots, all-day event section, current time indicator, and business hours highlighting. Drag events to reschedule them:

import { useState } from 'react';
import dayjs from 'dayjs';
import { DayView, ScheduleEventData } from '@​mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');

const initialEvents: ScheduleEventData[] = [
  {
    id: 1,
    title: 'Morning Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Team Meeting',
    start: `${today} 11:00:00`,
    end: `${today} 12:00:00`,
    color: 'green',
  },
  {
    id: 3,
    title: 'Code Review',
    start: `${today} 14:00:00`,
    end: `${today} 15:00:00`,
    color: 'violet',
  },
];

function Demo() {
  const [events, setEvents] = useState(initialEvents);

  const handleEventDrop = ({ eventId, newStart, newEnd }: { eventId: string | number; newStart: string; newEnd: string }) => {
    setEvents((prev) =>
      prev.map((event) =>
        event.id === eventId ? { ...event, start: newStart, end: newEnd } : event
      )
    );
  };

  return (
    <DayView
      date={new Date()}
      events={events}
      startTime="08:00:00"
      endTime="18:00:00"
      withEventsDragAndDrop
      onEventDrop={handleEventDrop}
    />
  );
}

WeekView

WeekView shows a weekly calendar grid with time slots, week numbers, weekend day toggling, and multi-day event spanning. Drag events across days and time slots:

import { useState } from 'react';
import dayjs from 'dayjs';
import { WeekView, ScheduleEventData } from '@​mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');
const tomorrow = dayjs().add(1, 'day').format('YYYY-MM-DD');

const initialEvents: ScheduleEventData[] = [
  {
    id: 1,
    title: 'Morning Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Team Meeting',
    start: `${tomorrow} 11:00:00`,
    end: `${tomorrow} 12:00:00`,
    color: 'green',
  },
  {
    id: 3,
    title: 'Code Review',
    start: `${today} 14:00:00`,
    end: `${today} 15:00:00`,
    color: 'violet',
  },
  {
    id: 4,
    title: 'Company Holiday',
    start: dayjs(getStartOfWeek({ date: today, firstDayOfWeek: 1 })).format('YYYY-MM-DD HH:mm:ss'),
    end: dayjs(getStartOfWeek({ date: today, firstDayOfWeek: 1 }))
      .add(2, 'day')
      .format('YYYY-MM-DD HH:mm:ss'),
    color: 'red',
  },
  {
    id: 5,
    title: 'Release Day',
    start: dayjs(getStartOfWeek({ date: today, firstDayOfWeek: 1 })).format('YYYY-MM-DD HH:mm:ss'),
    end: dayjs(getStartOfWeek({ date: today, firstDayOfWeek: 1 }))
      .add(2, 'day')
      .format('YYYY-MM-DD HH:mm:ss'),
    color: 'orange',
  },
];

function Demo() {
  const [events, setEvents] = useState(initialEvents);

  const handleEventDrop = ({ eventId, newStart, newEnd }: { eventId: string | number; newStart: string; newEnd: string }) => {
    setEvents((prev) =>
      prev.map((event) =>
        event.id === eventId ? { ...event, start: newStart, end: newEnd } : event
      )
    );
  };

  return (
    <WeekView
      date

> ✂ **Note**
> 
> PR body was truncated to here.


</details>

---

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

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/openscript-ch/quassel).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4xMDAuMCIsInVwZGF0ZWRJblZlciI6IjQzLjE1OS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2376858

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