Closed thearyadev closed 4 months ago
use-field hook also supports async validation:
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Button, Loader, TextInput } from '@ mantine/core'; import { useField } from '@ mantine/form';
function validateAsync(value: string): Promise<string | null> { return new Promise((resolve) => { window.setTimeout(() => { resolve(value === 'mantine' ? null : 'Value must be "mantine"'); }, 800); }); }
function Demo() { const field = useField({ initialValue: '', validate: validateAsync, });
return ( <> <TextInput {...field.getInputProps()} label="Enter 'mantine'" placeholder="Enter 'mantine'" rightSection={field.isValidating ? <Loader size={18} /> : null} mb="md" /> <Button onClick={field.validate}>Validate async</Button> </> ); }">
import { Button, Loader, TextInput } from '@ mantine/core'; import { useField } from '@ mantine/form';function validateAsync(value: string): Promise<string | null> { return new Promise((resolve) => { window.setTimeout(() => { resolve(value === 'mantine' ? null : 'Value must be "mantine"'); }, 800); }); }
function Demo() { const field = useField({ initialValue: '', validate: validateAsync, });
return ( <> <TextInput {...field.getInputProps()} label="Enter 'mantine'" placeholder="Enter 'mantine'" rightSection={field.isValidating ? <Loader size={18} /> : null} mb="md" /> <Button onClick={field.validate}>Validate async</Button> </> ); }
You can now define custom mixins that are not included in mantine-postcss-preset by specifying them
in the mixins option. To learn about mixins syntax, follow postcss-mixins documentation.
Note that this feature is available in postcss-preset-mantine starting from version 1.15.0.
Example of adding clearfix and circle mixins:
module.exports = {
plugins: {
'postcss-preset-mantine': {
autoRem: true,
mixins: {
clearfix: {
'&::after': {
content: '""',
display: 'table',
clear: 'both',
},
},
circle: (_mixin, size) => ({
borderRadius: '50%',
width: size,
height: size,
}),
},
},
// ... Other plugins
},
};Then you can use these mixins in your styles:
.demo {
@ mixin clearfix;
@ mixin circle 100px;
}New use-matches hook exported from @ mantine/core is an alternative to use-media-query
if you need to match multiple media queries and values. It accepts an object with media queries as keys and
values at given breakpoint as values.
Note that use-matches hook uses the same logic as use-media-query under the hood,
it is not recommended to be used as a primary source of responsive styles, especially if you have ssr in your application.
In the following example:
theme.breakpoints.lg, color will be red.9theme.breakpoints.sm and theme.breakpoints.lg, color will be orange.9theme.breakpoints.sm, color will be blue.9<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Box, useMatches } from '@ mantine/core';
function Demo() { const color = useMatches({ base: 'blue.9', sm: 'orange.9', lg: 'red.9', });
return ( <Box bg={color} c="white" p="xl"> Box with color that changes based on screen size </Box> ); }">
import { Box, useMatches } from '@ mantine/core';function Demo() { const color = useMatches({ base: 'blue.9', sm: 'orange.9', lg: 'red.9', });
return ( <Box bg={color} c="white" p="xl"> Box with color that changes based on screen size </Box> ); }
BarChart now supports withBarValueLabel prop that allows
displaying value label on top of each bar:
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { BarChart } from '@ mantine/charts'; import { data } from './data';
function Demo() { return ( <BarChart h={300} data={data} dataKey="month" valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)} withBarValueLabel series={[ { name: 'Smartphones', color: 'violet.6' }, { name: 'Laptops', color: 'blue.6' }, { name: 'Tablets', color: 'teal.6' }, ]} /> ); }">
import { BarChart } from '@ mantine/charts'; import { data } from './data';function Demo() { return ( <BarChart h={300} data={data} dataKey="month" valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)} withBarValueLabel series={[ { name: 'Smartphones', color: 'violet.6' }, { name: 'Laptops', color: 'blue.6' }, { name: 'Tablets', color: 'teal.6' }, ]} /> ); }
form.key() function </li>
<li>
<b>7.8.1</b> - <a href="https://github.com/mantinedev/mantine/releases/tag/7.8.1">2024-04-23</a></br><h2>Notes</h2>Note that if you've already started using uncontrolled form mode introduced in 7.8.0, you need to include form.key() as described in the documentation.
[@ mantine/form] Add defaultValue to form.getInputProps return type[@ mantine/form] Replace key spread with form.getInputProps with form.key() function[@ mantine/dropzone] Fix keyboard activation not working (#6095)[@ mantine/dates] DatePicker: Fix date range being stuck in incorrect state when controlled state changes to an empty value (#6092)[@ mantine/core] Radio: Allow null to be passed to Radio.Group value to clear the value (#6102)[@ mantine/core] NumberInput: Fix incorrect cursor position when backspace is pressed (#6072)[@ mantine/core] Fix incorrect empty string handling in style props (#6078)Full Changelog: 7.8.0...7.8.1
</li>
</ul>
from <a href="https://github.com/mantinedev/mantine/releases">@mantine/hooks GitHub release notes</a>
[!IMPORTANT]
- Check the changes in this PR to ensure they won't cause issues with your project.
- This PR was automatically created by Snyk using the credentials of a real user.
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:
vercel[bot]
commented
5 months ago The latest updates on your projects. Learn more about Vercel for Git āļø
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| top500-aggregator | ā Failed (Inspect) | Jun 7, 2024 8:11am |
This PR was automatically created by Snyk using the credentials of a real user.
Snyk has created this PR to upgrade @mantine/hooks from 7.8.1 to 7.9.1.
:information_source: 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
What's Changed
[@ mantine/core]Fixtheme.scalebeing ignored in Input, Paper and Table border styles[@ mantine/core]FixvirtualColorfunction requringuse clientin Next.js[@ mantine/core]FloatingIndicator: Fix incorrect resize observer logic (#6129)[@ mantine/core]NumberInput: Fix incorrectallowNegativehandling with up/down arrows (#6170)[@ mantine/core]Fixerror={true}prop set on Checkbox, Radio and Switch rendering unxpected error element with margin[@ mantine/core]SegmentedControl: Fixtheme.primaryColornot being respected in the focus ring styles[@ mantine/core]CloseButton: Fix incorrect specificity of some selectors[@ mantine/core]Fix incorrectaria-labelhandling in Select, Autocomplete, MultiSelect and TagsInputs components (#6123)[@ mantine/core]Modal: PreventonClosefrom being called when modal is not opened (#6156)[@ mantine/core]PasswordInput: Fix duplicated password visibility icon in Edge browser (#6126)[@ mantine/hooks]use-hash: Fix hash value not being updated correctly (#6145)[@ mantine/emotion]Fix incorrect transform logic that was causing extra hooks to render (#6159)New Contributors
Full Changelog: 7.9.0...7.9.1
View changelog with demos on mantine.dev website
@ mantine/emotion package
New @ mantine/emotion package is now available to simplify migration
from 6.x to 7.x. It includes
createStylesfunction and additionalfunctionality for
sxandstylesprops for all components similar to what was availablein
@ mantine/corepackage in v6.If you still haven't migrated to 7.x because of the change in styling approach, you can now
have a smoother transition by using
@ mantine/emotionpackage. To learn more about the package,visit the documentation page and updated 6.x to 7.x migration guide.
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { rem } from '@ mantine/core'; import { createStyles } from '@ mantine/emotion';
const useStyles = createStyles((theme, _, u) => ({ wrapper: { maxWidth: rem(400), width: '100%', height: rem(180), display: 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: 'auto', marginRight: 'auto', borderRadius: theme.radius.sm,
},
child: { // Assign selector to a ref to reference it in other styles ref: u.ref('child'), padding: theme.spacing.md, borderRadius: theme.radius.sm, boxShadow: theme.shadows.md,
}, }));
function Demo() { const { classes } = useStyles();
return ( <div className={classes.wrapper}> <div className={classes.child}>createStyles demo</div> </div> ); }">
React 18.3 support
All
@ mantine/*components and hooks have been updated to support React 18.3. It isrecommended to update your application as well to prepare for the upcoming React 19 release.
use-field hook
New use-field hook is now available in
@ mantine/formpackage.It can be used as a simpler alternative to use-form hook to manage state of a single input without the need to create a form.
The hook supports most of
use-formhook features: validation with function, touched anddirty state, error message, validation on change/blur and more.
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { TextInput } from '@ mantine/core'; import { isEmail, useField } from '@ mantine/form';
function Demo() { const field = useField({ initialValue: '', validateOnChange: true, validate: isEmail('Invalid email'), });
return <TextInput {...field.getInputProps()} label="Email" placeholder="Enter your email" />; }">