remove popper/tooltip

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",

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';
 

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 <TagComp key={index} {...tagObject} />;
-
-        return (
-          <Tooltip
-            key={index}
-            text={tagObject.description}
-            anchorEl="#__docusaurus"
-            id={id}>
-            <TagComp key={index} {...tagObject} />
-          </Tooltip>
-        );
       })}
     </>
   );

packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/index.tsx

@@ -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<HTMLElement | null>(
-    null,
-  );
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
-  const [container, setContainer] = useState<Element | null>(null);
-  const {styles: popperStyles, attributes} = usePopper(
-    referenceElement,
-    popperElement,
-    {
-      modifiers: [
-        {
-          name: 'arrow',
-          options: {
-            element: arrowElement,
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 8],
-          },
-        },
-      ],
-    },
-  );
-
-  const timeout = useRef<number | null>(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 && (
-              <div
-                id={tooltipId}
-                role="tooltip"
-                ref={setPopperElement}
-                className={styles.tooltip}
-                style={popperStyles.popper}
-                {...attributes.popper}>
-                {text}
-                <span
-                  ref={setArrowElement}
-                  className={styles.tooltipArrow}
-                  style={popperStyles.arrow}
-                />
-              </div>
-            ),
-            container,
-          )
-        : container}
-    </>
-  );
-}

packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTooltip/styles.module.css

@@ -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;
-}

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}) {
       </div>
       <ul className={clsx('clean-list', styles.checkboxList)}>
         {TagList.map((tag, i) => {
-          const {label, description, color} = Tags[tag];
+          const {label, color} = Tags[tag];
           const id = `showcase_checkbox_id_${tag}`;
 
           return (
             <li key={i} className={styles.checkboxListItem}>
-              <ShowcaseTooltip
+              <ShowcaseTagSelect
+                tag={tag}
                 id={id}
-                text={description}
+                label={label}
-                anchorEl="#__docusaurus">
+                // description={description} TODO
-                <ShowcaseTagSelect
+                icon={
-                  tag={tag}
+                  tag === 'favorite' ? (
-                  id={id}
+                    <FavoriteIcon svgClass={styles.svgIconFavoriteXs} />
-                  label={label}
+                  ) : (
-                  icon={
+                    <span
-                    tag === 'favorite' ? (
+                      style={{
-                      <FavoriteIcon svgClass={styles.svgIconFavoriteXs} />
+                        backgroundColor: color,
-                    ) : (
+                        width: 10,
-                      <span
+                        height: 10,
-                        style={{
+                        borderRadius: '50%',
-                          backgroundColor: color,
+                        marginLeft: 8,
-                          width: 10,
+                      }}
-                          height: 10,
+                    />
-                          borderRadius: '50%',
+                  )
-                          marginLeft: 8,
+                }
-                        }}
+              />
-                      />
-                    )
-                  }
-                />
-              </ShowcaseTooltip>
             </li>
           );
         })}