🐛 Prevent Popover to take up visible space when toggled off, and prevent selection of disabled items for List components

Author: Frontendland

src/components/List/List.astro

@@ -61,7 +61,7 @@ const wrapperClasses = [
                         tabindex={item.href || item.disabled ? undefined : 0}
                         data-value={item.value}
                         data-name={item.name}
-                        data-disabled={item.disabled}
+                        data-disabled={item.disabled ? 'true' : undefined}
                         data-selected={item.selected}
                     >
                         <ConditionalWrapper condition={!!item.href}>
@@ -99,7 +99,7 @@ const wrapperClasses = [
     const handleClick = (list: Element, items: Element[], event: Event) => {
         const target = event.target as HTMLElement
 
-        if (target.dataset.value) {
+        if (target.dataset.value && !target.dataset.disabled) {
             dispatch('listOnSelect', {
                 value: target.dataset.value,
                 name: target.dataset.name,

src/components/Popover/popover.module.scss

@@ -9,6 +9,7 @@
     @include typography(primary);
     @include border-radius(md);
     @include size(w300px);
+    @include position('t-100%');
 
     transform: translateY(-5px);
     pointer-events: none;

src/utils/popover.ts

@@ -14,20 +14,30 @@ export type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
+type Callback = {
+    trigger: HTMLElement
+    popover: HTMLElement
+    position: PopoverPosition | undefined
+}
+
 type Popover = {
     trigger: string
     popover: string
     position?: PopoverPosition
     offset?: number
     closeOnBlur?: boolean
+    onOpen?: (args: Callback) => unknown
+    onClose?: (args: Callback) => unknown
 }
 
 export const popover = ({
     trigger,
     popover,
     position,
     offset = 10,
-    closeOnBlur = true
+    closeOnBlur = true,
+    onOpen,
+    onClose
 }: Popover) => {
     const triggerDOM = document.querySelector(trigger) as HTMLElement
     const popoverDOM = document.querySelector(popover) as HTMLElement
@@ -143,6 +153,12 @@ export const popover = ({
                     popoverDOM.removeAttribute('data-show')
                 }
             }, 300)
+
+            onOpen?.({
+                trigger: triggerDOM,
+                popover: popoverDOM,
+                position
+            })
         }
 
         const handleClose = (event: MouseEvent) => {
@@ -153,6 +169,12 @@ export const popover = ({
 
             if (hidePopover) {
                 popoverDOM.dataset.show = ''
+
+                onClose?.({
+                    trigger: triggerDOM,
+                    popover: popoverDOM,
+                    position
+                })
             }
 
             setTimeout(() => {