Improve popover

Author: Dan Costello

app/components/Popover.tsx

@@ -1,13 +1,53 @@
 'use client';
 
 import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 
 const Popover = ({ children, content }: { children: React.ReactNode, content: React.ReactNode }) => {
   const [isVisible, setIsVisible] = useState(false);
+  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
   const popoverRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
-  const toggleVisibility = () => setIsVisible(v => !v);
+  const toggleVisibility = () => {
+    setIsVisible(v => {
+      const next = !v;
+      if (next && triggerRef.current) {
+        const rect = triggerRef.current.getBoundingClientRect();
+        setPopoverStyle({
+          position: 'absolute',
+          top: rect.bottom + window.scrollY + 4, // 4px gap
+          left: rect.left + window.scrollX,
+          zIndex: 1000
+        });
+      }
+      return next;
+    });
+  };
+
+  // Focus management and Escape key
+  useEffect(() => {
+    if (isVisible && popoverRef.current) {
+      popoverRef.current.focus();
+    }
+  }, [isVisible]);
+
+  useEffect(() => {
+    if (!isVisible && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [isVisible]);
+
+  useEffect(() => {
+    if (!isVisible) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsVisible(false);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isVisible]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -25,31 +65,34 @@ const Popover = ({ children, content }: { children: React.ReactNode, content: Re
   }, []);
 
   return (
-    <span className="popover-container">
+    <span className="relative inline-block">
       <button
         ref={triggerRef}
         onClick={toggleVisibility}
-        className="popover-trigger"
+        className="p-0 underline decoration-dotted text-inherit border-none background-none z-10"
         aria-haspopup="true"
         aria-expanded={isVisible}
         aria-controls="popover-content"
         type="button"
       >
         {children}
       </button>
-      {isVisible && (
+      {isVisible && typeof window !== 'undefined' && createPortal(
         <div
           id="popover-content"
           ref={popoverRef}
-          className="popover-content"
+          className={`absolute top-0 left-1/2 transform -translate-x-1/2 bg-fd-popover text-fd-popover-foreground border border-fd-border shadow-lg rounded-md p-4 z-10 whitespace-normal min-w-[250px] max-w-[320px] text-[13px]`}
           role="dialog"
           aria-modal="true"
-        >
-          {content}
-        </div>
+          aria-label="Popover dialog"
+          tabIndex={-1}
+          style={popoverStyle}
+          dangerouslySetInnerHTML={{ __html: content as string }} // Use dangerouslySetInnerHTML to set HTML content
+        />,
+        document.body
       )}
     </span>
   );
 };
 
-export default Popover; 
+export default Popover;

app/global.css

@@ -56,36 +56,3 @@
   background-repeat: no-repeat;
 }
 
-/* Popover styles */
-.popover-container {
-  position: relative;
-  display: inline-block;
-}
-
-.popover-trigger {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  text-decoration: underline dotted;
-}
-
-.popover-content {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 10px;
-  background-color: var(--color-fd-popover, white);
-  color: var(--color-fd-popover-foreground, black);
-  border: 1px solid var(--color-fd-border, #ccc);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  padding: 15px;
-  z-index: 1000;
-  white-space: normal;
-  min-width: 200px;
-  max-width: 320px;
-}

content/glossary-definitions.ts

@@ -1,18 +1,18 @@
 export const glossaryDefinitions: Record<string, string> = {
-  "selector" : "Selectors are SQL-like clauses that specify which records an API should act on. They are analogous to WHERE clauses in SQL. Each API (accessor/mutator) is associated with exactly one selector. The selector is specified at accessor/mutator creation time, either as a free text input in the UI, or as a string through the API. An example of a selector is: `{DateCreated} < ? AND {DateCreated} >= ?`. Each ? represents a parameter that is passed in an array, called SelectorValues, at API invocation time.",
-  "accessor": "Accessors are configurable APIs that allow a client to retrieve data from the user store. Accessors are intended to be use-case specific. For example, you might configure two separate accessors GetEmailForMarketing and GetEmailForAuthentication. They enforce data usage policies and minimize outbound data from the store for their given use case.",
-  "mutator": "Mutators are configurable APIs that allow a client to write data to the User Store. Mutators (setters) can be thought of as the complement to accessors (getters). Mutators are intended to capture and store purpose alongside the sensitive data. The mutator will save a configurable set of purposes alongside the data, such as operations, personalization or marketing.",
-  "access policy": "Access Policies control the circumstances in which data can be retrieved or edited. Practically, access policies are functions that receive contextual data and return true or false according to whether access is allowed or denied. Access policies can be composed from other access policies or access policy templates.",
-  "access policy template": "Access Policy Templates are parametrizable functions that can be parametrized to create multiple access policies with parallel logic. For example, you might create a template `User is over X years old`. You may use this template to create several access policy instances, allowing you to create conditional logic on a user's age group.",
-  "data transformer": "Data transformers are re-usable functions that manipulate data in UserClouds. They allow you to minimize the data that you pass or store for each use case. This is key for complying with the data minimization principles in regulations like GDPR. For example, you may use a transformer to pass the last 4 digits of an Social Security Number, rather than the raw SSN, from the store.",
+  "selector": "<b>Selectors</b> are SQL-like clauses that specify which records an API should act on. They are analogous to WHERE clauses in SQL. Each API (accessor/mutator) is associated with exactly one selector. The selector is specified at accessor/mutator creation time, either as a free text input in the UI, or as a string through the API. An example of a selector is: `{DateCreated} < ? AND {DateCreated} >= ?`. Each ? represents a parameter that is passed in an array, called SelectorValues, at API invocation time.",
+  "accessor": "<b>Accessors</b> are configurable APIs that allow a client to retrieve data from the user store. Accessors are intended to be use-case specific. For example, you might configure two separate accessors GetEmailForMarketing and GetEmailForAuthentication. They enforce data usage policies and minimize outbound data from the store for their given use case.",
+  "mutator": "<b>Mutators</b> are configurable APIs that allow a client to write data to the User Store. Mutators (setters) can be thought of as the complement to accessors (getters). Mutators are intended to capture and store purpose alongside the sensitive data. The mutator will save a configurable set of purposes alongside the data, such as operations, personalization or marketing.",
+  "access policy": "<b>Access Policies</b> control the circumstances in which data can be retrieved or edited. Practically, access policies are functions that receive contextual data and return true or false according to whether access is allowed or denied. Access policies can be composed from other access policies or access policy templates.",
+  "access policy template": "<b>Access Policy Templates</b> are parametrizable functions that can be parametrized to create multiple access policies with parallel logic. For example, you might create a template `User is over X years old`. You may use this template to create several access policy instances, allowing you to create conditional logic on a user's age group.",
+  "data transformer": "<b>Data transformers</b> are re-usable functions that manipulate data in UserClouds. They allow you to minimize the data that you pass or store for each use case. This is key for complying with the data minimization principles in regulations like GDPR. For example, you may use a transformer to pass the last 4 digits of an Social Security Number, rather than the raw SSN, from the store.",
   "column": "The user data table is built from columns and populated with records. Each column has a primitive type (describing what the column stores, like string or boolean) and logical type (describing what the column represents, like address or phone number). Columns can store a single data value or multiple values, in which case they are called array columns.",
   "tokenize": "When you tokenize a piece of sensitive data, you replace it with a secure (but usable) reference token. The token is then used in place of the data throughout systems. The token can be configured to retain the structure of the underlying data to prevent validation errors. The token is associated with an access policy which controls the circumstances in which the token can be exchanged for the original raw data.",
   "resolve": "Exchange a token for the raw data it represents. Token resolution is controlled by the token's access policy.",
-  "context": "Context is evaluated by access policies to determine whether data access is allowed. Context is automatically generated by the server and can be augmented with additional data, generated and passed by the client.",
+  "context": "<b>Context</b> is evaluated by access policies to determine whether data access is allowed. Context is automatically generated by the server and can be augmented with additional data, generated and passed by the client.",
   "token resolution policy": "An access policy applied to token resolution. This controls the circumstances in which the token can be resolved.",
   "tenant": "A single, isolated instance of UserClouds's tech (APIs, user store etc). Typically, customers set up one tenant per environment (e.g.. dev / testing / production).",
   "company": "A collection of team mates and tenants, used for billing and role management. Companies represent UserClouds's customers - e.g. the company that you work at.",
-  "organization": "Organizations are primarily used by B2B customers of UserClouds. They represent UserClouds's grand-customers (i.e. your customers). You’ll configure one organization for each client you serve, plus one organization for your employees (the Company Organization).",
+  "organization": "Organizations are primarily used by B2B customers of UserClouds. They represent UserClouds's grand-customers (i.e. your customers). You'll configure one organization for each client you serve, plus one organization for your employees (the Company Organization).",
   "application": "A single OAuth2 client that can call the APIs of any IDPs configured in your tenant (e.g. primary - Auth0, back-up - Plex, third party - social). It is where you will configure how authentication works for your project. For example, you might configure the application to require two factor authentication via SMS or offer passwordless login.",
   "permission": "A permission gives a user a right to take a particular action on an object in your system. Examples of permissions are view, edit, and manage-members.",
   "object": "Objects are the nodes of your authorization graph. Each object represents a single user, group or asset (like a file or folder) in your system.",