chore(docs): enable native popover when supported (#10581)

* fix: enable native popover when supported * fix: ts-expect-error where necessary
nextauthjs · Apr 15, 2024 · 855ece6 · 855ece6
1 parent f1de049
commit 855ece6
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 30 deletions.
diff --git a/docs/components/Tooltip/index.tsx b/docs/components/Tooltip/index.tsx
@@ -1,28 +1,75 @@
-import React from "react"
+"use client"
+
+import React, { useRef } from "react"
+import polyfill from "@oddbird/css-anchor-positioning/fn"
 import { Tooltip as ArkTooltip } from "@ark-ui/react/tooltip"
 
 interface Props {
   label: string
+  framework: string
   children: React.ReactNode
 }
 
-export function Tooltip({ label, children }: Props) {
-  return (
-    <ArkTooltip.Root
-      positioning={{ placement: "bottom" }}
-      openDelay={0}
-      lazyMount
-      unmountOnExit
-    >
-      <ArkTooltip.Trigger asChild={true}>{children}</ArkTooltip.Trigger>
-      <ArkTooltip.Positioner>
-        <ArkTooltip.Content
+export function Tooltip({ label, framework, children }: Props) {
+  if (typeof window === "undefined") return null
+
+  const supportsPopover =
+    HTMLElement?.prototype.hasOwnProperty("popover") ?? false
+
+  if (supportsPopover) {
+    // Web Native Popover
+    const popoverTargetRef = useRef()
+    const slug = label.replace(/[^a-zA-Z0-9]/g, "-").toLowerCase()
+
+    // Enable CSS Anchor Positioning Polyfill
+    // https://github.com/oddbird/css-anchor-positioning
+    polyfill()
+
+    return (
+      <div className="relative w-full">
+        <button
+          id={`anchor-${framework}-${slug}`}
+          // @ts-expect-error
+          popovertarget={`popover-${framework}-${slug}`}
+          className="w-full tooltip-anchor"
+          // @ts-expect-error
+          onMouseEnter={() => popoverTargetRef.current?.showPopover()}
+          // @ts-expect-error
+          onMouseLeave={() => popoverTargetRef.current?.hidePopover()}
+        >
+          {children}
+        </button>
+        <div
+          // @ts-expect-error
+          popover="auto"
+          ref={popoverTargetRef}
           className="py-2 px-4 max-w-xs text-sm text-center text-fuchsia-900 bg-purple-100 rounded-lg border shadow-md"
-          style={{ animation: "	animation: fadeIn .2s linear" }}
+          anchor={`anchor-${framework}-${slug}`}
+          id={`popover-${framework}-${slug}`}
         >
           {label}
-        </ArkTooltip.Content>
-      </ArkTooltip.Positioner>
-    </ArkTooltip.Root>
-  )
+        </div>
+      </div>
+    )
+  } else {
+    // Ark Tooltip
+    return (
+      <ArkTooltip.Root
+        positioning={{ placement: "bottom" }}
+        openDelay={0}
+        lazyMount
+        unmountOnExit
+      >
+        <ArkTooltip.Trigger asChild={true}>{children}</ArkTooltip.Trigger>
+        <ArkTooltip.Positioner>
+          <ArkTooltip.Content
+            className="py-2 px-4 max-w-xs text-sm text-center text-fuchsia-900 bg-purple-100 rounded-lg border shadow-md"
+            style={{ animation: "	animation: fadeIn .2s linear" }}
+          >
+            {label}
+          </ArkTooltip.Content>
+        </ArkTooltip.Positioner>
+      </ArkTooltip.Root>
+    )
+  }
 }
diff --git a/docs/package.json b/docs/package.json
@@ -29,6 +29,7 @@
     "@ark-ui/react": "^2.2.3",
     "@inkeep/widgets": "^0.2.272",
     "@next/third-parties": "^14.2.1",
+    "@oddbird/css-anchor-positioning": "^0.0.5",
     "@phosphor-icons/react": "^2.0.15",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-tabs": "^1.0.4",

diff --git a/docs/pages/getting-started/index.mdx b/docs/pages/getting-started/index.mdx
@@ -29,8 +29,8 @@ Select your framework of choice to get started, or view the example application
       />
       <div className="mt-3 text-sm">Next.js</div>
     </Link>
-    <div className="flex gap-2">
-      <Tooltip label="Live Example">
+    <div className="flex justify-stretch gap-2">
+      <Tooltip framework="nextjs" label="Live Example">
         <a
           href="https://next-auth-example.vercel.app/"
           rel="noreferrer"
@@ -40,7 +40,7 @@ Select your framework of choice to get started, or view the example application
           <ArrowSquareOut size={20} />
         </a>
       </Tooltip>
-      <Tooltip label="Github Repository">
+      <Tooltip framework="nextjs" label="Github Repository">
         <a
           href="https://github.com/nextauthjs/next-auth-example"
           rel="noreferrer"
@@ -67,7 +67,7 @@ Select your framework of choice to get started, or view the example application
       </div>
     </Link>
     <div className="flex gap-2">
-      <Tooltip label="Live Example">
+      <Tooltip framework="sveltekit" label="Live Example">
         <a
           href="https://sveltekit-auth-example.vercel.app/"
           rel="noreferrer"
@@ -77,7 +77,7 @@ Select your framework of choice to get started, or view the example application
           <ArrowSquareOut size={20} />
         </a>
       </Tooltip>
-      <Tooltip label="Github Repository">
+      <Tooltip framework="sveltekit" label="Github Repository">
         <a
           href="https://github.com/nextauthjs/sveltekit-auth-example"
           rel="noreferrer"
@@ -109,7 +109,7 @@ Select your framework of choice to get started, or view the example application
       </div>
     </Link>
     <div className="flex gap-2">
-      <Tooltip label="Live Example">
+      <Tooltip framework="express" label="Live Example">
         <a
           href="https://express-auth-example.vercel.app/"
           rel="noreferrer"
@@ -119,7 +119,7 @@ Select your framework of choice to get started, or view the example application
           <ArrowSquareOut size={20} />
         </a>
       </Tooltip>
-      <Tooltip label="Github Repository">
+      <Tooltip framework="express" label="Github Repository">
         <a
           href="https://github.com/nextauthjs/express-auth-example"
           rel="noreferrer"

diff --git a/docs/pages/global.css b/docs/pages/global.css
@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 @import url("./animated-stars.css");
 
 details > *:not(summary) {
@@ -231,3 +230,30 @@ article.nextra-content table {
 div.nextra-search kbd {
   @apply !hidden lg:!flex;
 }
+
+/* Native popover */
+[popover] {
+  position: absolute;
+  top: calc(3rem + anchor(top));
+  left: anchor(implicit center);
+  translate: -50% 0;
+  position-try-options: flip-block, flip-inline;
+
+  /* Final state of the exit animation */
+  opacity: 0;
+  transition:
+    opacity 300ms,
+    transform 300ms,
+    overlay 300ms allow-discrete,
+    display 300ms allow-discrete;
+}
+
+[popover]:popover-open {
+  opacity: 1;
+}
+
+@starting-style {
+  [popover]:popover-open {
+    opacity: 0;
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml