From ec6d46f70def1cf36793e26009ccc20f608afa68 Mon Sep 17 00:00:00 2001
From: Ben Life <blife@yext.com>
Date: Thu, 21 Nov 2024 13:06:20 -0500
Subject: [PATCH 1/2] useCallback for font selector

---
 src/internal/puck/components/FontSelector.tsx |  5 +++-
 .../utils/constructThemePuckFields.ts         | 24 +++++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/internal/puck/components/FontSelector.tsx b/src/internal/puck/components/FontSelector.tsx
index 7ad7995..5d9f9c3 100644
--- a/src/internal/puck/components/FontSelector.tsx
+++ b/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:
diff --git a/src/internal/utils/constructThemePuckFields.ts b/src/internal/utils/constructThemePuckFields.ts
index 6a06216..1fad262 100644
--- a/src/internal/utils/constructThemePuckFields.ts
+++ b/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 {

From 8142e1822f50bda3bbc56897648e125f9385dde6 Mon Sep 17 00:00:00 2001
From: Ben Life <blife@yext.com>
Date: Thu, 21 Nov 2024 13:42:12 -0500
Subject: [PATCH 2/2] add useCallback mock

---
 src/internal/utils/constructThemePuckFields.test.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/internal/utils/constructThemePuckFields.test.ts b/src/internal/utils/constructThemePuckFields.test.ts
index c9411c4..f05ebe5 100644
--- a/src/internal/utils/constructThemePuckFields.test.ts
+++ b/src/internal/utils/constructThemePuckFields.test.ts
@@ -1,5 +1,5 @@
 import { CoreStyle, Style, ThemeConfig } from "../../utils/themeResolver.ts";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import {
   assignValue,
   constructThemePuckFields,
@@ -7,6 +7,12 @@ import {
   convertStyleToPuckField,
 } from "./constructThemePuckFields.ts";
 
+vi.mock("react", async () => {
+  return {
+    useCallback: (fn: any) => fn,
+  };
+});
+
 export const exampleThemeConfig: ThemeConfig = {
   text: {
     label: "Text",