diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 9f98d14a68..253aace61e 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -42,7 +42,6 @@ "postcss": "^8.4.26", "prism-react-renderer": "^2.3.0", "prismjs": "^1.29.0", - "react-popper": "^2.3.0", "react-router-dom": "^5.3.4", "rtlcss": "^4.1.0", "tslib": "^2.6.0", diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index 9151c32759..87d0a1a2fa 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -287,16 +287,6 @@ declare module '@theme/Showcase/ShowcaseCard' { export default function ShowcaseCard(props: Props): JSX.Element; } -declare module '@theme/Showcase/ShowcaseTooltip' { - export interface Props { - anchorEl?: HTMLElement | string; - id: string; - text: string; - children: React.ReactElement; - } - - export default function ShowcaseTooltip(props: Props): JSX.Element; -} declare module '@theme/Showcase/ShowcaseTagSelect' { import {type ComponentProps, type ReactNode, type ReactElement} from 'react'; diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx index 52a3e49cd8..9dbe5b58e8 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx @@ -11,7 +11,6 @@ import Link from '@docusaurus/Link'; import Translate, {translate} from '@docusaurus/Translate'; import FavoriteIcon from '@theme/Showcase/FavoriteIcon'; import Heading from '@theme/Heading'; -import Tooltip from '@theme/Showcase/ShowcaseTooltip'; import styles from './styles.module.css'; const Tags: {[type in TagType]: Tag} = { @@ -174,17 +173,7 @@ function ShowcaseCardTag({tags}: {tags: TagType[]}) { return ( <> {tagObjectsSorted.map((tagObject, index) => { - const id = `showcase_card_tag_${tagObject.tag}`; - - return ( - - - - ); + return ; })} ); diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/index.tsx deleted file mode 100644 index 7087fa0e5d..0000000000 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/index.tsx +++ /dev/null @@ -1,145 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React, {useEffect, useState, useRef} from 'react'; -import ReactDOM from 'react-dom'; -import {usePopper} from 'react-popper'; -import styles from './styles.module.css'; - -interface Props { - anchorEl?: HTMLElement | string; - id: string; - text: string; - children: React.ReactElement; -} - -export default function Tooltip({ - children, - id, - anchorEl, - text, -}: Props): JSX.Element { - const [open, setOpen] = useState(false); - const [referenceElement, setReferenceElement] = useState( - null, - ); - const [popperElement, setPopperElement] = useState(null); - const [arrowElement, setArrowElement] = useState(null); - const [container, setContainer] = useState(null); - const {styles: popperStyles, attributes} = usePopper( - referenceElement, - popperElement, - { - modifiers: [ - { - name: 'arrow', - options: { - element: arrowElement, - }, - }, - { - name: 'offset', - options: { - offset: [0, 8], - }, - }, - ], - }, - ); - - const timeout = useRef(null); - const tooltipId = `${id}_tooltip`; - - useEffect(() => { - if (anchorEl) { - if (typeof anchorEl === 'string') { - setContainer(document.querySelector(anchorEl)); - } else { - setContainer(anchorEl); - } - } else { - setContainer(document.body); - } - }, [container, anchorEl]); - - useEffect(() => { - const showEvents = ['mouseenter', 'focus']; - const hideEvents = ['mouseleave', 'blur']; - - const handleOpen = () => { - // There is no point in displaying an empty tooltip. - if (text === '') { - return; - } - - // Remove the title ahead of time to avoid displaying - // two tooltips at the same time (native + this one). - referenceElement?.removeAttribute('title'); - - timeout.current = window.setTimeout(() => { - setOpen(true); - }, 400); - }; - - const handleClose = () => { - clearInterval(timeout.current!); - setOpen(false); - }; - - if (referenceElement) { - showEvents.forEach((event) => { - referenceElement.addEventListener(event, handleOpen); - }); - - hideEvents.forEach((event) => { - referenceElement.addEventListener(event, handleClose); - }); - } - - return () => { - if (referenceElement) { - showEvents.forEach((event) => { - referenceElement.removeEventListener(event, handleOpen); - }); - - hideEvents.forEach((event) => { - referenceElement.removeEventListener(event, handleClose); - }); - } - }; - }, [referenceElement, text]); - - return ( - <> - {React.cloneElement(children, { - ref: setReferenceElement, - 'aria-describedby': open ? tooltipId : undefined, - })} - {container - ? ReactDOM.createPortal( - open && ( - - ), - container, - ) - : container} - - ); -} diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/styles.module.css deleted file mode 100644 index 5500c818b6..0000000000 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/styles.module.css +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -.tooltip { - border-radius: 4px; - padding: 4px 8px; - color: var(--site-color-tooltip); - background: var(--site-color-tooltip-background); - font-size: 0.8rem; - z-index: 500; - line-height: 1.4; - font-weight: 500; - max-width: 300px; - opacity: 0.92; -} - -.tooltipArrow { - visibility: hidden; -} - -.tooltipArrow, -.tooltipArrow::before { - position: absolute; - width: 8px; - height: 8px; - background: inherit; -} - -.tooltipArrow::before { - visibility: visible; - content: ''; - transform: rotate(45deg); -} - -.tooltip[data-popper-placement^='top'] > .tooltipArrow { - bottom: -4px; -} - -.tooltip[data-popper-placement^='bottom'] > .tooltipArrow { - top: -4px; -} diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx index a79c0c6457..a80e6c7050 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx @@ -17,7 +17,6 @@ import Layout from '@theme/Layout'; import Heading from '@theme/Heading'; import FavoriteIcon from '@theme/Showcase/FavoriteIcon'; import ShowcaseCard from '@theme/Showcase/ShowcaseCard'; -import ShowcaseTooltip from '@theme/Showcase/ShowcaseTooltip'; import ShowcaseTagSelect from '@theme/Showcase/ShowcaseTagSelect'; import ShowcaseFilterToggle from '@theme/Showcase/ShowcaseFilterToggle'; import type {Operator} from '@theme/Showcase/ShowcaseFilterToggle'; @@ -297,36 +296,32 @@ function ShowcaseFilters({users}: {users: Users}) {
    {TagList.map((tag, i) => { - const {label, description, color} = Tags[tag]; + const {label, color} = Tags[tag]; const id = `showcase_checkbox_id_${tag}`; return (
  • - - - ) : ( - - ) - } - /> - + label={label} + // description={description} TODO + icon={ + tag === 'favorite' ? ( + + ) : ( + + ) + } + />
  • ); })}