MenuRenderer: Ensure menu is visible in container with overflow hidden

seek-oss · Nov 25, 2024 · d94df2d · d94df2d
1 parent 6a118bc
commit d94df2d
Show file tree

Hide file tree

Showing 4 changed files with 243 additions and 162 deletions.
diff --git a/.changeset/fair-horses-sneeze.md b/.changeset/fair-horses-sneeze.md
@@ -0,0 +1,10 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - MenuRenderer
+---
+
+**MenuRenderer** Ensure menu is visible, even when it's trigger element is inside a container with overflow hidden.
diff --git a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.actions.ts b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.actions.ts
@@ -1,24 +1,26 @@
 // Action type IDs (allows action type names to be minified)
 export const actionTypes = {
-  MENU_TRIGGER_UP: 0,
-  MENU_ITEM_UP: 1,
-  MENU_TRIGGER_DOWN: 2,
-  MENU_ITEM_DOWN: 3,
-  MENU_ITEM_ESCAPE: 4,
-  MENU_ITEM_TAB: 5,
-  MENU_ITEM_ENTER: 6,
-  MENU_ITEM_SPACE: 7,
-  MENU_ITEM_CLICK: 8,
-  MENU_ITEM_HOVER: 9,
-  MENU_TRIGGER_ENTER: 10,
-  MENU_TRIGGER_SPACE: 11,
-  MENU_TRIGGER_CLICK: 12,
-  MENU_TRIGGER_TAB: 13,
-  MENU_TRIGGER_ESCAPE: 14,
-  BACKDROP_CLICK: 15,
+  CLIENT_ENVIRONMENT: 0,
+  MENU_TRIGGER_UP: 1,
+  MENU_ITEM_UP: 2,
+  MENU_TRIGGER_DOWN: 3,
+  MENU_ITEM_DOWN: 4,
+  MENU_ITEM_ESCAPE: 5,
+  MENU_ITEM_TAB: 6,
+  MENU_ITEM_ENTER: 7,
+  MENU_ITEM_SPACE: 8,
+  MENU_ITEM_CLICK: 9,
+  MENU_ITEM_HOVER: 10,
+  MENU_TRIGGER_ENTER: 11,
+  MENU_TRIGGER_SPACE: 12,
+  MENU_TRIGGER_CLICK: 13,
+  MENU_TRIGGER_TAB: 14,
+  MENU_TRIGGER_ESCAPE: 15,
+  BACKDROP_CLICK: 16,
 } as const;
 
 export type Action =
+  | { type: typeof actionTypes.CLIENT_ENVIRONMENT }
   | { type: typeof actionTypes.MENU_TRIGGER_UP }
   | { type: typeof actionTypes.MENU_ITEM_UP }
   | { type: typeof actionTypes.MENU_TRIGGER_DOWN }

diff --git a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.css.ts b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.css.ts
@@ -7,6 +7,21 @@ export const backdrop = style({
   height: '100vh',
 });
 
+export const triggerVars = {
+  top: createVar(),
+  left: createVar(),
+  bottom: createVar(),
+  right: createVar(),
+};
+
+// Top and bottom reversed to allow for a more natural API
+export const menuPosition = style({
+  top: triggerVars.bottom,
+  bottom: triggerVars.top,
+  left: triggerVars.left,
+  right: triggerVars.right,
+});
+
 export const menuIsClosed = style({
   transform: `translateY(${calc(vars.grid).negate().multiply(2)})`,
   visibility: 'hidden',
@@ -23,10 +38,6 @@ export const width = styleVariants({ small, medium, large }, (w) => [
   { vars: { [widthVar]: w } },
 ]);
 
-export const placementBottom = style({
-  bottom: '100%',
-});
-
 export const menuYPadding = 'xxsmall';
 
 export const menuHeightLimit = style({