✨ Add destroy to popover

Author: Frontendland

scripts/utilityTypes.js

@@ -107,6 +107,7 @@ export type PopoverPosition = 'top'
 
 export type PopoverInstance = {
     close: () => void
+    destroy: () => void
     remove: () => void
 }
 

src/tests/unit/popover.test.ts

@@ -30,6 +30,15 @@ describe('popover', () => {
         vi.restoreAllMocks()
     })
 
+    it('should return undefined if trigger or popover does not exist', () => {
+        const instance = popover({
+            trigger: '#missing',
+            popover: '#popover'
+        })
+
+        expect(instance).toBeUndefined()
+    })
+
     it('should position and show the popover on trigger click', () => {
         const onOpen = vi.fn()
 
@@ -51,6 +60,130 @@ describe('popover', () => {
             position: 'bottom'
         })
     })
+
+    it('should close popover using instance.close()', () => {
+        const onClose = vi.fn()
+        const instance = popover({
+            trigger: '#trigger',
+            popover: '#popover',
+            onClose
+        })!
+
+        triggerElement.click()
+        instance.close()
+
+        popoverElement.dispatchEvent(
+            new TransitionEvent('transitionend', { bubbles: true })
+        )
+
+        expect(popoverElement.dataset.show).toBe(undefined)
+        expect(onClose).toHaveBeenCalledWith({
+            trigger: triggerElement,
+            popover: popoverElement,
+            position: 'bottom'
+        })
+    })
+
+    it('should remove click listener on destroy()', () => {
+        const instance = popover({
+            trigger: '#trigger',
+            popover: '#popover'
+        })!
+
+        instance.destroy()
+        triggerElement.click()
+
+        expect(popoverElement.dataset.show).toBe('')
+    })
+
+    it('should remove popover DOM on remove()', () => {
+        const instance = popover({
+            trigger: '#trigger',
+            popover: '#popover'
+        })!
+
+        instance.remove()
+
+        expect(document.getElementById('popover')).toBeNull()
+    })
+
+    it('should close when clicking outside if closeOnBlur is true', () => {
+        popover({
+            trigger: '#trigger',
+            popover: '#popover',
+            closeOnBlur: true
+        })
+
+        triggerElement.click()
+        document.body.click()
+
+        expect(popoverElement.dataset.show).toBe(undefined)
+    })
+
+    it('should close when pressing Escape if closeOnEsc is true', () => {
+        popover({
+            trigger: '#trigger',
+            popover: '#popover',
+            closeOnEsc: true
+        })
+
+        triggerElement.click()
+
+        document.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'Escape' })
+        )
+
+        expect(popoverElement.dataset.show).toBe(undefined)
+    })
+
+    it('should not close on blur if closeOnBlur is false', () => {
+        popover({
+            trigger: '#trigger',
+            popover: '#popover',
+            closeOnBlur: false
+        })
+
+        triggerElement.click()
+        document.body.click()
+
+        expect(popoverElement.dataset.show).toBe('true')
+    })
+
+    it('should flip position when overflowing viewport', () => {
+        vi.spyOn(triggerElement, 'getBoundingClientRect').mockReturnValue({
+            top: window.innerHeight - 10,
+            left: 0,
+            width: 100,
+            height: 50,
+            bottom: 0,
+            right: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => {}
+        } as DOMRect)
+
+        vi.spyOn(popoverElement, 'getBoundingClientRect').mockReturnValue({
+            width: 200,
+            height: 200,
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => {}
+        } as DOMRect)
+
+        popover({
+            trigger: '#trigger',
+            popover: '#popover',
+            position: 'bottom'
+        })
+
+        triggerElement.click()
+
+        expect(popoverElement.dataset.position).toBe('top')
+    })
 })
 
 describe('closePopover', () => {

src/utils/popover.ts

@@ -16,6 +16,7 @@ export type PopoverPosition = 'top'
 
 export type PopoverInstance = {
     close: () => void
+    destroy: () => void
     remove: () => void
 }
 
@@ -266,8 +267,7 @@ export const popover = ({
             close() {
                 closePopover()
             },
-            remove() {
-                popoverDOM.remove()
+            destroy() {
                 triggerDOM.removeEventListener('click', handleOpen)
                 observer.disconnect()
 
@@ -278,6 +278,10 @@ export const popover = ({
                 if (closeOnEsc) {
                     document.removeEventListener('keydown', handleCloseOnEsc)
                 }
+            },
+            remove() {
+                popoverDOM.remove()
+                this.destroy()
             }
         }
     }