[Snyk] Upgrade @mantine/dates from 7.10.1 to 7.11.0 #149
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.
This PR was automatically created by Snyk using the credentials of a real user.
![snyk-top-banner](https://github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)
Snyk has created this PR to upgrade @mantine/dates from 7.10.1 to 7.11.0.
ℹ️ 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 22 days ago.
Release notes
Package name: @mantine/dates
View changelog with demos on mantine.dev website
withProps function
All Mantine components now have
withProps
static function that can be used toadd default props to the component:
);
}">
Avatar initials
Avatar component now supports displaying initials with auto generated color based on the given
name
value.To display initials instead of the default placeholder, set
name
propto the name of the person, for example,
name="John Doe"
. If the nameis set, you can use
color="initials"
to generate color based on the name:const names = [
'John Doe',
'Jane Mol',
'Alex Lump',
'Sarah Condor',
'Mike Johnson',
'Kate Kok',
'Tom Smith',
];
function Demo() {
const avatars = names.map((name) => <Avatar key={name} name={name} color="initials" />);
return <Group>{avatars}</Group>;
}
BubbleChart component
New BubbleChart component:
import { data } from './data';
function Demo() {
return (
<BubbleChart
h={60}
data={data}
range={[16, 225]}
label="Sales/hour"
color="lime.6"
dataKey={{ x: 'hour', y: 'index', z: 'value' }}
/>
);
}
BarChart waterfall type
BarChart component now supports
waterfall
typewhich is useful for visualizing changes in values over time:
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="item"
type="waterfall"
series={[{ name: 'Effective tax rate in %', color: 'blue' }]}
withLegend
/>
);
}
LineChart gradient type
LineChart component now supports
gradient
typewhich renders line chart with gradient fill:
import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
series={[{ name: 'temperature', label: 'Avg. Temperature' }]}
dataKey="date"
type="gradient"
gradientStops={[
{ offset: 0, color: 'red.6' },
{ offset: 20, color: 'orange.6' },
{ offset: 40, color: 'yellow.5' },
{ offset: 70, color: 'lime.5' },
{ offset: 80, color: 'cyan.5' },
{ offset: 100, color: 'blue.5' },
]}
strokeWidth={5}
curveType="natural"
yAxisProps={{ domain: [-25, 40] }}
valueFormatter={(value) =>
<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">value</span><span class="pl-kos">}</span></span>°C
}/>
);
}
Right Y axis
LineChart, BarChart and AreaChart components
now support
rightYAxis
prop which renders additional Y axis on the right side of the chart:import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
dataKey="name"
withRightYAxis
yAxisLabel="uv"
rightYAxisLabel="pv"
series={[
{ name: 'uv', color: 'pink.6' },
{ name: 'pv', color: 'cyan.6', yAxisId: 'right' },
]}
/>
);
}
RadarChart legend
RadarChart component now supports legend:
import { data } from './data';
function Demo() {
return (
<RadarChart
h={300}
data={data}
dataKey="product"
withPolarRadiusAxis
withLegend
series={[
{ name: 'Sales January', color: 'blue.6', opacity: 0.2 },
{ name: 'Sales February', color: 'orange.6', opacity: 0.2 },
]}
/>
);
}
TagsInput acceptValueOnBlur
TagsInput component behavior has been changed. Now By default,
if the user types in a value and blurs the input, the value is added to the list.
You can change this behavior by setting
acceptValueOnBlur
tofalse
. In this case, the value is addedonly when the user presses
Enter
or clicks on a suggestion.function Demo() {
return (
<>
<TagsInput
label="Value IS accepted on blur"
placeholder="Enter text, then blur the field"
data={['React', 'Angular', 'Svelte']}
acceptValueOnBlur
/>
<TagsInput
label="Value IS NOT accepted on blur"
placeholder="Enter text, then blur the field"
data={['React', 'Angular', 'Svelte']}
acceptValueOnBlur={false}
mt="md"
/>
</>
);
}
Transition delay
Transition component now supports
enterDelay
andexitDelay
props to delay transition start:import { Button, Flex, Paper, Transition } from '@ mantine/core';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
<Flex maw={200} pos="relative" justify="center" m="auto">
<Button onClick={() => setOpened(true)}>Open dropdown</Button>
);
}
Documentation updates
Progress
component documentationexcludeDate
propOther changes
hideWithOnePage
prop which hides pagination when there is only one pageexpanded
andonExpandedChange
propslineSize
prop to change lines heighthighlightToday
prop to highlight today's dateWhat's Changed
[@ mantine/core]
Select: Fix incorrect state changes handling when bothvalue
andsearchValue
are controlled (#6272)[@ mantine/core]
Stepper: FixautoContrast
prop being added to the DOM element[@ mantine/charts]
PieChart: Fix inner label not using formatted value (#6328)[@ mantine/core]
Fix incorrect color resolving logic in border style prop resolver (#6326)[@ mantine/modals]
Fix incorrect styles of the confirmation modal when it is used without any description (#6325)[@ mantine/core]
ScrollArea: Fix click events being triggered when scrollbar drag is released over an interactive element in Firefox (#6354)[@ mantine/core]
Combobox: Fix clicks on footer and header triggering dropdown close (#6344)[@ mantine/core]
PasswordInput: FixwithErrorStyles
prop being passed to the DOM element (#6348)New Contributors
Full Changelog: 7.10.1...7.10.2
What's Changed
[@ mantine/charts]
BarChart: Add waterfall type (#6231)[@ mantine/form]
Fixform.setFieldError
called insideform.onSubmit
not working correctly in some cases (#6101)[@ mantine/core]
SegmentedControl: Fix false error reported by React 18.3+ for incorrect key prop usage[@ mantine/hooks]
use-fetch: Fix incorrect error handling (#6278)[@ mantine/core]
Fixbd
style prop not being applied in some components (#6282)[@ mantine/core]
NumberInput: Fix incorrect leading zeros handling (#6232)[@ mantine/core]
NumberInput: Fix incorrect logic while editing decimal values (#6232)[@ mantine/core]
ScrollArea: Fix scrollbar flickering on reveal with hover and scroll types (#6218)[@ mantine/hooks]
Update use-throttled-* hooks to emit updates on trailing edges (#6257)[@ mantine/core]
Input: AddinputSize
prop to setsize
html attribute on the input elementNew Contributors
Full Changelog: 7.10.0...7.10.1
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: