✨ Add debounce + remove popover on resize

Author: Frontendland

README.md

@@ -207,6 +207,7 @@ import { Accordion } from 'webcoreui/react'
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
 - [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)
+- [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)

src/utils/debounce.ts

@@ -0,0 +1,24 @@
+export const debounce = (fn: any, waitFor = 100) => {
+    let timeout: ReturnType<typeof setTimeout> | null
+
+    const clear = () => {
+        if (timeout !== null) {
+            clearTimeout(timeout)
+            timeout = null
+        }
+    }
+
+    const debouncedFn = (...args: any[]) => {
+        clear()
+    
+        timeout = setTimeout(() => {
+            fn(...args)
+        }, waitFor)
+    }
+
+    debouncedFn.cancel = () => {
+        clear()
+    }
+
+    return debouncedFn
+}

src/utils/popover.ts

@@ -1,4 +1,5 @@
 import { closeModal } from './modal'
+import { debounce } from './debounce'
 
 type PopoverPosition = 'top'
     | 'top-start'
@@ -161,15 +162,33 @@ export const popover = ({
             }, 300)
         }
 
+        const removeOnResize = debounce(() => {
+            popoverDOM.dataset.show = ''
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        })
+
+        const observer = new ResizeObserver(() => {
+            if (popoverDOM.dataset.show) {
+                removeOnResize()
+            }
+        })
+
         triggerDOM.addEventListener('click', handleOpen)
+        observer.observe(document.body)
 
         if (closeOnBlur) {
             document.addEventListener('click', handleClose)
         }
 
         return {
             remove() {
-                triggerDOM.removeEventListener('click', handleOpen)
+                triggerDOM.removeEventListener('click', handleOpen);
+                observer.disconnect()
 
                 if (closeOnBlur) {
                     document.removeEventListener('click', handleClose)