Preserve OverflowMenu style, change triggerPosition bounding element

seek-oss · Nov 27, 2024 · 23793e5 · 23793e5
1 parent 433268f
commit 23793e5
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx
@@ -128,6 +128,7 @@ export const MenuRenderer = ({
   data,
   ...restProps
 }: MenuRendererProps) => {
+  const menuContainerRef = useRef<HTMLButtonElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const lastOpen = useRef(false);
   const items = flattenChildren(children);
@@ -154,7 +155,8 @@ export const MenuRenderer = ({
             open: true,
             closeReason: CLOSE_REASON_EXIT,
             highlightIndex: getNextIndex(-1, state.highlightIndex, itemCount),
-            triggerPosition: buttonRef && getPosition(buttonRef.current),
+            triggerPosition:
+              menuContainerRef && getPosition(menuContainerRef.current),
           };
         }
         case MENU_TRIGGER_DOWN:
@@ -164,7 +166,8 @@ export const MenuRenderer = ({
             open: true,
             closeReason: CLOSE_REASON_EXIT,
             highlightIndex: getNextIndex(1, state.highlightIndex, itemCount),
-            triggerPosition: buttonRef && getPosition(buttonRef.current),
+            triggerPosition:
+              menuContainerRef && getPosition(menuContainerRef.current),
           };
         }
         case BACKDROP_CLICK:
@@ -209,7 +212,8 @@ export const MenuRenderer = ({
             open: nextOpen,
             closeReason: CLOSE_REASON_EXIT,
             highlightIndex: nextOpen ? 0 : CLOSED_INDEX,
-            triggerPosition: buttonRef && getPosition(buttonRef.current),
+            triggerPosition:
+              menuContainerRef && getPosition(menuContainerRef.current),
           };
         }
         case MENU_TRIGGER_CLICK: {
@@ -219,13 +223,15 @@ export const MenuRenderer = ({
             ...state,
             open: nextOpen,
             closeReason: CLOSE_REASON_EXIT,
-            triggerPosition: buttonRef && getPosition(buttonRef.current),
+            triggerPosition:
+              menuContainerRef && getPosition(menuContainerRef.current),
           };
         }
         case WINDOW_RESIZE: {
           return {
             ...state,
-            triggerPosition: buttonRef && getPosition(buttonRef.current),
+            triggerPosition:
+              menuContainerRef && getPosition(menuContainerRef.current),
           };
         }
         default:
@@ -334,7 +340,7 @@ export const MenuRenderer = ({
 
   return (
     <Box {...buildDataAttributes({ data, validateRestProps: restProps })}>
-      <Box position="relative">
+      <Box position="relative" ref={menuContainerRef}>
         {trigger(triggerProps, { open })}
 
         {open && (