fix(NavigationPopup): placement and styles (#1151)

* fix(NavigationPopup): placement and styles

* chore: add comment for close handler

Author: PahaN47

src/navigation/components/NavigationPopup/NavigationPopup.scss

@@ -10,6 +10,7 @@ $block: '.#{$ns}navigation-popup';
     margin-top: $offset;
 
     @include navigation-popup();
+    @include text-size(body-2);
 
     &__list {
         @include reset-list-style();

src/navigation/components/NavigationPopup/NavigationPopup.tsx

@@ -16,30 +16,40 @@ export const NavigationPopup: React.FC<NavigationPopupProps> = ({
     items,
     onClose,
     open,
-}) => (
-    <Popup
-        // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
-        anchorRef={open ? anchorRef : undefined}
-        open={open}
-        onClose={onClose}
-        onOutsideClick={onClose}
-        keepMounted
-        disablePortal
-        strategy="fixed"
-        placement="bottom-start"
-        offset={OFFSET_RESET}
-    >
-        <ul className={b('list')}>
-            {items.map((item) => (
-                <NavigationItem
-                    key={item.text}
-                    className={b('link')}
-                    data={item}
-                    menuLayout={NavigationLayout.Dropdown}
-                />
-            ))}
-        </ul>
-    </Popup>
-);
+}) => {
+    // Opening and closing is controlled by the associated button,
+    // but in order to give the popup control over closing as well (e.g. on click outside or escape key press)
+    // there needs to be an awkward looking handler like this.
+    const onOpenChange = (isOpen: boolean) => {
+        if (!isOpen) {
+            onClose();
+        }
+    };
+
+    return (
+        <Popup
+            className={b()}
+            // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+            anchorElement={anchorRef.current}
+            open={open}
+            onOpenChange={onOpenChange}
+            keepMounted
+            strategy="fixed"
+            placement="bottom-start"
+            offset={OFFSET_RESET}
+        >
+            <ul className={b('list')}>
+                {items.map((item) => (
+                    <NavigationItem
+                        key={item.text}
+                        className={b('link')}
+                        data={item}
+                        menuLayout={NavigationLayout.Dropdown}
+                    />
+                ))}
+            </ul>
+        </Popup>
+    );
+};
 
 export default NavigationPopup;