From 7e4d476f63a8e1c8ec0dc80b48fa700588c13d51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Gonz=C3=A1lez?= Date: Fri, 29 Nov 2024 19:46:28 -0400 Subject: [PATCH 1/4] [ESLINT] Implementing deprecation plugin v2.0.0 (#6914) --- packages/eui/.eslintrc.js | 2 + packages/eui/package.json | 1 + yarn.lock | 110 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+) diff --git a/packages/eui/.eslintrc.js b/packages/eui/.eslintrc.js index f7d71675b58..5d44da80b09 100644 --- a/packages/eui/.eslintrc.js +++ b/packages/eui/.eslintrc.js @@ -35,6 +35,7 @@ module.exports = { }, extends: [ 'plugin:@typescript-eslint/recommended', + 'plugin:deprecation/recommended', 'plugin:storybook/recommended', // Prettier options need to come last, in order to override other style rules 'plugin:prettier/recommended', @@ -47,6 +48,7 @@ module.exports = { 'react', 'react-hooks', '@emotion', + 'deprecation' ], rules: { 'block-scoped-var': 'error', diff --git a/packages/eui/package.json b/packages/eui/package.json index 3bf2cde1b52..fa2fe9a8d3b 100644 --- a/packages/eui/package.json +++ b/packages/eui/package.json @@ -182,6 +182,7 @@ "eslint": "^8.41.0", "eslint-config-prettier": "^8.8.0", "eslint-import-resolver-webpack": "^0.13.2", + "eslint-plugin-deprecation": "2.0.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jest": "^28.5.0", "eslint-plugin-jsx-a11y": "^6.7.1", diff --git a/yarn.lock b/yarn.lock index 9a168e028e1..5567ba64c18 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4834,6 +4834,7 @@ __metadata: eslint: "npm:^8.41.0" eslint-config-prettier: "npm:^8.8.0" eslint-import-resolver-webpack: "npm:^0.13.2" + eslint-plugin-deprecation: "npm:2.0.0" eslint-plugin-import: "npm:^2.27.5" eslint-plugin-jest: "npm:^28.5.0" eslint-plugin-jsx-a11y: "npm:^6.7.1" @@ -8165,6 +8166,13 @@ __metadata: languageName: node linkType: hard +"@types/json-schema@npm:^7.0.12": + version: 7.0.15 + resolution: "@types/json-schema@npm:7.0.15" + checksum: 10c0/a996a745e6c5d60292f36731dd41341339d4eeed8180bb09226e5c8d23759067692b1d88e5d91d72ee83dfc00d3aca8e7bd43ea120516c17922cbcb7c3e252db + languageName: node + linkType: hard + "@types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8": version: 7.0.9 resolution: "@types/json-schema@npm:7.0.9" @@ -8553,6 +8561,13 @@ __metadata: languageName: node linkType: hard +"@types/semver@npm:^7.5.0": + version: 7.5.8 + resolution: "@types/semver@npm:7.5.8" + checksum: 10c0/8663ff927234d1c5fcc04b33062cb2b9fcfbe0f5f351ed26c4d1e1581657deebd506b41ff7fdf89e787e3d33ce05854bc01686379b89e9c49b564c4cfa988efa + languageName: node + linkType: hard + "@types/send@npm:*": version: 0.17.2 resolution: "@types/send@npm:0.17.2" @@ -8815,6 +8830,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/scope-manager@npm:6.21.0": + version: 6.21.0 + resolution: "@typescript-eslint/scope-manager@npm:6.21.0" + dependencies: + "@typescript-eslint/types": "npm:6.21.0" + "@typescript-eslint/visitor-keys": "npm:6.21.0" + checksum: 10c0/eaf868938d811cbbea33e97e44ba7050d2b6892202cea6a9622c486b85ab1cf801979edf78036179a8ba4ac26f1dfdf7fcc83a68c1ff66be0b3a8e9a9989b526 + languageName: node + linkType: hard + "@typescript-eslint/scope-manager@npm:7.12.0": version: 7.12.0 resolution: "@typescript-eslint/scope-manager@npm:7.12.0" @@ -8856,6 +8881,13 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/types@npm:6.21.0": + version: 6.21.0 + resolution: "@typescript-eslint/types@npm:6.21.0" + checksum: 10c0/020631d3223bbcff8a0da3efbdf058220a8f48a3de221563996ad1dcc30d6c08dadc3f7608cc08830d21c0d565efd2db19b557b9528921c78aabb605eef2d74d + languageName: node + linkType: hard + "@typescript-eslint/types@npm:7.12.0": version: 7.12.0 resolution: "@typescript-eslint/types@npm:7.12.0" @@ -8909,6 +8941,25 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/typescript-estree@npm:6.21.0": + version: 6.21.0 + resolution: "@typescript-eslint/typescript-estree@npm:6.21.0" + dependencies: + "@typescript-eslint/types": "npm:6.21.0" + "@typescript-eslint/visitor-keys": "npm:6.21.0" + debug: "npm:^4.3.4" + globby: "npm:^11.1.0" + is-glob: "npm:^4.0.3" + minimatch: "npm:9.0.3" + semver: "npm:^7.5.4" + ts-api-utils: "npm:^1.0.1" + peerDependenciesMeta: + typescript: + optional: true + checksum: 10c0/af1438c60f080045ebb330155a8c9bb90db345d5069cdd5d01b67de502abb7449d6c75500519df829f913a6b3f490ade3e8215279b6bdc63d0fb0ae61034df5f + languageName: node + linkType: hard + "@typescript-eslint/typescript-estree@npm:7.12.0": version: 7.12.0 resolution: "@typescript-eslint/typescript-estree@npm:7.12.0" @@ -8964,6 +9015,23 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/utils@npm:^6.0.0": + version: 6.21.0 + resolution: "@typescript-eslint/utils@npm:6.21.0" + dependencies: + "@eslint-community/eslint-utils": "npm:^4.4.0" + "@types/json-schema": "npm:^7.0.12" + "@types/semver": "npm:^7.5.0" + "@typescript-eslint/scope-manager": "npm:6.21.0" + "@typescript-eslint/types": "npm:6.21.0" + "@typescript-eslint/typescript-estree": "npm:6.21.0" + semver: "npm:^7.5.4" + peerDependencies: + eslint: ^7.0.0 || ^8.0.0 + checksum: 10c0/ab2df3833b2582d4e5467a484d08942b4f2f7208f8e09d67de510008eb8001a9b7460f2f9ba11c12086fd3cdcac0c626761c7995c2c6b5657d5fa6b82030a32d + languageName: node + linkType: hard + "@typescript-eslint/utils@npm:^6.0.0 || ^7.0.0": version: 7.12.0 resolution: "@typescript-eslint/utils@npm:7.12.0" @@ -8998,6 +9066,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/visitor-keys@npm:6.21.0": + version: 6.21.0 + resolution: "@typescript-eslint/visitor-keys@npm:6.21.0" + dependencies: + "@typescript-eslint/types": "npm:6.21.0" + eslint-visitor-keys: "npm:^3.4.1" + checksum: 10c0/7395f69739cfa1cb83c1fb2fad30afa2a814756367302fb4facd5893eff66abc807e8d8f63eba94ed3b0fe0c1c996ac9a1680bcbf0f83717acedc3f2bb724fbf + languageName: node + linkType: hard + "@typescript-eslint/visitor-keys@npm:7.12.0": version: 7.12.0 resolution: "@typescript-eslint/visitor-keys@npm:7.12.0" @@ -16053,6 +16131,20 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-deprecation@npm:2.0.0": + version: 2.0.0 + resolution: "eslint-plugin-deprecation@npm:2.0.0" + dependencies: + "@typescript-eslint/utils": "npm:^6.0.0" + tslib: "npm:^2.3.1" + tsutils: "npm:^3.21.0" + peerDependencies: + eslint: ^7.0.0 || ^8.0.0 + typescript: ^4.2.4 || ^5.0.0 + checksum: 10c0/6b9cb65ecd3e98d29683bb9b7e5af01e8ac8acadacc313e18757b8120c3850a5a11bfea67f3203975a82e018ea1c07d79dabe20ade921658e8bc03c736469079 + languageName: node + linkType: hard + "eslint-plugin-import@npm:^2.27.5": version: 2.27.5 resolution: "eslint-plugin-import@npm:2.27.5" @@ -24645,6 +24737,15 @@ __metadata: languageName: node linkType: hard +"minimatch@npm:9.0.3": + version: 9.0.3 + resolution: "minimatch@npm:9.0.3" + dependencies: + brace-expansion: "npm:^2.0.1" + checksum: 10c0/85f407dcd38ac3e180f425e86553911d101455ca3ad5544d6a7cec16286657e4f8a9aa6695803025c55e31e35a91a2252b5dc8e7d527211278b8b65b4dbd5eac + languageName: node + linkType: hard + "minimatch@npm:^10.0.0": version: 10.0.1 resolution: "minimatch@npm:10.0.1" @@ -33828,6 +33929,15 @@ __metadata: languageName: node linkType: hard +"ts-api-utils@npm:^1.0.1": + version: 1.4.3 + resolution: "ts-api-utils@npm:1.4.3" + peerDependencies: + typescript: ">=4.2.0" + checksum: 10c0/e65dc6e7e8141140c23e1dc94984bf995d4f6801919c71d6dc27cf0cd51b100a91ffcfe5217626193e5bea9d46831e8586febdc7e172df3f1091a7384299e23a + languageName: node + linkType: hard + "ts-api-utils@npm:^1.3.0": version: 1.3.0 resolution: "ts-api-utils@npm:1.3.0" From 4d55f93ee04659fa6d8f76d670e199bf6be1d5ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Gonz=C3=A1lez?= Date: Sat, 30 Nov 2024 02:13:22 -0400 Subject: [PATCH 2/4] [ESLINT] Fix: Adjust eslint deprecation rule to warn instead of throw errors --- packages/eui/.eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/eui/.eslintrc.js b/packages/eui/.eslintrc.js index 5d44da80b09..130d9b57735 100644 --- a/packages/eui/.eslintrc.js +++ b/packages/eui/.eslintrc.js @@ -51,6 +51,7 @@ module.exports = { 'deprecation' ], rules: { + 'deprecation/deprecation': 'warn', 'block-scoped-var': 'error', camelcase: 'off', 'dot-notation': ['error', { allowKeywords: true }], From ac814e2572b02e5240c786ee1992910fad4d80e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Gonz=C3=A1lez?= Date: Sat, 30 Nov 2024 23:14:50 -0400 Subject: [PATCH 3/4] [ESLINT] Replaced most of deprecated ocurrences with their compatible alternatives. - Self declarated deprecated occurrences were not replaced. - Hooks, components, context and sections of the code that can be potentially harmfull if changed were not replaced, but marked as pending on PR. --- .../src/theme/Admonition/Type/Danger.tsx | 2 +- .../src/theme/Admonition/Type/Info.tsx | 2 +- .../src/theme/Admonition/Type/Note.tsx | 1 + .../src/theme/Admonition/Type/Tip.tsx | 1 + .../src/theme/Admonition/Type/Warning.tsx | 1 + .../src/theme/CodeBlock/index.tsx | 2 +- .../src/theme/ColorModeToggle/index.tsx | 2 +- .../theme/DocBreadcrumbs/Items/Home/index.tsx | 2 +- .../src/theme/DocBreadcrumbs/index.tsx | 2 +- .../src/theme/DocItem/Content/index.tsx | 1 + .../src/theme/DocItem/Footer/index.tsx | 2 +- .../src/theme/DocItem/Layout/index.tsx | 2 +- .../src/theme/DocItem/Metadata/index.tsx | 6 +++--- .../src/theme/DocItem/Paginator/index.tsx | 2 +- .../src/theme/DocItem/TOC/Desktop/index.tsx | 2 +- .../src/theme/DocItem/TOC/Mobile/index.tsx | 2 +- .../src/theme/DocItem/index.tsx | 2 +- .../src/theme/DocPaginator/index.tsx | 1 + .../src/theme/DocRoot/Layout/Main/index.tsx | 2 +- .../theme/DocRoot/Layout/Sidebar/index.tsx | 2 +- .../src/theme/DocRoot/Layout/index.tsx | 2 +- .../theme/DocSidebarItem/Category/index.tsx | 2 +- .../src/theme/DocSidebarItem/Link/index.tsx | 2 +- .../src/theme/DocSidebarItem/index.tsx | 2 +- .../src/theme/DocSidebarItems/index.tsx | 2 +- .../src/theme/EditThisPage/index.tsx | 2 +- .../docusaurus-theme/src/theme/Logo/index.tsx | 2 +- .../src/theme/MDXComponents/A.tsx | 1 + .../src/theme/MDXComponents/Code.tsx | 4 ++-- .../src/theme/MDXComponents/Heading.tsx | 1 + .../src/theme/MDXContent/index.tsx | 2 +- .../src/theme/Navbar/Content/index.tsx | 2 +- .../src/theme/Navbar/Layout/index.tsx | 2 +- .../Navbar/MobileSidebar/Header/index.tsx | 2 +- .../Navbar/MobileSidebar/Layout/index.tsx | 2 +- .../NavbarItem/DropdownNavbarItem/index.tsx | 2 +- .../src/theme/NavbarItem/NavbarNavLink.tsx | 2 +- .../src/theme/PaginatorNavLink/index.tsx | 2 +- .../TOCCollapsible/CollapseButton/index.tsx | 2 +- .../src/theme/TOCItems/Tree.tsx | 2 +- .../scripts/tests/update-changelog.test.js | 2 +- .../eui/src-docs/src/store/configure_store.js | 4 ++-- .../components/accordion/accordion.test.tsx | 12 +++++------ .../eui/src/components/avatar/avatar.test.tsx | 2 +- .../badge/beta_badge/beta_badge.tsx | 1 + .../collapsible_nav_group.test.tsx | 2 +- .../color_picker/color_picker.test.tsx | 20 +++++++++---------- .../components/color_picker/saturation.tsx | 2 +- .../eui/src/components/color_picker/utils.ts | 4 ++-- packages/eui/src/components/common.ts | 19 ++++++++++++++++++ .../eui/src/components/context/context.tsx | 2 +- packages/eui/src/components/flyout/flyout.tsx | 1 + .../checkbox/checkbox_group.behavior.test.tsx | 2 +- packages/eui/src/components/form/form.tsx | 1 + .../eui/src/components/header/header.test.tsx | 2 +- .../eui/src/components/i18n/i18n.test.tsx | 3 ++- packages/eui/src/components/i18n/i18n.tsx | 3 +-- .../components/i18n/i18n_number.stories.tsx | 3 ++- .../eui/src/components/i18n/i18n_number.tsx | 4 ++-- .../eui/src/components/i18n/i18n_util.tsx | 3 ++- .../inline_edit/inline_edit_form.test.tsx | 2 +- .../key_pad_menu/key_pad_menu_item.test.tsx | 4 ++-- .../key_pad_menu/key_pad_menu_item.tsx | 1 + .../list_group/list_group_item.test.tsx | 2 +- .../markdown_editor/markdown_editor.test.tsx | 2 +- .../markdown_editor_footer.tsx | 2 +- .../components/page/page_body/page_body.tsx | 2 +- .../page/page_section/page_section.tsx | 2 +- .../page_template/inner/page_inner.tsx | 2 +- .../eui/src/components/provider/provider.tsx | 4 ++-- .../src/components/side_nav/side_nav_item.tsx | 1 + .../components/table/table_header_cell.tsx | 2 +- .../table/table_header_cell_checkbox.tsx | 2 +- .../eui/src/components/table/utils.test.ts | 2 +- packages/eui/src/components/tabs/tab.test.tsx | 2 +- .../tabbed_content/tabbed_content.test.tsx | 4 ++-- .../src/components/text_diff/text_diff.tsx | 2 +- .../toast/global_toast_list.test.tsx | 12 +++++------ .../eui/src/components/toast/toast.test.tsx | 2 +- .../eui/src/services/color_picker/index.ts | 1 + .../src/services/console/warn_once.test.ts | 8 ++++---- .../src/services/copy/copy_to_clipboard.ts | 4 ++-- packages/eui/src/services/index.ts | 1 + .../popover/popover_positioning.test.ts | 8 ++++---- .../services/popover/popover_positioning.ts | 4 ++-- .../services/theme/style_memoization.test.tsx | 2 +- .../eui/src/services/theme/warning.test.ts | 2 +- packages/eui/src/services/time/timer.test.ts | 12 +++++------ packages/website/src/pages/index.tsx | 2 +- 89 files changed, 151 insertions(+), 116 deletions(-) diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx index 89e0d6bb664..a437c0175cb 100644 --- a/packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx +++ b/packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx @@ -1,8 +1,8 @@ +import { JSX } from 'react'; import OriginalDanger from '@theme-init/Admonition/Type/Danger'; import type WarningType from '@theme-init/Admonition/Type/Danger'; import type { WrapperProps } from '@docusaurus/types'; import { CallOut } from '../../../components/call_out'; - type Props = WrapperProps; const Danger = (props: Props): JSX.Element => { diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx index f6f9390e8d2..88456f3e12d 100644 --- a/packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx +++ b/packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx @@ -1,8 +1,8 @@ +import { JSX } from 'react'; import OriginalInfo from '@theme-init/Admonition/Type/Info'; import type InfoType from '@theme-init/Admonition/Type/Info'; import type { WrapperProps } from '@docusaurus/types'; import { CallOut } from '../../../components/call_out'; - type Props = WrapperProps; const Note = (props: Props): JSX.Element => { diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx index 22f6b1eabbc..5d12c29eb51 100644 --- a/packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx +++ b/packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx @@ -1,3 +1,4 @@ +import { JSX } from 'react'; import OriginalNote from '@theme-init/Admonition/Type/Note'; import type NoteType from '@theme-init/Admonition/Type/Note'; import type { WrapperProps } from '@docusaurus/types'; diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx index c2bc24a9832..2272e21211d 100644 --- a/packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx +++ b/packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx @@ -1,3 +1,4 @@ +import { JSX } from 'react'; import OriginalTip from '@theme-init/Admonition/Type/Tip'; import type TipType from '@theme-init/Admonition/Type/Tip'; import type { WrapperProps } from '@docusaurus/types'; diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx index 18786294a5c..8ca19aad6e0 100644 --- a/packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx +++ b/packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx @@ -1,3 +1,4 @@ +import { JSX } from 'react'; import OriginalWarning from '@theme-init/Admonition/Type/Warning'; import type WarningType from '@theme-init/Admonition/Type/Warning'; import type { WrapperProps } from '@docusaurus/types'; diff --git a/packages/docusaurus-theme/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme/src/theme/CodeBlock/index.tsx index 89df9db28e4..810e7a28f84 100644 --- a/packages/docusaurus-theme/src/theme/CodeBlock/index.tsx +++ b/packages/docusaurus-theme/src/theme/CodeBlock/index.tsx @@ -1,4 +1,4 @@ -import React, { isValidElement, type ReactNode } from 'react'; +import React, { isValidElement, type ReactNode, JSX } from 'react'; import { EuiCodeBlock } from '@elastic/eui'; import type { Props } from '@theme/CodeBlock'; import { Demo } from '../../components/demo'; diff --git a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx index aaefb2441bc..48b63913259 100644 --- a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx +++ b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useContext, useEffect } from 'react'; +import React, { useCallback, useContext, useEffect, JSX } from 'react'; import { translate } from '@docusaurus/Translate'; import type { Props } from '@theme-original/ColorModeToggle'; diff --git a/packages/docusaurus-theme/src/theme/DocBreadcrumbs/Items/Home/index.tsx b/packages/docusaurus-theme/src/theme/DocBreadcrumbs/Items/Home/index.tsx index 22340929e7e..880010cfcf9 100644 --- a/packages/docusaurus-theme/src/theme/DocBreadcrumbs/Items/Home/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocBreadcrumbs/Items/Home/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { JSX } from 'react'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; import { translate } from '@docusaurus/Translate'; diff --git a/packages/docusaurus-theme/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme/src/theme/DocBreadcrumbs/index.tsx index db731ff2143..69e9ed7a883 100644 --- a/packages/docusaurus-theme/src/theme/DocBreadcrumbs/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocBreadcrumbs/index.tsx @@ -1,4 +1,4 @@ -import React, { type ReactNode } from 'react'; +import React, { type ReactNode, JSX } from 'react'; import clsx from 'clsx'; import { css } from '@emotion/react'; import { ThemeClassNames } from '@docusaurus/theme-common'; diff --git a/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx index 4c692d6b464..267840599c1 100644 --- a/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx @@ -1,3 +1,4 @@ +import { JSX } from 'react'; import clsx from 'clsx'; import { css } from '@emotion/react'; import { ThemeClassNames } from '@docusaurus/theme-common'; diff --git a/packages/docusaurus-theme/src/theme/DocItem/Footer/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/Footer/index.tsx index 6241ecedabc..d9af9b0e572 100644 --- a/packages/docusaurus-theme/src/theme/DocItem/Footer/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocItem/Footer/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { JSX } from 'react'; import clsx from 'clsx'; import { ThemeClassNames } from '@docusaurus/theme-common'; import { useDoc } from '@docusaurus/plugin-content-docs/client'; diff --git a/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx index 192595c04e4..e51e756c78a 100644 --- a/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React from 'react'; +import { JSX } from 'react'; import { EuiHorizontalRule } from '@elastic/eui'; import { css } from '@emotion/react'; import { useWindowSize } from '@docusaurus/theme-common'; diff --git a/packages/docusaurus-theme/src/theme/DocItem/Metadata/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/Metadata/index.tsx index 4a8e9ba05cd..a7913cc9298 100644 --- a/packages/docusaurus-theme/src/theme/DocItem/Metadata/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocItem/Metadata/index.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import {PageMetadata} from '@docusaurus/theme-common'; +import { JSX } from 'react'; +import { PageMetadata } from '@docusaurus/theme-common'; import { useDoc } from '@docusaurus/plugin-content-docs/client'; export default function DocItemMetadata(): JSX.Element { - const {metadata, frontMatter, assets} = useDoc(); + const { metadata, frontMatter, assets } = useDoc(); return ( { {children} - ) + ); }; export default Code; diff --git a/packages/docusaurus-theme/src/theme/MDXComponents/Heading.tsx b/packages/docusaurus-theme/src/theme/MDXComponents/Heading.tsx index c026623ac47..b207227f597 100644 --- a/packages/docusaurus-theme/src/theme/MDXComponents/Heading.tsx +++ b/packages/docusaurus-theme/src/theme/MDXComponents/Heading.tsx @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { JSX } from 'react'; import Heading, { Props as HeadingProps } from '@theme/Heading'; const MDXHeading = (props: HeadingProps): JSX.Element => ( diff --git a/packages/docusaurus-theme/src/theme/MDXContent/index.tsx b/packages/docusaurus-theme/src/theme/MDXContent/index.tsx index 0845bbb57ef..9090bf6a104 100644 --- a/packages/docusaurus-theme/src/theme/MDXContent/index.tsx +++ b/packages/docusaurus-theme/src/theme/MDXContent/index.tsx @@ -12,7 +12,7 @@ import type { WrapperProps } from '@docusaurus/types'; type Props = WrapperProps; -const MDXContent = (props: Props): JSX.Element => ( +const MDXContent = (props: Props): React.JSX.Element => (
diff --git a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx index 53b4f771ead..68136e5484e 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx @@ -1,4 +1,4 @@ -import React, { type ReactNode } from 'react'; +import { type ReactNode, JSX } from 'react'; import { css, Global } from '@emotion/react'; import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; import { diff --git a/packages/docusaurus-theme/src/theme/Navbar/Layout/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/Layout/index.tsx index ae2ceb4a24d..f1be377e922 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/Layout/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/Layout/index.tsx @@ -1,4 +1,4 @@ -import React, { type ComponentProps } from 'react'; +import { type ComponentProps, JSX } from 'react'; import clsx from 'clsx'; import { css } from '@emotion/react'; import { useThemeConfig } from '@docusaurus/theme-common'; diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx index 08791e527a8..c5f9afa22bf 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { JSX } from 'react'; import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; import { translate } from '@docusaurus/Translate'; import NavbarColorModeToggle from '@theme-original/Navbar/ColorModeToggle'; diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Layout/index.tsx index 8637c587ccb..e866ee3f618 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Layout/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Layout/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { JSX } from 'react'; import { css } from '@emotion/react'; import Layout from '@theme-init/Navbar/MobileSidebar/Layout'; import type LayoutType from '@theme-init/Navbar/MobileSidebar/Layout'; diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/index.tsx b/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/index.tsx index a49ca0ffe7c..5b0ee5c3f9e 100644 --- a/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/index.tsx +++ b/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect } from 'react'; +import { useState, useRef, useEffect, JSX } from 'react'; import clsx from 'clsx'; import { css } from '@emotion/react'; import { diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/NavbarNavLink.tsx b/packages/docusaurus-theme/src/theme/NavbarItem/NavbarNavLink.tsx index 9b854c7559b..35a4e93166c 100644 --- a/packages/docusaurus-theme/src/theme/NavbarItem/NavbarNavLink.tsx +++ b/packages/docusaurus-theme/src/theme/NavbarItem/NavbarNavLink.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react'; +import { FunctionComponent, JSX } from 'react'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; import isInternalUrl from '@docusaurus/isInternalUrl'; diff --git a/packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx b/packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx index bbd57819afc..50d5ff2b88e 100644 --- a/packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx +++ b/packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx @@ -37,7 +37,7 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => { }; }; -export default function PaginatorNavLink(props: Props): JSX.Element { +export default function PaginatorNavLink(props: Props): React.JSX.Element { const { permalink, title, subLabel, isNext } = props; const isPrev = !isNext; const styles = useEuiMemoizedStyles(getStyles); diff --git a/packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx b/packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx index 50853e495fc..0fe31d373fd 100644 --- a/packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx +++ b/packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx @@ -23,7 +23,7 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => { export default function TOCCollapsibleCollapseButton({ collapsed, ...props -}: Props): JSX.Element { +}: Props): React.JSX.Element { const styles = useEuiMemoizedStyles(getStyles); return ( diff --git a/packages/docusaurus-theme/src/theme/TOCItems/Tree.tsx b/packages/docusaurus-theme/src/theme/TOCItems/Tree.tsx index c2e7c7591f0..263e094b63f 100644 --- a/packages/docusaurus-theme/src/theme/TOCItems/Tree.tsx +++ b/packages/docusaurus-theme/src/theme/TOCItems/Tree.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { JSX } from 'react'; import { css } from '@emotion/react'; import Link from '@docusaurus/Link'; import type { Props } from '@theme-original/TOCItems/Tree'; diff --git a/packages/eui/scripts/tests/update-changelog.test.js b/packages/eui/scripts/tests/update-changelog.test.js index 17ba939b2ec..ec87b48243b 100644 --- a/packages/eui/scripts/tests/update-changelog.test.js +++ b/packages/eui/scripts/tests/update-changelog.test.js @@ -103,7 +103,7 @@ describe('collateChangelogFiles', () => { it('throws an error when the upcoming changelogs directory is empty', () => { glob.sync.mockReturnValueOnce([]); - expect(() => collateChangelogFiles()).toThrowError( + expect(() => collateChangelogFiles()).toThrow( /No upcoming changelog files/ ); }); diff --git a/packages/eui/src-docs/src/store/configure_store.js b/packages/eui/src-docs/src/store/configure_store.js index bcd8efc8540..fe78024b82c 100644 --- a/packages/eui/src-docs/src/store/configure_store.js +++ b/packages/eui/src-docs/src/store/configure_store.js @@ -1,4 +1,4 @@ -import { applyMiddleware, createStore, compose } from 'redux'; +import { applyMiddleware, legacy_createStore, compose } from 'redux'; import thunk from 'redux-thunk'; import Routes from '../routes'; @@ -19,7 +19,7 @@ export default function configureStore(initialState) { }; } - return compose(applyMiddleware(thunk))(createStore)( + return compose(applyMiddleware(thunk))(legacy_createStore)( rootReducer, initialState ); diff --git a/packages/eui/src/components/accordion/accordion.test.tsx b/packages/eui/src/components/accordion/accordion.test.tsx index 635cc357adc..ec65da4bdf4 100644 --- a/packages/eui/src/components/accordion/accordion.test.tsx +++ b/packages/eui/src/components/accordion/accordion.test.tsx @@ -223,8 +223,8 @@ describe('EuiAccordion', () => { ); fireEvent.click(getAllByRole('button')[0]); - expect(onToggleHandler).toBeCalled(); - expect(onToggleHandler).toBeCalledWith(true); + expect(onToggleHandler).toHaveBeenCalled(); + expect(onToggleHandler).toHaveBeenCalledWith(true); }); }); @@ -330,12 +330,12 @@ describe('EuiAccordion', () => { ); fireEvent.click(getAllByRole('button')[0]); - expect(onToggleHandler).toBeCalled(); - expect(onToggleHandler).toBeCalledWith(true); + expect(onToggleHandler).toHaveBeenCalled(); + expect(onToggleHandler).toHaveBeenCalledWith(true); fireEvent.click(getAllByRole('button')[0]); - expect(onToggleHandler).toBeCalled(); - expect(onToggleHandler).toBeCalledWith(false); + expect(onToggleHandler).toHaveBeenCalled(); + expect(onToggleHandler).toHaveBeenCalledWith(false); }); }); }); diff --git a/packages/eui/src/components/avatar/avatar.test.tsx b/packages/eui/src/components/avatar/avatar.test.tsx index a3ce8220611..a3c7a57859e 100644 --- a/packages/eui/src/components/avatar/avatar.test.tsx +++ b/packages/eui/src/components/avatar/avatar.test.tsx @@ -160,7 +160,7 @@ describe('EuiAvatar', () => { const component = () => render(); - expect(component).toThrowError( + expect(component).toThrow( 'EuiAvatar needs to pass a valid color. This can either be a three or six character hex value' ); }); diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.tsx b/packages/eui/src/components/badge/beta_badge/beta_badge.tsx index 77e3e5d4363..504da95cb43 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.tsx +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.tsx @@ -12,6 +12,7 @@ import React, { HTMLAttributes, MouseEventHandler, ReactNode, + JSX, } from 'react'; import classNames from 'classnames'; diff --git a/packages/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx b/packages/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx index b7b5cb813d4..561e0ee1669 100644 --- a/packages/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx +++ b/packages/eui/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx @@ -151,7 +151,7 @@ describe('EuiCollapsibleNavGroup', () => { ); - expect(consoleStub).toBeCalled(); + expect(consoleStub).toHaveBeenCalled(); expect(consoleStub.mock.calls[0][0]).toMatch( 'not render an icon without `title`' ); diff --git a/packages/eui/src/components/color_picker/color_picker.test.tsx b/packages/eui/src/components/color_picker/color_picker.test.tsx index e4b8726ad71..4e228ad67c8 100644 --- a/packages/eui/src/components/color_picker/color_picker.test.tsx +++ b/packages/eui/src/components/color_picker/color_picker.test.tsx @@ -188,7 +188,7 @@ describe('EuiColorPicker', () => { ); fireEvent.click(getByTestSubject('euiColorPickerAnchor')); - expect(onFocusHandler).toBeCalled(); + expect(onFocusHandler).toHaveBeenCalled(); expect(getByTestSubject('euiColorPickerPopover')).toBeInTheDocument(); }); @@ -209,7 +209,7 @@ describe('EuiColorPicker', () => { }); await (async () => { expect(getByTestSubject('euiColorPickerPopover')).not.toBeInTheDocument(); - expect(onBlurHandler).toBeCalled(); // The blur handler is called just before the portal would be removed. + expect(onBlurHandler).toHaveBeenCalled(); // The blur handler is called just before the portal would be removed. }); }); @@ -235,8 +235,8 @@ describe('EuiColorPicker', () => { const event = { target: { value: '#000000' } }; fireEvent.change(getByTestSubject('euiColorPickerAnchor'), event); - expect(onChange).toBeCalled(); - expect(onChange).toBeCalledWith('#000000', { + expect(onChange).toHaveBeenCalled(); + expect(onChange).toHaveBeenCalledWith('#000000', { hex: '#000000', isValid: true, rgba: [0, 0, 0, 1], @@ -252,8 +252,8 @@ describe('EuiColorPicker', () => { expect(swatches.length).toBe(VISUALIZATION_COLORS.length); fireEvent.click(swatches[0]); - expect(onChange).toBeCalled(); - expect(onChange).toBeCalledWith(VISUALIZATION_COLORS[0], { + expect(onChange).toHaveBeenCalled(); + expect(onChange).toHaveBeenCalledWith(VISUALIZATION_COLORS[0], { hex: '#54b399', isValid: true, rgba: [84, 179, 153, 1], @@ -270,14 +270,14 @@ describe('EuiColorPicker', () => { // Slider const [range, input] = getAllByTestSubject('euiColorPickerAlpha'); fireEvent.change(range, { target: { value: '50' } }); - expect(onChange).toBeCalledWith('#ffeedd80', { + expect(onChange).toHaveBeenCalledWith('#ffeedd80', { hex: '#ffeedd80', isValid: true, rgba: [255, 238, 221, 0.5], }); // Number input fireEvent.change(input, { target: { value: '25' } }); - expect(onChange).toBeCalledWith('#ffeedd40', { + expect(onChange).toHaveBeenCalledWith('#ffeedd40', { hex: '#ffeedd40', isValid: true, rgba: [255, 238, 221, 0.25], @@ -290,8 +290,8 @@ describe('EuiColorPicker', () => { ); fireEvent.click(getByLabelText('Clear input')); - expect(onChange).toBeCalled(); - expect(onChange).toBeCalledWith('', { + expect(onChange).toHaveBeenCalled(); + expect(onChange).toHaveBeenCalledWith('', { hex: '', isValid: false, rgba: [NaN, NaN, NaN, 1], diff --git a/packages/eui/src/components/color_picker/saturation.tsx b/packages/eui/src/components/color_picker/saturation.tsx index 38e8e7f2da8..e557b6c5ce4 100644 --- a/packages/eui/src/components/color_picker/saturation.tsx +++ b/packages/eui/src/components/color_picker/saturation.tsx @@ -33,7 +33,7 @@ import { getEventPosition } from './utils'; import { euiSaturationStyles } from './saturation.styles'; export type SaturationClientRect = Pick< - ClientRect, + DOMRect, 'left' | 'top' | 'width' | 'height' >; diff --git a/packages/eui/src/components/color_picker/utils.ts b/packages/eui/src/components/color_picker/utils.ts index 236849add00..d75e638c23a 100644 --- a/packages/eui/src/components/color_picker/utils.ts +++ b/packages/eui/src/components/color_picker/utils.ts @@ -15,8 +15,8 @@ export const getEventPosition = ( ) => { const { x, y } = location; const { width, height, left, top } = container.getBoundingClientRect(); - let leftPos = x - (left + window.pageXOffset); - let topPos = y - (top + window.pageYOffset); + let leftPos = x - (left + window.scrollX); + let topPos = y - (top + window.scrollY); if (leftPos < 0) { leftPos = 0; diff --git a/packages/eui/src/components/common.ts b/packages/eui/src/components/common.ts index 2f09a052349..b8ae024ca27 100644 --- a/packages/eui/src/components/common.ts +++ b/packages/eui/src/components/common.ts @@ -14,6 +14,8 @@ import { FunctionComponent, JSXElementConstructor, MouseEventHandler, + JSX, + ReactElement, } from 'react'; import { Interpolation, Theme } from '@emotion/react'; @@ -243,3 +245,20 @@ export type RecursivePartial = { : RecursivePartial; // recurse for all non-array and non-primitive values }; type NonAny = number | boolean | string | symbol | null; + +/** + * Replace deprecated type from React as its marked as + * not relevant by eslint deprecation plugin. + * @example + * ```ts + * export function processStringToChildren( + * input: string, + * values: RenderableValues, + * i18nMappingFunc?: (token: string) => string + * ): string | ReactChild[] + * ``` + */ +export type ReactChild = + | string + | number + | ReactElement>; diff --git a/packages/eui/src/components/context/context.tsx b/packages/eui/src/components/context/context.tsx index 5cdd7ff98e5..53db0be8d56 100644 --- a/packages/eui/src/components/context/context.tsx +++ b/packages/eui/src/components/context/context.tsx @@ -10,9 +10,9 @@ import React, { createContext, Context, FunctionComponent, - ReactChild, ReactNode, } from 'react'; +import { ReactChild } from '../common'; export interface RenderableValues { // undefined values are ignored, but including support here improves usability diff --git a/packages/eui/src/components/flyout/flyout.tsx b/packages/eui/src/components/flyout/flyout.tsx index 813961178e8..93905e7fbf7 100644 --- a/packages/eui/src/components/flyout/flyout.tsx +++ b/packages/eui/src/components/flyout/flyout.tsx @@ -19,6 +19,7 @@ import React, { FunctionComponent, MutableRefObject, ReactNode, + JSX, } from 'react'; import classnames from 'classnames'; diff --git a/packages/eui/src/components/form/checkbox/checkbox_group.behavior.test.tsx b/packages/eui/src/components/form/checkbox/checkbox_group.behavior.test.tsx index 063abe9efa3..56652e809e1 100644 --- a/packages/eui/src/components/form/checkbox/checkbox_group.behavior.test.tsx +++ b/packages/eui/src/components/form/checkbox/checkbox_group.behavior.test.tsx @@ -28,7 +28,7 @@ describe('EuiCheckboxGroup behavior', () => { ); component.find('input[type="checkbox"]').simulate('change'); - expect(onChangeHandler).toBeCalledTimes(1); + expect(onChangeHandler).toHaveBeenCalledTimes(1); expect(onChangeHandler.mock.calls[0][0]).toBe('1'); }); }); diff --git a/packages/eui/src/components/form/form.tsx b/packages/eui/src/components/form/form.tsx index d1fd1ba2ef3..4ee57a72ae9 100644 --- a/packages/eui/src/components/form/form.tsx +++ b/packages/eui/src/components/form/form.tsx @@ -13,6 +13,7 @@ import React, { useCallback, useMemo, forwardRef, + JSX, } from 'react'; import classNames from 'classnames'; diff --git a/packages/eui/src/components/header/header.test.tsx b/packages/eui/src/components/header/header.test.tsx index 8657dfb9341..98bf64a6df6 100644 --- a/packages/eui/src/components/header/header.test.tsx +++ b/packages/eui/src/components/header/header.test.tsx @@ -117,7 +117,7 @@ describe('EuiHeader', () => { ); - expect(consoleStub).toBeCalled(); + expect(consoleStub).toHaveBeenCalled(); expect(consoleStub.mock.calls[0][0]).toMatch( 'cannot accept both `children` and `sections`' ); diff --git a/packages/eui/src/components/i18n/i18n.test.tsx b/packages/eui/src/components/i18n/i18n.test.tsx index de50f391315..ce003a4991c 100644 --- a/packages/eui/src/components/i18n/i18n.test.tsx +++ b/packages/eui/src/components/i18n/i18n.test.tsx @@ -6,10 +6,11 @@ * Side Public License, v 1. */ -import React, { ReactChild } from 'react'; +import React from 'react'; import { mount } from 'enzyme'; import { EuiContext } from '../context'; import { EuiI18n, useEuiI18n } from './i18n'; +import { ReactChild } from '../common'; /* eslint-disable local/i18n */ diff --git a/packages/eui/src/components/i18n/i18n.tsx b/packages/eui/src/components/i18n/i18n.tsx index 4eef8881953..6f7e5d9abdd 100644 --- a/packages/eui/src/components/i18n/i18n.tsx +++ b/packages/eui/src/components/i18n/i18n.tsx @@ -8,13 +8,12 @@ import React, { Fragment, - ReactChild, FunctionComponent, useContext, ReactElement, } from 'react'; import { EuiI18nConsumer } from '../context'; -import { ExclusiveUnion } from '../common'; +import { ExclusiveUnion, ReactChild } from '../common'; import { I18nContext, I18nShape, diff --git a/packages/eui/src/components/i18n/i18n_number.stories.tsx b/packages/eui/src/components/i18n/i18n_number.stories.tsx index 67edd2e2aa5..17209e5a1eb 100644 --- a/packages/eui/src/components/i18n/i18n_number.stories.tsx +++ b/packages/eui/src/components/i18n/i18n_number.stories.tsx @@ -6,12 +6,13 @@ * Side Public License, v 1. */ -import React, { ReactChild } from 'react'; +import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { LOKI_SELECTORS } from '../../../.storybook/loki'; import { EuiI18nNumber, EuiI18nNumberProps } from './i18n_number'; import { EuiText } from '../text'; +import { ReactChild } from '../common'; const meta: Meta = { title: 'Utilities/EuiI18nNumber', diff --git a/packages/eui/src/components/i18n/i18n_number.tsx b/packages/eui/src/components/i18n/i18n_number.tsx index e1665fdec31..b46f9c95f85 100644 --- a/packages/eui/src/components/i18n/i18n_number.tsx +++ b/packages/eui/src/components/i18n/i18n_number.tsx @@ -6,9 +6,9 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, ReactChild, ReactElement } from 'react'; +import React, { FunctionComponent, ReactElement } from 'react'; import { EuiI18nConsumer } from '../context'; -import { ExclusiveUnion } from '../common'; +import { ExclusiveUnion, ReactChild } from '../common'; const defaultFormatter = new Intl.NumberFormat('en'); function defaultFormatNumber(value: number) { diff --git a/packages/eui/src/components/i18n/i18n_util.tsx b/packages/eui/src/components/i18n/i18n_util.tsx index a626d71b706..5b7762bff85 100644 --- a/packages/eui/src/components/i18n/i18n_util.tsx +++ b/packages/eui/src/components/i18n/i18n_util.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { cloneElement, ReactChild } from 'react'; +import { cloneElement } from 'react'; import { isBoolean, isString, @@ -15,6 +15,7 @@ import { } from '../../services/predicate'; import { isElement } from 'react-is'; import { RenderableValues } from '../context/context'; +import { ReactChild } from '../common'; function isPrimitive(value: ReactChild | undefined) { return ( diff --git a/packages/eui/src/components/inline_edit/inline_edit_form.test.tsx b/packages/eui/src/components/inline_edit/inline_edit_form.test.tsx index 7bb19b7cc91..74cb51ad2a0 100644 --- a/packages/eui/src/components/inline_edit/inline_edit_form.test.tsx +++ b/packages/eui/src/components/inline_edit/inline_edit_form.test.tsx @@ -402,7 +402,7 @@ describe('EuiInlineEditForm', () => { }); fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton')); - expect(onSave).toBeCalledTimes(1); + expect(onSave).toHaveBeenCalledTimes(1); await act(() => { promiseResolve(false); diff --git a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.test.tsx b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.test.tsx index 4ed7a94b00c..a4b85caef9b 100644 --- a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.test.tsx +++ b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.test.tsx @@ -193,7 +193,7 @@ describe('EuiKeyPadMenuItem', () => { ); - expect(onClickHandler).not.toBeCalled(); + expect(onClickHandler).not.toHaveBeenCalled(); }); test('onClick is called when the button is clicked', () => { @@ -207,7 +207,7 @@ describe('EuiKeyPadMenuItem', () => { $button.simulate('click'); - expect(onClickHandler).toBeCalledTimes(1); + expect(onClickHandler).toHaveBeenCalledTimes(1); }); describe('checkable', () => { diff --git a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx index 39b79a1d5b1..a4d2533a6bd 100644 --- a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx +++ b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx @@ -13,6 +13,7 @@ import React, { Ref, LabelHTMLAttributes, useMemo, + JSX, } from 'react'; import classNames from 'classnames'; diff --git a/packages/eui/src/components/list_group/list_group_item.test.tsx b/packages/eui/src/components/list_group/list_group_item.test.tsx index 76b3b5d0bf1..c5f6a55a831 100644 --- a/packages/eui/src/components/list_group/list_group_item.test.tsx +++ b/packages/eui/src/components/list_group/list_group_item.test.tsx @@ -310,7 +310,7 @@ describe('EuiListGroupItem', () => { } /> ); - expect(consoleStub).toBeCalled(); + expect(consoleStub).toHaveBeenCalled(); expect(consoleStub.mock.calls[0][0]).toMatch( '`iconType` and `icon` were passed' ); diff --git a/packages/eui/src/components/markdown_editor/markdown_editor.test.tsx b/packages/eui/src/components/markdown_editor/markdown_editor.test.tsx index dfbf04ae1ac..498adc4f939 100644 --- a/packages/eui/src/components/markdown_editor/markdown_editor.test.tsx +++ b/packages/eui/src/components/markdown_editor/markdown_editor.test.tsx @@ -218,7 +218,7 @@ describe('EuiMarkdownEditor', () => { render(); expect(testProps.onParse).toHaveBeenCalledTimes(1); - expect(testProps.onParse).toBeCalledWith(null, { + expect(testProps.onParse).toHaveBeenCalledWith(null, { ast: expect.anything(), messages: testMessage, }); diff --git a/packages/eui/src/components/markdown_editor/markdown_editor_footer.tsx b/packages/eui/src/components/markdown_editor/markdown_editor_footer.tsx index 58b0283218d..abb439659a8 100644 --- a/packages/eui/src/components/markdown_editor/markdown_editor_footer.tsx +++ b/packages/eui/src/components/markdown_editor/markdown_editor_footer.tsx @@ -10,7 +10,6 @@ import React, { useState, useMemo, Fragment, - ReactChild, forwardRef, useContext, } from 'react'; @@ -42,6 +41,7 @@ import { EuiMarkdownContext } from './markdown_context'; // @ts-ignore a react svg import MarkdownLogo from './icons/markdown_logo'; import { euiMarkdownEditorFooterStyles } from './markdown_editor_footer.styles'; +import { ReactChild } from '../common'; interface EuiMarkdownEditorFooterProps { uiPlugins: EuiMarkdownEditorUiPlugin[]; diff --git a/packages/eui/src/components/page/page_body/page_body.tsx b/packages/eui/src/components/page/page_body/page_body.tsx index 84f518a2b55..c95760b7fd0 100644 --- a/packages/eui/src/components/page/page_body/page_body.tsx +++ b/packages/eui/src/components/page/page_body/page_body.tsx @@ -17,7 +17,7 @@ import { EuiPanel, EuiPanelProps } from '../../panel'; import { useEuiPaddingCSS, EuiPaddingSize } from '../../../global_styling'; import { euiPageBodyStyles } from './page_body.styles'; -type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType; +type ComponentTypes = keyof React.JSX.IntrinsicElements | ComponentType; export type EuiPageBodyProps = PropsWithChildren & diff --git a/packages/eui/src/components/page/page_section/page_section.tsx b/packages/eui/src/components/page/page_section/page_section.tsx index 3e6e96e6d80..64157c834ce 100644 --- a/packages/eui/src/components/page/page_section/page_section.tsx +++ b/packages/eui/src/components/page/page_section/page_section.tsx @@ -56,7 +56,7 @@ export type EuiPageSectionProps = CommonProps & /** * Sets which HTML element to render. */ - component?: keyof JSX.IntrinsicElements | ComponentType; + component?: keyof React.JSX.IntrinsicElements | ComponentType; } & Omit, 'color'>; export const EuiPageSection: FunctionComponent = ({ diff --git a/packages/eui/src/components/page_template/inner/page_inner.tsx b/packages/eui/src/components/page_template/inner/page_inner.tsx index 062c58af216..fd73a291ad5 100644 --- a/packages/eui/src/components/page_template/inner/page_inner.tsx +++ b/packages/eui/src/components/page_template/inner/page_inner.tsx @@ -16,7 +16,7 @@ import { import { useEuiTheme, useIsWithinBreakpoints } from '../../../services'; import { euiPageInnerStyles } from './page_inner.styles'; -export type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType; +export type ComponentTypes = keyof React.JSX.IntrinsicElements | ComponentType; export type _EuiPageInnerProps = PropsWithChildren & diff --git a/packages/eui/src/components/provider/provider.tsx b/packages/eui/src/components/provider/provider.tsx index dba42b595ab..af304695701 100644 --- a/packages/eui/src/components/provider/provider.tsx +++ b/packages/eui/src/components/provider/provider.tsx @@ -55,12 +55,12 @@ export interface EuiProviderProps * Provide global styles via `@emotion/react` `Global` for your custom theme. * Pass `false` to remove the default EUI global styles. */ - globalStyles?: false | ((params: any) => JSX.Element | null); + globalStyles?: false | ((params: any) => React.JSX.Element | null); /** * Provide utility classes. * Pass `false` to remove the default EUI utility classes. */ - utilityClasses?: false | ((params: any) => JSX.Element | null); + utilityClasses?: false | ((params: any) => React.JSX.Element | null); /** * Provide a cache configuration(s) from `@emotion/cache`. * diff --git a/packages/eui/src/components/side_nav/side_nav_item.tsx b/packages/eui/src/components/side_nav/side_nav_item.tsx index 019d24c8d60..a16d6c7e145 100644 --- a/packages/eui/src/components/side_nav/side_nav_item.tsx +++ b/packages/eui/src/components/side_nav/side_nav_item.tsx @@ -14,6 +14,7 @@ import React, { useState, useEffect, useCallback, + JSX, } from 'react'; import classNames from 'classnames'; diff --git a/packages/eui/src/components/table/table_header_cell.tsx b/packages/eui/src/components/table/table_header_cell.tsx index 5c2e2a520d6..e3fdcc9ae80 100644 --- a/packages/eui/src/components/table/table_header_cell.tsx +++ b/packages/eui/src/components/table/table_header_cell.tsx @@ -35,7 +35,7 @@ import { HEADER_CELL_SCOPE } from './table_header_cell_shared'; export type TableHeaderCellScope = (typeof HEADER_CELL_SCOPE)[number]; export type EuiTableHeaderCellProps = CommonProps & - Omit, 'align' | 'scope'> & { + Omit, 'align' | 'scope'> & { align?: HorizontalAlignment; isSortAscending?: boolean; isSorted?: boolean; diff --git a/packages/eui/src/components/table/table_header_cell_checkbox.tsx b/packages/eui/src/components/table/table_header_cell_checkbox.tsx index cf1075df7a6..426134132eb 100644 --- a/packages/eui/src/components/table/table_header_cell_checkbox.tsx +++ b/packages/eui/src/components/table/table_header_cell_checkbox.tsx @@ -27,7 +27,7 @@ export interface EuiTableHeaderCellCheckboxProps { export const EuiTableHeaderCellCheckbox: FunctionComponent< CommonProps & - ThHTMLAttributes & + ThHTMLAttributes & EuiTableHeaderCellCheckboxProps > = ({ children, className, scope = 'col', style, width, append, ...rest }) => { const classes = classNames('euiTableHeaderCellCheckbox', className); diff --git a/packages/eui/src/components/table/utils.test.ts b/packages/eui/src/components/table/utils.test.ts index e7eabfae1b5..cec86c02396 100644 --- a/packages/eui/src/components/table/utils.test.ts +++ b/packages/eui/src/components/table/utils.test.ts @@ -49,7 +49,7 @@ describe('resolveWidthAsStyle', () => { it('returns width overriding style', () => { const style = { width: '20%', color: 'red' }; expect(resolveWidthAsStyle(style, '10%')).toEqual(result); - expect(consoleStub).toBeCalled(); + expect(consoleStub).toHaveBeenCalled(); }); it('returns style merged with width', () => { const style = { color: 'red' }; diff --git a/packages/eui/src/components/tabs/tab.test.tsx b/packages/eui/src/components/tabs/tab.test.tsx index 5398d51675d..8d6762e0125 100644 --- a/packages/eui/src/components/tabs/tab.test.tsx +++ b/packages/eui/src/components/tabs/tab.test.tsx @@ -33,7 +33,7 @@ describe('EuiTab', () => { const $button = shallow(); $button.simulate('click'); - expect(onClickHandler).toBeCalled(); + expect(onClickHandler).toHaveBeenCalled(); }); }); diff --git a/packages/eui/src/components/tabs/tabbed_content/tabbed_content.test.tsx b/packages/eui/src/components/tabs/tabbed_content/tabbed_content.test.tsx index c809b6842df..eb4836b7f2e 100644 --- a/packages/eui/src/components/tabs/tabbed_content/tabbed_content.test.tsx +++ b/packages/eui/src/components/tabs/tabbed_content/tabbed_content.test.tsx @@ -50,8 +50,8 @@ describe('EuiTabbedContent', () => { ); fireEvent.click(getByTestSubject('kibanaTab')); - expect(onTabClickHandler).toBeCalledTimes(1); - expect(onTabClickHandler).toBeCalledWith(kibanaTab); + expect(onTabClickHandler).toHaveBeenCalledTimes(1); + expect(onTabClickHandler).toHaveBeenCalledWith(kibanaTab); }); }); diff --git a/packages/eui/src/components/text_diff/text_diff.tsx b/packages/eui/src/components/text_diff/text_diff.tsx index ecd2b8fb080..ea24124f4e8 100644 --- a/packages/eui/src/components/text_diff/text_diff.tsx +++ b/packages/eui/src/components/text_diff/text_diff.tsx @@ -85,7 +85,7 @@ export const useEuiTextDiff = ({ // specifically defining the return type here as the // inferred type is not correct: array vs tuple - const textDiffResult: [JSX.Element, typeof textDiff] = [ + const textDiffResult: [React.JSX.Element, typeof textDiff] = [ {rendereredHtml} , diff --git a/packages/eui/src/components/toast/global_toast_list.test.tsx b/packages/eui/src/components/toast/global_toast_list.test.tsx index 196ae6e3df6..602833863f1 100644 --- a/packages/eui/src/components/toast/global_toast_list.test.tsx +++ b/packages/eui/src/components/toast/global_toast_list.test.tsx @@ -124,11 +124,11 @@ describe('EuiGlobalToastList', () => { act(() => { jest.advanceTimersByTime(TOAST_FADE_OUT_MS - 1); }); - expect(dismissToastSpy).not.toBeCalled(); + expect(dismissToastSpy).not.toHaveBeenCalled(); act(() => { jest.advanceTimersByTime(1); }); - expect(dismissToastSpy).toBeCalled(); + expect(dismissToastSpy).toHaveBeenCalled(); }); test('is called when the toast lifetime elapses', () => { @@ -150,11 +150,11 @@ describe('EuiGlobalToastList', () => { act(() => { jest.advanceTimersByTime(TOAST_LIFE_TIME_MS + TOAST_FADE_OUT_MS - 1); }); - expect(dismissToastSpy).not.toBeCalled(); + expect(dismissToastSpy).not.toHaveBeenCalled(); act(() => { jest.advanceTimersByTime(1); }); - expect(dismissToastSpy).toBeCalled(); + expect(dismissToastSpy).toHaveBeenCalled(); }); test('toastLifeTimeMs is overrideable by individidual toasts', () => { @@ -180,11 +180,11 @@ describe('EuiGlobalToastList', () => { act(() => { jest.advanceTimersByTime(notYetTime); }); - expect(dismissToastSpy).not.toBeCalled(); + expect(dismissToastSpy).not.toHaveBeenCalled(); act(() => { jest.advanceTimersByTime(nowItsTime - notYetTime); }); - expect(dismissToastSpy).toBeCalled(); + expect(dismissToastSpy).toHaveBeenCalled(); }); }); diff --git a/packages/eui/src/components/toast/toast.test.tsx b/packages/eui/src/components/toast/toast.test.tsx index 9603c757e2e..5d29e0b0a17 100644 --- a/packages/eui/src/components/toast/toast.test.tsx +++ b/packages/eui/src/components/toast/toast.test.tsx @@ -62,7 +62,7 @@ describe('EuiToast', () => { const closeButton = findTestSubject(component, 'toastCloseButton'); closeButton.simulate('click'); - expect(onCloseHandler).toBeCalledTimes(1); + expect(onCloseHandler).toHaveBeenCalledTimes(1); }); }); }); diff --git a/packages/eui/src/services/color_picker/index.ts b/packages/eui/src/services/color_picker/index.ts index 983281d1a0e..ded4858dd48 100644 --- a/packages/eui/src/services/color_picker/index.ts +++ b/packages/eui/src/services/color_picker/index.ts @@ -7,4 +7,5 @@ */ export type { EuiSetColorMethod } from './color_picker'; +// eslint-disable-next-line deprecation/deprecation export { useColorPickerState, useColorStopsState } from './color_picker'; diff --git a/packages/eui/src/services/console/warn_once.test.ts b/packages/eui/src/services/console/warn_once.test.ts index 5ecff2cf11e..8b697f00376 100644 --- a/packages/eui/src/services/console/warn_once.test.ts +++ b/packages/eui/src/services/console/warn_once.test.ts @@ -16,13 +16,13 @@ describe('warnOnce', () => { it('should warn only once per id', () => { warnOnce('1', 'message'); warnOnce('1', 'message'); - expect(warn).toBeCalledTimes(1); + expect(warn).toHaveBeenCalledTimes(1); warnOnce('2', 'message'); - expect(warn).toBeCalledTimes(2); + expect(warn).toHaveBeenCalledTimes(2); warnOnce('2', 'message'); - expect(warn).toBeCalledTimes(2); + expect(warn).toHaveBeenCalledTimes(2); warnOnce('1', 'message'); - expect(warn).toBeCalledTimes(2); + expect(warn).toHaveBeenCalledTimes(2); }); afterAll(() => warn.mockRestore()); }); diff --git a/packages/eui/src/services/copy/copy_to_clipboard.ts b/packages/eui/src/services/copy/copy_to_clipboard.ts index ef225b7ce97..796cb0e932e 100644 --- a/packages/eui/src/services/copy/copy_to_clipboard.ts +++ b/packages/eui/src/services/copy/copy_to_clipboard.ts @@ -14,11 +14,11 @@ function createHiddenTextElement(text: string): HTMLSpanElement { // prevents scrolling to the end of the page textElement.style.position = 'fixed'; textElement.style.top = '0'; - textElement.style.clip = 'rect(0, 0, 0, 0)'; + textElement.style.clipPath = 'rect(0, 0, 0, 0)'; // used to preserve spaces and line breaks textElement.style.whiteSpace = 'pre'; // do not inherit user-select (it may be `none`) - textElement.style.webkitUserSelect = 'text'; + textElement.style.userSelect = 'text'; // @ts-ignore this one doesn't appear in the TS definitions for some reason textElement.style.MozUserSelect = 'text'; // @ts-ignore this one doesn't appear in the TS definitions for some reason diff --git a/packages/eui/src/services/index.ts b/packages/eui/src/services/index.ts index 20a9091c7f5..a07fcc11236 100644 --- a/packages/eui/src/services/index.ts +++ b/packages/eui/src/services/index.ts @@ -63,6 +63,7 @@ export { wcagContrastMin, } from './color'; export type { HSV } from './color'; +// eslint-disable-next-line deprecation/deprecation export { useColorPickerState, useColorStopsState } from './color_picker'; export type { EuiSetColorMethod } from './color_picker'; export * from './console'; diff --git a/packages/eui/src/services/popover/popover_positioning.test.ts b/packages/eui/src/services/popover/popover_positioning.test.ts index bae2c9d40ec..bac432038d2 100644 --- a/packages/eui/src/services/popover/popover_positioning.test.ts +++ b/packages/eui/src/services/popover/popover_positioning.test.ts @@ -460,9 +460,9 @@ describe('popover_positioning', () => { beforeEach(() => { // reset any scrolling before each test // @ts-ignore setting a "readonly" property - window.pageXOffset = 0; + window.scrollX = 0; // @ts-ignore setting a "readonly" property - window.pageYOffset = 0; + window.scrollY = 0; }); describe('placement in desired position', () => { @@ -657,9 +657,9 @@ describe('popover_positioning', () => { describe('scrolling', () => { it('adds body scroll position to position values', () => { // @ts-ignore setting a "readonly" property - window.pageYOffset = 100; + window.scrollY = 100; // @ts-ignore setting a "readonly" property - window.pageXOffset = 15; + window.scrollX = 15; const anchor = document.createElement('div'); anchor.getBoundingClientRect = () => diff --git a/packages/eui/src/services/popover/popover_positioning.ts b/packages/eui/src/services/popover/popover_positioning.ts index 8cc1a131600..0e0758a4e22 100644 --- a/packages/eui/src/services/popover/popover_positioning.ts +++ b/packages/eui/src/services/popover/popover_positioning.ts @@ -224,8 +224,8 @@ export function findPopoverPosition({ bestPosition = { fit: screenCoordinates.fit, position: iterationPosition, - top: screenCoordinates.top + window.pageYOffset, - left: screenCoordinates.left + window.pageXOffset, + top: screenCoordinates.top + window.scrollY, + left: screenCoordinates.left + window.scrollX, arrow: screenCoordinates.arrow, }; diff --git a/packages/eui/src/services/theme/style_memoization.test.tsx b/packages/eui/src/services/theme/style_memoization.test.tsx index e393c9c8c87..6393d99d9f6 100644 --- a/packages/eui/src/services/theme/style_memoization.test.tsx +++ b/packages/eui/src/services/theme/style_memoization.test.tsx @@ -86,7 +86,7 @@ describe('useEuiMemoizedStyles', () => { renderHook(() => useEuiMemoizedStyles(() => ({})), { wrapper: EuiThemeProvider, }) - ).toThrowError( + ).toThrow( 'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.' ); setEuiDevProviderWarning(undefined); diff --git a/packages/eui/src/services/theme/warning.test.ts b/packages/eui/src/services/theme/warning.test.ts index e83e57acb64..dd875861e46 100644 --- a/packages/eui/src/services/theme/warning.test.ts +++ b/packages/eui/src/services/theme/warning.test.ts @@ -73,7 +73,7 @@ describe('EUI provider dev warnings', () => { it('throws an error when level is error', () => { setEuiDevProviderWarning('error'); - expect(() => emitEuiProviderWarning(providerMessage)).toThrowError( + expect(() => emitEuiProviderWarning(providerMessage)).toThrow( 'hello world' ); diff --git a/packages/eui/src/services/time/timer.test.ts b/packages/eui/src/services/time/timer.test.ts index 36be11f38cb..997ca0b591f 100644 --- a/packages/eui/src/services/time/timer.test.ts +++ b/packages/eui/src/services/time/timer.test.ts @@ -14,14 +14,14 @@ describe('Timer', () => { const callbackSpy = jest.fn(); new Timer(callbackSpy, 5); setTimeout(() => { - expect(callbackSpy).toBeCalled(); + expect(callbackSpy).toHaveBeenCalled(); done(); }, 8); }); test('creates no timeout for Infinity value', (done) => { const callbackSpy = jest.fn(); new Timer(callbackSpy, Infinity); - expect(callbackSpy).not.toBeCalled(); + expect(callbackSpy).not.toHaveBeenCalled(); done(); }); }); @@ -33,7 +33,7 @@ describe('Timer', () => { timer.pause(); setTimeout(() => { - expect(callbackSpy).not.toBeCalled(); + expect(callbackSpy).not.toHaveBeenCalled(); done(); }, 8); }); @@ -47,7 +47,7 @@ describe('Timer', () => { timer.resume(); setTimeout(() => { - expect(callbackSpy).toBeCalled(); + expect(callbackSpy).toHaveBeenCalled(); done(); }, 8); }); @@ -60,7 +60,7 @@ describe('Timer', () => { timer.clear(); setTimeout(() => { - expect(callbackSpy).not.toBeCalled(); + expect(callbackSpy).not.toHaveBeenCalled(); done(); }, 8); }); @@ -71,7 +71,7 @@ describe('Timer', () => { const callbackSpy = jest.fn(); const timer = new Timer(callbackSpy, 5); timer.finish(); - expect(callbackSpy).toBeCalled(); + expect(callbackSpy).toHaveBeenCalled(); }); }); }); diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx index ca40e684aaf..dfe7093c22a 100644 --- a/packages/website/src/pages/index.tsx +++ b/packages/website/src/pages/index.tsx @@ -49,7 +49,7 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => ({ `, }); -export default function Home(): JSX.Element { +export default function Home(): React.JSX.Element { const { siteConfig } = useDocusaurusContext(); const isBrowser = useIsBrowser(); const styles = useEuiMemoizedStyles(getStyles); From 11ee9ef03d32ff128f646c722ce6c331db63e4fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Gonz=C3=A1lez?= Date: Fri, 13 Dec 2024 02:41:22 -0400 Subject: [PATCH 4/4] [ADD] Changelog --- packages/eui/changelogs/upcoming/6914.md | 34 ++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 packages/eui/changelogs/upcoming/6914.md diff --git a/packages/eui/changelogs/upcoming/6914.md b/packages/eui/changelogs/upcoming/6914.md new file mode 100644 index 00000000000..36916eb2065 --- /dev/null +++ b/packages/eui/changelogs/upcoming/6914.md @@ -0,0 +1,34 @@ +## [Unreleased] + +### Added +- **eslint-plugin-deprecation v2.0.0:** + - Integrated the `eslint-plugin-deprecation` to handle deprecation warnings. + - Updated `.eslintrc.js` to include the new rule and plugin. + +### Updated +- **Code Replacements for Deprecated Aliases:** + - `toBeCalled` -> `toHaveBeenCalled` + - `toBeCalledTimes` -> `toHaveBeenCalledTimes` + - `toBeCalledWith` -> `toHaveBeenCalledWith` + +- **CSS Style Declarations:** + - `clip` -> `clipPath` + - `webkitUserSelect` -> `userSelect` + +- **Type Declarations:** + - `HTMLTableHeaderCellElement` -> `HTMLTableCellElement` + - `ClientRect` -> `DOMRect` (maintains compatibility but improves specificity). + +- **React-Specific Updates:** + - Replaced `createStore` with `legacy_createStore`. + - Updated type declarations to use `JSX` from React instead of global `JSX`. + - Added `ReactChild` type declaration in `src/components/common.js` to handle deprecation. +--- + +## Notes for Developers + +- **Plugin Compatibility:** + - Used `eslint-plugin-deprecation` v2.0.0 as v3.0.0 appears to be incompatible with the current project setup. + +- **Pending Analysis:** + - Some deprecations lack straightforward replacements and will need detailed investigation and follow-up issues.