@vendure-io/ui 2.0.0-beta.7 → 2.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.8",
   "description": "React component library for Vendure, built on shadcn/ui and Tailwind v4",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://github.com/vendurehq/design/tree/main/packages/ui",
@@ -49,7 +49,7 @@
     "@shikijs/themes": "^3.23.0",
     "@shikijs/transformers": "^3.22.0",
     "@tanstack/react-table": "^8.21.3",
-    "@vendure-io/design-tokens": "^2.0.0-beta.5",
+    "@vendure-io/design-tokens": "^2.0.0-beta.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/src/components/molecules/anonymized-token.tsx

@@ -53,9 +53,9 @@ interface AnonymizedTokenProps extends Omit<React.ComponentProps<'span'>, 'child
   copyable?: boolean;
   /** How long the check-mark feedback stays visible, in ms. */
   timeout?: CopyButtonProps['timeout'];
-  /** Called after a successful copy. Wire your toast here. */
+  /** Called after a successful copy. Wire your toast here. Falls back to `CopyFeedbackProvider`. */
   onCopied?: CopyButtonProps['onCopied'];
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: CopyButtonProps['onCopyError'];
   /** Accessible label before copying. @default "Copy token" */
   copyLabel?: CopyButtonProps['copyLabel'];

package/src/components/molecules/code-block.tsx

