fix: font selector does not work with recent puck canaries

src/internal/puck/components/FontSelector.tsx

@@ -48,7 +48,10 @@ export const FontSelector = ({
               <button
                 key={option.value}
                 value={option.value}
-                onClick={() => handleFontChange(option.value)}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleFontChange(option.value);
+                }}
                 style={{
                   fontFamily: option.value,
                   backgroundColor:

src/internal/utils/constructThemePuckFields.test.ts

@@ -1,12 +1,18 @@
 import { CoreStyle, Style, ThemeConfig } from "../../utils/themeResolver.ts";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import {
   assignValue,
   constructThemePuckFields,
   constructThemePuckValues,
   convertStyleToPuckField,
 } from "./constructThemePuckFields.ts";
 
+vi.mock("react", async () => {
+  return {
+    useCallback: (fn: any) => fn,
+  };
+});
+
 export const exampleThemeConfig: ThemeConfig = {
   text: {
     label: "Text",

src/internal/utils/constructThemePuckFields.ts

@@ -9,6 +9,7 @@ import { ColorSelector } from "../puck/components/ColorSelector.tsx";
 import { ThemeData } from "../types/themeData.ts";
 import { FontSelector } from "../puck/components/FontSelector.tsx";
 import { RenderProps } from "./renderEntityFields.tsx";
+import { useCallback } from "react";
 
 // Converts a ThemeConfigSection into a Puck fields object
 export const constructThemePuckFields = (themeSection: ThemeConfigSection) => {
@@ -56,16 +57,19 @@ export const convertStyleToPuckField = (style: CoreStyle, plugin: string) => {
           label: style.label,
           type: "custom",
           options: style.options,
-          render: ({ onChange, value }: RenderProps) =>
-            FontSelector({
-              label: style.label,
-              options:
-                typeof style.options === "function"
-                  ? style.options()
-                  : style.options,
-              value,
-              onChange,
-            }),
+          render: useCallback(
+            ({ onChange, value }: RenderProps) =>
+              FontSelector({
+                label: style.label,
+                options:
+                  typeof style.options === "function"
+                    ? style.options()
+                    : style.options,
+                value,
+                onChange,
+              }),
+            []
+          ),
         } as CustomField;
       } else {
         return {