[Snyk] Upgrade @mantine/hooks from 7.12.0 to 7.12.2 #6
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Snyk has created this PR to upgrade @mantine/hooks from 7.12.0 to 7.12.2. See this package in npm: @mantine/hooks See this project in Snyk: https://app.snyk.io/org/sam-morin/project/9fd9e4ed-6ba3-4c48-a884-691d7ff52205?utm_source=github&utm_medium=referral&page=upgrade-pr
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.12.0 to 7.12.2.
ℹ️ 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 2 versions ahead of your current version.
The recommended version was released on a month ago.
Release notes
Package name: @mantine/hooks
-
7.12.2 - 2024-08-30
- @ timesince made their first contribution in #6654
- @ tokyojack made their first contribution in #6718
- @ Streusel made their first contribution in #6702
- @ fredgig made their first contribution in #6697
- @ chimericdream made their first contribution in #6683
- @ Aybrea made their first contribution in #6724
-
7.12.1 - 2024-08-12
- @ vorant94 made their first contribution in #6530
- @ hajimism made their first contribution in #6539
- @ ziimakc made their first contribution in #6561
- @ th3fallen made their first contribution in #6579
- @ david-szabo97 made their first contribution in #6586
- @ bastiankistner made their first contribution in #6607
- @ inx-fldu made their first contribution in #6569
- @ michaelperros made their first contribution in #6622
- @ risen228 made their first contribution in #6625
- @ ddoemonn made their first contribution in #6629
- @ yorkeJohn made their first contribution in #6632
- @ raulfpl made their first contribution in #6639
- @ uriFrischman made their first contribution in #6645
-
7.12.0 - 2024-08-05
import { Button } from '@ mantine/core';
function Demo() {
import { SemiCircleProgress } from '@ mantine/core';
import { IconChevronDown } from '@ tabler/icons-react';
module.exports = {
- Server components guide has been updated to include
- A guide on applying input focus styles has been updated to work correctly with PasswordInput and other components in which the
- The guide on how to disable all inputs in the form now includes additional instructions for use-form.
- New Can I have color schemes other than light and dark? guide explains the difference between color scheme and theme and why Mantine does not support custom color schemes.
- New Why VSCode cannot autoimport Text component? guide explains why VSCode cannot automatically import
- New Are Mantine components accessible? question
- New How can I focus the first input with error with use-form? question
- New How to scroll to the top of the form if the form is submitted with errors? question
- New Why my notifications are displayed at a wrong position? question
- New Why my screen is completely empty after I've added notifications package? question
- New Why can I not use value/label data structure with Autocomplete/TagsInput? question
- New Why FileButton does not work in Menu? question
- New How can I display different elements in light and dark color schemes? question
- use-interval hook now supports
- use-form with
- ScrollArea component now supports
- Accordion.Panel component now supports
from @mantine/hooks GitHub release notesWhat's Changed
[@ mantine/hooks]use-idle: Fix idle countdown not starting if the user did non interact with the page (#6683)[@ mantine/core]ScrollArea: FixonBottomReachedprop not being available inScrollArea.Autosizecomponent[@ mantine/core]Removechildrenfrom 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 asnoneafter interaction with scrollbar (#6681)[@ mantine/core]Tabs: FixkeepMountedprop being added as attribute toTabs.PanelDOM element (#6711)[@ mantine/core]Tree: AddinitialCheckedStatesupport (#6697)[@ mantine/spotlight]FixSpotlightRootcomponent not being exported (#6710)[@ mantine/dropzone]Add7zandrarmime 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]FixvalueFormatterprop 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 whenminDateis 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.watchcallbacks not being fired whenform.initializeis called (#6639)[@ mantine/core]Switch: Fix Switch shrinking when large label or description is used (#6531)[@ mantine/core]Combobox: FixCombobox.Searchoverflow whenScrollAreais used in the dropdown (#6562)[@ mantine/core]Accordion: Add missingwithPropsfunction (#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.extendfunction (#6576)[@ mantine/spotlight]Fixlimitprop not working correctly with actions groups (#6632)[@ mantine/core]Badge: Fix text overflow not being handled correctly (#6629)[@ mantine/core]SegmentedControl: Adddata-disabledattribute 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: FixonKeyDownprop not working (#6569)[@ mantine/charts]PieChart: FixvalueFormatternot working on outside labels (#6616)[@ mantine/core]Popover: Fixapplyfunction ofsizemiddleware 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-labelbeing 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
useNotificationshook: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
falsein the configuration object. This feature is available starting frompostcss-preset-mantine@1.17.0.'postcss-preset-mantine': {
features: {
// Turn off
light-darkfunctionlightDarkFunction: false,
},
};
Help Center updates
Component.extendusage in server components.inputselector is not used for actual input element.Textcomponent.Other changes
autoInvokeoption 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.onTopReachedandonBottomReachedprops. The functions are called when the user scrolls to the top or bottom of the scroll area.onTransitionEndprop that is called when the panel animation completes.Important
Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.
For more information: