fix(DropDownMenu): move getPrevNextFocus for perf & ssr support (#4441)

lumada-design · Nov 20, 2024 · 101d28d · 101d28d
1 parent 0ef2da4
commit 101d28d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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;
   }