refactor(frontend): hover tooltips on react-aria-components

frontend/.storybook/preview.tsx

@@ -1,5 +1,7 @@
 import type { Decorator, Preview } from "@storybook/react";
 
+import "../src/index.css";
+
 import { theme } from "../src/app-theme";
 import DndProvider from "../src/js/app/DndProvider";
 import { AppThemeContext } from "../src/js/app-theme-context";

frontend/package.json

@@ -47,6 +47,8 @@
     "mustache": "^4.2.0",
     "rc-table": "^7.55.1",
     "react": "^19.2.8",
+    "react-aria": "3.51.0",
+    "react-aria-components": "^1.20.0",
     "react-chartjs-2": "^5.3.1",
     "react-datepicker": "^9.1.0",
     "react-dnd": "^16.0.1",

frontend/src/index.css

@@ -39,6 +39,18 @@
 
   --animate-spin-fast: spin 0.5s linear infinite;
   --animate-blink: blink 1s linear infinite;
+  --animate-fade-in: fade-in 0.1s ease-out;
+  --animate-fade-out: fade-out 0.1s ease-in forwards;
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes fade-out {
+    to {
+      opacity: 0;
+    }
+  }
   @keyframes blink {
     50% {
       color: transparent;

frontend/src/js/button/BasicButton.tsx

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes, Ref } from "react";
-
+import { mergeProps, useFocusable, useObjectRef } from "react-aria";
 import { tv } from "tailwind-variants";
 
 export interface BasicButtonProps
@@ -42,22 +42,31 @@ const BasicButton = ({
   large,
   active,
   secondary,
+  disabled,
   ...props
-}: BasicButtonProps & { ref?: Ref<HTMLButtonElement> }) => (
-  <button
-    type="button"
-    className={button({
-      bare,
-      tiny,
-      small,
-      large,
-      active,
-      secondary,
-      className,
-    })}
-    {...props}
-    ref={ref}
-  />
-);
+}: BasicButtonProps & { ref?: Ref<HTMLButtonElement> }) => {
+  const domRef = useObjectRef(ref);
+  // A surrounding TooltipTrigger hands its hover/focus props to the
+  // nearest focusable element: this makes every button a tooltip trigger.
+  const { focusableProps } = useFocusable({ isDisabled: disabled }, domRef);
+
+  return (
+    <button
+      type="button"
+      className={button({
+        bare,
+        tiny,
+        small,
+        large,
+        active,
+        secondary,
+        className,
+      })}
+      disabled={disabled}
+      {...mergeProps(focusableProps, props)}
+      ref={domRef}
+    />
+  );
+};
 
 export default BasicButton;

frontend/src/js/button/HistoryButton.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 
 import { openHistory } from "../entity-history/actions";
-import WithTooltip from "../ui-components/WithTooltip";
+import { Tooltip, TooltipTrigger } from "../ui-components/Tooltip";
 
 import IconButton from "./IconButton";
 
@@ -17,8 +17,9 @@ export const HistoryButton = () => {
   }, [dispatch]);
 
   return (
-    <WithTooltip text={t("history.history")}>
+    <TooltipTrigger>
       <IconButton small frame icon={faListUl} onClick={onClick} />
-    </WithTooltip>
+      <Tooltip>{t("history.history")}</Tooltip>
+    </TooltipTrigger>
   );
 };

frontend/src/js/concept-trees-open/ConceptTreesOpenButtons.tsx

@@ -8,7 +8,7 @@ import type { StateT } from "../app/reducers";
 import IconButton from "../button/IconButton";
 import { clearSearchQuery } from "../concept-trees/actions";
 import { useRootConceptIds } from "../concept-trees/useRootConceptIds";
-import WithTooltip from "../ui-components/WithTooltip";
+import { Tooltip, TooltipTrigger } from "../ui-components/Tooltip";
 
 import { closeAllConceptOpen, resetAllConceptOpen } from "./actions";
 import type { ConceptTreesOpenStateT } from "./reducer";
@@ -71,23 +71,25 @@ const ConceptTreesOpenButtonsView = memo(
 
     return (
       <div className={row({ className })}>
-        <WithTooltip text={t("conceptTreesOpen.resetAll")}>
+        <TooltipTrigger>
           <IconButton
             className="px-[6px] py-[9px]"
             frame
             icon={faHome}
             onClick={onResetAllConceptOpen}
           />
-        </WithTooltip>
-        <WithTooltip text={t("conceptTreesOpen.closeAll")}>
+          <Tooltip>{t("conceptTreesOpen.resetAll")}</Tooltip>
+        </TooltipTrigger>
+        <TooltipTrigger>
           <IconButton
             className="px-[6px] py-[9px]"
             disabled={isCloseAllDisabled}
             frame
             icon={faFolderMinus}
             onClick={onCloseAllConceptOpen}
           />
-        </WithTooltip>
+          <Tooltip>{t("conceptTreesOpen.closeAll")}</Tooltip>
+        </TooltipTrigger>
       </div>
     );
   },