apps/mantine.dev/src/pages/changelog/9-3-0.mdx
import { CodeHighlightDemos, ComboboxDemos, DayViewDemos, HighlightDemos, MenuDemos, OverflowListDemos, PaginationDemos, PieChartDemos, PopoverDemos, SplitterDemos, TextareaDemos, TextDemos, TooltipDemos, UseSplitterDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.Changelog930);
You can now sponsor Mantine development with OpenCollective. All funds are used to improve Mantine and create new features and components.
<SponsorButton />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.
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.
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:
<Demo data={UseSplitterDemos.usage} />New Splitter component provides declarative resizable split pane layout built on top of the use-splitter hook:
<Demo data={SplitterDemos.usage} />CodeHighlight component now supports withLineNumbers prop
to display line numbers alongside the code:
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.
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:
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:
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.
<Demo data={MenuDemos.sub} demoProps={{ defaultExpanded: false }} />
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.
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.
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.
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.
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.
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:
PieChart and DonutChart components now support
labelsType="name" to display segment names as labels instead of values or percentages:
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.
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']}
/>
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: