diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index bbd5be4c6d..0000000000 --- a/.eslintignore +++ /dev/null @@ -1,11 +0,0 @@ -lib -esm -cjs -dist -public -.cache -*.d.ts -*.js -*.cjs -*.mjs -apps/mantine.dev/src/components/____test.component.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 5166f8a3fd..0000000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,17 +0,0 @@ -module.exports = { - extends: ['mantine', 'plugin:jest/recommended'], - plugins: ['jest'], - rules: { - 'jest/no-export': 'off', - 'jest/expect-expect': 'off', - 'jest/valid-title': 'off', - 'wrap-iife': 'off', - 'import/no-relative-packages': 'off', - 'no-spaced-func': 'off', - 'consistent-return': 'off', - 'react/react-in-jsx-scope': 'off', - }, - parserOptions: { - project: './tsconfig.eslint.json', - }, -}; diff --git a/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/get-headings.ts b/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/get-headings.ts index ab96570552..27e0746576 100644 --- a/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/get-headings.ts +++ b/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/get-headings.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-loop-func */ export interface Heading { depth: number; content: string; diff --git a/apps/mantine.dev/src/combobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx b/apps/mantine.dev/src/combobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx index 6b29dc25b0..9458fa9143 100644 --- a/apps/mantine.dev/src/combobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx +++ b/apps/mantine.dev/src/combobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx @@ -28,7 +28,7 @@ export function AutocompleteSelectFirstOption() { )); useEffect(() => { - // we need to wait for options to render before we can select first one + // We need to wait for options to render before we can select first one combobox.selectFirstOption(); }, [value]); diff --git a/apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx b/apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx index 27ebad6150..efc024503e 100644 --- a/apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx +++ b/apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx @@ -5,21 +5,27 @@ import { CssVariableColorSwatch } from './CssVariableColorSwatch/CssVariableColo export function CssVariablesList() { const resolvedVariables = defaultCssVariablesResolver(DEFAULT_THEME); const variables = keys(resolvedVariables.variables).map((key) => [ - {key}, + + {key} + , resolvedVariables.variables[key], - , + , ]); const lightVariables = keys(resolvedVariables.light).map((key) => [ - {key}, + + {key} + , resolvedVariables.light[key], - , + , ]); const darkVariables = keys(resolvedVariables.dark).map((key) => [ - {key}, + + {key} + , resolvedVariables.dark[key], - , + , ]); return ( diff --git a/apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx b/apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx index 6040cf9732..f1f4d8a459 100644 --- a/apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx +++ b/apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx @@ -9,7 +9,9 @@ export function CssVariablesTable({ variables }: CssVariablesTableProps) { const resolvedVariables = defaultCssVariablesResolver(DEFAULT_THEME); const data = variables.map((variable) => [ - {variable}, + + {variable} + , resolvedVariables.variables[variable as keyof typeof resolvedVariables.variables], ]); diff --git a/apps/mantine.dev/src/components/MdxProvider/MdxLink/MdxLink.tsx b/apps/mantine.dev/src/components/MdxProvider/MdxLink/MdxLink.tsx index b8f256fca7..e6ca1cd99c 100644 --- a/apps/mantine.dev/src/components/MdxProvider/MdxLink/MdxLink.tsx +++ b/apps/mantine.dev/src/components/MdxProvider/MdxLink/MdxLink.tsx @@ -3,9 +3,9 @@ import { Anchor } from '@mantine/core'; import classes from './MdxLink.module.css'; export function MdxLink({ href, ...others }: React.ComponentPropsWithoutRef<'a'>) { - const replaced = href?.replace('https://mantine.dev', '')!; + const replaced = href?.replace('https://mantine.dev', ''); - if (!replaced?.startsWith('http') && replaced.trim().length > 0) { + if (replaced && !replaced?.startsWith('http') && replaced.trim().length > 0) { return ; } diff --git a/apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx b/apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx index 2d107cda39..2ee23250ab 100644 --- a/apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx +++ b/apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx @@ -51,7 +51,7 @@ interface NavbarLinksGroupProps { export function NavbarLinksGroup({ data, onNavbarClose }: NavbarLinksGroupProps) { const router = useRouter(); const [opened, setOpened] = useState(hasActiveLink(data, router.pathname)); - // const [opened, setOpened] = useState(true); + // Const [opened, setOpened] = useState(true); const itemRefs = useRef>({}); const scrollToLink = (pathname: string) => { diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000000..2087153c8f --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,25 @@ +const mantine = require('eslint-config-mantine'); +const jest = require('eslint-plugin-jest'); +const tseslint = require('typescript-eslint'); + +module.exports = tseslint.config( + ...mantine, + { + languageOptions: { + parserOptions: { + project: './tsconfig.eslint.json', + }, + }, + }, + { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] }, + { + // Jest specific rules + plugins: { jest }, + rules: { + ...jest.configs['flat/recommended'].rules, + 'jest/no-export': 'off', + 'jest/expect-expect': 'off', + 'jest/valid-title': 'off', + }, + } +); diff --git a/package.json b/package.json index 1c02bb089e..5bddd4e94b 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "jest": "jest", "typecheck": "tsc --noEmit && cd apps/mantine.dev && npm run typecheck && cd ../help.mantine.dev && npm run typecheck", "lint": "npm run eslint && npm run stylelint", - "eslint": "eslint packages apps/mantine.dev/src apps/help.mantine.dev/src scripts --ext .ts,.tsx --cache", + "eslint": "eslint packages apps/mantine.dev/src apps/help.mantine.dev/src scripts --cache", "stylelint": "stylelint \"**/*.css\" --cache", "syncpack": "syncpack list-mismatches", "syncpack:format": "syncpack format", @@ -114,6 +114,7 @@ "@babel/preset-env": "^7.23.3", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", + "@eslint/js": "^9.9.1", "@hello-pangea/dnd": "^16.3.0", "@ianvs/prettier-plugin-sort-imports": "^4.1.1", "@rollup/plugin-alias": "^5.0.1", @@ -127,6 +128,7 @@ "@testing-library/react": "15.0.6", "@testing-library/user-event": "14.5.2", "@types/chroma-js": "^2.4.3", + "@types/eslint": "^9", "@types/fs-extra": "^11.0.4", "@types/gh-pages": "^5.0.1", "@types/jest": "^29.5.8", @@ -139,23 +141,17 @@ "@types/rimraf": "^3.0.2", "@types/signale": "^1", "@types/yargs": "^17.0.31", - "@typescript-eslint/eslint-plugin": "^6.8.0", - "@typescript-eslint/parser": "^6.8.0", "babel-loader": "^9.1.3", "chalk": "^5.3.0", "css-loader": "^6.8.1", "cssnano": "^6.0.1", "esbuild": "^0.19.5", "esbuild-jest": "^0.5.0", - "eslint": "^8.51.0", - "eslint-config-airbnb": "19.0.4", - "eslint-config-airbnb-typescript": "^17.1.0", - "eslint-config-mantine": "3.1.0", - "eslint-plugin-import": "^2.28.1", - "eslint-plugin-jest": "^27.6.0", - "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-react": "^7.33.2", - "eslint-plugin-react-hooks": "^4.6.0", + "eslint": "^9.9.1", + "eslint-config-mantine": "^4.0.1", + "eslint-plugin-jest": "^28.8.2", + "eslint-plugin-jsx-a11y": "^6.9.0", + "eslint-plugin-react": "^7.35.0", "execa": "^8.0.1", "fast-glob": "^3.3.2", "fs-extra": "^11.1.1", @@ -193,6 +189,7 @@ "tsconfig-paths-webpack-plugin": "^4.1.0", "tsx": "^4.7.3", "typescript": "5.3.3", + "typescript-eslint": "^8.3.0", "version-next": "^1.0.2", "webpack": "^5.89.0", "wrangler": "^3.34.2", diff --git a/packages/@docs/demos/src/demos/carousel/Carousel.demo.progress.tsx b/packages/@docs/demos/src/demos/carousel/Carousel.demo.progress.tsx index d05fe35168..dc05660773 100644 --- a/packages/@docs/demos/src/demos/carousel/Carousel.demo.progress.tsx +++ b/packages/@docs/demos/src/demos/carousel/Carousel.demo.progress.tsx @@ -58,7 +58,9 @@ function Demo() { const [embla, setEmbla] = useState(null); const handleScroll = useCallback(() => { - if (!embla) return; + if (!embla) { + return; + } const progress = Math.max(0, Math.min(1, embla.scrollProgress())); setScrollProgress(progress * 100); }, [embla, setScrollProgress]); diff --git a/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.customTooltip.tsx index 03faba28b5..fdfe54290d 100644 --- a/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.customTooltip.tsx +++ b/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.customTooltip.tsx @@ -56,7 +56,9 @@ interface ChartTooltipProps { } function ChartTooltip({ label, payload }: ChartTooltipProps) { - if (!payload) return null; + if (!payload) { + return null; + } return ( diff --git a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.customTooltip.tsx index 48630b2414..be9b25893d 100644 --- a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.customTooltip.tsx +++ b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.customTooltip.tsx @@ -55,7 +55,9 @@ interface ChartTooltipProps { } function ChartTooltip({ label, payload }: ChartTooltipProps) { - if (!payload) return null; + if (!payload) { + return null; + } return ( diff --git a/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.customTooltip.tsx index 61806ad4a8..d76ca169c5 100644 --- a/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.customTooltip.tsx +++ b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.customTooltip.tsx @@ -55,7 +55,9 @@ interface ChartTooltipProps { } function ChartTooltip({ label, payload }: ChartTooltipProps) { - if (!payload) return null; + if (!payload) { + return null; + } return ( diff --git a/packages/@docs/demos/src/demos/charts/ScatterChart/ScatterChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/ScatterChart/ScatterChart.demo.customTooltip.tsx index 9dbf515154..bd9fec7097 100644 --- a/packages/@docs/demos/src/demos/charts/ScatterChart/ScatterChart.demo.customTooltip.tsx +++ b/packages/@docs/demos/src/demos/charts/ScatterChart/ScatterChart.demo.customTooltip.tsx @@ -47,7 +47,9 @@ interface ChartTooltipProps { } function ChartTooltip({ payload }: ChartTooltipProps) { - if (!payload) return null; + if (!payload) { + return null; + } return ( diff --git a/packages/@docs/demos/src/demos/core/Combobox/Combobox.demo.selectFirstOption.tsx b/packages/@docs/demos/src/demos/core/Combobox/Combobox.demo.selectFirstOption.tsx index a0aba3a8a1..57a7c82fc2 100644 --- a/packages/@docs/demos/src/demos/core/Combobox/Combobox.demo.selectFirstOption.tsx +++ b/packages/@docs/demos/src/demos/core/Combobox/Combobox.demo.selectFirstOption.tsx @@ -83,7 +83,7 @@ function Demo() { )); useEffect(() => { - // we need to wait for options to render before we can select first one + // We need to wait for options to render before we can select first one combobox.selectFirstOption(); }, [value]); diff --git a/packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx b/packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx index 2d638ac899..a4313a59b9 100644 --- a/packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx +++ b/packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx @@ -27,7 +27,7 @@ function Demo() { function Demo() { const menus = Array(4) .fill(0) - .map((e, i) => ( + .map((_, i) => ( + reveal ? ( + + ) : ( + + ); + function Demo() { return ( - reveal ? ( - - ) : ( - - ) - } + visibilityToggleIcon={VisibilityToggleIcon} /> ); } `; +const VisibilityToggleIcon = ({ reveal }: { reveal: boolean }) => + reveal ? ( + + ) : ( + + ); + function Demo() { return ( - reveal ? ( - - ) : ( - - ) - } + visibilityToggleIcon={VisibilityToggleIcon} /> ); } diff --git a/packages/@docs/demos/src/demos/core/SimpleGrid/SimpleGrid.demo.container.tsx b/packages/@docs/demos/src/demos/core/SimpleGrid/SimpleGrid.demo.container.tsx index 66a363dfc5..2ce7d8141b 100644 --- a/packages/@docs/demos/src/demos/core/SimpleGrid/SimpleGrid.demo.container.tsx +++ b/packages/@docs/demos/src/demos/core/SimpleGrid/SimpleGrid.demo.container.tsx @@ -29,7 +29,7 @@ function Demo() { function Demo() { return ( // Wrapper div is added for demonstration purposes only, - // it is not required in real projects + // It is not required in real projects
({ button: { - // assign reference to selector + // Assign reference to selector ref: u.ref('button'), - // and add any other properties + // And add any other properties backgroundColor: theme.colors.blue[6], color: theme.white, padding: `${theme.spacing.sm} ${theme.spacing.lg}`, @@ -78,7 +78,7 @@ const useStyles = createStyles((theme, _, u) => ({ backgroundColor: theme.colors.dark[8], }, - // reference button with nested selector + // Reference button with nested selector [`&:hover .${u.ref('button')}`]: { backgroundColor: theme.colors.violet[6], }, diff --git a/packages/@docs/demos/src/demos/emotion/Emotion.demo.pseudo.tsx b/packages/@docs/demos/src/demos/emotion/Emotion.demo.pseudo.tsx index e0b51fa592..36d15dbdf6 100644 --- a/packages/@docs/demos/src/demos/emotion/Emotion.demo.pseudo.tsx +++ b/packages/@docs/demos/src/demos/emotion/Emotion.demo.pseudo.tsx @@ -67,7 +67,7 @@ const useStyles = createStyles((theme) => ({ '&:not(:first-of-type)': { backgroundColor: theme.colors.violet[6], - // pseudo-classes can be nested + // Pseudo-classes can be nested '&:hover': { backgroundColor: theme.colors.violet[9], }, diff --git a/packages/@docs/demos/src/demos/form/Form.demo.blurFieldValidation.tsx b/packages/@docs/demos/src/demos/form/Form.demo.blurFieldValidation.tsx index 9a5a8e1d1a..7d0de774c4 100644 --- a/packages/@docs/demos/src/demos/form/Form.demo.blurFieldValidation.tsx +++ b/packages/@docs/demos/src/demos/form/Form.demo.blurFieldValidation.tsx @@ -82,12 +82,12 @@ function Demo() { validateInputOnBlur: [ 'email', 'name', - // use FORM_INDEX to reference fields indices + // Use FORM_INDEX to reference fields indices `jobs.${FORM_INDEX}.title`, ], initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] }, - // functions will be used to validate values at corresponding key + // Functions will be used to validate values at corresponding key validate: { name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null), email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), diff --git a/packages/@docs/demos/src/demos/form/Form.demo.blurValidation.tsx b/packages/@docs/demos/src/demos/form/Form.demo.blurValidation.tsx index bd38e6c4c9..370529073f 100644 --- a/packages/@docs/demos/src/demos/form/Form.demo.blurValidation.tsx +++ b/packages/@docs/demos/src/demos/form/Form.demo.blurValidation.tsx @@ -60,7 +60,7 @@ function Demo() { validateInputOnBlur: true, initialValues: { name: '', email: '', age: 0 }, - // functions will be used to validate values at corresponding key + // Functions will be used to validate values at corresponding key validate: { name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null), email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), diff --git a/packages/@docs/demos/src/demos/form/Form.demo.liveFieldValidation.tsx b/packages/@docs/demos/src/demos/form/Form.demo.liveFieldValidation.tsx index f2c554eeee..cba1d673dc 100644 --- a/packages/@docs/demos/src/demos/form/Form.demo.liveFieldValidation.tsx +++ b/packages/@docs/demos/src/demos/form/Form.demo.liveFieldValidation.tsx @@ -82,12 +82,12 @@ function Demo() { validateInputOnChange: [ 'email', 'name', - // use FORM_INDEX to reference fields indices + // Use FORM_INDEX to reference fields indices `jobs.${FORM_INDEX}.title`, ], initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] }, - // functions will be used to validate values at corresponding key + // Functions will be used to validate values at corresponding key validate: { name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null), email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), diff --git a/packages/@docs/demos/src/demos/form/Form.demo.liveValidation.tsx b/packages/@docs/demos/src/demos/form/Form.demo.liveValidation.tsx index 382a0c9d0d..ea5537295d 100644 --- a/packages/@docs/demos/src/demos/form/Form.demo.liveValidation.tsx +++ b/packages/@docs/demos/src/demos/form/Form.demo.liveValidation.tsx @@ -60,7 +60,7 @@ function Demo() { validateInputOnChange: true, initialValues: { name: '', email: '', age: 0 }, - // functions will be used to validate values at corresponding key + // Functions will be used to validate values at corresponding key validate: { name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null), email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), diff --git a/packages/@docs/demos/src/demos/form/Form.demo.rulesValidation.tsx b/packages/@docs/demos/src/demos/form/Form.demo.rulesValidation.tsx index 94a6ebe5db..cf62970fb3 100644 --- a/packages/@docs/demos/src/demos/form/Form.demo.rulesValidation.tsx +++ b/packages/@docs/demos/src/demos/form/Form.demo.rulesValidation.tsx @@ -58,7 +58,7 @@ function Demo() { mode: 'uncontrolled', initialValues: { name: '', email: '', age: 0 }, - // functions will be used to validate values at corresponding key + // Functions will be used to validate values at corresponding key validate: { name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null), email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), diff --git a/packages/@docs/demos/src/demos/hooks/use-click-outside.demo.events.tsx b/packages/@docs/demos/src/demos/hooks/use-click-outside.demo.events.tsx index b384958e31..089ed02dbe 100644 --- a/packages/@docs/demos/src/demos/hooks/use-click-outside.demo.events.tsx +++ b/packages/@docs/demos/src/demos/hooks/use-click-outside.demo.events.tsx @@ -31,33 +31,31 @@ function Demo() { const ref = useClickOutside(() => setOpened(false), ['mouseup', 'touchend']); return ( - <> -
- - - +
+ + + - {opened && ( - - Click outside to close - - )} -
- + {opened && ( + + Click outside to close + + )} +
); } diff --git a/packages/@docs/demos/src/demos/hooks/use-click-outside.demo.usage.tsx b/packages/@docs/demos/src/demos/hooks/use-click-outside.demo.usage.tsx index 66d26f9cfc..439a0066ac 100644 --- a/packages/@docs/demos/src/demos/hooks/use-click-outside.demo.usage.tsx +++ b/packages/@docs/demos/src/demos/hooks/use-click-outside.demo.usage.tsx @@ -31,33 +31,31 @@ function Demo() { const ref = useClickOutside(() => setOpened(false)); return ( - <> -
- - - +
+ + + - {opened && ( - - Click outside to close - - )} -
- + {opened && ( + + Click outside to close + + )} +
); } diff --git a/packages/@docs/demos/src/demos/hooks/use-in-viewport.demo.usage.tsx b/packages/@docs/demos/src/demos/hooks/use-in-viewport.demo.usage.tsx index 6bffde0413..9f6d6835df 100644 --- a/packages/@docs/demos/src/demos/hooks/use-in-viewport.demo.usage.tsx +++ b/packages/@docs/demos/src/demos/hooks/use-in-viewport.demo.usage.tsx @@ -30,7 +30,7 @@ function Demo() { <> {inViewport ? 'Box is visible' : 'Scroll to see box'} - + A box diff --git a/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.groups.tsx b/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.groups.tsx index 0ef8f3d268..1db589223c 100644 --- a/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.groups.tsx +++ b/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.groups.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-console */ - import { IconSearch } from '@tabler/icons-react'; import { rem } from '@mantine/core'; import { SpotlightActionData, SpotlightActionGroupData } from '@mantine/spotlight'; diff --git a/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.limit.tsx b/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.limit.tsx index ee487c3237..3d2d96b90c 100644 --- a/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.limit.tsx +++ b/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.limit.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-console */ - import { IconSearch } from '@tabler/icons-react'; import { rem } from '@mantine/core'; import { SpotlightActionData } from '@mantine/spotlight'; diff --git a/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.scrollable.tsx b/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.scrollable.tsx index 5f25398bc6..4077dcf284 100644 --- a/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.scrollable.tsx +++ b/packages/@docs/demos/src/demos/spotlight/Spotlight.demo.scrollable.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-console */ - import { IconSearch } from '@tabler/icons-react'; import { rem } from '@mantine/core'; import { SpotlightActionData } from '@mantine/spotlight'; diff --git a/packages/@docs/demos/src/demos/styles/Styles.demo.vars.tsx b/packages/@docs/demos/src/demos/styles/Styles.demo.vars.tsx index 2b0668886e..92a2ad1994 100644 --- a/packages/@docs/demos/src/demos/styles/Styles.demo.vars.tsx +++ b/packages/@docs/demos/src/demos/styles/Styles.demo.vars.tsx @@ -87,7 +87,7 @@ function Demo() { } `; -const varsResolver: PartialVarsResolver = (theme, props) => { +const varsResolver: PartialVarsResolver = (_theme, props) => { if (props.size === 'xxl') { return { root: { @@ -112,7 +112,7 @@ const varsResolver: PartialVarsResolver = (theme, props) => { }; Button.extend({ - vars: (theme, props) => { + vars: (_theme, props) => { if (props.size === 'xxl') { return { root: { diff --git a/packages/@docs/demos/src/demos/tiptap/TipTap.demo.codeHighlight.tsx b/packages/@docs/demos/src/demos/tiptap/TipTap.demo.codeHighlight.tsx index 1764a8f205..ca6b2df1d0 100644 --- a/packages/@docs/demos/src/demos/tiptap/TipTap.demo.codeHighlight.tsx +++ b/packages/@docs/demos/src/demos/tiptap/TipTap.demo.codeHighlight.tsx @@ -85,7 +85,7 @@ function Demo() { } `; -// register languages that your are planning to use +// Register languages that your are planning to use lowlight.register('ts', tsLanguageSyntax); function escapeHtml(unsafe: string) { diff --git a/packages/@mantine-tests/core/src/shared/it-throws-context-error.tsx b/packages/@mantine-tests/core/src/shared/it-throws-context-error.tsx index 856e0fdd0a..6678d8c389 100644 --- a/packages/@mantine-tests/core/src/shared/it-throws-context-error.tsx +++ b/packages/@mantine-tests/core/src/shared/it-throws-context-error.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-console */ - import { patchConsoleError } from '../patch-console-error'; import { render } from '../render'; diff --git a/packages/@mantine-tests/dates/src/it-supports-month-props.tsx b/packages/@mantine-tests/dates/src/it-supports-month-props.tsx index ba79e9827b..4514f1e5c7 100644 --- a/packages/@mantine-tests/dates/src/it-supports-month-props.tsx +++ b/packages/@mantine-tests/dates/src/it-supports-month-props.tsx @@ -26,7 +26,7 @@ export function itSupportsMonthProps(options: Options, name = 'supports month pr const days = getDays(container); expect(days).toHaveLength(35); - // first week of April 2022 (with outside dates) + // First week of April 2022 (with outside dates) expect(days[0].textContent).toBe('28'); expect(days[1].textContent).toBe('29'); expect(days[2].textContent).toBe('30'); @@ -84,7 +84,7 @@ export function itSupportsMonthProps(options: Options, name = 'supports month pr const { container } = render(); const days = getDays(container); - // first week of April 2022 (with outside dates) + // First week of April 2022 (with outside dates) expect(days[0]).toHaveAttribute('data-outside'); expect(days[1]).toHaveAttribute('data-outside'); expect(days[2]).toHaveAttribute('data-outside'); diff --git a/packages/@mantine-tests/dates/src/it-supports-on-day-keydown.tsx b/packages/@mantine-tests/dates/src/it-supports-on-day-keydown.tsx index 23dddc0301..154cd9a4b0 100644 --- a/packages/@mantine-tests/dates/src/it-supports-on-day-keydown.tsx +++ b/packages/@mantine-tests/dates/src/it-supports-on-day-keydown.tsx @@ -13,7 +13,7 @@ export function itSupportsOnDayKeydown(options: Options, name = 'supports __onDa { + __onDayKeyDown={(_event: any, payload: any) => { spy(payload); }} /> diff --git a/packages/@mantine/carousel/src/Carousel.tsx b/packages/@mantine/carousel/src/Carousel.tsx index cab8805cd8..2b8b1b304d 100644 --- a/packages/@mantine/carousel/src/Carousel.tsx +++ b/packages/@mantine/carousel/src/Carousel.tsx @@ -260,7 +260,9 @@ export const Carousel = factory((_props, ref) => { const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]); const handleSelect = useCallback(() => { - if (!embla) return; + if (!embla) { + return; + } const slide = embla.selectedScrollSnap(); setSelected(slide); slide !== selected && onSlideChange?.(slide); diff --git a/packages/@mantine/code-highlight/src/CopyIcon.tsx b/packages/@mantine/code-highlight/src/CopyIcon.tsx index 84bc5817f3..21c7af95a2 100644 --- a/packages/@mantine/code-highlight/src/CopyIcon.tsx +++ b/packages/@mantine/code-highlight/src/CopyIcon.tsx @@ -19,14 +19,14 @@ export function CopyIcon({ copied, style, ...others }: CopyIconProps) { > {copied ? ( <> - - + + ) : ( <> - - - + + + )} diff --git a/packages/@mantine/core/src/components/ActionIcon/ActionIcon.story.tsx b/packages/@mantine/core/src/components/ActionIcon/ActionIcon.story.tsx index 8939413585..3def722f21 100644 --- a/packages/@mantine/core/src/components/ActionIcon/ActionIcon.story.tsx +++ b/packages/@mantine/core/src/components/ActionIcon/ActionIcon.story.tsx @@ -49,7 +49,7 @@ export function SingleButton() { components: { ActionIcon: ActionIcon.extend({ defaultProps: { - // color: 'red', + // Color: 'red', }, }), }, @@ -182,7 +182,7 @@ export function Variables() { { + vars={(_theme, props) => { const result = { root: {} as any }; if (props.size === 'xl') { result.root['--ai-size'] = rem('12rem'); diff --git a/packages/@mantine/core/src/components/Alert/Alert.story.tsx b/packages/@mantine/core/src/components/Alert/Alert.story.tsx index 45b1af1946..66eaa1da12 100644 --- a/packages/@mantine/core/src/components/Alert/Alert.story.tsx +++ b/packages/@mantine/core/src/components/Alert/Alert.story.tsx @@ -126,7 +126,7 @@ export function Unstyled() { export function WithoutDescription() { return (
- +
); } @@ -138,7 +138,7 @@ export function CSSVariables() { components: { Alert: Alert.extend({ defaultProps: { - // color: 'red', + // Color: 'red', }, }), }, diff --git a/packages/@mantine/core/src/components/Alert/Alert.test.tsx b/packages/@mantine/core/src/components/Alert/Alert.test.tsx index 06ff54f491..b368d7150f 100644 --- a/packages/@mantine/core/src/components/Alert/Alert.test.tsx +++ b/packages/@mantine/core/src/components/Alert/Alert.test.tsx @@ -11,9 +11,11 @@ const defaultProps: AlertProps = { describe('@mantine/core/Alert', () => { tests.axe([ - Alert message, - Alert message, - + Alert message, + + Alert message + , + Alert message , ]); diff --git a/packages/@mantine/core/src/components/Autocomplete/Autocomplete.test.tsx b/packages/@mantine/core/src/components/Autocomplete/Autocomplete.test.tsx index 3ecead650b..9715739e54 100644 --- a/packages/@mantine/core/src/components/Autocomplete/Autocomplete.test.tsx +++ b/packages/@mantine/core/src/components/Autocomplete/Autocomplete.test.tsx @@ -8,11 +8,22 @@ const defaultProps: AutocompleteProps = { describe('@mantine/core/Autocomplete', () => { tests.axe([ - , - , - , - , - , + , + , + , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/Avatar/Avatar.test.tsx b/packages/@mantine/core/src/components/Avatar/Avatar.test.tsx index e0ec733513..89d7bfa0e1 100644 --- a/packages/@mantine/core/src/components/Avatar/Avatar.test.tsx +++ b/packages/@mantine/core/src/components/Avatar/Avatar.test.tsx @@ -6,7 +6,7 @@ import { AvatarGroup } from './AvatarGroup/AvatarGroup'; const defaultProps: AvatarProps = {}; describe('@mantine/core/Avatar', () => { - tests.axe([, ]); + tests.axe([, ]); tests.itSupportsSystemProps({ component: Avatar, props: defaultProps, diff --git a/packages/@mantine/core/src/components/Burger/Burger.test.tsx b/packages/@mantine/core/src/components/Burger/Burger.test.tsx index 75e769a3a6..54cc2f6ab7 100644 --- a/packages/@mantine/core/src/components/Burger/Burger.test.tsx +++ b/packages/@mantine/core/src/components/Burger/Burger.test.tsx @@ -6,8 +6,8 @@ const defaultProps: BurgerProps = {}; describe('@mantine/core/Burger', () => { tests.axe([ - , - + , + test , ]); diff --git a/packages/@mantine/core/src/components/Button/Button.story.tsx b/packages/@mantine/core/src/components/Button/Button.story.tsx index 9fc2fd3836..172bc4a200 100644 --- a/packages/@mantine/core/src/components/Button/Button.story.tsx +++ b/packages/@mantine/core/src/components/Button/Button.story.tsx @@ -231,7 +231,7 @@ export function Variables() {
); @@ -173,7 +173,7 @@ export function WithError() { export function Sizes() { return ['xs', 'sm', 'md', 'lg', 'xl'].map((size) => ( - + )); } diff --git a/packages/@mantine/core/src/components/Checkbox/CheckboxCard/CheckboxCard.test.tsx b/packages/@mantine/core/src/components/Checkbox/CheckboxCard/CheckboxCard.test.tsx index 0e7265786b..9c9c336f62 100644 --- a/packages/@mantine/core/src/components/Checkbox/CheckboxCard/CheckboxCard.test.tsx +++ b/packages/@mantine/core/src/components/Checkbox/CheckboxCard/CheckboxCard.test.tsx @@ -4,7 +4,12 @@ import { CheckboxCard, CheckboxCardProps, CheckboxCardStylesNames } from './Chec const defaultProps: CheckboxCardProps = {}; describe('@mantine/core/CheckboxCard', () => { - tests.axe([Label, Label]); + tests.axe([ + Label, + + Label + , + ]); tests.itSupportsSystemProps({ component: CheckboxCard, diff --git a/packages/@mantine/core/src/components/Chip/ChipGroup/ChipGroup.test.tsx b/packages/@mantine/core/src/components/Chip/ChipGroup/ChipGroup.test.tsx index 4d66e8ccd7..bc28141f3a 100644 --- a/packages/@mantine/core/src/components/Chip/ChipGroup/ChipGroup.test.tsx +++ b/packages/@mantine/core/src/components/Chip/ChipGroup/ChipGroup.test.tsx @@ -18,7 +18,7 @@ const clickChip = (index: number, type: 'radio' | 'checkbox') => userEvent.click(getChip(index, type)); describe('@mantine/core/ChipGroup', () => { - tests.axe([]); + tests.axe([]); it('sets chip type based on multiple prop', () => { const { container: multiple } = render(); diff --git a/packages/@mantine/core/src/components/CloseButton/CloseButton.test.tsx b/packages/@mantine/core/src/components/CloseButton/CloseButton.test.tsx index bd15cd313d..6b6af34890 100644 --- a/packages/@mantine/core/src/components/CloseButton/CloseButton.test.tsx +++ b/packages/@mantine/core/src/components/CloseButton/CloseButton.test.tsx @@ -5,7 +5,7 @@ import { CloseIcon } from './CloseIcon'; const defaultProps: CloseButtonProps = {}; describe('@mantine/core/CloseButton', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsFocusEvents({ component: CloseButton, diff --git a/packages/@mantine/core/src/components/ColorInput/ColorInput.test.tsx b/packages/@mantine/core/src/components/ColorInput/ColorInput.test.tsx index 333e7df2ef..75c1f97dc6 100644 --- a/packages/@mantine/core/src/components/ColorInput/ColorInput.test.tsx +++ b/packages/@mantine/core/src/components/ColorInput/ColorInput.test.tsx @@ -8,11 +8,11 @@ const defaultProps: ColorInputProps = { describe('@mantine/core/ColorInput', () => { tests.axe([ - , - , - , - , - , + , + , + , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/ColorPicker/ColorPicker.test.tsx b/packages/@mantine/core/src/components/ColorPicker/ColorPicker.test.tsx index efa008c4c3..00e9c6f557 100644 --- a/packages/@mantine/core/src/components/ColorPicker/ColorPicker.test.tsx +++ b/packages/@mantine/core/src/components/ColorPicker/ColorPicker.test.tsx @@ -14,6 +14,7 @@ describe('@mantine/core/ColorPicker', () => { saturationLabel="Saturation" alphaLabel="Alpha" hueLabel="Hue" + key="1" />, ]); diff --git a/packages/@mantine/core/src/components/ColorSwatch/ColorSwatch.test.tsx b/packages/@mantine/core/src/components/ColorSwatch/ColorSwatch.test.tsx index 653c8ec4f9..132bf1a07e 100644 --- a/packages/@mantine/core/src/components/ColorSwatch/ColorSwatch.test.tsx +++ b/packages/@mantine/core/src/components/ColorSwatch/ColorSwatch.test.tsx @@ -9,8 +9,8 @@ const defaultProps: ColorSwatchProps = { describe('@mantine/core/ColorSwatch', () => { tests.axe([ - , - + , + test-color , ]); diff --git a/packages/@mantine/core/src/components/Combobox/Combobox.story.tsx b/packages/@mantine/core/src/components/Combobox/Combobox.story.tsx index d496e36dd2..6437f48ef3 100644 --- a/packages/@mantine/core/src/components/Combobox/Combobox.story.tsx +++ b/packages/@mantine/core/src/components/Combobox/Combobox.story.tsx @@ -262,7 +262,7 @@ export function WithActive() { } export function Chevron() { - return ; + return ; } export function DifferentTargets() { diff --git a/packages/@mantine/core/src/components/Combobox/Combobox.test.tsx b/packages/@mantine/core/src/components/Combobox/Combobox.test.tsx index 8015685fb7..d989fac54a 100644 --- a/packages/@mantine/core/src/components/Combobox/Combobox.test.tsx +++ b/packages/@mantine/core/src/components/Combobox/Combobox.test.tsx @@ -30,5 +30,5 @@ function AxeTest() { } describe('@mantine/core/Combobox', () => { - tests.axe([]); + tests.axe([]); }); diff --git a/packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts b/packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts index 544501a894..8b97da7ebb 100644 --- a/packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts +++ b/packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts @@ -30,7 +30,9 @@ export function useComboboxTargetProps({ if (withKeyboardNavigation) { // Ignore during composition in IME - if (event.nativeEvent.isComposing) return; + if (event.nativeEvent.isComposing) { + return; + } if (event.nativeEvent.code === 'ArrowDown') { event.preventDefault(); @@ -57,7 +59,9 @@ export function useComboboxTargetProps({ if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') { // This is a workaround for handling differences in behavior of isComposing property in Safari // See: https://dninomiya.github.io/form-guide/stop-enter-submit - if (event.nativeEvent.keyCode === 229) return; + if (event.nativeEvent.keyCode === 229) { + return; + } const selectedOptionIndex = ctx.store.getSelectedOptionIndex(); diff --git a/packages/@mantine/core/src/components/FileButton/FileButton.test.tsx b/packages/@mantine/core/src/components/FileButton/FileButton.test.tsx index 7edb5b3591..a69e07d540 100644 --- a/packages/@mantine/core/src/components/FileButton/FileButton.test.tsx +++ b/packages/@mantine/core/src/components/FileButton/FileButton.test.tsx @@ -11,7 +11,7 @@ const defaultProps: FileButtonProps = { }; describe('@mantine/core/FileButton', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsRef({ component: FileButton, props: defaultProps, diff --git a/packages/@mantine/core/src/components/FileInput/FileInput.test.tsx b/packages/@mantine/core/src/components/FileInput/FileInput.test.tsx index ac39529c26..5e8a1b1e6a 100644 --- a/packages/@mantine/core/src/components/FileInput/FileInput.test.tsx +++ b/packages/@mantine/core/src/components/FileInput/FileInput.test.tsx @@ -7,7 +7,7 @@ const defaultProps: FileInputProps = { }; describe('@mantine/core/FileInput', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: FileInput, diff --git a/packages/@mantine/core/src/components/HoverCard/HoverCard.test.tsx b/packages/@mantine/core/src/components/HoverCard/HoverCard.test.tsx index 8f0990d79c..78d6f97b4d 100644 --- a/packages/@mantine/core/src/components/HoverCard/HoverCard.test.tsx +++ b/packages/@mantine/core/src/components/HoverCard/HoverCard.test.tsx @@ -15,7 +15,7 @@ function TestContainer(props: Partial) { } describe('@mantine/core/HoverCard', () => { - tests.axe([, ]); + tests.axe([, ]); tests.itRendersChildren({ component: HoverCard, props: {}, diff --git a/packages/@mantine/core/src/components/Indicator/Indicator.story.tsx b/packages/@mantine/core/src/components/Indicator/Indicator.story.tsx index 187ed913df..9dd0390288 100644 --- a/packages/@mantine/core/src/components/Indicator/Indicator.story.tsx +++ b/packages/@mantine/core/src/components/Indicator/Indicator.story.tsx @@ -12,12 +12,16 @@ const placements = ['start', 'center', 'end'] as const; export const Positions = () => { const items = positions.map((position) => { const _items = placements.map((placement) => ( - + )); - return {_items}; + return ( + + {_items} + + ); }); return {items}; diff --git a/packages/@mantine/core/src/components/Indicator/Indicator.tsx b/packages/@mantine/core/src/components/Indicator/Indicator.tsx index 4f56816fa6..bcfbaa60e5 100644 --- a/packages/@mantine/core/src/components/Indicator/Indicator.tsx +++ b/packages/@mantine/core/src/components/Indicator/Indicator.tsx @@ -152,14 +152,12 @@ export const Indicator = factory((_props, ref) => { return ( {!disabled && ( - <> - - {label} - - + + {label} + )} {children} diff --git a/packages/@mantine/core/src/components/Input/Input.story.tsx b/packages/@mantine/core/src/components/Input/Input.story.tsx index fce1ab8b81..9b93e45884 100644 --- a/packages/@mantine/core/src/components/Input/Input.story.tsx +++ b/packages/@mantine/core/src/components/Input/Input.story.tsx @@ -124,7 +124,7 @@ export function CompoundComponents() { description="Input description" error="Input error" id="test-id" - styles={(theme, props) => ({ + styles={(_theme, props) => ({ description: { background: props.required ? 'orange' : 'pink', }, diff --git a/packages/@mantine/core/src/components/Input/Input.test.tsx b/packages/@mantine/core/src/components/Input/Input.test.tsx index 8799602738..76163928cc 100644 --- a/packages/@mantine/core/src/components/Input/Input.test.tsx +++ b/packages/@mantine/core/src/components/Input/Input.test.tsx @@ -15,14 +15,15 @@ const getInputWrapper = (element: HTMLElement) => element.querySelector('.mantin describe('@mantine/core/Input', () => { tests.axe([ - , - , - , + , + , + , , diff --git a/packages/@mantine/core/src/components/JsonInput/JsonInput.test.tsx b/packages/@mantine/core/src/components/JsonInput/JsonInput.test.tsx index 78fea315b7..e648d44ca0 100644 --- a/packages/@mantine/core/src/components/JsonInput/JsonInput.test.tsx +++ b/packages/@mantine/core/src/components/JsonInput/JsonInput.test.tsx @@ -8,11 +8,11 @@ const defaultProps: JsonInputProps = { describe('@mantine/core/JsonInput', () => { tests.axe([ - , - , - , - , - , + , + , + , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/Loader/Loader.story.tsx b/packages/@mantine/core/src/components/Loader/Loader.story.tsx index 09f36bec7d..e70c2631f1 100644 --- a/packages/@mantine/core/src/components/Loader/Loader.story.tsx +++ b/packages/@mantine/core/src/components/Loader/Loader.story.tsx @@ -130,6 +130,8 @@ const RingLoader: MantineLoaderComponent = forwardRef(({ style, ...others }, ref )); +RingLoader.displayName = '@mantine/core/RingLoader'; + export function CustomComponent() { return (
diff --git a/packages/@mantine/core/src/components/Loader/Loader.test.tsx b/packages/@mantine/core/src/components/Loader/Loader.test.tsx index b49f0ed7e6..af8d3adf54 100644 --- a/packages/@mantine/core/src/components/Loader/Loader.test.tsx +++ b/packages/@mantine/core/src/components/Loader/Loader.test.tsx @@ -4,6 +4,7 @@ import { defaultLoaders, Loader, LoaderProps, LoaderStylesNames } from './Loader import { MantineLoaderComponent } from './Loader.types'; const customLoader: MantineLoaderComponent = forwardRef(() =>
); +customLoader.displayName = 'CustomLoader'; const defaultProps: LoaderProps = {}; diff --git a/packages/@mantine/core/src/components/Loader/loaders/Bars.tsx b/packages/@mantine/core/src/components/Loader/loaders/Bars.tsx index 84171970b0..1daee2e163 100644 --- a/packages/@mantine/core/src/components/Loader/loaders/Bars.tsx +++ b/packages/@mantine/core/src/components/Loader/loaders/Bars.tsx @@ -11,3 +11,5 @@ export const Bars: MantineLoaderComponent = forwardRef(({ className, ...others } )); + +Bars.displayName = '@mantine/core/Bars'; diff --git a/packages/@mantine/core/src/components/Loader/loaders/Dots.tsx b/packages/@mantine/core/src/components/Loader/loaders/Dots.tsx index c9830101a1..f8bb009833 100644 --- a/packages/@mantine/core/src/components/Loader/loaders/Dots.tsx +++ b/packages/@mantine/core/src/components/Loader/loaders/Dots.tsx @@ -11,3 +11,5 @@ export const Dots: MantineLoaderComponent = forwardRef(({ className, ...others } )); + +Dots.displayName = '@mantine/core/Dots'; diff --git a/packages/@mantine/core/src/components/Loader/loaders/Oval.tsx b/packages/@mantine/core/src/components/Loader/loaders/Oval.tsx index 8f2aebfe79..4ca7e2b31a 100644 --- a/packages/@mantine/core/src/components/Loader/loaders/Oval.tsx +++ b/packages/@mantine/core/src/components/Loader/loaders/Oval.tsx @@ -7,3 +7,5 @@ import classes from '../Loader.module.css'; export const Oval: MantineLoaderComponent = forwardRef(({ className, ...others }, ref) => ( )); + +Oval.displayName = '@mantine/core/Oval'; diff --git a/packages/@mantine/core/src/components/Menu/Menu.test.tsx b/packages/@mantine/core/src/components/Menu/Menu.test.tsx index 6614082901..46bacae394 100644 --- a/packages/@mantine/core/src/components/Menu/Menu.test.tsx +++ b/packages/@mantine/core/src/components/Menu/Menu.test.tsx @@ -34,7 +34,7 @@ const expectOpened = () => expect(screen.getByRole('menu')).toBeInTheDocument(); const getControl = () => screen.getByRole('button'); describe('@mantine/core/Menu', () => { - tests.axe([]); + tests.axe([]); tests.itHasExtend({ component: Menu }); tests.itHasClasses({ component: Menu }); tests.itRendersChildren({ component: Menu, props: {} }); @@ -199,7 +199,7 @@ describe('@mantine/core/Menu', () => { expect(onChange).toHaveBeenLastCalledWith(false); }); - it('correctly calls callbacks when opening and closing the controlled menu only via prop', async () => { + it('correctly calls callbacks when opening and closing the controlled menu only via prop', () => { const onOpen = jest.fn(); const onClose = jest.fn(); const onChange = jest.fn(); diff --git a/packages/@mantine/core/src/components/Menu/Menu.tsx b/packages/@mantine/core/src/components/Menu/Menu.tsx index 86f488e5a1..b4cd303e2f 100644 --- a/packages/@mantine/core/src/components/Menu/Menu.tsx +++ b/packages/@mantine/core/src/components/Menu/Menu.tsx @@ -82,7 +82,7 @@ export interface MenuProps extends __PopoverProps, StylesApiProps { /** Events that trigger outside clicks */ clickOutsideEvents?: string[]; - /** id base to create accessibility connections */ + /** Id base to create accessibility connections */ id?: string; /** Set the `tabindex` on all menu items. Defaults to -1 */ diff --git a/packages/@mantine/core/src/components/Menu/MenuDropdown/MenuDropdown.tsx b/packages/@mantine/core/src/components/Menu/MenuDropdown/MenuDropdown.tsx index 678d968ef7..69534c74ca 100644 --- a/packages/@mantine/core/src/components/Menu/MenuDropdown/MenuDropdown.tsx +++ b/packages/@mantine/core/src/components/Menu/MenuDropdown/MenuDropdown.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { useRef } from 'react'; import { useMergedRef } from '@mantine/hooks'; import { diff --git a/packages/@mantine/core/src/components/ModalBase/ModalBase.tsx b/packages/@mantine/core/src/components/ModalBase/ModalBase.tsx index e353709120..be6d993008 100644 --- a/packages/@mantine/core/src/components/ModalBase/ModalBase.tsx +++ b/packages/@mantine/core/src/components/ModalBase/ModalBase.tsx @@ -150,3 +150,5 @@ export const ModalBase = forwardRef( ); } ); + +ModalBase.displayName = '@mantine/core/ModalBase'; diff --git a/packages/@mantine/core/src/components/ModalBase/ModalBaseContent.tsx b/packages/@mantine/core/src/components/ModalBase/ModalBaseContent.tsx index 7be5929b78..3ead27f149 100644 --- a/packages/@mantine/core/src/components/ModalBase/ModalBaseContent.tsx +++ b/packages/@mantine/core/src/components/ModalBase/ModalBaseContent.tsx @@ -60,3 +60,5 @@ export const ModalBaseContent = forwardRef { tests.axe([ - , - , - , - , - , - , + , + , + , + , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/NativeSelect/NativeSelect.test.tsx b/packages/@mantine/core/src/components/NativeSelect/NativeSelect.test.tsx index 221c96221e..0dc0540564 100644 --- a/packages/@mantine/core/src/components/NativeSelect/NativeSelect.test.tsx +++ b/packages/@mantine/core/src/components/NativeSelect/NativeSelect.test.tsx @@ -15,11 +15,11 @@ const defaultProps: NativeSelectProps = { describe('@mantine/core/NativeSelect', () => { tests.axe([ - , - , - , - , - , + , + , + , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/NavLink/NavLink.story.tsx b/packages/@mantine/core/src/components/NavLink/NavLink.story.tsx index d3f6be88d7..b133482859 100644 --- a/packages/@mantine/core/src/components/NavLink/NavLink.story.tsx +++ b/packages/@mantine/core/src/components/NavLink/NavLink.story.tsx @@ -118,6 +118,7 @@ export function DynamicNestedItems() { .fill(0) .map((_, index) => ( } /> diff --git a/packages/@mantine/core/src/components/Notification/Notification.test.tsx b/packages/@mantine/core/src/components/Notification/Notification.test.tsx index fcaadf80b5..fc99c17441 100644 --- a/packages/@mantine/core/src/components/Notification/Notification.test.tsx +++ b/packages/@mantine/core/src/components/Notification/Notification.test.tsx @@ -10,7 +10,7 @@ const defaultProps: NotificationProps = { }; describe('@mantine/core/Notification', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: Notification, diff --git a/packages/@mantine/core/src/components/NumberInput/NumberInput.test.tsx b/packages/@mantine/core/src/components/NumberInput/NumberInput.test.tsx index 23f0b52c0d..14c389c6ea 100644 --- a/packages/@mantine/core/src/components/NumberInput/NumberInput.test.tsx +++ b/packages/@mantine/core/src/components/NumberInput/NumberInput.test.tsx @@ -28,11 +28,11 @@ const focusInput = () => fireEvent.focus(getInput()); describe('@mantine/core/NumberInput', () => { tests.axe([ - , - , - , - , - , + , + , + , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/NumberInput/NumberInput.tsx b/packages/@mantine/core/src/components/NumberInput/NumberInput.tsx index d10077d8d7..9b3fad88e5 100644 --- a/packages/@mantine/core/src/components/NumberInput/NumberInput.tsx +++ b/packages/@mantine/core/src/components/NumberInput/NumberInput.tsx @@ -20,11 +20,11 @@ import { UnstyledButton } from '../UnstyledButton'; import { NumberInputChevron } from './NumberInputChevron'; import classes from './NumberInput.module.css'; -// re for negative -0, -0., -0.0, -0.00, -0.000 ... strings -// and for positive 0., 0.0, 0.00, 0.000 ... strings +// Re for negative -0, -0., -0.0, -0.00, -0.000 ... strings +// And for positive 0., 0.0, 0.00, 0.000 ... strings const leadingDecimalZeroPattern = /^(0\.0*|-0(\.0*)?)$/; -// re for 01, 006, 00.02, -0010, -000.293 ... and negative counterparts +// Re for 01, 006, 00.02, -0010, -000.293 ... and negative counterparts const leadingZerosPattern = /^-?0\d+(\.\d+)?\.?$/; export interface NumberInputHandlers { diff --git a/packages/@mantine/core/src/components/Pagination/Pagination.test.tsx b/packages/@mantine/core/src/components/Pagination/Pagination.test.tsx index 207da18995..df29534a38 100644 --- a/packages/@mantine/core/src/components/Pagination/Pagination.test.tsx +++ b/packages/@mantine/core/src/components/Pagination/Pagination.test.tsx @@ -7,7 +7,7 @@ const defaultProps: PaginationProps = { }; describe('@mantine/core/Pagination', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: Pagination, diff --git a/packages/@mantine/core/src/components/PasswordInput/PasswordInput.test.tsx b/packages/@mantine/core/src/components/PasswordInput/PasswordInput.test.tsx index 4dc75396b3..e75e7e1afe 100644 --- a/packages/@mantine/core/src/components/PasswordInput/PasswordInput.test.tsx +++ b/packages/@mantine/core/src/components/PasswordInput/PasswordInput.test.tsx @@ -11,23 +11,31 @@ describe('@mantine/core/PasswordInput', () => { , + , - , , , , ]); diff --git a/packages/@mantine/core/src/components/Pill/Pill.test.tsx b/packages/@mantine/core/src/components/Pill/Pill.test.tsx index 87ffc27cdb..2a6bece751 100644 --- a/packages/@mantine/core/src/components/Pill/Pill.test.tsx +++ b/packages/@mantine/core/src/components/Pill/Pill.test.tsx @@ -7,7 +7,7 @@ const defaultProps: PillProps = { }; describe('@mantine/core/Pill', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: Pill, diff --git a/packages/@mantine/core/src/components/PillsInput/PillsInput.test.tsx b/packages/@mantine/core/src/components/PillsInput/PillsInput.test.tsx index 7973a416e7..e9d808f418 100644 --- a/packages/@mantine/core/src/components/PillsInput/PillsInput.test.tsx +++ b/packages/@mantine/core/src/components/PillsInput/PillsInput.test.tsx @@ -8,19 +8,19 @@ const defaultProps: PillsInputProps = { describe('@mantine/core/PillsInput', () => { tests.axe([ - + , - + , - + , - + , ]); diff --git a/packages/@mantine/core/src/components/PinInput/PinInput.tsx b/packages/@mantine/core/src/components/PinInput/PinInput.tsx index 91d313bbbd..dcc667a690 100644 --- a/packages/@mantine/core/src/components/PinInput/PinInput.tsx +++ b/packages/@mantine/core/src/components/PinInput/PinInput.tsx @@ -345,7 +345,9 @@ export const PinInput = factory((props, ref) => { }; useEffect(() => { - if (_valueToString.length !== length) return; + if (_valueToString.length !== length) { + return; + } onComplete?.(_valueToString); }, [length, _valueToString]); diff --git a/packages/@mantine/core/src/components/Popover/Popover.test.tsx b/packages/@mantine/core/src/components/Popover/Popover.test.tsx index 44fea4a229..b752501c12 100644 --- a/packages/@mantine/core/src/components/Popover/Popover.test.tsx +++ b/packages/@mantine/core/src/components/Popover/Popover.test.tsx @@ -28,7 +28,7 @@ function TestContainer(props: Partial) { } describe('@mantine/core/Popover', () => { - tests.axe([, ]); + tests.axe([, ]); tests.itHasExtend({ component: Popover }); tests.itRendersChildren({ component: Popover, props: defaultProps }); tests.itSupportsStylesApi({ diff --git a/packages/@mantine/core/src/components/Popover/Popover.tsx b/packages/@mantine/core/src/components/Popover/Popover.tsx index aef87122c0..c0685495bf 100644 --- a/packages/@mantine/core/src/components/Popover/Popover.tsx +++ b/packages/@mantine/core/src/components/Popover/Popover.tsx @@ -133,7 +133,7 @@ export interface PopoverProps extends __PopoverProps, StylesApiProps { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: Progress, diff --git a/packages/@mantine/core/src/components/Progress/ProgressSection/ProgressSection.test.tsx b/packages/@mantine/core/src/components/Progress/ProgressSection/ProgressSection.test.tsx index 288ac8d55e..d5569031aa 100644 --- a/packages/@mantine/core/src/components/Progress/ProgressSection/ProgressSection.test.tsx +++ b/packages/@mantine/core/src/components/Progress/ProgressSection/ProgressSection.test.tsx @@ -13,7 +13,7 @@ const defaultProps: ProgressSectionProps = { }; describe('@mantine/core/ProgressSection', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: TestContainer, diff --git a/packages/@mantine/core/src/components/Radio/RadioCard/RadioCard.test.tsx b/packages/@mantine/core/src/components/Radio/RadioCard/RadioCard.test.tsx index e7f0daf1a0..e665da372c 100644 --- a/packages/@mantine/core/src/components/Radio/RadioCard/RadioCard.test.tsx +++ b/packages/@mantine/core/src/components/Radio/RadioCard/RadioCard.test.tsx @@ -4,7 +4,12 @@ import { RadioCard, RadioCardProps, RadioCardStylesNames } from './RadioCard'; const defaultProps: RadioCardProps = {}; describe('@mantine/core/RadioCard', () => { - tests.axe([Label, Label]); + tests.axe([ + Label, + + Label + , + ]); tests.itSupportsSystemProps({ component: RadioCard, diff --git a/packages/@mantine/core/src/components/Radio/RadioGroup/RadioGroup.test.tsx b/packages/@mantine/core/src/components/Radio/RadioGroup/RadioGroup.test.tsx index 8c3fd885ef..8aadd62434 100644 --- a/packages/@mantine/core/src/components/Radio/RadioGroup/RadioGroup.test.tsx +++ b/packages/@mantine/core/src/components/Radio/RadioGroup/RadioGroup.test.tsx @@ -16,7 +16,7 @@ const defaultProps: RadioGroupProps = { describe('@mantine/core/RadioGroup', () => { tests.axe([ - + diff --git a/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.tsx b/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.tsx index bae0fb727d..0a296da214 100644 --- a/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.tsx +++ b/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.tsx @@ -37,3 +37,5 @@ export const ScrollAreaScrollbar = forwardRef { - if (context.viewport) context.viewport.scrollLeft = scrollPos; + if (context.viewport) { + context.viewport.scrollLeft = scrollPos; + } }} onDragScroll={(pointerPos) => { if (context.viewport) { @@ -96,10 +98,14 @@ export const ScrollAreaScrollbarVisible = forwardRef< } }} onWheelScroll={(scrollPos) => { - if (context.viewport) context.viewport.scrollTop = scrollPos; + if (context.viewport) { + context.viewport.scrollTop = scrollPos; + } }} onDragScroll={(pointerPos) => { - if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos); + if (context.viewport) { + context.viewport.scrollTop = getScrollPosition(pointerPos); + } }} /> ); @@ -107,3 +113,5 @@ export const ScrollAreaScrollbarVisible = forwardRef< return null; }); + +ScrollAreaScrollbarVisible.displayName = '@mantine/core/ScrollAreaScrollbarVisible'; diff --git a/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx b/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx index c08ca93d2a..f869cb8fdc 100644 --- a/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx +++ b/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx @@ -58,7 +58,9 @@ export const Scrollbar = forwardRef((props, forw const handleWheel = (event: WheelEvent) => { const element = event.target as HTMLElement; const isScrollbarWheel = scrollbar?.contains(element); - if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos); + if (isScrollbarWheel) { + handleWheelScroll(event, maxScrollPos); + } }; document.addEventListener('wheel', handleWheel, { passive: false }); return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any); diff --git a/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.tsx b/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.tsx index c312936bad..9eda799ac0 100644 --- a/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.tsx +++ b/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.tsx @@ -14,7 +14,9 @@ export const ScrollAreaScrollbarX = forwardRef { - if (ref.current) setComputedStyle(getComputedStyle(ref.current)); + if (ref.current) { + setComputedStyle(getComputedStyle(ref.current)); + } }, [ref]); return ( @@ -55,3 +57,5 @@ export const ScrollAreaScrollbarX = forwardRef((props, forwardedRef ); }); +Thumb.displayName = '@mantine/core/ScrollAreaThumb'; + interface ScrollAreaThumbProps extends ThumbProps { forceMount?: true; } @@ -77,3 +79,5 @@ export const ScrollAreaThumb = forwardRef( return null; } ); + +ScrollAreaThumb.displayName = '@mantine/core/ScrollAreaThumb'; diff --git a/packages/@mantine/core/src/components/ScrollArea/utils/add-unlinked-scroll-listener.tsx b/packages/@mantine/core/src/components/ScrollArea/utils/add-unlinked-scroll-listener.tsx index 8822123bc8..c869a4237b 100644 --- a/packages/@mantine/core/src/components/ScrollArea/utils/add-unlinked-scroll-listener.tsx +++ b/packages/@mantine/core/src/components/ScrollArea/utils/add-unlinked-scroll-listener.tsx @@ -5,7 +5,9 @@ export function addUnlinkedScrollListener(node: HTMLElement, handler = () => {}) const position = { left: node.scrollLeft, top: node.scrollTop }; const isHorizontalScroll = prevPosition.left !== position.left; const isVerticalScroll = prevPosition.top !== position.top; - if (isHorizontalScroll || isVerticalScroll) handler(); + if (isHorizontalScroll || isVerticalScroll) { + handler(); + } prevPosition = position; rAF = window.requestAnimationFrame(loop); })(); diff --git a/packages/@mantine/core/src/components/ScrollArea/utils/linear-scale.ts b/packages/@mantine/core/src/components/ScrollArea/utils/linear-scale.ts index 7da13f094a..5bddae0c8f 100644 --- a/packages/@mantine/core/src/components/ScrollArea/utils/linear-scale.ts +++ b/packages/@mantine/core/src/components/ScrollArea/utils/linear-scale.ts @@ -1,6 +1,8 @@ export function linearScale(input: readonly [number, number], output: readonly [number, number]) { return (value: number) => { - if (input[0] === input[1] || output[0] === output[1]) return output[0]; + if (input[0] === input[1] || output[0] === output[1]) { + return output[0]; + } const ratio = (output[1] - output[0]) / (input[1] - input[0]); return output[0] + ratio * (value - input[0]); }; diff --git a/packages/@mantine/core/src/components/SegmentedControl/SegmentedControl.test.tsx b/packages/@mantine/core/src/components/SegmentedControl/SegmentedControl.test.tsx index 85dcf09b2e..432ac135c8 100644 --- a/packages/@mantine/core/src/components/SegmentedControl/SegmentedControl.test.tsx +++ b/packages/@mantine/core/src/components/SegmentedControl/SegmentedControl.test.tsx @@ -12,8 +12,8 @@ const defaultProps: SegmentedControlProps = { describe('@mantine/core/SegmentedControl', () => { tests.axe([ - , - , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/Select/Select.story.tsx b/packages/@mantine/core/src/components/Select/Select.story.tsx index e08ff0f9c4..af5a38ea75 100644 --- a/packages/@mantine/core/src/components/Select/Select.story.tsx +++ b/packages/@mantine/core/src/components/Select/Select.story.tsx @@ -102,7 +102,7 @@ export function WithinForm() {
{ event.preventDefault(); - // eslint-disable-next-line no-console + console.log('Form submitted'); }} style={{ padding: 40 }} diff --git a/packages/@mantine/core/src/components/Select/Select.test.tsx b/packages/@mantine/core/src/components/Select/Select.test.tsx index 3ff5b9d3ae..e5348d24a2 100644 --- a/packages/@mantine/core/src/components/Select/Select.test.tsx +++ b/packages/@mantine/core/src/components/Select/Select.test.tsx @@ -16,12 +16,17 @@ const defaultProps: SelectProps = { describe('@mantine/core/Select', () => { tests.axe([ - , - , - , + , + , + , ]); tests.itSupportsSystemProps({ @@ -199,7 +204,7 @@ describe('@mantine/core/Select', () => { render(); await userEvent.click(screen.getByRole('textbox')); - // type backspace to remove last character + // Type backspace to remove last character await userEvent.type(screen.getByRole('textbox'), '{backspace}'); expect(screen.getByRole('textbox')).toHaveValue('Angula'); }); diff --git a/packages/@mantine/core/src/components/Slider/RangeSlider/RangeSlider.test.tsx b/packages/@mantine/core/src/components/Slider/RangeSlider/RangeSlider.test.tsx index 4d8af73de1..3dd938838e 100644 --- a/packages/@mantine/core/src/components/Slider/RangeSlider/RangeSlider.test.tsx +++ b/packages/@mantine/core/src/components/Slider/RangeSlider/RangeSlider.test.tsx @@ -17,7 +17,7 @@ const expectInputValue = (value: string, container: HTMLElement, index: 0 | 1) = expect(getInput(container, index)).toHaveValue(value); describe('@mantine/core/RangeSlider', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: RangeSlider, props: defaultProps, diff --git a/packages/@mantine/core/src/components/Slider/Slider/Slider.test.tsx b/packages/@mantine/core/src/components/Slider/Slider/Slider.test.tsx index 7a32c0809f..f292109e78 100644 --- a/packages/@mantine/core/src/components/Slider/Slider/Slider.test.tsx +++ b/packages/@mantine/core/src/components/Slider/Slider/Slider.test.tsx @@ -18,7 +18,7 @@ const pressArrow = (kind: 'right' | 'left') => userEvent.type(screen.getByRole('slider'), kind === 'right' ? '{arrowright}' : '{arrowleft}'); describe('@mantine/core/Slider', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: Slider, props: defaultProps, diff --git a/packages/@mantine/core/src/components/Slider/Track/Track.tsx b/packages/@mantine/core/src/components/Slider/Track/Track.tsx index 87e286b66a..27b981747b 100644 --- a/packages/@mantine/core/src/components/Slider/Track/Track.tsx +++ b/packages/@mantine/core/src/components/Slider/Track/Track.tsx @@ -29,24 +29,22 @@ export function Track({ const { getStyles } = useSliderContext(); return ( - <> - - - + + + - {children} + {children} - - + - + ); } diff --git a/packages/@mantine/core/src/components/Slider/utils/get-precision/get-precision.ts b/packages/@mantine/core/src/components/Slider/utils/get-precision/get-precision.ts index 4d6a3d99ac..be702ef430 100644 --- a/packages/@mantine/core/src/components/Slider/utils/get-precision/get-precision.ts +++ b/packages/@mantine/core/src/components/Slider/utils/get-precision/get-precision.ts @@ -1,5 +1,7 @@ export function getPrecision(step: number) { - if (!step) return 0; + if (!step) { + return 0; + } const split = step.toString().split('.'); return split.length > 1 ? split[1].length : 0; } diff --git a/packages/@mantine/core/src/components/Stepper/Stepper.test.tsx b/packages/@mantine/core/src/components/Stepper/Stepper.test.tsx index 3a8b40a6d6..f5387c0458 100644 --- a/packages/@mantine/core/src/components/Stepper/Stepper.test.tsx +++ b/packages/@mantine/core/src/components/Stepper/Stepper.test.tsx @@ -23,7 +23,7 @@ const defaultProps: StepperProps = { }; describe('@mantine/core/Stepper', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: Stepper, diff --git a/packages/@mantine/core/src/components/Switch/Switch.story.tsx b/packages/@mantine/core/src/components/Switch/Switch.story.tsx index f8a052a400..94cb15cb5f 100644 --- a/packages/@mantine/core/src/components/Switch/Switch.story.tsx +++ b/packages/@mantine/core/src/components/Switch/Switch.story.tsx @@ -61,19 +61,17 @@ export function IconInsideThumb() { export function SwitchGroup() { return ( - <> - - - - - - + + + + + ); } diff --git a/packages/@mantine/core/src/components/Switch/Switch.test.tsx b/packages/@mantine/core/src/components/Switch/Switch.test.tsx index 8eeb714b96..ef61302884 100644 --- a/packages/@mantine/core/src/components/Switch/Switch.test.tsx +++ b/packages/@mantine/core/src/components/Switch/Switch.test.tsx @@ -10,7 +10,7 @@ const defaultProps: SwitchProps = { }; describe('@mantine/core/Switch', () => { - tests.axe([, ]); + tests.axe([, ]); tests.itSupportsFocusEvents({ component: Switch, props: defaultProps, selector: 'input' }); tests.itHandlesSwitchCheckboxState({ component: Switch, props: defaultProps }); tests.itConnectsLabelAndInput({ component: Switch, props: defaultProps }); diff --git a/packages/@mantine/core/src/components/Tabs/Tabs.story.tsx b/packages/@mantine/core/src/components/Tabs/Tabs.story.tsx index c687de5db5..d84bcb9cc4 100644 --- a/packages/@mantine/core/src/components/Tabs/Tabs.story.tsx +++ b/packages/@mantine/core/src/components/Tabs/Tabs.story.tsx @@ -299,8 +299,16 @@ export const DynamicTabs = () => { const list = Array(count) .fill(0) .map((_, index) => index.toString()); - const tabs = list.map((item) => Tab {item}); - const panels = list.map((item) => Panel {item}); + const tabs = list.map((item) => ( + + Tab {item} + + )); + const panels = list.map((item) => ( + + Panel {item} + + )); return ( diff --git a/packages/@mantine/core/src/components/Tabs/Tabs.test.tsx b/packages/@mantine/core/src/components/Tabs/Tabs.test.tsx index f98d418cfb..7999717105 100644 --- a/packages/@mantine/core/src/components/Tabs/Tabs.test.tsx +++ b/packages/@mantine/core/src/components/Tabs/Tabs.test.tsx @@ -44,7 +44,7 @@ const getTab = (value: TabValue) => { const clickTab = (value: TabValue) => userEvent.click(getTab(value)); describe('@mantine/core/Tabs', () => { - tests.axe([]); + tests.axe([]); tests.itSupportsSystemProps({ component: Tabs, props: defaultProps, diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.test.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.test.tsx index cc50b4c3c2..264447f379 100644 --- a/packages/@mantine/core/src/components/TagsInput/TagsInput.test.tsx +++ b/packages/@mantine/core/src/components/TagsInput/TagsInput.test.tsx @@ -8,11 +8,22 @@ const defaultProps: TagsInputProps = { describe('@mantine/core/TagsInput', () => { tests.axe([ - , - , - , - , - , + , + , + , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx index 7598ecf616..a7c7230d5c 100644 --- a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx +++ b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx @@ -266,7 +266,9 @@ export const TagsInput = factory((_props, ref) => { const handleInputKeydown = (event: React.KeyboardEvent) => { onKeyDown?.(event); - if (event.isPropagationStopped()) return; + if (event.isPropagationStopped()) { + return; + } const inputValue = _searchValue.trim(); const { length } = inputValue; diff --git a/packages/@mantine/core/src/components/TagsInput/get-splitted-tags.ts b/packages/@mantine/core/src/components/TagsInput/get-splitted-tags.ts index 3be5514aed..5faab3ae56 100644 --- a/packages/@mantine/core/src/components/TagsInput/get-splitted-tags.ts +++ b/packages/@mantine/core/src/components/TagsInput/get-splitted-tags.ts @@ -1,5 +1,7 @@ function splitTags(splitChars: string[] | undefined, value: string) { - if (!splitChars) return [value]; + if (!splitChars) { + return [value]; + } return value .split(new RegExp(`[${splitChars.join('')}]`)) diff --git a/packages/@mantine/core/src/components/TextInput/TextInput.test.tsx b/packages/@mantine/core/src/components/TextInput/TextInput.test.tsx index ebcc0531aa..2afd770be4 100644 --- a/packages/@mantine/core/src/components/TextInput/TextInput.test.tsx +++ b/packages/@mantine/core/src/components/TextInput/TextInput.test.tsx @@ -8,11 +8,11 @@ const defaultProps: TextInputProps = { describe('@mantine/core/TextInput', () => { tests.axe([ - , - , - , - , - , + , + , + , + , + , ]); tests.itSupportsSystemProps({ diff --git a/packages/@mantine/core/src/components/Textarea/Textarea.test.tsx b/packages/@mantine/core/src/components/Textarea/Textarea.test.tsx index 6aadc49282..4a4dd78f3c 100644 --- a/packages/@mantine/core/src/components/Textarea/Textarea.test.tsx +++ b/packages/@mantine/core/src/components/Textarea/Textarea.test.tsx @@ -8,11 +8,11 @@ const defaultProps: TextareaProps = { describe('@mantine/core/Textarea', () => { tests.axe([ -