STCOM-139 - Popper - hide popper overlay when target element is scrol…

…led outside of the view. (#2423)

### Approach

Popper already adds an attribute (via its default set of modifiers) -
the hiding outcome just has to be connected via CSS. If the anchoring
element control is visible within the view, then the popper/overlay will
be visible as well. If not, it disappears.


### Result

![hidePopup](https://github.com/user-attachments/assets/89b1198b-ad90-42fb-848e-60f7c657524f)

CHANGELOG.md

@@ -25,6 +25,7 @@
 * *BREAKING* Update `react-intl` to `^7`. Refs STCOM-1406.
 * *BREAKING* remove deprecated props. Refs STCOM-1398.
 * Add marginTop0 prop to the MessageBanner component. Refs STCOM-1408.
+* Popper - hide overlay if popper anchor is scrolled out of the view. Refs STCOM-1386.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)

lib/Popper/Popper.css

@@ -1,3 +1,13 @@
 .overlay {
   z-index: 9999;
+
+  /*  popper-applied element property when the 'anchor' element is hidden
+      or scrolled out of the view. This rule effectively hides the overlay if the anchor
+      element/dropdown/control is scrolled out of the view.
+      'visibility: hidden' is used instead of 'display: none' so that coordinates can still
+      be accounted for by Popper.
+  */
+  &[x-out-of-boundaries] {
+    visibility: hidden;
+  }
 }