A fully featured React components library
MIT License
Bot releases are hidden (Show)
Published by rtivital over 1 year ago
[@mantine/hooks]
use-hash: Fix incorrect hash set from hashchange
event (#3773)[@mantine/core]
PinInput: Fix onComplete
prop firing incorrectly (#3715)[@mantine/core]
Popover: Add onClose
and onOpen
events supports for uncontrolled popovers (#3716)[@mantine/core]
Select: Fix focus loss when pressing tab inside input element (#3744)[@mantine/core]
Anchor: Fix undelrine
prop not working for hover state (#3748)[@mantine/core]
Switch: Fix body scrolling when input is focused (#3752)[@mantine/core]
Popover: Fix incorrect dropdown position when position
prop changes (#3753)[@mantine/core]
ScrollArea: Add missing viewportProps
prop to ScrollArea.Autosize (#3760)[@mantine/core]
JsonInput: Fix incorrect serialization logic (#3769)[@mantine/core]
Drawer: Fix incorrect static selector (#3730)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.1...6.0.2
Published by rtivital over 1 year ago
[@mantine/core]
SegmentedControl: Fix incorrect border styles in vertical orientation (#3670)[@mantine/core]
Fix incorrect error messages in Popover, HoverCard and Menu components (#3638)[@mantine/core]
Button: Fix incorrect Button.Group styles that contain only one Button (#3667)[@mantine/dates]
Remove disabled level change button from tab order (#3648)[@mantine/core]
Transition: Fix exit duration not working (#3664)[@mantine/core]
Anchor: Fix dimmed color not working (#3668)[@mantine/core]
Alert: Fix content overlap with no title and with close button (#3681)[@mantine/core]
AppShell: Fix incorrect CSS variables (#3687)[@mantine/notifications]
Add static methods to Notifications (#3689)[@mantine/core]
Title: Fix Text props not working (#3690)[@mantine/styles]
Fix incorrect CSS variables parsing in theme functions (#3695)[@mantine/dates]
DateTimePicker: Fix TimeInput now showing when dropdown was closed with month/year picker (#3710)[@mantine/core]
Portal: Add portalProps
prop support (#3696)[@mantine/core]
Tooltip: Fix incorrect arrow border styles (#3693)Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.0...6.0.1
Published by rtivital over 1 year ago
View changelog with demos on mantine.dev website
The following changes are breaking. Note that although
we've tried to include all breaking changes with migration guides in the list you still may
experience undocumented changes. If you think that these changes worth including in this list,
let us know by opening an issue on GitHub.
All Mantine components now use rem units. 1rem
is considered to be 16px
with medium text size selected by user, all components will scale based on settings specified in browser.
theme.spacing
, theme.radius
, theme.fontSizes
and other theme properties overrides
are now expected to be defined in rem. theme.breakpoints
are expected to be defined in em
units:
import { MantineProvider } from "@mantine/core";
function Demo() {
return (
<MantineProvider
theme={{
spacing: { xs: "1rem", sm: "1.5rem" /* ... */ },
fontSizes: { xs: "0.8rem", sm: "1.2rem" /* ... */ },
radius: { xs: "0.1rem", sm: "0.3rem" /* ... */ },
breakpoints: { xs: "20em", sm: "36em" /* ... */ },
}}
>
<App />
</MantineProvider>
);
}
You can no longer use addition, subtraction, division, multiplication and other math operations
with theme values in createStyles and sx prop,
use calc
instead:
import { createStyles, rem } from '@mantine/core':
// 5.x expressions that will no longer work in 6.x
createStyles((theme) => ({
demo: {
// Values cannot longer be prepended with minus sign
margin: -theme.spacing.xs,
// addition, subtraction, division, multiplication
// and other math operations are no longer available
paddingLeft: theme.spacing.md + 5,
paddingRight: theme.spacing.sm / 2,
paddingTop: theme.spacing.lg * 1.5,
paddingBottom: theme.spacing.xl - theme.spacing.md,
// theme values used in sting templates
// will no longer work with px suffix
margin: `${theme.spacing.xs}px ${theme.spacing.md}px`
}
}));
// In 6.0 use calc
createStyles((theme) => ({
demo: {
// Use calc to negate theme value
margin: `calc(${theme.spacing.xs} * -1)`,
// Use calc and rem function for
// addition, subtraction, division, multiplication
paddingLeft: `calc(${theme.spacing.md} + ${rem(5)})`,
paddingRight: `calc(${theme.spacing.sm} / 2)`,
paddingTop: `calc(${theme.spacing.lg} * 1.5)`,
paddingBottom: `calc(${theme.spacing.xl} - ${theme.spacing.md})`,
// Omit px suffix when using theme values
margin: `${theme.spacing.xs} ${theme.spacing.md}`
}
}));
If you use numbers in Mantine components props, they will be treated as px
and converted to rem
,
for example:
import { ColorSwatch } from "@mantine/core";
function DemoPx() {
// Specify ColorSwatch size in px, it will be automatically converted to rem
// Width and height of ColorSwatch in this case will be 32px / 16 = 2rem
return <ColorSwatch color="#000" size={32} />;
}
function DemoRem() {
// This demo will have the same size as previous one
return <ColorSwatch color="#000" size="2rem" />;
}
The same logic is applied to style props available
in every component:
import { Box } from "@mantine/core";
function Demo() {
// width: 2rem, height: 1rem
// margin-left: 1rem
// @media (min-width: theme.breakpoints.sm) -> margin-left: 2rem
return <Box w={32} h={16} ml={{ base: 16, sm: 32 }} />;
}
createStyles function no longer receives getRef
as a third argument. Use getStylesRef
exported from @mantine/core
package instead:
// in 5.x, will not work in 6.x
import { createStyles } from '@mantine/core';
createStyles((theme, params, getRef) => {
child: { ref: getRef('child') },
parent: { [`& .${getRef('child')}`]: { color: 'red' } },
});
// in 6.x use getStylesRef function
import { createStyles, getStylesRef } from '@mantine/core';
createStyles((theme, params) => {
child: { ref: getStylesRef('child') },
parent: { [`& .${getStylesRef('child')}`]: { color: 'red' } },
});
@mantine/notifications package no longer exports
NotificationsProvider
component. Instead you should add Notifications
component to any
part of your application. This change allows to avoid unnecessary rerenders of child components
when notifications state change. Also useNotifications
hook is no longer exported from the package.
import { MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
function Demo() {
return (
<MantineProvider withNormalizeCSS withGlobalStyles>
<Notifications />
<App />
</MantineProvider>
);
}
@mantine/rte
package is deprecated – it will no longer receive updates (last version will remain 5.x)
and it may no longer be compatible with @mantine/core
and @mantine/hooks
packages (6.x and later versions).
Migrate to @mantine/tiptap as soon as possible.
All components from @mantine/dates
package were rebuilt from scratch.
Note that the following list is not full as it is difficult to include all breaking changes
after a full package revamp – follow documentation of component that you use to find out about
all breaking changes.
DatePicker
component was renamed to DatePickerInput
Calendar
component was renamed to DatePicker
TimeInput
component was migrated to native input[type="time"]
as it provides better UX in most browsersTimeRangeInput
component was removed – it is no longer exported from the packageDateRangePicker
and RangeCalendar
components were removed – you can now setup dates range picking in DatePicker and DatePickerInput
amountOfMonths
prop was renamed to numberOfColumns
in all componentsDatePickerInput
(previously DatePicker
) component no longer supports allowFreeInput
prop – use DateInput component insteadDatePicker
(previously Calendar
) component no longer supports dayClassName
and dayStyle
props – use getDayProps
insteadYou can no longer define dateFormat
and datesLocale
in theme,
use components prop to specify format instead:
// 5.x, will not work in 6.x
import { MantineProvider } from "@mantine/core";
function Demo() {
return (
<MantineProvider theme={{ dateFormat: "MMMM DD YYYY", datesLocale: "es" }}>
<App />
</MantineProvider>
);
}
// 6.x – use components props
import { DatePickerInput } from "@mantine/dates";
function Demo() {
return <DatePickerInput valueFormat="MMMM D, YYYY" locale="es" />;
}
Modal and Drawer components
props were renamed:
withFocusReturn
→ returnFocus
overflow
→ scrollAreaComponent
(scroll now is always handled inside modal/drawer)overlayBlur
→ overlayProps.blur
overlayColor
→ overlayProps.color
overlayOpacity
→ overlayProps.opacity
exitTransitionDuration
→ transitionProps.exitDuration
transition
→ transitionProps.transition
transitionDuration
→ transitionProps.duration
transitionTimingFunction
→ transitionProps.timingFunction
Modal
styles API changes:
modal
selector was renamed to content
Drawer
styles API changes:
drawer
selector was renamed to content
NumberInput component types for value
, defaultValue
and onChange
props were changed. It now expects value to be number | ''
(number or empty string) instead
of number | undefined
. This change was made to address multiple bugs that happened because it was
not possible to differentiate controlled and uncontrolled NumberInput
.
import { useState } from "react";
import { NumberInput } from "@mantine/core";
function Demo() {
const [value, setValue] = useState<number | "">(0);
return <NumberInput value={value} onChange={setValue} />;
}
itemComponent
– removed, use getItemProps
or static components insteadgetItemAriaLabel
– removed, use getItemProps
prop insteadinitialPage
→ defaultValue
page
→ value
Spotlight component was migrated to use Modal
under the hood. Its Styles API selectors and some props names were changed – it now supports all Modal component props.
Renamed props:
overlayBlur
→ overlayProps.blur
overlayColor
→ overlayProps.color
overlayOpacity
→ overlayProps.opacity
exitTransitionDuration
→ transitionProps.exitDuration
transition
→ transitionProps.transition
transitionDuration
→ transitionProps.transition
transitionTimingFunction
→ transitionProps.timingFunction
Spotlight actions are now fully controlled:
actions
prop no longer accept a callback function, only a list of actionsvariant="link"
, use Anchor insteaddisabled
, invalid
and withIcon
selectors are no longer available, they were migrated to data-disabled
, data-invalid
and data-with-icon
attributesinvalid
and withIcon
selectors are no longer available, use data-invalid
and data-with-icon
attributes with innerInput
selectorinvalid
prop was renamed to error
in Input componentclearButtonLabel
and clearButtonTabIndex
props, use clearButtonProps
instead to add any extra props to the clear button@mantine/next
package no longer exports NextLink
componentorientation
, offset
and spacing
props are no longer supported. This change gives you more freedom on how to organize inputs layout.Group
– you need to manage layout on your sidewithIcon
selector, use data-with-icon
attribute insteadwithFocusReturn
prop was renamed to returnFocus
in Modal and Drawer componentspadding
prop instead of p
to offset Card.Section
components@tabler/icons-react
(>=2.1.0
) package instead of @tabler/icons
@mantine/core
package no longer exports GroupedTransition
component, use multiple Transition components insteaduse-scroll-lock
hook is deprecated, all Mantine components now use react-remove-scroll
maxHeight
is removed, it is replaced with mah
style prop
labelActive
and disabled
selectors were removed (replaced with data-active
and data-disabled
attributes on label
selector), active
selector was renamed to indicator
disallowClose
prop was renamed to withCloseButton
, it also was changed in notifications system
transition
and transitionDuration
were renamed to transitionProps
transition
, transitionDuration
and exitTransitionDuration
props were renamed to transitionProps
dot
, showZero
and overflowCount
. Use disabled
and label
instead to recreate the previous behavior.You can now use MantineProvider to add variants to all Mantine components that support Styles API
and sizes to components that support size
prop.
Variants:
import { MantineProvider, Button, Group } from "@mantine/core";
function Demo() {
return (
<MantineProvider
theme={{
components: {
Button: {
variants: {
danger: (theme) => ({
root: {
backgroundColor: theme.colors.red[9],
color: theme.colors.red[0],
...theme.fn.hover({ backgroundColor: theme.colors.red[8] }),
},
}),
success: (theme) => ({
root: {
backgroundImage: theme.fn.linearGradient(
45,
theme.colors.cyan[theme.fn.primaryShade()],
theme.colors.teal[theme.fn.primaryShade()],
theme.colors.green[theme.fn.primaryShade()]
),
color: theme.white,
},
}),
},
},
},
}}
>
<Group position="center">
<Button variant="danger">Danger variant</Button>
<Button variant="success">Success variant</Button>
</Group>
</MantineProvider>
);
}
Sizes:
import { MantineProvider, Button, Group } from "@mantine/core";
function Demo() {
return (
<MantineProvider
theme={{
components: {
Button: {
sizes: {
xxxs: () => ({
root: {
height: "1.25rem",
padding: "0.3125rem",
fontSize: "0.5rem",
},
}),
xxl: (theme) => ({
root: {
fontSize: "1.75rem",
height: "5rem",
padding: theme.spacing.xl,
},
}),
},
},
},
}}
>
<Group position="center">
<Button size="xxxs">XXXS button</Button>
<Button size="xxl">XXL button</Button>
</Group>
</MantineProvider>
);
}
@mantine/dates
package was rebuilt from scratch, it now includes new components to
pick year, month
and dates. All new pickers support type
prop that can be:
default
– Date | null
– user can pick one datemultiple
– Date[]
– user can pick any number of datesrange
– [Date | null, Date | null]
– user can pick a range of two datestype="default"
example with DatePickerInput component:
import { useState } from "react";
import { DatePickerInput } from "@mantine/dates";
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<DatePickerInput
label="Pick date"
placeholder="Pick date"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}
type="multiple"
example with MonthPickerInput component:
import { useState } from "react";
import { MonthPickerInput } from "@mantine/dates";
function Demo() {
const [value, setValue] = useState<Date[]>([]);
return (
<MonthPickerInput
type="multiple"
label="Pick dates"
placeholder="Pick dates"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}
type="range"
example with YearPickerInput component:
import { useState } from "react";
import { YearPickerInput } from "@mantine/dates";
function Demo() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
return (
<YearPickerInput
type="range"
label="Pick dates range"
placeholder="Pick dates range"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}
import { DateTimePicker } from "@mantine/dates";
function Demo() {
return (
<DateTimePicker
label="Pick date and time"
placeholder="Pick date and time"
maw={400}
mx="auto"
/>
);
}
import { useState } from "react";
import { DateInput } from "@mantine/dates";
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<DateInput
value={value}
onChange={setValue}
label="Date input"
placeholder="Date input"
maw={400}
mx="auto"
/>
);
}
import { useState } from "react";
import { Group } from "@mantine/core";
import { YearPicker } from "@mantine/dates";
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<YearPicker value={value} onChange={setValue} />
</Group>
);
}
import { useState } from "react";
import { YearPickerInput } from "@mantine/dates";
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<YearPickerInput
label="Pick date"
placeholder="Pick date"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}
import { useState } from "react";
import { Group } from "@mantine/core";
import { MonthPicker } from "@mantine/dates";
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<MonthPicker value={value} onChange={setValue} />
</Group>
);
}
import { useState } from "react";
import { MonthPickerInput } from "@mantine/dates";
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<MonthPickerInput
label="Pick date"
placeholder="Pick date"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}
Calendar
component can now be used as a base for date pickers with custom logic.
For example, you can build week picker component with it:
import { useState } from "react";
import { Group } from "@mantine/core";
import { Calendar } from "@mantine/dates";
import dayjs from "dayjs";
function getDay(date: Date) {
const day = date.getDay();
return day === 0 ? 6 : day - 1;
}
function startOfWeek(date: Date) {
return new Date(
date.getFullYear(),
date.getMonth(),
date.getDate() - getDay(date) - 1
);
}
function endOfWeek(date: Date) {
return dayjs(
new Date(
date.getFullYear(),
date.getMonth(),
date.getDate() + (6 - getDay(date))
)
)
.endOf("date")
.toDate();
}
function isInWeekRange(date: Date, value: Date | null) {
return (
value &&
dayjs(date).isBefore(endOfWeek(value)) &&
dayjs(date).isAfter(startOfWeek(value))
);
}
function Demo() {
const [hovered, setHovered] = useState<Date | null>(null);
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<Calendar
withCellSpacing={false}
getDayProps={(date) => {
const isHovered = isInWeekRange(date, hovered);
const isSelected = isInWeekRange(date, value);
const isInRange = isHovered || isSelected;
return {
onMouseEnter: () => setHovered(date),
onMouseLeave: () => setHovered(null),
inRange: isInRange,
firstInRange: isInRange && date.getDay() === 1,
lastInRange: isInRange && date.getDay() === 0,
selected: isSelected,
onClick: () => setValue(date),
};
}}
/>
</Group>
);
}
DatesProvider
component lets you set various settings that are shared across all
components exported from @mantine/dates
package:
import "dayjs/locale/ru";
import {
DatesProvider,
MonthPickerInput,
DatePickerInput,
} from "@mantine/dates";
function Demo() {
return (
<DatesProvider
settings={{ locale: "ru", firstDayOfWeek: 0, weekendDays: [0] }}
>
<MonthPickerInput label="Pick month" placeholder="Pick month" />
<DatePickerInput mt="md" label="Pick date" placeholder="Pick date" />
</DatesProvider>
);
}
import { PinInput, Group } from "@mantine/core";
function Demo() {
return (
<Group position="center">
<PinInput />
</Group>
);
}
Overlay component now supports the following new features:
children
inside Overlay
center
prop is set overlay children will be centered vertically and horizontallyfixed
prop controls position
, when it is set position: fixed
, when it is not set position: absolute
import { useState } from "react";
import { Button, Overlay, Image, AspectRatio } from "@mantine/core";
function Demo() {
const [visible, setVisible] = useState(false);
return (
<AspectRatio ratio={16 / 9} maw={400} mx="auto">
<Image
src="https://images.unsplash.com/photo-1546527868-ccb7ee7dfa6a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
onClick={() => setVisible(false)}
/>
{!visible && (
<Overlay blur={15} center>
<Button color="red" radius="xl" onClick={() => setVisible(true)}>
NSFW, click to reveal
</Button>
</Overlay>
)}
</AspectRatio>
);
}
Modal and Drawer components
now expose modular components that can be used to build custom modals and drawers. This feature
allows you to have full control over the component rendering. Previous approach with single
Modal
/Drawer
component will still work the same way as before.
import { useDisclosure } from "@mantine/hooks";
import { Modal, Button, Group } from "@mantine/core";
function Demo() {
const [opened, { open, close }] = useDisclosure(false);
return (
<>
<Modal.Root opened={opened} onClose={close}>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Modal title</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body>Modal content</Modal.Body>
</Modal.Content>
</Modal.Root>
<Group position="center">
<Button onClick={open}>Open modal</Button>
</Group>
</>
);
}
Modal and Drawer components
now use ScrollArea component to handle scroll:
import { useDisclosure } from "@mantine/hooks";
import { Modal, Group, Button } from "@mantine/core";
function Demo() {
const [opened, { open, close }] = useDisclosure(false);
const content = Array(100)
.fill(0)
.map((_, index) => <p key={index}>Modal with scroll</p>);
return (
<>
<Modal opened={opened} onClose={close} title="Header is sticky">
{content}
</Modal>
<Group position="center">
<Button onClick={open}>Open modal</Button>
</Group>
</>
);
}
Modal component now supports xOffset
and yOffset
props
to control vertical and horizontal offsets of the modal content:
import { useDisclosure } from "@mantine/hooks";
import { Modal, Button, Group } from "@mantine/core";
function Demo() {
const [opened, { open, close }] = useDisclosure(false);
return (
<>
<Modal
opened={opened}
onClose={close}
title="Authentication"
yOffset="1vh"
xOffset={0}
>
<AuthenticationForm noShadow noPadding />
</Modal>
<Group position="center">
<Button onClick={open}>Open modal</Button>
</Group>
</>
);
}
Components that use Transition now support keepMounted
.
When keepMounted
prop is set component will not be unmounted from the DOM and instead it will
be hidden with display: none
styles.
keepMounted
prop is supported by the following components:
Pagination component now supports changing icons with props and modular components:
import { Group, Pagination } from "@mantine/core";
function Demo() {
return (
<Pagination.Root total={10}>
<Group spacing={5} position="center">
<Pagination.First />
<Pagination.Previous />
<Pagination.Items />
<Pagination.Next />
<Pagination.Last />
</Group>
</Pagination.Root>
);
}
You can now fully control actions state:
import { useState } from "react";
import { Group, Button } from "@mantine/core";
import { SpotlightProvider, spotlight } from "@mantine/spotlight";
import { IconAlien, IconSearch } from "@tabler/icons-react";
function SpotlightControls() {
const [registered, setRegistered] = useState(false);
return (
<Group position="center">
<Button onClick={spotlight.open}>Open spotlight</Button>
{registered ? (
<Button
variant="outline"
color="red"
onClick={() => {
setRegistered(false);
spotlight.removeActions(["secret-action-1", "secret-action-2"]);
}}
>
Remove extra actions
</Button>
) : (
<Button
variant="outline"
onClick={() => {
setRegistered(true);
spotlight.registerActions([
{
id: "secret-action-1",
title: "Secret action",
description: "It was registered with a button click",
icon: <IconAlien size="1.2rem" />,
onTrigger: () => console.log("Secret"),
},
{
id: "secret-action-2",
title: "Another secret action",
description:
"You can register multiple actions with just one command",
icon: <IconAlien size="1.2rem" />,
onTrigger: () => console.log("Secret"),
},
]);
}}
>
Register extra actions
</Button>
)}
</Group>
);
}
export function Demo() {
// It is required to store actions in state for register/remove functions to work
const [actions, setActions] = useState([
/* ... see in previous demos */
]);
return (
<SpotlightProvider
actions={actions}
onActionChange={setActions}
searchIcon={<IconSearch size="1.2rem" />}
searchPlaceholder="Search..."
shortcut="mod + shift + C"
>
<SpotlightControls />
</SpotlightProvider>
);
}
You can now fully control search query:
import { useState } from "react";
import { Button, Group } from "@mantine/core";
import {
SpotlightProvider,
spotlight,
SpotlightAction,
} from "@mantine/spotlight";
function SpotlightControl() {
return (
<Group position="center">
<Button onClick={spotlight.open}>Open spotlight</Button>
</Group>
);
}
function Demo() {
const [query, setQuery] = useState("");
const actions: SpotlightAction[] =
query !== "%%secret%%"
? [
{
title: "Reveal secret actions",
description: "Click this action to reveal secret actions",
onTrigger: () => setQuery("%%secret%%"),
closeOnTrigger: false,
},
]
: [
{
title: "Super secret action",
keywords: "%%secret%%",
onTrigger: () => {},
},
{
title: "Rick roll",
description: "Do not click",
keywords: "%%secret%%",
onTrigger: () => {
window.location.href =
"https://www.youtube.com/watch?v=dQw4w9WgXcQ";
},
},
];
return (
<SpotlightProvider
actions={actions}
query={query}
onQueryChange={setQuery}
searchIcon={<IconSearch size="1.2rem" />}
searchPlaceholder="Search..."
shortcut="mod + shift + 1"
nothingFoundMessage="Nothing found..."
>
<SpotlightControl />
</SpotlightProvider>
);
}
rightSection
of all inputs is now based on size
prop by default (previously it was a static value)filled
, outline
and light
variantstheme.headings.fontFamily
now fallbacks to theme.fontFamily
if value is not defined on MantineProvider
notifications
object that includes functions to show, update, hide, clean and clean queuenprogress
, modals
and spotlight
objects with all package methodsuseLayoutEffect
by default (configurable with option) to avoid hydration mismatchesReact.useId
hook. This change prevents browser from showing incorrect autocomplete suggestions for inputs.root
Styles API selectorreadOnly
propsize
propform.getTransformedValues
handlerserialize
and deserialize
props to allow custom JSON formatsmatchesField
validatorwithError
parameter is now true by default for all inputsPublished by rtivital over 1 year ago
[@mantine/dates]
Fix inputWrapperOrder
not supported by TimeInput and TimeInputRange components (#3520)[@mantine/core]
Fix AppShell, Dialog, Drawer and Modal components incorrect style props type[@mantine/modals]
Fix centered modal jumping when closed (#3570)[@mantine/core]
Popover: Fix dropdown not following target element inside scrollable container when withinPortal
is set (#3576)[@mantine/core]
Tooltip: Fix incorrect disabled
prop behavior in Tooltip.Floating (#3611)[@mantine/core]
Table: Fix incorrect th styles inside tbody (#3556)[@mantine/core]
Add ColSpan type exports (#3564)[@mantine/core]
PasswordInput: Fix typo in selector (#3553)Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.4...5.10.5
Published by rtivital over 1 year ago
[@mantine/core]
PasswordInput: Hide native browser password reveal button in Edge[@mantine/core]
Notification: Fix content overflow with very large children (#3540)[@mantine/core]
Make useInputProps
hook strongly typed (#3486)[@mantine/core]
MultiSelect: Add missing default value for dropdownPosition
(#3490)[@mantine/core]
Table: Fix styles for th
elements not working inside tbody
(#3504)[@mantine/modals]
Fix multiple closeModal
issues (#3498)[@mantine/hooks]
use-disclosure: Memoize functions (#3513)[@mantine/hooks]
use-focus-trap: Fix aria-hidden not being removed from the body when target element changes (#3526)[@mantine/core]
Allow usage of read only arrays in Select and MulstiSelect components (#3542)[@mantine/core]
Text: Add option to truncate text from the start (#3550)Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.3...5.10.4
Published by rtivital over 1 year ago
[@mantine/core]
Add option to pass additional props to file input in FileButton and FileInput components[@mantine/form]
Fix onBlur
missing in getInputProps type[@mantine/form]
Improve isEmail validation logic (#3443)[@mantine/core]
SimpleGrid: Fix zero spacing and vertical spacing nor working in breakpoints (#3453)[@mantine/dropzone]
Add avif image mime type (#3166)[@mantine/dates]
DateRangePicker: Fix incorrect openDropdownOnClear
behavior (#3299)[@mantine/hooks]
use-hotkeys: Add additional configuration to allow hook usage with content editable elements (#3410)[@mantine/core]
Add hoverOnSearchChange prop to Autocomplete, Select and MultiSelect (#3102)[@mantine/styles]
Fix incorrect useComponentDefaultProps
type (#3484)[@mantine/core]
MultiSelect: Allow to disable selected items filtering from the dropdown items list (#3104)[@mantine/form]
Fix zodResolver
not being type safe with older versions of TypeScript (#3431)[@mantine/carousel]
Fix carousel with vertical orientation working incorrectly with RTL direction (#3438)[@mantine/core]
Fix dropdown position not being updated after Select, MultiSelect and Autocomplete dropdown was flipped and user started searching (#3439)[@mantine/core]
Pagination: Fix spacing={0}
not working (#3456)[@mantine/core]
Dependency: migrate @floating-ui/react-dom-interactions
to @floating-ui/react
(#3471)[@mantine/core]
Skeleton: Allow overflow when children are visible (#3475)[@mantine/core]
TransferList: add transferAllMatchingFilter
prop (#3436)Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.2...5.10.3
Published by rtivital over 1 year ago
[@mantine/modals]
Fix modals closing issues (#3300)[@mantine/tiptap]
Update @tabler/icons installation instructions (#3415)Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.1...5.10.2
Published by rtivital almost 2 years ago
[@mantine/core]
HoverCard: Add missing types for classNames, styles and unstyled props (#3257)[@mantine/modals]
Fix incorrect close modal logic (#3300)[@mantine/hooks]
use-set-state: Make setState fucntion stable across renders (#3357)[@mantine/tiptap]
Fix incorrect styles on placeholder component (#3382)[@mantine/hooks]
use-local-storage: Fix value not updated when local storage value is cleared (#3298)[@mantine/core]
Fix unexpected extra space added at the bottom of Switch, Radio and Checkbox components (#3303)[@mantine/hooks]
use-full-screen: Fix hook not working on iOS (#3327)[@mantine/core]
Stepper: Fix allowStepSelect not working on Stepper.Step component (#3340)[@mantine/form]
Fix useForm initialDirty stops form.isDirty from working as expected (#3372)[@mantine/core]
Stack: Fix incorrect default justify prop (#3293)Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.0...5.10.1
Published by rtivital almost 2 years ago
View changelog with demos on Mantine website
Default props on MantineProvider
can now subscribe to theme:
import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
<MantineProvider
inherit
theme={{
components: {
Button: {
defaultProps: (theme) => ({
color: theme.colorScheme === 'dark' ? 'orange' : 'cyan',
}),
},
},
}}
>
<Button>Demo button</Button>
</MantineProvider>
);
}
@mantine/form
package now exports isNotEmpty
, isEmail
, matches
, isInRange
and hasLength
functions
to simplify validation of common fields types:
import { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } from '@mantine/form';
import { Button, Group, TextInput, NumberInput, Box } from '@mantine/core';
function Demo() {
const form = useForm({
initialValues: {
name: '',
job: '',
email: '',
favoriteColor: '',
age: 18,
},
validate: {
name: hasLength({ min: 2, max: 10 }, 'Name must be 2-22 characters long'),
job: isNotEmpty('Enter your current job'),
email: isEmail('Invalid email'),
favoriteColor: matches(/^#([0-9a-f]{3}){1,2}$/, 'Enter a valid hex color'),
age: isInRange({ min: 18, max: 99 }, 'You must be 18-99 years old to register'),
},
});
return (
<Box component="form" maw={400} mx="auto" onSubmit={form.onSubmit(() => {})}>
<TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} />
<TextInput
label="Your job"
placeholder="Your job"
withAsterisk
mt="md"
{...form.getInputProps('job')}
/>
<TextInput
label="Your email"
placeholder="Your email"
withAsterisk
mt="md"
{...form.getInputProps('email')}
/>
<TextInput
label="Your favorite color"
placeholder="Your favorite color"
withAsterisk
mt="md"
{...form.getInputProps('favoriteColor')}
/>
<NumberInput
label="Your age"
placeholder="Your age"
withAsterisk
mt="md"
{...form.getInputProps('age')}
/>
<Group position="right" mt="md">
<Button type="submit">Submit</Button>
</Group>
</Box>
);
}
New mantine-flagpack extension. It is a set of 4x3 flags as React components based on flagpack.
The package is tree shakable – all unused components are not included in the production bundle.
All flag components support style props.
onColorSwatchClick
propcloseOnColorSwatchClick
propTransformedValues
type to get type of transformed values from the form objectrootColor
proptruncate
propallowSelectNextSteps
propsuperstructResolver
to allow schema based validation with superstruct
capture
propFull Changelog: https://github.com/mantinedev/mantine/compare/5.9.6...5.10.0
Published by rtivital almost 2 years ago
[@mantine/spotlight]
Allow overriding search input size (#3181)[@mantine/core]
Tooltip: Fix incorrect Tooltip.Floating Styles API name[@mantine/core]
ScrollArea: Add viewportProps support[@mantine/core]
Title: Remove span
propFull Changelog: https://github.com/mantinedev/mantine/compare/5.9.5...5.9.6
Published by rtivital almost 2 years ago
[@mantine/tiptap]
Fix LinkControl not supporting custom icon (#3196)[@mantine/hooks]
use-network: Fix incorrect initial online/offline state detection (#3178)[@mantine/core]
Space: Add responsive values support to w and h props[@mantine/core]
FileInput: Fix value overflow when selected value name is too largeFull Changelog: https://github.com/mantinedev/mantine/compare/5.9.4...5.9.5
Published by rtivital almost 2 years ago
[@mantine/core]
Switch: Fix incorrect alignment (#3082)[@mantine/dates]
Fix DateRangePicker and DatePicker components not supporting readOnly prop (#3089)[@mantine/hooks]
use-click-outside: Fix incorrect typescript definition for strict mode (#3119)[@mantine/core]
Input: Fix incorrect Input.Error role, connect Input.Description and Input.Error to the input element with aria-describedby (#3146)[@mantine/tiptap]
Fix control styles API working incorrectly for Link and Color control (#3148)[@mantine/modals]
Increase default zIndex to allow usage with Modal component (#3154)[@mantine/hooks]
use-click-outside: Fix incorrect outside clicks detection when click target is html element (#3143)Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.3...5.9.4
Published by rtivital almost 2 years ago
[@mantine/core]
TypographyStylesProvider: Fix incorrect <code />
styles[@mantine/styles]
Allow createStyle to go to the original definition (#3108)[@mantine/core]
Menu: Change hovered item background-color to make it consistent with other components (#3109)[@mantine/tiptap]
Fix incorrect RichTextEditor ref type (#3142)[@mantine/form]
Fix typing issue with nested interfaces in passed type (#3157)Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.2...5.9.3
Published by rtivital almost 2 years ago
[@mantine/form]
Fix incorrect values type in validation rules (#3110)[@mantine/core]
ScrollArea: Fix flickering[@mantine/core]
AppShell: Fix zIndex prop not being applied to Navbar and Header components[@mantine/dropzone]
Fix getFilesFromEvent error when files are droppped (#3115)[@mantine/core]
Collapse: Rollback axis prop as it breaks regular Collapse usageFull Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2
Published by rtivital almost 2 years ago
[@mantine/styles]
Add access to theme in defaultProps
(#2950)[@mantine/hooks]
use-hotkeys: Add option to specify tags that should be ignored (#3045)[@mantine/form]
Fix incorrect dirty state of the fields calculation after one of list actions was called (#3025)[@mantine/core]
Select: Fix limit
prop not working when current value matches one of the items from data
(#3070)[@mantine/form]
Fix incorrect form.isValid
behavior when nested field has error (#3080)[@mantine/hooks]
use-hash: Fix unexpected rerendering with hash without #
(#3097)[@mantine/core]
Add arrowPosition
prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#3100)[@mantine/form]
Fix implicit any type in validation rules for strict TS mode (#3101)[@mantine/core]
TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#3103)[@mantine/core]
Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#3106)[@mantine/spotlight]
Fix theme.defaultRadius not being respected[@mantine/core]
Select: Fix theme.defaultRadius not being respected by default item component[@mantine/core]
Radio: Automatically generate name if it was not provided via prop[@mantine/dropzone]
Add the getFilesFromEvent and validator props (#3053)[@mantine/hooks]
use-media-query: Fix given initialValue not being used (#3085)Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1
Published by rtivital almost 2 years ago
View changelog with demos on mantine.dev website
New use-eye-dropper hook provides an interface to work with EyeDropper API.
It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.
import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@mantine/core';
import { IconColorPicker } from '@tabler/icons';
import { useEyeDropper } from '@mantine/hooks';
function Demo() {
const [color, setColor] = useState('');
const [error, setError] = useState(null);
const { supported, open } = useEyeDropper();
const pickColor = async () => {
try {
const { sRGBHex } = await open();
setColor(sRGBHex);
} catch (e) {
setError(e);
}
};
if (!supported) {
return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
}
return (
<Group>
<ActionIcon variant="default" onClick={pickColor}>
<IconColorPicker size={16} stroke={1.5} />
</ActionIcon>
{color ? (
<Group spacing="xs">
<ColorSwatch color={color} />
<Text>Picked color: {color}</Text>
</Group>
) : (
<Text>Click the button to pick color</Text>
)}
{error && <Text color="red">Error: {error?.message}</Text>}
</Group>
);
}
ColorInput component now supports withEyeDropper
prop to display eye dropper icon in the right section.
This feature depends on EyeDropper API,
the eye dropper will not be rendered if the API is not supported.
import { ColorInput } from '@mantine/core';
function Demo() {
return (
<ColorInput
withEyeDropper
placeholder="With eye dropper"
label="Pick any color from the page"
/>
);
}
AppShell component now supports placing Navbar
and Aside
components on top of Header
and Footer
with layout="alt"
prop.
Grid component now supports gutterXs
, gutterSm
, gutterMd
, gutterLg
, gutterXl
props:
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
<Grid.Col span={4}>1</Grid.Col>
<Grid.Col span={4}>2</Grid.Col>
<Grid.Col span={4}>3</Grid.Col>
</Grid>
);
}
All static components now support default props on MantineProvider.
The following example demonstrates how to add default props to Menu.Item
, Tabs.List
and
RichTextEditor.Toolbar
components:
import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
components: {
MenuItem: {
defaultProps: { color: 'red' },
},
TabsList: {
defaultProps: {
position: 'right',
},
},
RichTextEditorToolbar: {
defaultProps: {
sticky: true,
stickyOffset: 60,
},
},
},
}}
>
<App />
</MantineProvider>
);
}
Input.Placeholder
component can be used to add placeholder to Input and InputBase components that are based on button
element
or do not support placeholder property natively:
import { Input } from '@mantine/core';
function Demo() {
return (
<Input component="button">
<Input.Placeholder>Placeholder content</Input.Placeholder>
</Input>
);
}
maxRange
propcolor
proprightSectionWidth
and iconWidth
propsFull Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0
Published by rtivital almost 2 years ago
[@mantine/tiptap]
Fix emotion warning produced by placeholder styles :first-child selector usage[@mantine/hooks]
use-move: Fix content on the page being selected when cursor moves over the target element (#3069)[@mantine/core]
Drawer: Add missing Styles API selector for body (#3056)[@mantine/carousel]
Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#3058)[@mantine/core]
Stepper: Fix last item being cut off when used inside flex container (#3062)[@mantine/core]
Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#3065)[@mantine/tiptap]
Add ref forwarding (#3068)Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4
Published by rtivital almost 2 years ago
[@mantine/dropzone]
Add onDropAny
prop to capture both accepted and rejected files (#3010)[@mantine/tiptap]
Fix incorrect content border-radius[@mantine/tiptap]
Fix placeholder extension not working as expected[@mantine/core]
Drawer: Add missing aria-describedby
and aria-labelledby
attributes to the root element (#3027)[@mantine/core]
NumberInput: Fix value not being formatted correctly when precision changes (#3011)Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3
Published by rtivital almost 2 years ago
[@mantine/tiptap]
Fix incorrect hr control label[@mantine/tiptap]
Fix incorrect editor
prop type[@mantine/tiptap]
Fix typo in strikethrough label (#3004)[@mantine/prism]
Fix colorScheme prop not being passed to Prism from Prism.Panel component[@mantine/core]
Pagination: Fix incorrect handling of negative and zero total[@mantine/hooks]
use-pagination: Fix incorrect handling of decimal values passed as total (#2979)[@mantine/core]
NumberInput: Fix readOnly prop not working correctly (#2956)[@mantine/hooks]
Allow usage of use-click-outside and use-focus-trap hooks with shadow DOMFull Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2
Published by rtivital almost 2 years ago
View changelog with demos on mantine.dev website
New @mantine/tiptap package is a replacement
for @mantine/rte package. RichTextEditor
component is now based on Tiptap, it supports all of
Tiptap extensions and provides flexible components API.
import { RichTextEditor, Link } from '@mantine/tiptap';
import { useEditor } from '@tiptap/react';
import Highlight from '@tiptap/extension-highlight';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import TextAlign from '@tiptap/extension-text-align';
import Superscript from '@tiptap/extension-superscript';
import SubScript from '@tiptap/extension-subscript';
const content =
'<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup><sup /></sup> and <sub><sub /></sub> tags)</li><li>Ordered and bullet lists</li><li>Text align </li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
function Demo() {
const editor = useEditor({
extensions: [
StarterKit,
Underline,
Link,
Superscript,
SubScript,
Highlight,
TextAlign.configure({ types: ['heading', 'paragraph'] }),
],
content,
});
return (
<RichTextEditor editor={editor}>
<RichTextEditor.Toolbar sticky stickyOffset={60}>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Bold />
<RichTextEditor.Italic />
<RichTextEditor.Underline />
<RichTextEditor.Strikethrough />
<RichTextEditor.ClearFormatting />
<RichTextEditor.Highlight />
<RichTextEditor.Code />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.H1 />
<RichTextEditor.H2 />
<RichTextEditor.H3 />
<RichTextEditor.H4 />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Blockquote />
<RichTextEditor.Hr />
<RichTextEditor.BulletList />
<RichTextEditor.OrderedList />
<RichTextEditor.Subscript />
<RichTextEditor.Superscript />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Link />
<RichTextEditor.Unlink />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.AlignLeft />
<RichTextEditor.AlignCenter />
<RichTextEditor.AlignJustify />
<RichTextEditor.AlignRight />
</RichTextEditor.ControlsGroup>
</RichTextEditor.Toolbar>
<RichTextEditor.Content />
</RichTextEditor>
);
}
Quill based RichTextEditor is now deprecated.
@mantine/rte
package will no longer receive any updates, support for it
will be discontinued when 6.0.0 version is released. We recommend to switch
to Tiptap based editor as soon as possible.
display
style prop
hexa
formatFull Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0