From 101d28d20f3779aa5043923885540d6e1e389c79 Mon Sep 17 00:00:00 2001
From: Bruno Henriques <bruno.henriques@hitachivantara.com>
Date: Wed, 20 Nov 2024 11:07:17 +0000
Subject: [PATCH] fix(DropDownMenu): move getPrevNextFocus for perf & ssr
 support (#4441)

---
 packages/core/src/DropDownMenu/DropDownMenu.tsx | 2 +-
 packages/utils/src/utils/classes.ts             | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/DropDownMenu/DropDownMenu.tsx b/packages/core/src/DropDownMenu/DropDownMenu.tsx
index 5704aeeb4e..142d156283 100644
--- a/packages/core/src/DropDownMenu/DropDownMenu.tsx
+++ b/packages/core/src/DropDownMenu/DropDownMenu.tsx
@@ -141,7 +141,6 @@ export const HvDropDownMenu = forwardRef<
 
   const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId(idProp);
-  const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
 
   const listId = setId(id, "list");
 
@@ -159,6 +158,7 @@ export const HvDropDownMenu = forwardRef<
   // If the ESCAPE key is pressed inside the list, the close handler must be called.
   const handleKeyDown: HvListProps["onKeyDown"] = (event) => {
     if (isKey(event, "Tab")) {
+      const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
       const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
       if (node) setTimeout(() => node.focus(), 0);
       handleClose(event);
diff --git a/packages/utils/src/utils/classes.ts b/packages/utils/src/utils/classes.ts
index 7c392e0e94..1757aa0c50 100644
--- a/packages/utils/src/utils/classes.ts
+++ b/packages/utils/src/utils/classes.ts
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import type { CSSInterpolation } from "@emotion/serialize";
 
 import { useCss } from "../hooks/useCss";
@@ -76,9 +77,11 @@ export function createClasses<
     const { cx, css } = useCss();
 
     /** Object with the merged static+internal+external classes */
-    const classes = mapObject(styles, (key) =>
-      cx(addStatic && `${name}-${key}`, css(styles[key]), classesProp?.[key]),
-    );
+    const classes = useMemo(() => {
+      return mapObject(styles, (key) =>
+        cx(addStatic && `${name}-${key}`, css(styles[key]), classesProp?.[key]),
+      );
+    }, [addStatic, classesProp, css, cx]);
 
     return { classes, css, cx } as const;
   }