nopopper-fix

package-lock.json

@@ -98,7 +98,6 @@
         "rollup-plugin-visualizer": "^5.12.0",
         "sass": "^1.79.4",
         "solid-js": "^1.9.2",
-        "solid-popper": "^0.3.0",
         "solid-tiptap": "0.7.0",
         "solid-transition-group": "^0.2.3",
         "storybook": "^8.3.5",
@@ -22674,20 +22673,6 @@
         "seroval-plugins": "^1.1.0"
       }
     },
-    "node_modules/solid-popper": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/solid-popper/-/solid-popper-0.3.0.tgz",
-      "integrity": "sha512-XlfEWAyxGGqFgg/uRpF+BemSfCqjbLA8p6fToDa+6v3paw3eBQj0TU08aBOIj2VeigaEiz8ZTlDx1eBLVRivBg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@popperjs/core": "^2.11",
-        "solid-js": "^1.2"
-      }
-    },
     "node_modules/solid-refresh": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/solid-refresh/-/solid-refresh-0.6.3.tgz",

package.json

@@ -105,7 +105,6 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.79.4",
     "solid-js": "^1.9.2",
-    "solid-popper": "^0.3.0",
     "solid-tiptap": "0.7.0",
     "solid-transition-group": "^0.2.3",
     "storybook": "^8.3.5",

src/components/_shared/Popover/Popover.tsx

@@ -1,5 +1,5 @@
-import { JSX, Show, createSignal, onMount } from 'solid-js'
-import usePopper from 'solid-popper'
+import { JSX, Show, createSignal, onCleanup, onMount } from 'solid-js'
+import { createTooltip } from '~/lib/createTooltip'
 
 import styles from './Popover.module.scss'
 
@@ -7,63 +7,58 @@ type Props = {
   children: (setTooltipEl: (el: HTMLElement | null) => void) => JSX.Element
   content: string | JSX.Element
   disabled?: boolean
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  offset?: [number, number]
 }
 
 export const Popover = (props: Props) => {
   const [show, setShow] = createSignal(false)
   const [anchor, setAnchor] = createSignal<HTMLElement>()
-  const [popper, setPopper] = createSignal<HTMLElement>()
+  const [tooltip, setTooltip] = createSignal<HTMLElement>()
 
-  usePopper(anchor, popper, {
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [0, 8]
-        }
-      },
-      {
-        name: 'flip',
-        options: {
-          fallbackPlacements: ['top', 'bottom']
-        }
-      }
-    ]
+  let tooltipInstance: ReturnType<typeof createTooltip> | undefined
+
+  onMount(() => {
+    const anchorEl = anchor()
+    const tooltipEl = tooltip()
+
+    if (anchorEl && tooltipEl && !props.disabled) {
+      tooltipInstance = createTooltip(anchorEl, tooltipEl, {
+        placement: props.placement || 'top',
+        offset: props.offset || [0, 8]
+      })
+    }
   })
 
-  const showEvents = ['mouseenter', 'focus']
-  const hideEvents = ['mouseleave', 'blur']
+  onCleanup(() => {
+    tooltipInstance?.destroy()
+  })
 
-  const handleMouseOver = () => setShow(true)
-  const handleMouseOut = () => setShow(false)
+  const handleMouseOver = () => {
+    if (!props.disabled) {
+      setShow(true)
+      tooltipInstance?.update()
+    }
+  }
 
-  if (!props.disabled) {
-    onMount(() => {
-      if (!anchor()) return
-      showEvents.forEach((event) => {
-        anchor()?.addEventListener(event, handleMouseOver)
-      })
-      hideEvents.forEach((event) => {
-        anchor()?.addEventListener(event, handleMouseOut)
-      })
-      return () => {
-        showEvents.forEach((event) => {
-          anchor()?.removeEventListener(event, handleMouseOver)
-        })
-        hideEvents.forEach((event) => {
-          anchor()?.removeEventListener(event, handleMouseOut)
-        })
-      }
-    })
+  const handleMouseOut = () => {
+    setShow(false)
   }
 
   return (
     <>
-      {props.children(setAnchor)}
+      <div
+        onMouseEnter={handleMouseOver}
+        onMouseLeave={handleMouseOut}
+        onFocusIn={handleMouseOver}
+        onFocusOut={handleMouseOut}
+      >
+        {props.children(setAnchor)}
+      </div>
       <Show when={show() && !props.disabled}>
-        <div ref={setPopper} class={styles.tooltip}>
+        <div ref={setTooltip} class={styles.tooltip}>
           {props.content}
-          <div class={styles.arrow} data-popper-arrow={true} />
+          <div class={styles.arrow} />
         </div>
       </Show>
     </>