@neovici/cosmoz-dropdown 7.4.2 → 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;
@@ -122,6 +126,7 @@ const CosmozDropdownNext = (host) => {
     const { scheduleClose, cancelClose } = useAutoOpen({
         host,
         popoverRef,
+        disabled,
         openOnHover,
         openOnFocus,
         open,
@@ -156,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,12 +3,13 @@ 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) => {
+export declare const useAutoOpen: ({ host, popoverRef, disabled, openOnHover, openOnFocus, open, close, }: UseAutoOpenOptions) => {
     scheduleClose: () => void;
     cancelClose: () => void;
 };

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 = () => {
@@ -17,12 +17,14 @@ export const useAutoOpen = ({ host, popoverRef, openOnHover, openOnFocus, open,
         }, 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);
@@ -31,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);
@@ -43,6 +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.2",
+	"version": "7.5.0",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",