webcoreui 1.3.0 → 1.4.0

package/utils/popover.ts

@@ -14,6 +14,12 @@ export type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
+export type PopoverInstance = {
+    close: () => void
+    destroy: () => void
+    remove: () => void
+}
+
 export type PopoverCallback = {
     trigger: HTMLElement
     popover: HTMLElement
@@ -40,7 +46,7 @@ export const popover = ({
     closeOnEsc = true,
     onOpen,
     onClose
-}: Popover) => {
+}: Popover): PopoverInstance | undefined => {
     const triggerDOM = document.querySelector(trigger) as HTMLElement
     const popoverDOM = document.querySelector(popover) as HTMLElement
 
@@ -51,7 +57,7 @@ export const popover = ({
             popoverDOM.dataset.position = position.split('-')[0]
         }
 
-        const handleOpen = () => {
+        const getPosition = () => {
             const triggerPosition = triggerDOM.getBoundingClientRect()
             const popoverPosition = popoverDOM.getBoundingClientRect()
 
@@ -139,77 +145,105 @@ export const popover = ({
                 }
             }
 
-            const { top, left } = positions[position as keyof typeof positions] || positions.bottom
+            let finalPosition = position || 'bottom'
+            let { top, left } = positions[finalPosition]
+
+            const viewportTop = window.scrollY
+            const viewportBottom = window.scrollY + window.innerHeight
+            const viewportLeft = 0
+            const viewportRight = window.innerWidth
+
+            const overflowsTop = top < viewportTop
+            const overflowsBottom = top + popoverPosition.height > viewportBottom
+            const overflowsLeft = left < viewportLeft
+            const overflowsRight = left + popoverPosition.width > viewportRight
+
+            if (finalPosition.startsWith('bottom') && overflowsBottom) {
+                finalPosition = finalPosition.replace('bottom', 'top') as PopoverPosition
+            } else if (finalPosition.startsWith('top') && overflowsTop) {
+                finalPosition = finalPosition.replace('top', 'bottom') as PopoverPosition
+            } else if (finalPosition.startsWith('right') && overflowsRight) {
+                finalPosition = finalPosition.replace('right', 'left') as PopoverPosition
+            } else if (finalPosition.startsWith('left') && overflowsLeft) {
+                finalPosition = finalPosition.replace('left', 'right') as PopoverPosition
+            }
+
+            ({ top, left } = positions[finalPosition])
+
+            top = Math.max(viewportTop, Math.min(top, viewportBottom - popoverPosition.height))
+            left = Math.max(viewportLeft, Math.min(left, viewportRight - popoverPosition.width))
 
+            popoverDOM.dataset.position = finalPosition.split('-')[0]
+
+            return { top, left }
+        }
+
+        const handleOpen = () => {
+            const { top, left } = getPosition()
+
+            popoverDOM.dataset.noTransition = 'true'
             popoverDOM.style.top = `${top}px`
             popoverDOM.style.left = `${left}px`
 
-            setTimeout(() => {
-                popoverDOM.dataset.show = popoverDOM.dataset.show === 'true'
-                    ? ''
-                    : 'true'
-            }, 0)
+            popoverDOM.getBoundingClientRect()
+            popoverDOM.removeAttribute('data-no-transition')
 
-            setTimeout(() => {
-                if (!popoverDOM.dataset.show) {
-                    popoverDOM.removeAttribute('data-show')
-                }
-            }, 300)
+            if (popoverDOM.dataset.show) {
+                popoverDOM.removeAttribute('data-show')
+            } else {
+                popoverDOM.dataset.show = 'true'
+            }
 
             onOpen?.({
                 trigger: triggerDOM,
                 popover: popoverDOM,
-                position
+                position: popoverDOM.dataset.position as PopoverPosition
             })
         }
 
-        const handleClose = (event: MouseEvent) => {
-            const target = event.target as HTMLElement
-            const hidePopover = !popoverDOM.contains(target)
-                && !triggerDOM.contains(target)
-                && popoverDOM.dataset.show
+        const closePopover = () => {
+            if (popoverDOM.dataset.show !== 'true') {
+                return
+            }
 
-            if (hidePopover) {
-                popoverDOM.dataset.show = ''
+            popoverDOM.removeAttribute('data-show')
+
+            const handleTransitionEnd = (e: TransitionEvent) => {
+                if (e.target !== popoverDOM) {
+                    return
+                }
+
+                popoverDOM.removeEventListener('transitionend', handleTransitionEnd)
 
                 onClose?.({
                     trigger: triggerDOM,
                     popover: popoverDOM,
-                    position
+                    position: popoverDOM.dataset.position as PopoverPosition
                 })
             }
 
-            setTimeout(() => {
-                if (!popoverDOM.dataset.show) {
-                    popoverDOM.removeAttribute('data-show')
-                }
-            }, 300)
+            popoverDOM.addEventListener('transitionend', handleTransitionEnd)
         }
 
-        const handleCloseOnEsc = (event: KeyboardEvent) => {
-            if (event.key === 'Escape' && popoverDOM.dataset.show) {
-                popoverDOM.dataset.show = ''
+        const handleClose = (event: MouseEvent) => {
+            const target = event.target as HTMLElement
+            const hidePopover = !popoverDOM.contains(target)
+                && !triggerDOM.contains(target)
+                && popoverDOM.dataset.show
 
-                onClose?.({
-                    trigger: triggerDOM,
-                    popover: popoverDOM,
-                    position
-                })
+            if (hidePopover) {
+                closePopover()
+            }
+        }
 
-                setTimeout(() => {
-                    popoverDOM.removeAttribute('data-show')
-                }, 300)
+        const handleCloseOnEsc = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && popoverDOM.dataset.show) {
+                closePopover()
             }
         }
 
         const removeOnResize = debounce(() => {
-            popoverDOM.dataset.show = ''
-
-            setTimeout(() => {
-                if (!popoverDOM.dataset.show) {
-                    popoverDOM.removeAttribute('data-show')
-                }
-            }, 300)
+            closePopover()
         })
 
         const observer = new ResizeObserver(() => {
@@ -230,7 +264,10 @@ export const popover = ({
         }
 
         return {
-            remove() {
+            close() {
+                closePopover()
+            },
+            destroy() {
                 triggerDOM.removeEventListener('click', handleOpen)
                 observer.disconnect()
 
@@ -241,6 +278,10 @@ export const popover = ({
                 if (closeOnEsc) {
                     document.removeEventListener('keydown', handleCloseOnEsc)
                 }
+            },
+            remove() {
+                popoverDOM.remove()
+                this.destroy()
             }
         }
     }