@react-email/ui 6.8.0 → 6.9.0

package/src/components/toolbar/copy-for-ai.tsx

@@ -16,7 +16,6 @@ type ActiveTab =
   | 'linter'
   | 'compatibility'
   | 'spam-assassin'
-  | 'props'
   | 'resend'
   | undefined;
 
@@ -285,7 +284,7 @@ export const CopyForAI = ({
         <button
           type="button"
           className={cn(
-            'flex items-center gap-1 h-7 px-2.5 rounded-md text-xs font-medium self-center',
+            'flex shrink-0 items-center gap-1 h-7 whitespace-nowrap px-2.5 rounded-md text-xs font-medium self-center',
             'text-slate-11',
             'hover:text-slate-12 transition-colors',
             'outline-none',
@@ -297,9 +296,10 @@ export const CopyForAI = ({
 
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          className="min-w-[260px] rounded-xl p-1.5 shadow-2xl z-50 border border-white/10"
+          className="max-h-[var(--radix-dropdown-menu-content-available-height)] w-80 max-w-[calc(100vw-1rem)] overflow-y-auto rounded-xl p-1.5 shadow-2xl z-50 border border-white/10"
           style={{ backgroundColor: '#0c0c0c' }}
           sideOffset={8}
+          collisionPadding={8}
           align="end"
           side="top"
         >

package/src/components/toolbar/toolbar-button.tsx

@@ -25,7 +25,7 @@ export const ToolbarButton = ({
             type="button"
             {...props}
             className={cn(
-              'h-full w-fit font-regular flex text-sm text-slate-10 items-center align-middle justify-center px-1 gap-2 relative',
+              'h-full w-fit shrink-0 whitespace-nowrap font-regular flex text-sm text-slate-10 items-center align-middle justify-center px-1 gap-2 relative',
               'hover:text-slate-12 transition-colors',
               active && 'data-[state=active]:text-cyan-11',
               className,
@@ -34,7 +34,7 @@ export const ToolbarButton = ({
             {children}
             {active ? (
               <motion.span
-                className="-bottom-px absolute rounded-xs left-0 w-full bg-cyan-11 h-px"
+                className="bottom-0 absolute rounded-xs left-0 w-full bg-cyan-11 h-px"
                 layoutId="active-toolbar-button"
                 transition={{
                   type: 'spring',

package/src/components/toolbar.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as Popover from '@radix-ui/react-popover';
 import * as Tabs from '@radix-ui/react-tabs';
 import { LayoutGroup } from 'framer-motion';
 import { usePathname, useSearchParams } from 'next/navigation';
@@ -20,7 +22,6 @@ import { IconReload } from './icons/icon-reload';
 import { Compatibility, useCompatibility } from './toolbar/compatibility';
 import { CopyForAI } from './toolbar/copy-for-ai';
 import { Linter, type LintingRow, useLinter } from './toolbar/linter';
-import { PreviewPropsEditor } from './toolbar/preview-props-editor';
 import { ResendIntegration } from './toolbar/resend';
 import {
   SpamAssassin,
@@ -29,19 +30,20 @@ import {
 } from './toolbar/spam-assassin';
 import { ToolbarButton } from './toolbar/toolbar-button';
 
-export type ToolbarTabValue =
-  | 'linter'
-  | 'compatibility'
-  | 'spam-assassin'
-  | 'props'
-  | 'resend';
+const toolbarTabValues = [
+  'linter',
+  'compatibility',
+  'spam-assassin',
+  'resend',
+] as const;
+
+export type ToolbarTabValue = (typeof toolbarTabValues)[number];
 
 export const useToolbarState = () => {
   const searchParams = useSearchParams();
 
-  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
-    | ToolbarTabValue
-    | undefined;
+  const param = searchParams.get('toolbar-panel');
+  const activeTab = toolbarTabValues.find((value) => value === param);
 
   return {
     activeTab,
@@ -149,6 +151,52 @@ const ToolbarInner = ({
   }
 
   const id = React.useId();
+  const [isToolbarInfoOpen, setIsToolbarInfoOpen] = React.useState(false);
+  const infoPointerTypeRef = React.useRef('');
+  const infoBlurListenerRef = React.useRef<(() => void) | null>(null);
+  // Only a cleanup for when the component unmounts with the popover still
+  // open; opening/closing itself is handled directly in `onOpenChange`.
+  React.useEffect(() => {
+    return () => {
+      if (infoBlurListenerRef.current) {
+        window.removeEventListener('blur', infoBlurListenerRef.current);
+        infoBlurListenerRef.current = null;
+      }
+    };
+  }, []);
+
+  const toolbarPanelDescription =
+    (activeTab === 'linter' &&
+      'The Linter tab checks all the images and links for common issues like missing alt text, broken URLs, insecure HTTP methods, and more.') ||
+    (activeTab === 'spam-assassin' &&
+      'The Spam tab will look at the content and use a robust scoring framework to determine if the email is likely to be spam. Powered by SpamAssassin.') ||
+    (activeTab === 'compatibility' &&
+      'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
+    (activeTab === 'resend' &&
+      'The Resend tab allows you to upload your React Email code using the Resend Templates API.') ||
+    'Info';
+
+  const panelLabels: Record<ToolbarTabValue, string> = {
+    linter: 'Linter',
+    compatibility: 'Compatibility',
+    'spam-assassin': 'Spam',
+    resend: 'Resend',
+  };
+  const availablePanels: { value: ToolbarTabValue; label: string }[] = [
+    { value: 'linter', label: panelLabels.linter },
+    ...(isRawHtmlEmail
+      ? []
+      : [
+          { value: 'compatibility' as const, label: panelLabels.compatibility },
+        ]),
+    { value: 'spam-assassin', label: panelLabels['spam-assassin'] },
+    { value: 'resend', label: panelLabels.resend },
+  ];
+  // The label must reflect the URL-selected panel even when that panel is not
+  // offered for this template (e.g. compatibility on a raw HTML email), since
+  // the content area still renders that panel's state.
+  const activePanelLabel =
+    (activeTab ? panelLabels[activeTab] : undefined) ?? 'Linter';
 
   return (
     <div
@@ -167,39 +215,78 @@ const ToolbarInner = ({
         asChild
       >
         <div className="flex flex-col h-full">
-          <Tabs.List className="flex gap-4 px-4 border-b border-solid border-slate-6 h-10 w-full shrink-0">
-            <LayoutGroup id={`toolbar-${id}`}>
-              <Tabs.Trigger asChild value="linter">
-                <ToolbarButton active={activeTab === 'linter'}>
-                  Linter
-                </ToolbarButton>
-              </Tabs.Trigger>
-              {isRawHtmlEmail ? null : (
-                <Tabs.Trigger asChild value="compatibility">
-                  <ToolbarButton active={activeTab === 'compatibility'}>
-                    Compatibility
+          <div className="flex h-10 w-full shrink-0 items-center border-b border-solid border-slate-6 px-2 sm:px-4">
+            <div className="flex h-full min-w-0 flex-1 items-center sm:hidden">
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <button
+                    type="button"
+                    className="group flex h-full items-center gap-1 px-1 text-slate-11 text-sm transition-colors hover:text-slate-12"
+                  >
+                    {activePanelLabel}
+                    <IconArrowDown
+                      size={20}
+                      className="transition-transform group-data-[state=open]:rotate-180"
+                    />
+                  </button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Portal>
+                  <DropdownMenu.Content
+                    align="start"
+                    className="z-50 min-w-44 rounded-md border border-slate-6 bg-black p-1 font-sans"
+                    collisionPadding={8}
+                    side="top"
+                    sideOffset={8}
+                  >
+                    {availablePanels.map((panel) => (
+                      <DropdownMenu.Item
+                        key={panel.value}
+                        onSelect={() => {
+                          setActivePanelValue(panel.value);
+                        }}
+                        className={cn(
+                          'flex cursor-pointer items-center justify-between gap-2 rounded px-3 py-2 text-slate-11 text-sm outline-none',
+                          'data-[highlighted]:bg-white/5 data-[highlighted]:text-slate-12',
+                          activeTab === panel.value && 'text-cyan-11',
+                        )}
+                      >
+                        {panel.label}
+                        {activeTab === panel.value ? (
+                          <IconCheck size={16} />
+                        ) : null}
+                      </DropdownMenu.Item>
+                    ))}
+                  </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Root>
+            </div>
+            <Tabs.List className="hidden h-full min-w-0 flex-1 gap-4 sm:flex">
+              <LayoutGroup id={`toolbar-${id}`}>
+                <Tabs.Trigger asChild value="linter">
+                  <ToolbarButton active={activeTab === 'linter'}>
+                    Linter
                   </ToolbarButton>
                 </Tabs.Trigger>
-              )}
-              <Tabs.Trigger asChild value="spam-assassin">
-                <ToolbarButton active={activeTab === 'spam-assassin'}>
-                  Spam
-                </ToolbarButton>
-              </Tabs.Trigger>
-              {isRawHtmlEmail || isBuilding ? null : (
-                <Tabs.Trigger asChild value="props">
-                  <ToolbarButton active={activeTab === 'props'}>
-                    Props
+                {isRawHtmlEmail ? null : (
+                  <Tabs.Trigger asChild value="compatibility">
+                    <ToolbarButton active={activeTab === 'compatibility'}>
+                      Compatibility
+                    </ToolbarButton>
+                  </Tabs.Trigger>
+                )}
+                <Tabs.Trigger asChild value="spam-assassin">
+                  <ToolbarButton active={activeTab === 'spam-assassin'}>
+                    Spam
                   </ToolbarButton>
                 </Tabs.Trigger>
-              )}
-              <Tabs.Trigger asChild value="resend">
-                <ToolbarButton active={activeTab === 'resend'}>
-                  Resend
-                </ToolbarButton>
-              </Tabs.Trigger>
-            </LayoutGroup>
-            <div className="flex items-center gap-1 ml-auto">
+                <Tabs.Trigger asChild value="resend">
+                  <ToolbarButton active={activeTab === 'resend'}>
+                    Resend
+                  </ToolbarButton>
+                </Tabs.Trigger>
+              </LayoutGroup>
+            </Tabs.List>
+            <div className="ml-2 flex shrink-0 items-center gap-1 sm:ml-4">
               <CopyForAI
                 lintingRows={lintingRows}
                 compatibilityResults={compatibilityCheckingResults}
@@ -208,27 +295,111 @@ const ToolbarInner = ({
                 isRawHtmlEmail={isRawHtmlEmail}
                 activeTab={activeTab}
               />
-              <ToolbarButton
-                delayDuration={0}
-                tooltip={
-                  (activeTab === 'linter' &&
-                    'The Linter tab checks all the images and links for common issues like missing alt text, broken URLs, insecure HTTP methods, and more.') ||
-                  (activeTab === 'spam-assassin' &&
-                    'The Spam tab will look at the content and use a robust scoring framework to determine if the email is likely to be spam. Powered by SpamAssassin.') ||
-                  (activeTab === 'compatibility' &&
-                    'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
-                  (activeTab === 'props' &&
-                    'The Props tab lets you edit the props the preview renders with, to try out different content without changing the template.') ||
-                  (activeTab === 'resend' &&
-                    'The Resend tab allows you to upload your React Email code using the Resend Templates API.') ||
-                  'Info'
-                }
+              <Popover.Root
+                onOpenChange={(open) => {
+                  if (!open) {
+                    setIsToolbarInfoOpen(false);
+                    if (infoBlurListenerRef.current) {
+                      window.removeEventListener(
+                        'blur',
+                        infoBlurListenerRef.current,
+                      );
+                      infoBlurListenerRef.current = null;
+                    }
+                    return;
+                  }
+
+                  setIsToolbarInfoOpen(true);
+                  if (infoBlurListenerRef.current === null) {
+                    // Taps inside the email preview iframe do not reach
+                    // Radix's dismiss layer, but they do blur the window.
+                    const closeWhenPreviewGetsFocus = () => {
+                      if (
+                        !(document.activeElement instanceof HTMLIFrameElement)
+                      ) {
+                        return;
+                      }
+                      setIsToolbarInfoOpen(false);
+                      if (infoBlurListenerRef.current) {
+                        window.removeEventListener(
+                          'blur',
+                          infoBlurListenerRef.current,
+                        );
+                        infoBlurListenerRef.current = null;
+                      }
+                    };
+                    infoBlurListenerRef.current = closeWhenPreviewGetsFocus;
+                    window.addEventListener('blur', closeWhenPreviewGetsFocus);
+                  }
+                }}
+                open={isToolbarInfoOpen}
               >
-                <IconInfo size={24} />
-              </ToolbarButton>
-              {isBuilding ||
-              activeTab === 'resend' ||
-              activeTab === 'props' ? null : (
+                <Popover.Trigger asChild>
+                  <ToolbarButton
+                    aria-label="About the current toolbar panel"
+                    delayDuration={0}
+                    tooltip={
+                      isToolbarInfoOpen ? undefined : toolbarPanelDescription
+                    }
+                    onPointerDown={(event) => {
+                      // Read the pointer type from `pointerdown` rather than
+                      // the `click` event: Safari before 18.2 dispatches
+                      // `click` as a plain MouseEvent without `pointerType`.
+                      infoPointerTypeRef.current = event.pointerType;
+                      const clearPointerType = () => {
+                        window.removeEventListener(
+                          'pointerup',
+                          clearPointerType,
+                          true,
+                        );
+                        window.removeEventListener(
+                          'pointercancel',
+                          clearPointerType,
+                          true,
+                        );
+                        // Deferred so the `click` for this same interaction
+                        // can still read the pointer type; this also
+                        // self-heals if the pointer is released off the
+                        // button and no `click` ever fires.
+                        setTimeout(() => {
+                          infoPointerTypeRef.current = '';
+                        }, 0);
+                      };
+                      window.addEventListener('pointerup', clearPointerType, {
+                        capture: true,
+                      });
+                      window.addEventListener(
+                        'pointercancel',
+                        clearPointerType,
+                        { capture: true },
+                      );
+                    }}
+                    onClick={(event) => {
+                      // Mouse users already get this info on hover, so only
+                      // touch and keyboard interactions open the popover.
+                      // Keyboard activation dispatches `click` without a
+                      // preceding `pointerdown`, leaving the ref empty.
+                      if (infoPointerTypeRef.current === 'mouse') {
+                        event.preventDefault();
+                      }
+                    }}
+                  >
+                    <IconInfo size={24} />
+                  </ToolbarButton>
+                </Popover.Trigger>
+                <Popover.Portal>
+                  <Popover.Content
+                    align="end"
+                    className="z-50 w-60 max-w-[calc(100vw-1rem)] rounded-md border border-slate-6 bg-black px-3 py-2 font-sans text-white text-xs"
+                    collisionPadding={8}
+                    side="top"
+                    sideOffset={8}
+                  >
+                    {toolbarPanelDescription}
+                  </Popover.Content>
+                </Popover.Portal>
+              </Popover.Root>
+              {isBuilding || activeTab === 'resend' ? null : (
                 <ToolbarButton
                   tooltip="Reload"
                   disabled={lintLoading || spamLoading || compatibilityLoading}
@@ -273,7 +444,7 @@ const ToolbarInner = ({
                 />
               </ToolbarButton>
             </div>
-          </Tabs.List>
+          </div>
 
           <div className="grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto pr-3 pl-4 pt-3">
             <Tabs.Content value="linter">
@@ -330,11 +501,6 @@ const ToolbarInner = ({
                 <SpamAssassin result={spamCheckingResult} />
               )}
             </Tabs.Content>
-            {isRawHtmlEmail || isBuilding ? null : (
-              <Tabs.Content className="h-full" value="props">
-                <PreviewPropsEditor />
-              </Tabs.Content>
-            )}
             <Tabs.Content value="resend">
               {hasSetupResendIntegration ? (
                 <ResendIntegration

package/src/components/topbar/props-panel-toggle.tsx

@@ -0,0 +1,31 @@
+import * as Toggle from '@radix-ui/react-toggle';
+import { cn } from '../../utils';
+import { IconPanelRight } from '../icons/icon-panel-right';
+import { Tooltip } from '../tooltip';
+
+interface PropsPanelToggleProps {
+  open: boolean;
+  onChange: (open: boolean) => unknown;
+}
+
+export const PropsPanelToggle = ({ open, onChange }: PropsPanelToggleProps) => {
+  return (
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <Toggle.Root
+          aria-label="Props panel"
+          className={cn(
+            'relative flex h-9 w-9 items-center justify-center rounded-lg border border-slate-6 text-sm transition duration-200 ease-in-out',
+            'text-slate-11 aria-pressed:bg-slate-4 hover:text-slate-12',
+          )}
+          onPressedChange={() => onChange(!open)}
+          pressed={open}
+          value="props"
+        >
+          <IconPanelRight size={20} />
+        </Toggle.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Show/hide the props panel</Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/contexts/props-panel.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+import { useCachedWorkspaceState } from '../hooks/use-cached-workspace-state';
+
+const PropsPanelContext = createContext<
+  | {
+      open: boolean;
+      setOpen: (open: boolean) => void;
+      /**
+       * False until the user toggles the panel, so restoring the remembered
+       * state on load applies instantly instead of animating.
+       */
+      animated: boolean;
+    }
+  | undefined
+>(undefined);
+
+/**
+ * Must stay mounted in the preview layout, which survives navigating between
+ * templates — otherwise the panel closes or replays its opening animation on
+ * every navigation.
+ */
+export const PropsPanelProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [cachedOpen, setCachedOpen] =
+    useCachedWorkspaceState<boolean>('props-panel-open');
+  // Writing to the workspace cache does not re-render, so toggles land in
+  // this state and the cached value only matters on load.
+  const [override, setOverride] = useState<boolean | undefined>(undefined);
+  const [animated, setAnimated] = useState(false);
+
+  const open = override ?? cachedOpen === true;
+
+  const setOpen = (newOpen: boolean) => {
+    setAnimated(true);
+    setOverride(newOpen);
+    setCachedOpen(newOpen);
+  };
+
+  return (
+    <PropsPanelContext.Provider value={{ open, setOpen, animated }}>
+      {children}
+    </PropsPanelContext.Provider>
+  );
+};
+
+export const usePropsPanel = () => {
+  const context = useContext(PropsPanelContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'Cannot call `usePropsPanel` outside of a `PropsPanelProvider`.',
+    );
+  }
+
+  return context;
+};

package/src/hooks/use-hot-reload.ts

@@ -11,21 +11,22 @@ import type { HotReloadChange } from '../utils/types/hot-reload-change';
 export const useHotreload = (
   onShouldReload: (changes: HotReloadChange[]) => void,
 ) => {
-  const socketRef = useRef<Socket | null>(null);
+  const onShouldReloadRef = useRef(onShouldReload);
+  onShouldReloadRef.current = onShouldReload;
 
   useEffect(() => {
-    if (!socketRef.current) {
-      socketRef.current = io();
-    }
-    const socket = socketRef.current;
+    const socket: Socket = io();
 
-    socket.on('reload', (changes: HotReloadChange[]) => {
+    const handleReload = (changes: HotReloadChange[]) => {
       console.debug('Reloading...');
-      void onShouldReload(changes);
-    });
+      void onShouldReloadRef.current(changes);
+    };
+
+    socket.on('reload', handleReload);
 
     return () => {
-      socket.off();
+      socket.off('reload', handleReload);
+      socket.disconnect();
     };
-  }, [onShouldReload]);
+  }, []);
 };