@neovici/cosmoz-dropdown 7.4.1 → 7.5.0

package/dist/next/cosmoz-dropdown-next.js

@@ -85,27 +85,31 @@ const style = css `
 	}
 `;
 const CosmozDropdownNext = (host) => {
-    const { placement = 'bottom span-right', openOnHover, openOnFocus } = host;
+    const { placement = 'bottom span-right', disabled, openOnHover, openOnFocus, } = host;
     const popoverRef = useRef();
     const [opened, setOpened] = useProperty('opened', false);
     // Call showPopover/hidePopover synchronously so the browser associates
     // the popover with the current user-gesture. Deferring to a microtask
     // (useEffect) causes light-dismiss to immediately close the popover.
     const open = useCallback(() => {
+        if (disabled)
+            return;
         setOpened(true);
         popoverRef.current?.showPopover();
-    }, []);
+    }, [disabled]);
     const close = useCallback(() => {
         setOpened(false);
         popoverRef.current?.hidePopover();
     }, []);
     const toggle = useCallback(() => {
+        if (disabled)
+            return;
         const popover = popoverRef.current;
         if (popover?.matches(':popover-open'))
             close();
         else
             open();
-    }, []);
+    }, [disabled]);
     // Sync native popover when `opened` is set externally via property binding
     useEffect(() => {
         const popover = popoverRef.current;
@@ -119,7 +123,15 @@ const CosmozDropdownNext = (host) => {
     useEffect(() => {
         host.toggleAttribute('opened', !!opened);
     }, [opened]);
-    useAutoOpen({ host, popoverRef, openOnHover, openOnFocus, open, close });
+    const { scheduleClose, cancelClose } = useAutoOpen({
+        host,
+        popoverRef,
+        disabled,
+        openOnHover,
+        openOnFocus,
+        open,
+        close,
+    });
     // With open-on-focus, only open (not toggle) on click to avoid racing
     // with the focusin handler
     const handleClick = openOnFocus ? open : toggle;
@@ -139,6 +151,8 @@ const CosmozDropdownNext = (host) => {
 			style="position-area: ${placement}"
 			@toggle=${onToggle}
 			@select=${close}
+			@focusout=${scheduleClose}
+			@focusin=${cancelClose}
 			${ref((el) => el && (popoverRef.current = el))}
 		>
 			<slot></slot>
@@ -147,6 +161,11 @@ const CosmozDropdownNext = (host) => {
 };
 customElements.define('cosmoz-dropdown-next', component(CosmozDropdownNext, {
     styleSheets: [style],
-    observedAttributes: ['placement', 'open-on-hover', 'open-on-focus'],
+    observedAttributes: [
+        'placement',
+        'disabled',
+        'open-on-hover',
+        'open-on-focus',
+    ],
     shadowRootInit: { mode: 'open', delegatesFocus: true },
 }));

package/dist/next/use-auto-open.d.ts

@@ -3,10 +3,14 @@ interface UseAutoOpenOptions {
     popoverRef: {
         current?: HTMLElement;
     };
+    disabled?: boolean;
     openOnHover?: boolean;
     openOnFocus?: boolean;
     open: () => void;
     close: () => void;
 }
-export declare const useAutoOpen: ({ host, popoverRef, openOnHover, openOnFocus, open, close, }: UseAutoOpenOptions) => void;
+export declare const useAutoOpen: ({ host, popoverRef, disabled, openOnHover, openOnFocus, open, close, }: UseAutoOpenOptions) => {
+    scheduleClose: () => void;
+    cancelClose: () => void;
+};
 export {};

package/dist/next/use-auto-open.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from '@pionjs/pion';
-export const useAutoOpen = ({ host, popoverRef, openOnHover, openOnFocus, open, close, }) => {
+export const useAutoOpen = ({ host, popoverRef, disabled, openOnHover, openOnFocus, open, close, }) => {
     const closeTimeout = useRef();
     const cancelClose = () => clearTimeout(closeTimeout.current);
     const scheduleClose = () => {
@@ -10,20 +10,21 @@ export const useAutoOpen = ({ host, popoverRef, openOnHover, openOnFocus, open,
                 (host.matches(':hover') || popover?.matches(':hover'))) {
                 return;
             }
-            if (openOnFocus &&
-                (host.matches(':focus-within') || popover?.matches(':focus-within'))) {
+            if (host.matches(':focus-within') || popover?.matches(':focus-within')) {
                 return;
             }
             close();
         }, 100);
     };
     const handleEnter = () => {
+        if (disabled)
+            return;
         cancelClose();
         open();
     };
     // Auto-open on hover
     useEffect(() => {
-        if (!openOnHover)
+        if (!openOnHover || disabled)
             return;
         host.addEventListener('pointerenter', handleEnter);
         host.addEventListener('pointerleave', scheduleClose);
@@ -32,10 +33,10 @@ export const useAutoOpen = ({ host, popoverRef, openOnHover, openOnFocus, open,
             host.removeEventListener('pointerenter', handleEnter);
             host.removeEventListener('pointerleave', scheduleClose);
         };
-    }, [openOnHover, host]);
+    }, [openOnHover, disabled, host]);
     // Auto-open on focus
     useEffect(() => {
-        if (!openOnFocus)
+        if (!openOnFocus || disabled)
             return;
         host.addEventListener('focusin', handleEnter);
         host.addEventListener('focusout', scheduleClose);
@@ -44,5 +45,6 @@ export const useAutoOpen = ({ host, popoverRef, openOnHover, openOnFocus, open,
             host.removeEventListener('focusin', handleEnter);
             host.removeEventListener('focusout', scheduleClose);
         };
-    }, [openOnFocus, host]);
+    }, [openOnFocus, disabled, host]);
+    return { scheduleClose, cancelClose };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "7.4.1",
+	"version": "7.5.0",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",