@neovici/cosmoz-autocomplete 8.5.0 → 8.7.0

package/dist/listbox/index.d.ts

@@ -1,20 +1,4 @@
 import { Props } from './use-listbox';
 export declare const listbox: <I>({ multi, ...thru }: Props<I> & {
     multi?: boolean | undefined;
-}) => import("lit-html/directive.js").DirectiveResult<{
-    new (_partInfo: import("lit-html/directive.js").PartInfo): {
-        _op?: import("lit-html").ChildPart | undefined;
-        _outlet?: HTMLElement | undefined;
-        _content?: unknown;
-        render(content: unknown, outlet?: HTMLElement | undefined): import("lit-html").TemplateResult<1>;
-        update(part: import("lit-html").Part, [content, outlet]: [unknown, (HTMLElement | undefined)?]): import("lit-html").TemplateResult<1>;
-        updateOutlet(outlet: HTMLElement, content: unknown): void;
-        clearOutlet(): void;
-        disconnected(): void;
-        reconnected(): void;
-        isConnected: boolean;
-        _$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
-        setValue(value: unknown): void;
-        readonly _$isConnected: boolean;
-    };
-}>;
+}) => import("lit-html").TemplateResult<1>;

package/dist/listbox/index.js

@@ -1,6 +1,5 @@
 import { virtualize, virtualizerRef, } from '@lit-labs/virtualizer/virtualize.js';
 import { sheet } from '@neovici/cosmoz-utils';
-import { portal } from '@neovici/cosmoz-utils/directives/portal';
 import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
 import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 import { props } from '@neovici/cosmoz-utils/object';
@@ -33,9 +32,25 @@ const Listbox = (props) => {
     })}
 	</div>`;
 };
+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();
+        });
+    }
+};
 customElements.define('cosmoz-listbox', component(Listbox, { styleSheets: [sheet(style)] }));
-export const listbox = ({ multi, ...thru }) => portal(html `<cosmoz-listbox
-			part="listbox"
-			?multi=${multi}
-			...=${spreadProps(props(properties)(thru))}
-		></cosmoz-listbox>`);
+export const listbox = ({ multi, ...thru }) => {
+    return html `<cosmoz-listbox
+		${ref(showPopover)}
+		popover="manual"
+		part="listbox"
+		?multi=${multi}
+		...=${spreadProps(props(properties)(thru))}
+	></cosmoz-listbox>`;
+};

package/dist/listbox/style.css.js

@@ -11,9 +11,17 @@ const style = css `
 		font-family: var(--paper-font-subhead_-_font-family, initial);
 		background: #fff;
 		min-width: 72px;
-		box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
+		box-shadow:
+			0 3px 4px 0 rgba(0, 0, 0, 0.14),
+			0 1px 8px 0 rgba(0, 0, 0, 0.12),
 			0 3px 3px -2px rgba(0, 0, 0, 0.4);
 	}
+	:host(:popover-open) {
+		box-sizing: border-box;
+		display: block;
+		margin: 0;
+		border: 0;
+	}
 	.items {
 		position: relative;
 		overflow-y: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "8.5.0",
+	"version": "8.7.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -70,8 +70,8 @@
 	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.0",
-		"@neovici/cosmoz-dropdown": "^4.0.0",
-		"@neovici/cosmoz-input": "^4.3.1",
+		"@neovici/cosmoz-dropdown": "^4.4.0",
+		"@neovici/cosmoz-input": "^4.3.3",
 		"@neovici/cosmoz-utils": "^6.0.0",
 		"@pionjs/pion": "^2.0.0",
 		"lit-html": "^2.0.0 || ^3.0.0"