@neovici/cosmoz-dropdown - npm Package Compare versions

Comparing version 4.3.0 to 4.4.0

dist/cosmoz-dropdown.js

 import { component, useCallback } from '@pionjs/pion';
 import { html, nothing } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
+import { ref } from 'lit-html/directives/ref.js';
 import { usePosition } from './use-position';
 import { useHostFocus } from './use-focus';
 const preventDefault = (e) => e.preventDefault();
+const supportsPopover = () => {
+    // eslint-disable-next-line no-prototype-builtins
+    return HTMLElement.prototype.hasOwnProperty('popover');
+};
+const showPopover = (popover) => {
+    const popoverElement = popover;
+    if (supportsPopover()) {
+        requestAnimationFrame(() => {
+            popoverElement?.showPopover();
+        });
+    }
+};
 const Content = (host) => {
@@ -19,2 +32,8 @@ const { anchor, placement, render } = host;
 			}
+			:host(:popover-open) {
+				margin: 0;
+				border: 0;
+				/* The padding is needed to show the box shadow in Chrome */
+				padding: 4px;
+			}
 			.wrap {
@@ -90,3 +109,5 @@ background: var(--cosmoz-dropdown-bg-color, #fff);
 		</div>
-		${when(active, () => html ` <cosmoz-dropdown-content
+		${when(active, () => html `<cosmoz-dropdown-content
+					${ref(showPopover)}
+					popover
 					id="content"
@@ -116,3 +137,5 @@ part="content"
 			color: var(--cosmoz-dropdown-menu-color, #101010);
-			transition: background 0.25s, color 0.25s;
+			transition:
+				background 0.25s,
+				color 0.25s;
 			border: none;
@@ -142,9 +165,9 @@ cursor: pointer;
 const Menu = ({ placement }) => html ` <cosmoz-dropdown
-	.placement=${placement}
-	part="dropdown"
-	exportparts="anchor, button, content, wrap, dropdown"
->
-	<slot name="button" slot="button"></slot>
-	<cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
-</cosmoz-dropdown>`;
+		.placement=${placement}
+		part="dropdown"
+		exportparts="anchor, button, content, wrap, dropdown"
+	>
+		<slot name="button" slot="button"></slot>
+		<cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
+	</cosmoz-dropdown>`;
 customElements.define('cosmoz-dropdown-content', component(Content));
@@ -151,0 +174,0 @@ customElements.define('cosmoz-dropdown', component(Dropdown));

package.json

 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "4.3.0",
+	"version": "4.4.0",
 	"description": "A simple dropdown web component",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15579

increased by3.98%

Lines of code

416

increased by5.85%

No dependency changes