@@ -10,6 +10,7 @@ import {
 import { Button } from '@vendure-io/ui/components/atoms/button';
 import { ScrollArea, ScrollBar } from '@vendure-io/ui/components/atoms/scroll-area';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@vendure-io/ui/components/atoms/tooltip';
+import { useCopyFeedback } from '@vendure-io/ui/components/molecules/copy-feedback-provider';
 import { useCopy } from '@vendure-io/ui/hooks/use-copy';
 import { cn } from '@vendure-io/ui/lib/utils';
 import {
@@ -56,9 +57,14 @@ type CodeBlockProps = PropsWithChildren<ComponentProps<'div'>> & {
   packageManagerSwitcher?: boolean;
   /** Extra toolbar actions rendered before the built-in copy button. Compose with CodeBlockAction. */
   actions?: ReactNode;
-  /** Called after a successful copy. Wire your toast here. The DS never toasts. */
+  /**
+   * Called after a successful copy. Wire your toast here. The DS never toasts.
+   * Function props can't cross an RSC boundary — when rendering from a server
+   * component, omit this and mount `CopyFeedbackProvider` instead; it is the
+   * fallback when no prop is passed.
+   */
   onCopied?: () => void;
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: (error: Error) => void;
 };
 
@@ -975,7 +981,9 @@ function SyntaxHighlightedContent({ code, language }: SyntaxHighlightedContentPr
  * long snippets, and an optional npm→pnpm/yarn/bun package-manager switcher.
  * Highlighting is lazy (a shared highlighter singleton + per-snippet cache), and
  * line/diff/focus/word decorations use Shiki's `[!code ...]` notations. The DS
- * never toasts. Wire `onCopied`/`onCopyError` to your own feedback.
+ * never toasts. Wire `onCopied`/`onCopyError` to your own feedback — or, when
+ * rendering from server components (where function props can't be passed),
+ * mount `CopyFeedbackProvider` once and leave the props off.
  */
 export function CodeBlock({
   className,
@@ -990,6 +998,7 @@ export function CodeBlock({
   ...props
 }: CodeBlockProps) {
   const { copied, copy } = useCopy();
+  const copyFeedback = useCopyFeedback();
   const [activePackageManager, setActivePackageManager] = usePackageManager();
   const [isExpanded, setIsExpanded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -1035,8 +1044,8 @@ export function CodeBlock({
 
   const handleCopy = async () => {
     const ok = await copy(displayCode);
-    if (ok) onCopied?.();
-    else onCopyError?.(new Error('Failed to copy to the clipboard'));
+    if (ok) (onCopied ?? copyFeedback.onCopied)?.();
+    else (onCopyError ?? copyFeedback.onCopyError)?.(new Error('Failed to copy to the clipboard'));
   };
 
   const toolbar = <CodeBlockToolbar onCopy={handleCopy} isCopied={copied} actions={actions} />;

package/src/components/molecules/copy-feedback-provider.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+
+// Function props can't cross a server→client boundary, so a copy surface
+// rendered from RSC (e.g. MDX docs) could never receive an `onCopied` callback
+// for toast wiring. This context is the RSC-safe alternative: mount
+// CopyFeedbackProvider once in a client component (wire your toast there — the
+// DS never toasts), and copy surfaces resolve their feedback in a fixed order —
+// explicit prop → this context → nothing beyond the built-in copied icon.
+interface CopyFeedbackContextValue {
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  onCopied?: () => void;
+  /** Called when the clipboard write fails. */
+  onCopyError?: (error: Error) => void;
+}
+
+const CopyFeedbackContext = createContext<CopyFeedbackContextValue>({});
+
+function CopyFeedbackProvider({
+  children,
+  onCopied,
+  onCopyError,
+}: CopyFeedbackContextValue & { children: ReactNode }) {
+  const value = useMemo(() => ({ onCopied, onCopyError }), [onCopied, onCopyError]);
+  return <CopyFeedbackContext.Provider value={value}>{children}</CopyFeedbackContext.Provider>;
+}
+
+function useCopyFeedback(): CopyFeedbackContextValue {
+  return useContext(CopyFeedbackContext);
+}
+
+export { CopyFeedbackProvider, useCopyFeedback, type CopyFeedbackContextValue };

package/src/components/molecules/copyable-text.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@vendure-io/ui/components/atoms/button';
+import { useCopyFeedback } from '@vendure-io/ui/components/molecules/copy-feedback-provider';
 import { useCopy } from '@vendure-io/ui/hooks/use-copy';
 import { cn } from '@vendure-io/ui/lib/utils';
 import { CheckIcon, CopyIcon } from 'lucide-react';
@@ -11,9 +12,16 @@ interface CopyButtonProps extends Omit<React.ComponentProps<typeof Button>, 'val
   value: string;
   /** How long the check-mark feedback stays visible, in ms. @default 2000 */
   timeout?: number;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /**
+   * Called after a successful copy. Wire your toast here — the DS never toasts.
+   * Falls back to `CopyFeedbackProvider` when omitted (the RSC-safe path, since
+   * function props can't be passed from server components).
+   */
   onCopied?: () => void;
-  /** Called when the clipboard write fails (e.g. permissions, insecure context). */
+  /**
+   * Called when the clipboard write fails (e.g. permissions, insecure context).
+   * Falls back to `CopyFeedbackProvider` when omitted.
+   */
   onCopyError?: (error: Error) => void;
   /** Accessible label before copying. @default "Copy" */
   copyLabel?: string;
@@ -40,6 +48,7 @@ function CopyButton({
   ...props
 }: CopyButtonProps) {
   const { copied, copy } = useCopy({ timeout });
+  const copyFeedback = useCopyFeedback();
 
   return (
     <Button
@@ -53,8 +62,9 @@ function CopyButton({
         onClick?.(event);
         if (event.defaultPrevented) return;
         const ok = await copy(value);
-        if (ok) onCopied?.();
-        else onCopyError?.(new Error('Failed to copy to the clipboard'));
+        if (ok) (onCopied ?? copyFeedback.onCopied)?.();
+        else
+          (onCopyError ?? copyFeedback.onCopyError)?.(new Error('Failed to copy to the clipboard'));
       }}
       {...props}
     >
@@ -71,9 +81,9 @@ interface CopyableTextProps {
   className?: string;
   /** How long the check-mark feedback stays visible, in ms. @default 2000 */
   timeout?: number;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. Falls back to `CopyFeedbackProvider`. */
   onCopied?: () => void;
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: (error: Error) => void;
 }
 

package/src/components/molecules/id-chip.tsx

@@ -40,7 +40,7 @@ interface IdChipProps {
   /** Render the copy affordance. @default true */
   copyable?: boolean;
   className?: string;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. Falls back to `CopyFeedbackProvider`. */
   onCopied?: () => void;
 }