Releases: mantinedev/mantine
8.0.1
What's Changed
[@mantine/hooks]
use-debounced-callback: Addleading: true
option support (#7841)[@mantine/core]
Tabs: Fix incorrect Tabs.List styles withgrow
prop enabled[@mantine/core]
MutltiSelect: FixonPaste
prop not being passed to the input element (#7838)[@mantine/dates]
TimePicker: Fix up/down arrows not working correctly withstep
prop (#7784)[@mantine/core]
Button: Fix FileButton breaking Button.Group styles (#7835)[@mantine/core]
Modal Fix incorrect header styles with ScrollArea (#7832)[@mantine/dropzone]
Fix status being stuck in rejected state when a file with incorrect mime type is dropped[@mantine/core]
Switch: Fix incorrect thumb position in RTL layouts (#7822)[@mantine/core]
AngleSlider: Fix incorrect thumb position in RTL layouts (#7822)[@mantine/core]
Menu: Fix default props not working in Menu.Sub (#7820)[@mantine/core]
Disable scaling explicit rem units in rem function (#7821)[@mantine/core]
Slider: Fix incorrect track width (#7464)[@mantine/dates]
TimeInput: Fixstep
prop not working (#7811)[@mantine/core]
Select: FixonSearchChange
being triggered when controlled search value is updated (#7814)[@mantine/dropzone]
Migrate back to react-dropzone from react-dropzone-esm[@mantine/code-highlight]
Fix tooltip being cut off in components with 1-2 lines of code (#7816)[@mantine/core]
Fix inconsistent disabled styles in some components, add CSS variables for disabled colors (#7805)[@mantine/dates]
DatePicker: Add selected date highlight in year and month picker fortype="default"
(#7799)[@mantine/core]
Table: AddscrollAreaProps
support to Table.ScrollContainer (#7798)[@mantine/core]
Fix boolean value not being included indata-*
attributes types (#7810)[@mantine/dates]
DateInput: Fix incorrectonChange
value type (#7796)[@mantine/core]
Stepper: Fix unexpected bottom spacing in vertical orientation (#7794)[@mantine/core]
PasswordInput: Fixaria-describedby
not pointing to error and description elements (#7793)[@mantine/core]
Switch: Fixdiv
element used inside label (#7776)[@mantine/dates]
Add empty string handling as empty value (#7780)[@mantine/core]
Collapse: Fix children with scale animations not working correctly when collapse is opened (#7774)[@mantine/core]
Transition: FixexitDuration
not working correctly for rapid changes (#7773)[@mantine/dates]
TimePicker: Fix00
in dropdown not being reachable with arrow keys when it is outside scroll position (#7788)[@mantine/core]
Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)[@mantine/core]
Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)
New Contributors
- @mikkurogue made their first contribution in #7780
- @kawarimidoll made their first contribution in #7807
- @codjix made their first contribution in #7804
- @GermainBergeron made their first contribution in #7805
- @kaareal made their first contribution in #7814
- @Bvngee made their first contribution in #7464
- @russellbanks made their first contribution in #7820
- @jonjomckay made their first contribution in #7841
Full Changelog: 8.0.0...8.0.1
8.0.0 πΆοΈ
View changelog with demos on mantine.dev website
Migration guide
This changelog covers breaking changes and new features in Mantine 8.0.
To migrate your application to Mantine 8.0, follow 7.x β 8.x migration guide.
Granular global styles exports
Global styles are now splitted between 3 files:
baseline.css
β a minimal CSS reset, setsbox-sizing: border-box
and changes font propertiesdefault-css-variables.css
β contains all CSS variables generated from the default themeglobal.css
β global classes used in Mantine components
If you previously imported individual styles from @mantine/core
package, you need to update imports
to use new files:
import '@mantine/core/styles/baseline.css';
import '@mantine/core/styles/default-css-variables.css';
import '@mantine/core/styles/global.css';
If you imported @mantine/core/styles.css
, no changes are required β
all new files are already included in styles.css
.
Menu with submenus
Menu component now supports submenus:
import { Button, Menu } from '@mantine/core';
function Demo() {
return (
<Menu width={200} position="bottom-start">
<Menu.Target>
<Button>Toggle Menu</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item>Dashboard</Menu.Item>
<Menu.Sub>
<Menu.Sub.Target>
<Menu.Sub.Item>Products</Menu.Sub.Item>
</Menu.Sub.Target>
<Menu.Sub.Dropdown>
<Menu.Item>All products</Menu.Item>
<Menu.Item>Categories</Menu.Item>
<Menu.Item>Tags</Menu.Item>
<Menu.Item>Attributes</Menu.Item>
<Menu.Item>Shipping classes</Menu.Item>
</Menu.Sub.Dropdown>
</Menu.Sub>
<Menu.Sub>
<Menu.Sub.Target>
<Menu.Sub.Item>Orders</Menu.Sub.Item>
</Menu.Sub.Target>
<Menu.Sub.Dropdown>
<Menu.Item>Open</Menu.Item>
<Menu.Item>Completed</Menu.Item>
<Menu.Item>Cancelled</Menu.Item>
</Menu.Sub.Dropdown>
</Menu.Sub>
<Menu.Sub>
<Menu.Sub.Target>
<Menu.Sub.Item>Settings</Menu.Sub.Item>
</Menu.Sub.Target>
<Menu.Sub.Dropdown>
<Menu.Item>Profile</Menu.Item>
<Menu.Item>Security</Menu.Item>
<Menu.Item>Notifications</Menu.Item>
</Menu.Sub.Dropdown>
</Menu.Sub>
</Menu.Dropdown>
</Menu>
);
}
Popover hideDetached
Popover component now supports hideDetached
prop to configure how the dropdown behaves when the target
element is hidden with styles (display: none
, visibility: hidden
, etc.),
removed from the DOM, or when the target element is scrolled out of the viewport.
By default, hideDetached
is enabled β the dropdown is hidden with the target element.
You can change this behavior with hideDetached={false}
. To see the difference, try to scroll
the root element of the following demo:
import { Box, Button, Group, Popover } from '@mantine/core';
function Demo() {
return (
<Box
bd="1px solid var(--mantine-color-dimmed)"
p="xl"
w={400}
h={200}
style={{ overflow: 'auto' }}
>
<Box w={1000} h={400}>
<Group>
<Popover width="target" position="bottom" opened>
<Popover.Target>
<Button>Toggle popover</Button>
</Popover.Target>
<Popover.Dropdown>This popover dropdown is hidden when detached</Popover.Dropdown>
</Popover>
<Popover width="target" position="bottom" opened hideDetached={false}>
<Popover.Target>
<Button>Toggle popover</Button>
</Popover.Target>
<Popover.Dropdown>This popover dropdown is visible when detached</Popover.Dropdown>
</Popover>
</Group>
</Box>
</Box>
);
}
Date values as strings
All @mantine/dates
components now use date strings in YYYY-MM-DD
or YYYY-MM-DD HH:mm:ss
format instead of Date
objects. This change was made to resolve issues related to timezones
β now the output of all @mantine/dates
components does not include any timezone-specific information.
Follow 7.x β 8.x migration guide to learn how to update the code to use new string values.
Example of using DatePicker component with string values:
import { useState } from 'react';
import { DatePicker } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState<string | null>(null);
return <DatePicker value={value} onChange={setValue} />;
}
DatesProvider timezone
DatesProvider
component no longer supports timezone
option β all @mantine/dates
components now use strings in YYYY-MM-DD HH:mm:ss
format as values and do not contain
timezone information.
If you need to handle timezones in your application, you can use a dedicated dates library
(dayjs, luxon, date-fns)
to update timezone values.
Example of using Mantine components with dayjs:
import dayjs from 'dayjs';
import { DatePicker } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState<string | null>('2022-08-21');
// Mantine components use strings as values, you can pass these
// strings to a dates library of your choice to assign timezone
const dateWithTimeZone = dayjs(value).tz("America/Toronto").toDate();
return <DatePicker value={value} onChange={setValue} />;
}
TimePicker component
New TimePicker component is an alternative to
TimeInput that offers more features. It supports 24-hour and 12-hour formats,
dropdown with hours, minutes and seconds, and more.
import { TimePicker } from '@mantine/dates';
function Demo() {
return (
<>
<TimePicker label="Enter time (24h format)" withSeconds withDropdown />
<TimePicker label="Enter time (12h format)" withSeconds withDropdown format="12h" mt="md" />
</>
);
}
DateTimePicker component changes
DateTimePicker component now uses TimePicker under
the hood instead of TimeInput. You can now use all TimePicker
features with DateTimePicker component.
Prop timeInputProps
is no longer available, to pass props down to the underlying TimePicker
you need to use timePickerProps
prop.
Example of enabling dropdown and setting 12h
format for time picker:
import { DateTimePicker } from '@mantine/dates';
function Demo() {
return (
<DateTimePicker
label="Pick date and time"
placeholder="Pick date and time"
timePickerProps={{
withDropdown: true,
popoverProps: { withinPortal: false },
format: '12h',
}}
/>
);
}
TimeValue component
New TimeValue component can be used to display a formatted time string
with similar formatting options to TimePicker component.
import { Text } from '@mantine/core';
import { TimeValue } from '@mantine/dates';
function Demo() {
return (
<div>
<Text>
24h format: <TimeValue value="18:45:34" />
</Text>
<Text>
12h format: <TimeValue value="18:45:34" format="12h" />
</Text>
</div>
);
}
TimeGrid component
New TimeGrid component allows to capture time value from the user with a
predefined set of time slots:
import { getTimeRange, TimeGrid } from '@mantine/dates';
function Demo() {
return (
<TimeGrid
data={getTimeRange({ startTime: '10:00', endTime: '21:00', interval: '01:00' })}
simpleGridProps={{
type: 'container',
cols: { base: 1, '180px': 2, '320px': 3 },
spacing: 'xs',
}}
withSeconds={false}
/>
);
}
Heatmap component
New Heatmap component allows to display data in a calendar heatmap format:
import dayjs from 'dayjs';
import { Heatmap } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<Heatmap
data={data}
startDate="2024-02-16"
endDate="2025-02-16"
withTooltip
withWeekdayLabels
withMonthLabels
getTooltipLabel={({ date, value }) =>
`${dayjs(date).format('DD MMM, YYYY')} β ${value === null || value === 0 ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
}
/>
);
}
CodeHighlight changes
@mantine/code-highlight package no longer depends on
highlight.js. Instead, it now provides a new API based
on adapters that allows using any syntax highlighter of your choice. Out of the box,
@mantine/code-highlight
provides adapters for shiki and
highlight.js.
To learn about the migration process and how to use the new adapters API, check the
updated CodeHighlight documentation and [7.x β 8.x migration guide](...
7.17.7
What's Changed
[@mantine/core]
Table: FixstickyHeader
prop having impact onth
selector specificity (#7767)[@mantine.core]
NumberInput: Fixmax
prop not reseting value on blur if the value is larger than Number.MAX_SAFE_INTEGER (#7766)[@mantine.hook]
use-resize-observer: Fix width/height not being calculated correctly for elements withbox-sizing: content-box
(#7764)[@mantine/core]
NavLink: FixrightSection={null}
not disabling chevron[@mantine.hook]
use-hotkeys: FixusePhysicalKeys
option not working with spacial keys (#7761)[@mantine/core]
Modal: Fix scrollarea used inside the modal affecting the position of the close button (#7738)[@mantine/core]
Select: Fix defineddefaultValue
being ignored withdata
updates (#7742)[@mantine/core]
ScrollArea: Fix content overflowing the viewport in some cases (#7748)[@mantine/charts]
RadarChart: Add tooltip and dots support (#7749)[@mantine/modals]
FixconfirmProps
not available inupdateModal
function (#7750)[@mantine/hooks]
use-debounced-callback: FixflushOnUnmount
not working (#7745)[@mantine/core]
Table: Add missing TableScrollContainerProps export
New Contributors
- @gfazioli made their first contribution in #7740
- @LilyStilson made their first contribution in #7749
Full Changelog: 7.17.5...7.17.6
7.17.5
What's Changed
[@mantine/form]
Addform.getInitialValues
handler[@mantine/core]
RangeSlider: Fix first thumb not being focused when the component root is clicked (#7731)[@mantine/core]
PillsInput: Remove lefovermultiline
prop types (#7727)[@mantine/charts]
CompositeChart: Fixtype="stacked"
being confused with BarChart behavior[@mantine/core]
Notification: Allow changing role attribute on the root element (#7682)[@mantine/hooks]
use-idle: Fixwheel
event not being tracked (#7669)[@mantine/core]
Table: AddmaxHeight
prop support toTable.ScrollContainer
(#7713)[@mantine/core]
Modal: Fix incorrect Escape key handling during IME composition (#7700)[@mantine/form]
AdddefaultChecked
toform.getInputProps
return type (#7702)[@mantine/hooks]
use-hotkeys: Update matching logic to include both physical and layout keys (#7708)[@mantine/dates]
Fix day.js isSame function not working correctly for non-Gregorian calendars (#7712)[@mantine.core]
SegmentedControl: Fix animation not working with controlled value (#7721)
New Contributors
- @danielytics made their first contribution in #7708
- @tvandoren made their first contribution in #7702
- @AliAkrem made their first contribution in #7669
- @scato3 made their first contribution in #7739
Full Changelog: 7.17.4...7.17.5
7.17.4
What's Changed
[@mantine/hooks]
use-orientation: Add option to customize initial values (#7657)[@mantine/core]
FixselectFirstOptionOnChange
not working correctly (#7583)[@mantine/core]
Fix error thrown when Textarea was used on cloudflare workers (#7637)[@mantine/core]
Allow spacing, radius and font-size types augmentation (#7644)[@mantine/core]
ScrollArea: Fix scrollbars being invisible whenoffsetScrollbars='present'
is not set (#7647)[@mantine/core]
TypographyStylesProvider: Fix headings font-family not matching the value defined on the theme (#7651)[@mantine/core]
Paper: Add CSS variable for border-color for easier overrides (#7654)[@mantine/core]
Table: FixstickyHeader
prop affecting border rendering (#7658)[@mantine/core]
Slider: FixonChangeEnd
using stale external state (#7660)
New Contributors
- @Han5991 made their first contribution in #7660
- @WojakGra made their first contribution in #7658
- @drew-r made their first contribution in #7651
- @mark-night made their first contribution in #7644
- @Odonno made their first contribution in #7636
Full Changelog: 7.17.3...7.17.4
7.17.3
What's Changed
[@mantine/core]
Pill: Fix incorrectremoveButtonProps
type[@mantine/modals]
Fixdata-*
attributes not being included in types for confirm and cancel button props[@mantine/core]
Fix incorrect selected option position handling when search changes in Select, MultiSelect, Autocomplete and TagsInput (#7583)[@mantine/core]
SegmentedControl: Fix incorrect indicator position whendata
is updated (#7615)[@mantine/core]
ScrollArea: Fix scrollbars being revealed on hover when hidden withoffsetScrollbars="present"
(#7599)[@mantine/core]
AppShell: Fix disabled prop not removing aside and footer margins (#7609)[@mantine/modals]
Fix incorrect esm exports paths (#7603)[@mantine/core]
Checkbox: Set indeterminate attribute on the DOM node (#7608, #7613)
New Contributors
- @andrewborstein made their first contribution in #7613
- @connorads made their first contribution in #7603
- @ofk made their first contribution in #7609
Full Changelog: 7.17.2...7.17.3
7.17.2
What's Changed
[@mantine/core]
Menu: Fix missingwithProps
function[@mantine/core]
Transition: Fix 1px child elements shift in Chrome for animations with scaling[@mantine/core]
ScrollArea: AddoffsetScrollbars="present"
option support (#7527)[@mantine/core]
Notification: AddloaderProps
to pass props down to Loader component (#7577)[@mantine/core]
Tooltip: Fixref
prop not working correctly on the child element of the tooltip (#7578)[@mantine/core]
Select: Fix dropdown not openning in Firefox (#7539)
New Contributors
- @yushihang made their first contribution in #7579
Full Changelog: 7.17.1...7.17.2
7.17.1
What's Changed
[@mantine/core]
Select: Fix caret displayed when the readonly input is clicked (#7476)[@mantine/charts]
Fix incorrect types ofclassNames
prop of PieChart and DonutChart components (#7475)[@mantine/charts]
BubbleChart: Fix broken layout whenlabel
prop is used with React 19[@mantine/form]
Fix missingisJSONString
export (#7508)[@mantine/core]
Fix MultiSelect and TagsInputs dropdowns still being opened on click when components were used inside disabled fieldset (#7528)[@mantine/code-highlight]
Fallback unsupported code to plaintext (#7497)[@mantine/emotion]
Improve "Go to definition" support forcreateStyles
classes (#7526)
New Contributors
- @kino90 made their first contribution in #7513
- @tranhl made their first contribution in #7526
- @imcvampire made their first contribution in #7497
- @ched-dev made their first contribution in #7480
- @ysalo made their first contribution in #7508
Full Changelog: 7.17.0...7.17.1
7.17.0 πΆοΈ
View changelog with demos on mantine.dev website
Last 7.x minor release
This is the last minor release in the 7.x
series. The next release will be 8.0
with breaking changes and new features.
You are welcome to review the changelog/code and provide feedback and bug reports in Discord or GitHub discussions:
- Changelog β https://alpha.mantine.dev/changelog/8-0-0/
- Source code β https://github.com/mantinedev/mantine/tree/8.0
How to update your project dependencies to the new alpha version:
- Open your
package.json
- Find all
@mantine/
packages - Update version of all
@mantine/
packages to8.0.0-alpha.0
- Install dependencies with your package manager, for example,
yarn
ornpm install
Important notes:
- 8.0 release is scheduled for May 5th. Until then you can influence the included breaking changes by proving feedback using Discord or GitHub discussions.
- Currently most of planned breaking changes are implemented β it is not planned to introduce other significant breaking changes (unless new versions of recharts or tiptap are released before May 5th).
- You can find the updated source code in 8.0 branch on GitHub
- Since the changes to codebase are not that significant compared to previous major releases, it is not planned to deprecate 7.x version as soon as 8.0 is release. 7.17.x patches are planned to be released for some time β if you are not ready to migrate to 8.x, you will still be able to receive bug fixes for 7.x (no new features though).
Portal reuseTargetNode prop
Portal component now supports reuseTargetNode
prop which allows to reuse the same target node for all instances.
This option is more performant than the previous behavior, it is recommended to be enabled.
This option will be enabled by default in the 8.0
major release.
To enable reuseTargetNode option in all components that depend on Portal, add the following code
to your theme:
import { createTheme, Portal } from '@mantine/core';
export const theme = createTheme({
components: {
Portal: Portal.extend({
defaultProps: {
reuseTargetNode: true,
},
}),
},
});
Example usage. In the following example, all three paragraphs will be rendered in the same target node:
import { Portal } from '@mantine/core';
function Demo() {
return (
<>
<Portal reuseTargetNode>
<p>First</p>
</Portal>
<Portal reuseTargetNode>
<p>Second</p>
</Portal>
<Portal reuseTargetNode>
<p>Third</p>
</Portal>
</>
);
}
use-form formRootRule
formRootRule
is a special rule path that can be used to validate objects and arrays
alongside with their nested fields. For example, it is useful when you want to capture
a list of values, validate each value individually and then validate the list itself
to not be empty:
import { IconTrash } from '@tabler/icons-react';
import { ActionIcon, Button, Group, Switch, Text, TextInput } from '@mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@mantine/form';
import { randomId } from '@mantine/hooks';
function Demo() {
const form = useForm({
mode: 'uncontrolled',
initialValues: {
employees: [{ name: '', active: false, key: randomId() }],
},
validate: {
employees: {
[formRootRule]: isNotEmpty('At least one employee is required'),
name: isNotEmpty('Name is required'),
},
},
});
const fields = form.getValues().employees.map((item, index) => (
<Group key={item.key} mt="xs">
<TextInput
placeholder="John Doe"
withAsterisk
style={{ flex: 1 }}
key={form.key(`employees.${index}.name`)}
{...form.getInputProps(`employees.${index}.name`)}
/>
<Switch
label="Active"
key={form.key(`employees.${index}.active`)}
{...form.getInputProps(`employees.${index}.active`, { type: 'checkbox' })}
/>
<ActionIcon color="red" onClick={() => form.removeListItem('employees', index)}>
<IconTrash size={16} />
</ActionIcon>
</Group>
));
return (
<form onSubmit={form.onSubmit(() => {})}>
{fields.length > 0 ? (
<Group mb="xs">
<Text fw={500} size="sm" style={{ flex: 1 }}>
Name
</Text>
<Text fw={500} size="sm" pr={90}>
Status
</Text>
</Group>
) : (
<Text c="dimmed" ta="center">
No one here...
</Text>
)}
{fields}
{form.errors.employees && (
<Text c="red" size="sm" mt="sm">
{form.errors.employees}
</Text>
)}
<Group justify="space-between" mt="md">
<Button
variant="default"
onClick={() => {
form.insertListItem('employees', { name: '', active: false, key: randomId() });
form.clearFieldError('employees');
}}
>
Add employee
</Button>
<Button type="submit">Submit</Button>
</Group>
</form>
);
}
Another example is to validate an object fields combination:
import { Button, Text, TextInput } from '@mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@mantine/form';
function Demo() {
const form = useForm({
mode: 'uncontrolled',
initialValues: {
user: {
firstName: '',
lastName: '',
},
},
validate: {
user: {
[formRootRule]: (value) =>
value.firstName.trim().length > 0 && value.firstName === value.lastName
? 'First name and last name cannot be the same'
: null,
firstName: isNotEmpty('First name is required'),
lastName: isNotEmpty('Last name is required'),
},
},
});
return (
<form onSubmit={form.onSubmit(() => {})}>
<TextInput
label="First name"
placeholder="First name"
{...form.getInputProps('user.firstName')}
/>
<TextInput
label="Last name"
placeholder="Last name"
mt="md"
{...form.getInputProps('user.lastName')}
/>
{form.errors.user && (
<Text c="red" mt={5} fz="sm">
{form.errors.user}
</Text>
)}
<Button type="submit" mt="lg">
Submit
</Button>
</form>
);
}
isJSONString and isNotEmptyHTML form validators
New isJSONString
and isNotEmptyHTML
form validators:
isNotEmptyHTML
checks that form value is not an empty HTML string. Empty string, string with only HTML tags and whitespace are considered to be empty.isJSONString
checks that form value is a valid JSON string.
import { isJSONString, useForm } from '@mantine/form';
const form = useForm({
mode: 'uncontrolled',
initialValues: {
json: '',
html: '',
},
validate: {
json: isJSONString('Invalid JSON string'),
html: isNotEmptyHTML('HTML cannot be empty'),
},
});
Popover onDismiss
Popover now supports onDismiss
prop, which makes it easier
to subscribe to outside clicks and escape key presses to close popover:
import { useState } from 'react';
import { Button, Popover } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(false);
return (
<Popover opened={opened} onDismiss={() => setOpened(false)}>
<Popover.Target>
<Button onClick={() => setOpened((o) => !o)}>Toggle popover</Button>
</Popover.Target>
<Popover.Dropdown>Dropdown</Popover.Dropdown>
</Popover>
);
}
MantineProvider env
MantineProvider component now supports env
prop.
It can be used in test environment to disable some features that
might impact tests and/or make it harder to test components:
- transitions that mount/unmount child component with delay
- portals that render child component in a different part of the DOM
To enable test environment, set env
to test
:
import { MantineProvider } from '@mantine/core';
function Demo() {
return <MantineProvider env="test">{/* Your app here */}</MantineProvider>;
}
use-file-dialog hook
New use-file-dialog allows capturing one or more files from the user
without file input element:
import { Button, Group, List } from '@mantine/core';
import { useFileDialog } from '@mantine/hooks';
function Demo() {
const fileDialog = useFileDialog();
const pickedFiles = Array.from(fileDialog.files || []).map((file) => (
<List.Item key={file.name}>{file.name}</List.Item>
));
return (
<div>
<Group>
<Button onClick={fileDialog.open}>Pick files</Button>
{pickedFiles.length > 0 && (
<Button variant="default" onClick={fileDialog.reset}>
Reset
</Button>
)}
</Group>
{pickedFiles.length > 0 && <List mt="lg">{pickedFiles}</List>}
</div>
);
}
Remix deprecation
Remix is deprecated, the documentation related to Remix integration
was removed, use React Router instead. To simplify maintenance,
Remix/React Router templates were archived and will not be updated.
Help center updates
7.16.3
What's Changed
[@mantine/core]
Removeuse client
fromisLightColor
function[@mantine/core]
TextInput: Fix autocomplete forvariant
prop not working[@mantine/carousel]
Fix aria-hidden warning displayed in Chrome console when indicator is clicked (#7414)[@mantine/core]
Fix clear button overlaying input content in Autocomplete and other similar components (#7431)[@mantine/core]
Combobox: Fix incorrect dropdown padding when used with ScrollArea (#7450)[@mantine/core]
Fix0
gradientdeg
value not working correctly (#7444)[@mantine/core]
ScrollArea: Fix user-select being left as none after interaction with scrollbar in some edge cases (#7423)[@mantine/dates]
DateInput: Fix infinite loop in Safari (#7442)
New Contributors
- @kingflamez made their first contribution in #7442
- @webkonstantin made their first contribution in #7423
- @marcinlukanus made their first contribution in #7444
Full Changelog: 7.16.2...7.16.3