fix(DrawerList): fix auto sizing when used in Drawer component

Depends (more or less) on PRs: #1632 #1633 #1631

Reproduction [CSB](https://codesandbox.io/s/eufemia-drawer-list-in-drawer-x74m4l?file=/src/App.tsx) for reported issue. To do so:

- Visit https://x74m4l.csb.app/
- Zoom browser to 150%

The `Drawerlist` is then very narrow in height or off screen positioned.

packages/dnb-eufemia/src/fragments/drawer-list/DrawerListPortal.js

@@ -126,7 +126,7 @@ class DrawerListPortal extends React.PureComponent {
       }
       const ownerElem = rootElem.parentElement
 
-      // min width as  a threshold
+      // min width as a threshold
       let width = 64
 
       // Handle width
@@ -161,16 +161,22 @@ class DrawerListPortal extends React.PureComponent {
         : window.scrollX !== undefined
         ? window.scrollX
         : window.pageXOffset
-      const top = scrollY + rect.top
-      // const top = scrollY + getOffsetTop(rootElem) // iOS 8 safe version
-      const left =
+
+      let top = scrollY + rect.top
+      let left =
         scrollX +
         rect.left +
         (include_owner_width ? parseFloat(ownerWidth || 0) : 0)
 
       if (width > window.innerWidth) {
         width = window.innerWidth
       }
+      if (top < 0) {
+        top = 0
+      }
+      if (left < 0) {
+        left = 0
+      }
 
       // NB:  before we recalculated the values to REM, but iOS rounds this and we get a wrong total value out of that!
       const style = {
@@ -193,14 +199,14 @@ class DrawerListPortal extends React.PureComponent {
 
     // debounce
     this.setPosition = () => {
-      clearTimeout(this._ddt)
-      this._ddt = setTimeout(() => {
+      clearTimeout(this.positionTimeout)
+      this.positionTimeout = setTimeout(() => {
         if (this.props.opened) {
           this.setState({
             random: Date.now(), // force re-render
           })
         }
-      }, 30)
+      }, 200)
     }
 
     this.customElem = isInsideScrollView(this.props.rootRef.current, true)
@@ -217,7 +223,7 @@ class DrawerListPortal extends React.PureComponent {
   }
 
   removePositionObserver() {
-    clearTimeout(this._ddt)
+    clearTimeout(this.positionTimeout)
     if (typeof window !== 'undefined' && this.setPosition) {
       if (this.customElem) {
         this.customElem.removeEventListener('scroll', this.setPosition)

packages/dnb-eufemia/src/fragments/drawer-list/DrawerListProvider.js

@@ -18,7 +18,6 @@ import {
 } from '../../shared/component-helper'
 import {
   getOffsetTop,
-  getOffsetLeft,
   hasSelectedText,
   getSelectedElement,
 } from '../../shared/helpers'
@@ -114,7 +113,7 @@ export default class DrawerListProvider extends React.PureComponent {
     clearTimeout(this._showTimeout)
     clearTimeout(this._hideTimeout)
     clearTimeout(this._scrollTimeout)
-    clearTimeout(this._ddTimeout)
+    clearTimeout(this._directionTimeout)
 
     this.setActiveState(false)
     this.removeObservers()
@@ -343,23 +342,21 @@ export default class DrawerListProvider extends React.PureComponent {
 
     // debounce
     this.setDirection = (e) => {
-      clearTimeout(this._ddTimeout)
-      this._ddTimeout = setTimeout(renderDirection, 30)
-
-      if (useDrawer && e.type === 'resize') {
-        if (
-          !this._bodyLockIsEnabled &&
-          // Like @media screen and (max-width: 40em) { ...
-          (window.innerWidth / 16 <= 40 || window.innerHeight / 16 <= 40)
-        ) {
-          this.enableBodyLock()
-        } else if (this._bodyLockIsEnabled && !useBodyLock) {
-          this.disableBodyLock()
-        }
-      }
+      clearTimeout(this._directionTimeout)
+      this._directionTimeout = setTimeout(renderDirection, 50)
 
       if (e.type === 'resize') {
-        this.correctHiddenView()
+        if (useDrawer) {
+          if (
+            !this._bodyLockIsEnabled &&
+            // Like @media screen and (max-width: 40em) { ...
+            (window.innerWidth / 16 <= 40 || window.innerHeight / 16 <= 40)
+          ) {
+            this.enableBodyLock()
+          } else if (this._bodyLockIsEnabled && !useBodyLock) {
+            this.disableBodyLock()
+          }
+        }
       }
     }
 
@@ -383,45 +380,11 @@ export default class DrawerListProvider extends React.PureComponent {
       this.enableBodyLock()
     }
 
-    this.correctHiddenView()
     this.refreshScrollObserver()
 
     renderDirection()
   }
 
-  correctHiddenView() {
-    // We use "style.transform", because it is a independent "and quick" solution
-    // we could send down spaceToLeft and spaceToRight and set it with React's "style" prop in future
-    try {
-      const ui = this._refUl.current
-      const spaceToLeft = getOffsetLeft(ui)
-      const spaceToRight =
-        window.innerWidth - (getOffsetLeft(ui) + ui.offsetWidth)
-
-      const tri = this._refTriangle.current.style
-      const shell = this._refShell.current.style
-
-      // correct left side
-      if (spaceToLeft < 0) {
-        shell.transform = `translateX(${Math.abs(spaceToLeft)}px)`
-        tri.right = `${Math.abs(spaceToLeft)}px`
-
-        // correct right side
-      } else if (spaceToRight < 0) {
-        shell.transform = `translateX(${spaceToRight}px)`
-        tri.left = `${Math.abs(spaceToRight)}px`
-      } else {
-        if (shell.transform) {
-          shell.transform = ''
-          tri.left = 'auto'
-          tri.right = 'auto'
-        }
-      }
-    } catch (e) {
-      //
-    }
-  }
-
   // this gives us the possibility to quickly search for an item
   // by simply pressing any alfabetic key
   findItemByValue(value) {
@@ -576,7 +539,7 @@ export default class DrawerListProvider extends React.PureComponent {
   removeDirectionObserver() {
     this.disableBodyLock()
 
-    clearTimeout(this._ddTimeout)
+    clearTimeout(this._directionTimeout)
     if (typeof window !== 'undefined' && this.setDirection) {
       this._rootElem?.removeEventListener('scroll', this.setDirection)