Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Snyk has created this PR to upgrade multiple dependencies.
👯 The following dependencies are linked and will therefore be updated together.ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
@mantine/core
from 7.12.0 to 7.12.2 | 2 versions ahead of your current version | 24 days ago
on 2024-08-30
@mantine/hooks
from 7.12.0 to 7.12.2 | 2 versions ahead of your current version | 24 days ago
on 2024-08-30
@mantine/notifications
from 7.12.0 to 7.12.2 | 2 versions ahead of your current version | 24 days ago
on 2024-08-30
@tabler/icons-react
from 3.12.0 to 3.14.0 | 2 versions ahead of your current version | a month ago
on 2024-08-27
Release notes
Package name: @mantine/core
What's Changed
[@ mantine/hooks]
use-idle: Fix idle countdown not starting if the user did non interact with the page (#6683)[@ mantine/core]
ScrollArea: FixonBottomReached
prop not being available inScrollArea.Autosize
component[@ mantine/core]
Removechildren
from Checkbox, Radio and Switch types to avoid accidental errors[@ mantine/core]
TypographyStylesProvider: Fix incorrect table styles in dark color scheme[@ mantine/form]
Fix error thrown for nullable values dirty status check (#6672)[@ mantine/core]
Badge: Fix unexpected change to block layout, fix incorrect alignment when fixed width is set (#6698, #6680)[@ mantine/core]
ScrollArea: Fix pointer-events being left asnone
after interaction with scrollbar (#6681)[@ mantine/core]
Tabs: FixkeepMounted
prop being added as attribute toTabs.Panel
DOM element (#6711)[@ mantine/core]
Tree: AddinitialCheckedState
support (#6697)[@ mantine/spotlight]
FixSpotlightRoot
component not being exported (#6710)[@ mantine/dropzone]
Add7z
andrar
mime types exports (#6702)[@ mantine/dates]
DatePickerInput: Fix incorrect hovered date logic when the component receives value update with partial selected date range (#6718)[@ mantine/dates]
FixvalueFormatter
prop being added to DateTimePicker types[@ mantine/core]
Badge: Fix right/left sections height affecting the alignment of the label[@ mantine/core]
Menu: Fix accessibility warning in devtools when the Menu is opened (#6644)New Contributors
Full Changelog: 7.12.1...7.12.2
What's Changed
[@ mantine/dates]
DateInput: Fix default date being set to the current date whenminDate
is set to the future (#6646)[@ mantine/core]
ScrollArea: Fix incorrect thumb::before styles[@ mantine/core]
Fix incorrect active styles of buttons used inside disabled fieldset[@ mantine/form]
Fixform.watch
callbacks not being fired whenform.initialize
is called (#6639)[@ mantine/core]
Switch: Fix Switch shrinking when large label or description is used (#6531)[@ mantine/core]
Combobox: FixCombobox.Search
overflow whenScrollArea
is used in the dropdown (#6562)[@ mantine/core]
Accordion: Add missingwithProps
function (#6564)[@ mantine/core]
Pill: Fix remove icon overflowing pill container if its background color was changed with Styles API (#6565)[@ mantine/core]
PinInput: Allow passing props to individual input elements depending on index withgetInputProps
(#6588)[@ mantine/charts]
: Fix LineChart Legend and Tooltip to support nested names (#6536)[@ mantine/core]
Tooltip: Add missingTooltip.Group.extend
function (#6576)[@ mantine/spotlight]
Fixlimit
prop not working correctly with actions groups (#6632)[@ mantine/core]
Badge: Fix text overflow not being handled correctly (#6629)[@ mantine/core]
SegmentedControl: Adddata-disabled
attribute to the root element to simplify styling with Styles API (#6625)[@ mantine/core]
SegmentedControl: Fix initial position of indicator being broken when the component is used inside other element that has transitions on mount (#6622)[@ mantine/core]
TagsInput: FixonKeyDown
prop not working (#6569)[@ mantine/charts]
PieChart: FixvalueFormatter
not working on outside labels (#6616)[@ mantine/core]
Popover: Fixapply
function ofsize
middleware not being handled correctly (#6598)[@ mantine/core]
Chip: Fix incorrect checked padding forsize="xl"
(#6586)[@ mantine/dates]
TimeInput: Fix incorrect focus styles of am/pm input (#6579)[@ mantine/hook]
use-os: Fix incorrect iPadOS detection (#6535)[@ mantine/core]
DatePickerInput: Fix incorrectaria-label
being set on the input element (#6530)[@ mantine/core]
Menu: Fix incorrect Escape key handling inside Modal (#6580)New Contributors
Full Changelog: 7.12.0...7.12.1
View changelog with demos on mantine.dev website
Notifications at any position
It is now possible to display notifications at any position on the screen
with @ mantine/notifications package:
import { notifications } from '@ mantine/notifications';
const positions = [
'top-left',
'top-right',
'bottom-left',
'bottom-right',
'top-center',
'bottom-center',
] as const;
function Demo() {
const buttons = positions.map((position) => (
<Button
key={position}
onClick={() =>
notifications.show({
title:
Notification at <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">position</span><span class="pl-kos">}</span></span>
,message:
Notification at <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">position</span><span class="pl-kos">}</span></span> message
,position,
})
}
>
{position}
</Button>
));
return <Group>{buttons}</Group>;
}
Subscribe to notifications state
You can now subscribe to notifications state changes with
useNotifications
hook:const [counter, { increment }] = useCounter();
const notificationsStore = useNotifications();
const showNotification = () => {
notifications.show({
title:
Notification <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">counter</span><span class="pl-kos">}</span></span>
,message: 'Most notifications are added to queue',
});
};
return (
<>
<Button onClick={showNotification} mb="md">
Show notification
</Button>
);
}
SemiCircleProgress component
New SemiCircleProgress component:
function Demo() {
return (
<SemiCircleProgress
fillDirection="left-to-right"
orientation="up"
filledSegmentColor="blue"
size={200}
thickness={12}
value={40}
label="Label"
/>
);
}
Tree checked state
Tree component now supports checked state:
import { Checkbox, Group, RenderTreeNodePayload, Tree } from '@ mantine/core';
import { data } from './data';
const renderTreeNode = ({
node,
expanded,
hasChildren,
elementProps,
tree,
}: RenderTreeNodePayload) => {
const checked = tree.isNodeChecked(node.value);
const indeterminate = tree.isNodeIndeterminate(node.value);
return (
<Group gap="xs" {...elementProps}>
<Checkbox.Indicator
checked={checked}
indeterminate={indeterminate}
onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
/>
);
};
function Demo() {
return <Tree data={data} levelOffset={23} expandOnClick={false} renderNode={renderTreeNode} />;
}
Disable specific features in postcss-preset-mantine
You can now disable specific features of the postcss-preset-mantine
by setting them to
false
in the configuration object. This feature is available starting frompostcss-preset-mantine@1.17.0
.'postcss-preset-mantine': {
features: {
// Turn off
light-dark
functionlightDarkFunction: false,
},
};
Help Center updates
Component.extend
usage in server components.input
selector is not used for actual input element.Text
component.Other changes
autoInvoke
option to start the interval automatically when the component mounts.mode="uncontrolled"
now triggers additional rerender when dirty state changes to allow subscribing to form state changes.onTopReached
andonBottomReached
props. The functions are called when the user scrolls to the top or bottom of the scroll area.onTransitionEnd
prop that is called when the panel animation completes.Package name: @mantine/hooks
What's Changed
[@ mantine/hooks]
use-idle: Fix idle countdown not starting if the user did non interact with the page (#6683)[@ mantine/core]
ScrollArea: FixonBottomReached
prop not being available inScrollArea.Autosize
component[@ mantine/core]
Removechildren
from Checkbox, Radio and Switch types to avoid accidental errors[@ mantine/core]
TypographyStylesProvider: Fix incorrect table styles in dark color scheme[@ mantine/form]
Fix error thrown for nullable values dirty status check (#6672)[@ mantine/core]
Badge: Fix unexpected change to block layout, fix incorrect alignment when fixed width is set (#6698, #6680)[@ mantine/core]
ScrollArea: Fix pointer-events being left asnone
after interaction with scrollbar (#6681)[@ mantine/core]
Tabs: FixkeepMounted
prop being added as attribute toTabs.Panel
DOM element (#6711)[@ mantine/core]
Tree: AddinitialCheckedState
support (#6697)[@ mantine/spotlight]
FixSpotlightRoot
component not being exported (#6710)[@ mantine/dropzone]
Add7z
andrar
mime types exports (#6702)[@ mantine/dates]
DatePickerInput: Fix incorrect hovered date logic when the component receives value update with partial selected date range (#6718)[@ mantine/dates]
FixvalueFormatter
prop being added to DateTimePicker types[@ mantine/core]
Badge: Fix right/left sections height affecting the alignment of the label[@ mantine/core]
Menu: Fix accessibility warning in devtools when the Menu is opened (#6644)New Contributors