Fix double-container rendering for Harmony select/dropdown menus

packages/harmony/src/components/internal/Menu.tsx

@@ -30,7 +30,7 @@ export const Menu = (props: MenuProps) => {
   const { children, PaperProps, ...other } = props
 
   return (
-    <Popup {...other}>
+    <Popup {...other} disableDefaultStyles>
       <Paper mt='s' border='strong' shadow='far' {...PaperProps}>
         {children}
       </Paper>

packages/harmony/src/components/popup/Popup.tsx

@@ -205,7 +205,8 @@ export const PopupInternal = forwardRef<
     shadow = 'mid',
     fixed,
     takeWidthOfAnchor,
-    disableAutoFlip = false
+    disableAutoFlip = false,
+    disableDefaultStyles = false
   } = props
   const { spring, shadows } = useTheme()
 
@@ -421,8 +422,14 @@ export const PopupInternal = forwardRef<
                 const AnimatedDiv = animatedAny.div as any
                 return (
                   <AnimatedDiv
-                    className={cn(styles.popup, className)}
-                    css={{ boxShadow: shadows[shadow] }}
+                    className={cn({
+                      [styles.popup]: !disableDefaultStyles
+                    }, className)}
+                    css={
+                      disableDefaultStyles
+                        ? undefined
+                        : { boxShadow: shadows[shadow] }
+                    }
                     ref={popupRef}
                     key={key}
                     style={{

packages/harmony/src/components/popup/types.ts

@@ -105,4 +105,10 @@ export type PopupProps = {
    * Whether to take the width of the anchor element
    */
   takeWidthOfAnchor?: boolean
+
+  /**
+   * Disable Popup's default bordered and elevated surface styles.
+   * Useful when children provide their own surface chrome.
+   */
+  disableDefaultStyles?: boolean
 }