[Snyk] Upgrade @mantine/hooks from 7.11.1 to 7.12.1 #241
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 @mantine/hooks from 7.11.1 to 7.12.1.
ℹ️ 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.
The recommended version is 3 versions ahead of your current version.
The recommended version was released on a month ago.
Release notes
Package name: @mantine/hooks
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.What's Changed
[@ mantine/core]
Combobox: Fix inconsistent horizontal dropdown padding[@ mantine/core]
Drawer: Fix content overflowing horizontally on mobile whenoffset
is set[@ mantine/core]
Drawer: Fix double scrollbar appearing whenoffset
andscrollAreaComponent
props are set[@ mantine/carousel]
Fix responsiveslideSize
values working differently from other style props[@ mantine/hooks]
use-interval: AddautoInvoke
option support[@ mantine/hooks]
use-interval: Fix updates to the function and interval timeout being ignored[@ mantine/core]
Anchor: FixlineClamp
prop not working[@ mantine/core]
Anchor: Fix text-decoration styles being inconsistent withvariant="gradient"
[@ mantine/dates]
DateInput: Fix value flickering with custom timezone (#6517)[@ mantine/core]
Burger: FixlineSize
being passed to the DOM node (#6520)[@ mantine/charts]
Add support for nested properties indataKey
(#5886)[@ mantine/core]
Fix Modal/Drawer headers overlaying custom scrollbar (#6175)[@ mantine/charts]
Sparkline: Fix incorrectdata
prop type (#6352)[@ mantine/charts]
FixstrokeColor
prop being passed to the DOM element (#6507)[@ mantine/core]
FocusTrap: Improve compatibility with React 19 (#6492)[@ mantine/hooks]
use-os: Fix iOS being reported as MacOS in several cases (#6511)[@ mantine/emotion]
Fix incorrect types ofcreateStyles
classes (#6490)[@ mantine/core]
Tooltip: FixfloatingStrategy="fixed"
not working (#6502)New Contributors
Full Changelog: 7.11.1...7.11.2
What's Changed
[@ mantine/core]
Add option to displaynothingFoundMessage
when data is empty in Select and MultiSelect components (#6477)[@ mantine/core]
Tooltip: AdddefaultOpened
prop support (#6466)[@ mantine/core]
PinInput: Fix incorrect rtl logic (#6382)[@ mantine/core]
Popover: FixfloatingStrategy="fixed"
not havingposition:fixed
styles (#6419)[@ mantine/spotlight]
Fix spotlight not working correctly with shadow DOM (#6400)[@ mantine/form]
FixonValuesChange
using stale values (#6392)[@ mantine/carousel]
FixonSlideChange
using stale props values (#6393)[@ mantine/charts]
Fix unexpected padding on the right side of the chart in BarChart, AreaChart and LineChart components (#6467)[@ mantine/core]
Select: FixonChange
being called with the already selected if it has been picked from the dropdown (#6468)[@ mantine/dates]
DatePickerInput: FixhighlightToday
not working (#6471)[@ mantine/core]
NumberInput: Fix incorrect handling of numbers larger than max safe integer on blur (#6407)[@ mantine/core]
Tooltip: Fix tooltip arrow being incompatible with headless mode (#6458)[@ mantine/core]
ActionIcon: Fix loading styles inconsistency with Button component (#6460)[@ mantine/charts]
PieChart: Fix key error for duplicatedname
data (#6067)[@ mantine/core]
Modal: FixremoveScrollProps.ref
not being compatible with React 19 (#6446)[@ mantine/core]
TagsInput: FixselectFirstOptionOnChange
prop not working (#6337)[@ mantine/hooks]
use-eye-dropper: Fix Opera being incorrectly detected as a supported browser (#6307)[@ mantine/core]
Fix:host
selector now working correctly incssVariablesSelector
of MantineProvider (#6404)[@ mantine/core]
TagsInput: FixonChange
being called twice when Enter key is pressed in some cases (#6416)[@ mantine/modals]
Fix Modal overrides type augmentation not working with TypeScript 5.5 (#6443)[@ mantine/core]
Tree: FixlevelOffset
prop being added to the root DOM element (#6461)New Contributors