From a91941caf330a7420c72b1d87c3b8e7ebb5b7396 Mon Sep 17 00:00:00 2001 From: Aleksey Ilin Date: Mon, 24 Jul 2023 03:06:22 +0200 Subject: [PATCH 01/45] changed classnames module with clsx --- package.json | 2 +- rollup.config.dev.js | 2 +- rollup.config.prod.js | 2 +- src/components/Tooltip/Tooltip.tsx | 6 +++--- src/components/TooltipProvider/TooltipWrapper.tsx | 4 ++-- yarn.lock | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 9c70e4fb..f9fd2d71 100644 --- a/package.json +++ b/package.json @@ -126,6 +126,6 @@ }, "dependencies": { "@floating-ui/dom": "^1.6.1", - "classnames": "^2.3.0" + "clsx": "^2.0.0" } } diff --git a/rollup.config.dev.js b/rollup.config.dev.js index 2d9c0e6b..38a973db 100644 --- a/rollup.config.dev.js +++ b/rollup.config.dev.js @@ -18,7 +18,7 @@ const name = 'ReactTooltip' const globals = { react: 'React', 'react-dom': 'ReactDOM', - classnames: 'classNames', + clsx: 'clsx', 'prop-types': 'PropTypes', } diff --git a/rollup.config.prod.js b/rollup.config.prod.js index 7c29d6e8..1c63073d 100644 --- a/rollup.config.prod.js +++ b/rollup.config.prod.js @@ -39,7 +39,7 @@ const buildFormats = [ '@floating-ui/dom': 'FloatingUIDOM', react: 'React', 'react-dom': 'ReactDOM', - classnames: 'classNames', + clsx: 'clsx', 'prop-types': 'PropTypes', }, }, diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 37487927..66356182 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState, useRef, useCallback, useImperativeHandle } from 'react' import { autoUpdate } from '@floating-ui/dom' -import classNames from 'classnames' +import clsx from 'clsx' import { debounce, deepEqual, @@ -847,7 +847,7 @@ const Tooltip = ({ {actualContent} Date: Thu, 14 Mar 2024 15:51:35 -0300 Subject: [PATCH 02/45] chore: rebase from master and fix className import --- .../TooltipController/TooltipController.tsx | 4 +-- yarn.lock | 30 +++++++++---------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index f5d06e5a..67d4bffc 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -14,7 +14,7 @@ import type { import { useTooltip } from 'components/TooltipProvider' import { TooltipContent } from 'components/TooltipContent' import { cssSupports } from 'utils' -import classNames from 'classnames' +import clsx from 'clsx' import type { ITooltipController } from './TooltipControllerTypes' const TooltipController = React.forwardRef( @@ -335,7 +335,7 @@ const TooltipController = React.forwardRef( id, anchorId, anchorSelect, - className: classNames(className, tooltipClassName), + className: clsx(className, tooltipClassName), classNameArrow, content: renderedContent, contentWrapperRef, diff --git a/yarn.lock b/yarn.lock index 2a30ad99..d1854dbc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -450,25 +450,25 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.35.0.tgz#b7569632b0b788a0ca0e438235154e45d42813a7" integrity sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw== -"@floating-ui/core@^1.4.1": - version "1.4.1" - resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17" - integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ== +"@floating-ui/core@^1.0.0": + version "1.6.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1" + integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g== dependencies: - "@floating-ui/utils" "^0.1.1" + "@floating-ui/utils" "^0.2.1" -"@floating-ui/dom@^1.0.0": - version "1.5.1" - resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7" - integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw== +"@floating-ui/dom@^1.6.1": + version "1.6.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef" + integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw== dependencies: - "@floating-ui/core" "^1.4.1" - "@floating-ui/utils" "^0.1.1" + "@floating-ui/core" "^1.0.0" + "@floating-ui/utils" "^0.2.0" -"@floating-ui/utils@^0.1.1": - version "0.1.1" - resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83" - integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw== +"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2" + integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q== "@gar/promisify@^1.0.1": version "1.1.3" From a83f9fd55d391a73a4302edd23630724d87ac211 Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Fri, 15 Mar 2024 11:03:40 -0300 Subject: [PATCH 03/45] chore: remove deprecated removeStyle util --- src/index.tsx | 2 -- src/test/utils.spec.js | 27 +++++++++++++++++++++++++++ src/utils/handle-style.ts | 35 +---------------------------------- 3 files changed, 28 insertions(+), 36 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index c11ef9cf..70ec035a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -50,5 +50,3 @@ export type { Middleware, TooltipRefProps, } - -export { removeStyle } from './utils/handle-style' diff --git a/src/test/utils.spec.js b/src/test/utils.spec.js index 42597289..25c25bd8 100644 --- a/src/test/utils.spec.js +++ b/src/test/utils.spec.js @@ -1,4 +1,5 @@ import { debounce, deepEqual, computeTooltipPosition, cssTimeToMs, clearTimeoutRef } from 'utils' +import { injectStyle } from 'utils/handle-style.ts' describe('compute positions', () => { test('empty reference elements', async () => { @@ -272,3 +273,29 @@ describe('clearTimeoutRef', () => { expect(timeoutRef.current).toBe(null) }) }) + +describe('handleStyle', () => { + test('inject base styles with no CSS into the page', () => { + injectStyle({ css: null, type: 'base' }) + + const styleElement = document.getElementById('react-tooltip-base-styles') + + expect(styleElement).toBe(null) + }) + + test('inject core styles into the page', () => { + injectStyle({ css: `body { background: 'red' }`, type: 'core' }) + + const styleElement = document.getElementById('react-tooltip-core-styles') + + expect(styleElement.innerHTML).toBe(`body { background: 'red' }`) + }) + + test('inject base styles into the page', () => { + injectStyle({ css: `body { background: 'red' }`, type: 'base' }) + + const styleElement = document.getElementById('react-tooltip-base-styles') + + expect(styleElement.innerHTML).toBe(`body { background: 'red' }`) + }) +}) diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts index 77570a6a..6d90a8b1 100644 --- a/src/utils/handle-style.ts +++ b/src/utils/handle-style.ts @@ -81,37 +81,4 @@ function injectStyle({ injected[type] = true } -/** - * @deprecated Use the `disableStyleInjection` tooltip prop instead. - * See https://react-tooltip.com/docs/examples/styling#disabling-reacttooltip-css - */ -function removeStyle({ - type = 'base', - id = REACT_TOOLTIP_BASE_STYLES_ID, -}: { - type?: 'core' | 'base' - id?: string -} = {}) { - if (!injected[type]) { - return - } - - if (type === 'core') { - // eslint-disable-next-line no-param-reassign - id = REACT_TOOLTIP_CORE_STYLES_ID - } - - const style = document.getElementById(id) - if (style?.tagName === 'style') { - style?.remove() - } else if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line no-console - console.warn( - `[react-tooltip] Failed to remove 'style' element with id '${id}'. Call \`injectStyle()\` first`, - ) - } - - injected[type] = false -} - -export { injectStyle, removeStyle } +export { injectStyle } From aa2c71cce1e3b9af12a3cb71f41fcd07f60a6499 Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Fri, 15 Mar 2024 11:33:29 -0300 Subject: [PATCH 04/45] chore: remove ToolTipContent and deprecated html prop --- src/components/Tooltip/TooltipTypes.d.ts | 1 - .../TooltipContent/TooltipContent.tsx | 9 ------- .../TooltipContent/TooltipContentTypes.d.ts | 3 --- src/components/TooltipContent/index.ts | 1 - .../TooltipController/TooltipController.tsx | 13 --------- .../TooltipControllerTypes.d.ts | 4 --- .../TooltipProvider/TooltipProviderTypes.d.ts | 1 - .../TooltipProvider/TooltipWrapper.tsx | 2 -- .../__snapshots__/tooltip-props.spec.js.snap | 27 ------------------- src/test/tooltip-props.spec.js | 13 --------- 10 files changed, 74 deletions(-) delete mode 100644 src/components/TooltipContent/TooltipContent.tsx delete mode 100644 src/components/TooltipContent/TooltipContentTypes.d.ts delete mode 100644 src/components/TooltipContent/index.ts diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index 6289d799..5743dd4b 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/src/components/Tooltip/TooltipTypes.d.ts @@ -27,7 +27,6 @@ export type PositionStrategy = 'absolute' | 'fixed' export type DataAttribute = | 'place' | 'content' - | 'html' | 'variant' | 'offset' | 'wrapper' diff --git a/src/components/TooltipContent/TooltipContent.tsx b/src/components/TooltipContent/TooltipContent.tsx deleted file mode 100644 index 0725b27b..00000000 --- a/src/components/TooltipContent/TooltipContent.tsx +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable react/no-danger */ -import React from 'react' -import type { ITooltipContent } from './TooltipContentTypes' - -const TooltipContent = ({ content }: ITooltipContent) => { - return -} - -export default TooltipContent diff --git a/src/components/TooltipContent/TooltipContentTypes.d.ts b/src/components/TooltipContent/TooltipContentTypes.d.ts deleted file mode 100644 index 302bc204..00000000 --- a/src/components/TooltipContent/TooltipContentTypes.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface ITooltipContent { - content: string -} diff --git a/src/components/TooltipContent/index.ts b/src/components/TooltipContent/index.ts deleted file mode 100644 index a2eeae55..00000000 --- a/src/components/TooltipContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TooltipContent } from './TooltipContent' diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 67d4bffc..2ce31fe5 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -12,7 +12,6 @@ import type { TooltipRefProps, } from 'components/Tooltip/TooltipTypes' import { useTooltip } from 'components/TooltipProvider' -import { TooltipContent } from 'components/TooltipContent' import { cssSupports } from 'utils' import clsx from 'clsx' import type { ITooltipController } from './TooltipControllerTypes' @@ -24,7 +23,6 @@ const TooltipController = React.forwardRef( anchorId, anchorSelect, content, - html, render, className, classNameArrow, @@ -66,7 +64,6 @@ const TooltipController = React.forwardRef( ref, ) => { const [tooltipContent, setTooltipContent] = useState(content) - const [tooltipHtml, setTooltipHtml] = useState(html) const [tooltipPlace, setTooltipPlace] = useState(place) const [tooltipVariant, setTooltipVariant] = useState(variant) const [tooltipOffset, setTooltipOffset] = useState(offset) @@ -107,9 +104,6 @@ const TooltipController = React.forwardRef( content: (value) => { setTooltipContent(value ?? content) }, - html: (value) => { - setTooltipHtml(value ?? html) - }, variant: (value) => { setTooltipVariant((value as VariantType) ?? variant) }, @@ -154,10 +148,6 @@ const TooltipController = React.forwardRef( setTooltipContent(content) }, [content]) - useEffect(() => { - setTooltipHtml(html) - }, [html]) - useEffect(() => { setTooltipPlace(place) }, [place]) @@ -326,9 +316,6 @@ const TooltipController = React.forwardRef( } else if (tooltipContent) { renderedContent = tooltipContent } - if (tooltipHtml) { - renderedContent = - } const props: ITooltip = { forwardRef: ref, diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index a6a5e289..5f608b62 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -18,10 +18,6 @@ export interface ITooltipController { className?: string classNameArrow?: string content?: string - /** - * @deprecated Use `children` or `render` instead - */ - html?: string render?: (render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType place?: PlacesType offset?: number diff --git a/src/components/TooltipProvider/TooltipProviderTypes.d.ts b/src/components/TooltipProvider/TooltipProviderTypes.d.ts index 7bcc9850..d09d7249 100644 --- a/src/components/TooltipProvider/TooltipProviderTypes.d.ts +++ b/src/components/TooltipProvider/TooltipProviderTypes.d.ts @@ -30,7 +30,6 @@ export interface ITooltipWrapper { place?: ITooltipController['place'] content?: ITooltipController['content'] - html?: ITooltipController['html'] variant?: ITooltipController['variant'] offset?: ITooltipController['offset'] wrapper?: ITooltipController['wrapper'] diff --git a/src/components/TooltipProvider/TooltipWrapper.tsx b/src/components/TooltipProvider/TooltipWrapper.tsx index 31952721..ff329043 100644 --- a/src/components/TooltipProvider/TooltipWrapper.tsx +++ b/src/components/TooltipProvider/TooltipWrapper.tsx @@ -13,7 +13,6 @@ const TooltipWrapper = ({ className, place, content, - html, variant, offset, wrapper, @@ -38,7 +37,6 @@ const TooltipWrapper = ({ className={clsx('react-tooltip-wrapper', className)} data-tooltip-place={place} data-tooltip-content={content} - data-tooltip-html={html} data-tooltip-variant={variant} data-tooltip-offset={offset} data-tooltip-wrapper={wrapper} diff --git a/src/test/__snapshots__/tooltip-props.spec.js.snap b/src/test/__snapshots__/tooltip-props.spec.js.snap index face6e5c..8037f988 100644 --- a/src/test/__snapshots__/tooltip-props.spec.js.snap +++ b/src/test/__snapshots__/tooltip-props.spec.js.snap @@ -122,33 +122,6 @@ exports[`tooltip props tooltip with float 1`] = ` `; -exports[`tooltip props tooltip with html 1`] = ` -
- - Lorem Ipsum - -