From e5f3a537153a5fab3718e2ba195269f7c84207e6 Mon Sep 17 00:00:00 2001 From: Vitaly Rtishchev Date: Mon, 2 Sep 2024 13:52:58 +0400 Subject: [PATCH] [core] Migrate to eslint 9 --- .eslintignore | 11 - .eslintrc.cjs | 17 - .../MdxLayout/TableOfContents/get-headings.ts | 1 - .../AutocompleteSelectFirstOption.tsx | 2 +- .../CssVariablesList/CssVariablesList.tsx | 18 +- .../CssVariablesTable/CssVariablesTable.tsx | 4 +- .../MdxProvider/MdxLink/MdxLink.tsx | 4 +- .../NavbarLinksGroup/NavbarLinksGroup.tsx | 2 +- eslint.config.js | 138 ++ package.json | 20 +- .../demos/carousel/Carousel.demo.progress.tsx | 4 +- .../AreaChart.demo.customTooltip.tsx | 4 +- .../BarChart/BarChart.demo.customTooltip.tsx | 4 +- .../LineChart.demo.customTooltip.tsx | 4 +- .../ScatterChart.demo.customTooltip.tsx | 4 +- .../Combobox.demo.selectFirstOption.tsx | 2 +- .../demos/core/Menu/Menu.demo.navigation.tsx | 2 +- .../PasswordInput.demo.visibilityIcon.tsx | 32 +- .../SimpleGrid/SimpleGrid.demo.container.tsx | 2 +- .../emotion/Emotion.demo.composition.tsx | 6 +- .../src/demos/emotion/Emotion.demo.pseudo.tsx | 2 +- .../form/Form.demo.blurFieldValidation.tsx | 4 +- .../demos/form/Form.demo.blurValidation.tsx | 2 +- .../form/Form.demo.liveFieldValidation.tsx | 4 +- .../demos/form/Form.demo.liveValidation.tsx | 2 +- .../demos/form/Form.demo.rulesValidation.tsx | 2 +- .../hooks/use-click-outside.demo.events.tsx | 50 +- .../hooks/use-click-outside.demo.usage.tsx | 50 +- .../hooks/use-in-viewport.demo.usage.tsx | 2 +- .../demos/spotlight/Spotlight.demo.groups.tsx | 2 - .../demos/spotlight/Spotlight.demo.limit.tsx | 2 - .../spotlight/Spotlight.demo.scrollable.tsx | 2 - .../src/demos/styles/Styles.demo.vars.tsx | 4 +- .../tiptap/TipTap.demo.codeHighlight.tsx | 2 +- .../src/shared/it-throws-context-error.tsx | 2 - .../dates/src/it-supports-month-props.tsx | 4 +- .../dates/src/it-supports-on-day-keydown.tsx | 2 +- packages/@mantine/carousel/src/Carousel.tsx | 4 +- .../@mantine/code-highlight/src/CopyIcon.tsx | 10 +- .../ActionIcon/ActionIcon.story.tsx | 4 +- .../core/src/components/Alert/Alert.story.tsx | 4 +- .../core/src/components/Alert/Alert.test.tsx | 8 +- .../Autocomplete/Autocomplete.test.tsx | 21 +- .../src/components/Avatar/Avatar.test.tsx | 2 +- .../src/components/Burger/Burger.test.tsx | 4 +- .../src/components/Button/Button.story.tsx | 2 +- .../src/components/Button/Button.test.tsx | 4 +- .../components/Checkbox/Checkbox.story.tsx | 4 +- .../CheckboxCard/CheckboxCard.test.tsx | 7 +- .../Chip/ChipGroup/ChipGroup.test.tsx | 2 +- .../CloseButton/CloseButton.test.tsx | 2 +- .../components/ColorInput/ColorInput.test.tsx | 10 +- .../ColorPicker/ColorPicker.test.tsx | 1 + .../ColorSwatch/ColorSwatch.test.tsx | 4 +- .../components/Combobox/Combobox.story.tsx | 2 +- .../src/components/Combobox/Combobox.test.tsx | 2 +- .../use-combobox-target-props.ts | 8 +- .../components/FileButton/FileButton.test.tsx | 2 +- .../components/FileInput/FileInput.test.tsx | 2 +- .../components/HoverCard/HoverCard.test.tsx | 2 +- .../components/Indicator/Indicator.story.tsx | 8 +- .../src/components/Indicator/Indicator.tsx | 14 +- .../core/src/components/Input/Input.story.tsx | 2 +- .../core/src/components/Input/Input.test.tsx | 7 +- .../components/JsonInput/JsonInput.test.tsx | 10 +- .../src/components/Loader/Loader.story.tsx | 2 + .../src/components/Loader/Loader.test.tsx | 1 + .../src/components/Loader/loaders/Bars.tsx | 2 + .../src/components/Loader/loaders/Dots.tsx | 2 + .../src/components/Loader/loaders/Oval.tsx | 2 + .../core/src/components/Menu/Menu.test.tsx | 4 +- .../core/src/components/Menu/Menu.tsx | 2 +- .../Menu/MenuDropdown/MenuDropdown.tsx | 1 - .../src/components/ModalBase/ModalBase.tsx | 2 + .../components/ModalBase/ModalBaseContent.tsx | 2 + .../components/ModalBase/use-modal-content.ts | 2 +- .../MultiSelect/MultiSelect.test.tsx | 23 +- .../NativeSelect/NativeSelect.test.tsx | 10 +- .../src/components/NavLink/NavLink.story.tsx | 1 + .../Notification/Notification.test.tsx | 2 +- .../NumberInput/NumberInput.test.tsx | 10 +- .../components/NumberInput/NumberInput.tsx | 6 +- .../components/Pagination/Pagination.test.tsx | 2 +- .../PasswordInput/PasswordInput.test.tsx | 10 +- .../core/src/components/Pill/Pill.test.tsx | 2 +- .../components/PillsInput/PillsInput.test.tsx | 8 +- .../core/src/components/PinInput/PinInput.tsx | 4 +- .../src/components/Popover/Popover.test.tsx | 2 +- .../core/src/components/Popover/Popover.tsx | 2 +- .../src/components/Popover/use-popover.ts | 2 +- .../src/components/Progress/Progress.test.tsx | 2 +- .../ProgressSection/ProgressSection.test.tsx | 2 +- .../Radio/RadioCard/RadioCard.test.tsx | 7 +- .../Radio/RadioGroup/RadioGroup.test.tsx | 2 +- .../ScrollAreaScrollbar.tsx | 2 + .../ScrollAreaScrollbarAuto.tsx | 2 + .../ScrollAreaScrollbarHover.tsx | 2 + .../ScrollAreaScrollbarVisible.tsx | 14 +- .../ScrollAreaScrollbar/Scrollbar.tsx | 4 +- .../ScrollAreaScrollbar/ScrollbarX.tsx | 6 +- .../ScrollAreaScrollbar/ScrollbarY.tsx | 2 + .../ScrollAreaThumb/ScrollAreaThumb.tsx | 4 + .../utils/add-unlinked-scroll-listener.tsx | 4 +- .../ScrollArea/utils/linear-scale.ts | 4 +- .../SegmentedControl.test.tsx | 4 +- .../src/components/Select/Select.story.tsx | 2 +- .../src/components/Select/Select.test.tsx | 19 +- .../Slider/RangeSlider/RangeSlider.test.tsx | 2 +- .../components/Slider/Slider/Slider.test.tsx | 2 +- .../src/components/Slider/Track/Track.tsx | 28 +- .../utils/get-precision/get-precision.ts | 4 +- .../src/components/Stepper/Stepper.test.tsx | 2 +- .../src/components/Switch/Switch.story.tsx | 24 +- .../src/components/Switch/Switch.test.tsx | 2 +- .../core/src/components/Tabs/Tabs.story.tsx | 12 +- .../core/src/components/Tabs/Tabs.test.tsx | 2 +- .../components/TagsInput/TagsInput.test.tsx | 21 +- .../src/components/TagsInput/TagsInput.tsx | 4 +- .../components/TagsInput/get-splitted-tags.ts | 4 +- .../components/TextInput/TextInput.test.tsx | 10 +- .../src/components/Textarea/Textarea.test.tsx | 10 +- .../src/components/Tooltip/Tooltip.story.tsx | 4 +- .../src/components/Tooltip/Tooltip.test.tsx | 2 +- .../src/components/Tooltip/use-tooltip.ts | 2 +- .../core/src/components/Tree/Tree.tsx | 2 +- .../core/src/components/Tree/TreeNode.tsx | 1 - .../UnstyledButton/UnstyleButton.test.tsx | 5 +- .../@mantine/core/src/components/index.ts | 2 +- .../parse-style-props/parse-style-props.ts | 3 +- .../core/Box/style-props/style-props.types.ts | 82 +- .../default-css-variables-resolver.ts | 1 - .../src/core/MantineProvider/theme.types.ts | 4 +- .../create-optional-context.test.tsx | 2 +- .../find-element-ancestor.ts | 3 +- .../core/utils/is-element/is-element.test.tsx | 3 +- .../src/components/Calendar/Calendar.test.tsx | 2 +- .../src/components/Calendar/Calendar.tsx | 2 +- .../CalendarHeader/CalendarHeader.tsx | 6 +- .../components/DateInput/DateInput.test.tsx | 10 +- .../DatePickerInput/DatePickerInput.test.tsx | 8 +- .../DateTimePicker/DateTimePicker.test.tsx | 10 +- .../DateTimePicker/DateTimePicker.tsx | 2 +- .../components/DecadeLevel/DecadeLevel.tsx | 4 +- .../src/components/Month/Month.story.tsx | 2 +- .../dates/src/components/Month/Month.tsx | 6 +- .../MonthLevel/MonthLevel.story.tsx | 2 +- .../src/components/MonthLevel/MonthLevel.tsx | 4 +- .../MonthPickerInput.test.tsx | 8 +- .../src/components/MonthsList/MonthsList.tsx | 2 +- .../components/TimeInput/TimeInput.test.tsx | 10 +- .../components/WeekdaysRow/WeekdaysRow.tsx | 6 +- .../src/components/YearLevel/YearLevel.tsx | 4 +- .../YearPickerInput/YearPickerInput.test.tsx | 8 +- .../src/components/YearsList/YearsList.tsx | 2 +- .../dates/src/types/ControlsGroupSettings.ts | 2 +- .../dropzone/src/DropzoneFullScreen.tsx | 6 +- packages/@mantine/emotion/src/ssr.tsx | 2 +- packages/@mantine/emotion/src/use-css.ts | 1 + packages/@mantine/form/src/Form/Form.tsx | 6 +- packages/@mantine/form/src/actions/actions.ts | 6 +- .../src/lists/change-error-indices.test.ts | 4 +- .../form/src/lists/clear-list-state.test.ts | 4 +- .../form/src/stories/Form.dirty.story.tsx | 2 +- .../src/stories/Form.nestedObject.story.tsx | 2 +- .../form/src/tests/use-form/watch.test.tsx | 4 +- packages/@mantine/form/src/use-field.ts | 4 +- .../use-color-scheme.test.tsx | 20 +- .../use-debounced-state.test.ts | 4 +- .../src/use-did-update/use-did-update.test.ts | 2 +- .../src/use-focus-trap/use-focus-trap.ts | 6 +- .../src/use-focus-within/use-focus-within.ts | 11 +- .../src/use-fullscreen/use-fullscreen.ts | 20 +- .../@mantine/hooks/src/use-hash/use-hash.ts | 12 +- .../use-isomorphic-effect.ts | 4 +- .../UseLocalStorage.story.tsx | 2 +- .../hooks/src/use-mouse/use-mouse.test.tsx | 2 +- .../@mantine/hooks/src/use-mouse/use-mouse.ts | 11 +- .../@mantine/hooks/src/use-queue/use-queue.ts | 6 +- .../use-scroll-into-view.ts | 22 +- .../utils/get-relative-position.ts | 8 +- .../utils/get-scroll-start.ts | 2 +- .../hooks/src/use-set-state/use-set-state.ts | 10 +- packages/@mantine/modals/src/Modals.story.tsx | 29 +- .../@mantine/modals/src/ModalsProvider.tsx | 2 +- .../modals/src/use-modals/use-modals.test.tsx | 2 +- .../spotlight/src/Spotlight.story.tsx | 6 +- .../spotlight/src/SpotlightSearch.tsx | 4 +- .../@mantine/spotlight/src/spotlight.store.ts | 12 +- .../tiptap/src/RichTextEditor.story.tsx | 4 +- .../RichTextEditorColorControl.tsx | 2 + .../RichTextEditorControl.tsx | 6 +- packages/@mantine/tiptap/src/labels.ts | 12 +- .../Configurator.demo.story.tsx | 8 +- packages/@mantinex/demo/src/Demo/Demo.tsx | 7 +- .../@mantinex/demo/src/DemoCode/DemoCode.tsx | 22 +- packages/@mantinex/shiki/src/CopyIcon.tsx | 10 +- scripts/build/build-package.ts | 2 +- scripts/build/get-packages-build-order.ts | 5 +- scripts/build/rollup/create-package-config.ts | 2 +- .../build/rollup/rollup-exclude-use-client.ts | 2 +- scripts/utils/rename-stories.ts | 2 +- yarn.lock | 1532 ++++++++++------- 202 files changed, 1785 insertions(+), 1171 deletions(-) delete mode 100644 .eslintignore delete mode 100644 .eslintrc.cjs create mode 100644 eslint.config.js diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index bbd5be4c6d9..00000000000 --- 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 5166f8a3fd3..00000000000 --- 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 ab965705526..27e07465767 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 6b29dc25b05..9458fa91435 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 27ebad61504..efc024503eb 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 6040cf97324..f1f4d8a4595 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 b8f256fca77..e6ca1cd99c5 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 2d107cda39d..2ee23250abc 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 00000000000..d41a7028ac2 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,138 @@ +// @ts-check + +const eslint = require('@eslint/js'); +const jest = require('eslint-plugin-jest'); +const jsxA11y = require('eslint-plugin-jsx-a11y'); +const react = require('eslint-plugin-react'); +const tseslint = require('typescript-eslint'); + +module.exports = tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.recommended, + jsxA11y.flatConfigs.recommended, + { + languageOptions: { + parserOptions: { + project: './tsconfig.eslint.json', + }, + }, + }, + { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] }, + { + // ESLint specific rules + // https://eslint.org/docs/latest/rules/ + rules: { + 'array-callback-return': 'error', + 'no-duplicate-imports': 'error', + 'no-var': 'error', + 'no-self-compare': 'error', + 'no-template-curly-in-string': 'error', + 'capitalized-comments': ['error', 'always', { ignorePattern: 'prettier' }], + curly: 'error', + 'default-case': 'off', + 'default-case-last': 'error', + 'dot-notation': 'error', + 'no-alert': 'error', + 'no-console': 'warn', + 'no-else-return': 'error', + 'no-eval': 'warn', + 'no-lonely-if': 'error', + 'no-multi-assign': 'error', + 'no-multi-str': 'error', + 'no-param-reassign': 'error', + 'no-return-assign': 'error', + 'no-script-url': 'error', + 'no-sequences': 'error', + 'no-throw-literal': 'error', + 'no-unneeded-ternary': 'error', + 'no-useless-call': 'error', + 'no-useless-constructor': 'error', + 'no-useless-return': 'error', + 'object-shorthand': 'error', + 'operator-assignment': ['error', 'always'], + 'prefer-arrow-callback': 'error', + 'prefer-const': 'error', + 'prefer-exponentiation-operator': 'error', + 'prefer-object-has-own': 'error', + 'prefer-promise-reject-errors': 'error', + 'prefer-object-spread': 'error', + 'prefer-template': 'error', + yoda: 'error', + radix: 'error', + eqeqeq: ['error', 'smart'], + 'no-undef': 'off', + }, + }, + { + // TypeScript ESLint specific rules + // https://typescript-eslint.io/rules/ + rules: { + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/consistent-generic-constructors': 'error', + '@typescript-eslint/method-signature-style': ['error', 'property'], + '@typescript-eslint/no-unused-expressions': 'off', + '@typescript-eslint/lines-between-class-members': 'off', + '@typescript-eslint/indent': 'off', + '@typescript-eslint/naming-convention': 'off', + '@typescript-eslint/comma-dangle': 'off', + '@typescript-eslint/no-redeclare': 'off', + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-loop-func': 'off', + '@typescript-eslint/no-empty-object-type': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { + args: 'all', + argsIgnorePattern: '^_', + caughtErrors: 'none', + caughtErrorsIgnorePattern: '^_', + destructuredArrayIgnorePattern: '^_', + ignoreRestSiblings: true, + }, + ], + }, + }, + { + // React specific rules + plugins: { react }, + settings: { react: { version: 'detect' } }, + rules: { + 'react/button-has-type': 'error', + 'react/jsx-boolean-value': 'error', + 'react/jsx-curly-brace-presence': ['error', 'never'], + 'react/jsx-fragments': ['error', 'syntax'], + 'react/jsx-no-comment-textnodes': 'error', + 'react/jsx-no-duplicate-props': 'error', + 'react/jsx-no-target-blank': 'error', + 'react/no-children-prop': 'error', + 'react/no-deprecated': 'error', + 'react/no-find-dom-node': 'error', + 'react/no-string-refs': 'error', + 'react/self-closing-comp': 'error', + 'react/void-dom-elements-no-children': 'error', + }, + }, + { + // Jest specific rules + plugins: { jest }, + rules: { + ...jest.configs['flat/recommended'].rules, + 'jest/no-export': 'off', + 'jest/expect-expect': 'off', + 'jest/valid-title': 'off', + }, + }, + { + // JSX A11y specific rules + rules: { + 'jsx-a11y/no-autofocus': 'off', + 'jsx-a11y/control-has-associated-label': 'off', + 'jsx-a11y/mouse-events-have-key-events': 'off', + 'jsx-a11y/label-has-for': 'off', + 'jsx-a11y/anchor-is-valid': 'off', + 'jsx-a11y/label-has-associated-control': 'off', + 'jsx-a11y/anchor-has-content': 'off', + }, + } +); diff --git a/package.json b/package.json index 1c02bb089e1..2052905cc1f 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,16 @@ "@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-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 +188,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 d05fe351682..dc056607737 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 03faba28b5c..fdfe54290d9 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 48630b2414d..be9b25893d5 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 61806ad4a8c..d76ca169c5c 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 9dbf5151548..bd9fec70978 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 a0aba3a8a17..57a7c82fc29 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 2d638ac8998..a4313a59b96 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 66a363dfc5a..2ce7d8141b9 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 e0b51fa5926..36d15dbdf6a 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 9a5a8e1d1a4..7d0de774c41 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 bd38e6c4c95..370529073ff 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 f2c554eeeed..cba1d673dcf 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 382a0c9d0d0..ea5537295dd 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 94a6ebe5dbd..cf62970fb30 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 b384958e318..089ed02dbe7 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 66d26f9cfc0..439a0066ac6 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 6bffde0413f..9f6d6835df1 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 0ef8f3d2682..1db589223c9 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 ee487c32379..3d2d96b90c6 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 5f25398bc6c..4077dcf2841 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 2b0668886e7..92a2ad19948 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 1764a8f2051..ca6b2df1d09 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 856e0fdd0af..6678d8c389e 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 ba79e9827b4..4514f1e5c7f 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 23dddc0301c..154cd9a4b03 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 cab8805cd81..2b8b1b304da 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 84bc5817f31..21c7af95a26 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 8939413585b..3def722f217 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 45b1af19462..66eaa1da12c 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 06ff54f4910..b368d7150f1 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 3ecead650bd..9715739e54b 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 e0ec7335139..89d7bfa0e1d 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 75e769a3a68..54cc2f6ab78 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 9fc2fd38360..172bc4a2000 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 0e7265786b1..9c9c336f627 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 4d66e8ccd77..bc28141f3a4 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 bd15cd313d5..6b6af34890a 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 333e7df2ef5..75c1f97dc6b 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 efa008c4c3e..00e9c6f5570 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 653c8ec4f98..132bf1a07e4 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 d496e36dd27..6437f48ef3b 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 8015685fb74..d989fac54a2 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 544501a894b..8b97da7ebbb 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 7edb5b35918..a69e07d5409 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 ac39529c26e..5e8a1b1e6ae 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 8f0990d79c6..78d6f97b4d4 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 187ed913dfb..9dd03902889 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 4f56816fa6e..bcfbaa60e5a 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 fce1ab8b81b..9b93e45884c 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 87996027382..76163928cce 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 78fea315b7e..e648d44ca00 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 09f36bec7da..e70c2631f11 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 b49f0ed7e65..af8d3adf549 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 84171970b0f..1daee2e1632 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 c9830101a1f..f8bb009833e 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 8f2aebfe794..4ca7e2b31a3 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 66140829015..46bacae394d 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 86f488e5a19..b4cd303e2f9 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 678d968ef7d..69534c74ca3 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 e353709120d..be6d9930083 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 7be5929b784..3ead27f149f 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 221c96221ed..0dc05405649 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 d3f6be88d7c..b1334828598 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 fcaadf80b5d..fc99c17441d 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 23f0b52c0d4..14c389c6eab 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 d10077d8d72..9b3fad88e57 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 207da189952..df29534a38d 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 4dc75396b3e..e75e7e1afeb 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 87ffc27cdb9..2a6bece7518 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 7973a416e79..e9d808f418c 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 91d313bbbd6..dcc667a6900 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 44fea4a2293..b752501c122 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 aef87122c06..c0685495bfa 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 288ac8d55e6..d5569031aa8 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 e7f0daf1a07..e665da372cf 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 8c3fd885ef6..8aadd62434c 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 bae0fb727d4..0a296da214f 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 c08ca93d2ac..f869cb8fdcf 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 c312936bade..9eda799ac08 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 8822123bc81..c869a4237b2 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 7da13f094ae..5bddae0c8f1 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 85dcf09b2e3..432ac135c8c 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 e08ff0f9c44..af5a38ea75e 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 3ff5b9d3aea..e5348d24a2c 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 4d8af73de10..3dd938838e3 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 7a32c0809ff..f292109e784 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 87e286b66ad..27b981747ba 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 4d6a3d99aca..be702ef4308 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 3a8b40a6d62..f5387c04586 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 f8a052a400d..94cb15cb5f2 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 8eeb714b963..ef61302884a 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 c687de5db5c..d84bcb9cc4c 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 f98d418cfbf..79997171056 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 cc50b4c3c28..264447f3797 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 7598ecf616c..a7c7230d5c5 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 3be5514aed0..5faab3ae56c 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 ebcc0531aab..2afd770be48 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 6aadc49282c..4a4dd78f3c2 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([ -