@neovici/cosmoz-autocomplete 8.4.0 → 8.6.0

package/dist/autocomplete/autocomplete.d.ts

@@ -11,9 +11,11 @@ export interface Props<I> extends Base<I> {
     showSingle?: boolean;
     itemHeight?: number;
     itemLimit?: number;
+    wrap?: boolean;
+    defaultIndex?: number;
 }
 type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I> & {
     onInputRef?: (el?: Element) => void;
 };
-declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: string[];
+declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: readonly ["disabled", "invalid", "no-label-float", "always-float-label", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "hide-empty", "default-index", "item-height", "item-limit", "wrap"];
 export { autocomplete, Autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -28,8 +28,7 @@ const autocomplete = (props) => {
     useImperativeApi({
         focus: () => host.shadowRoot?.querySelector('#input')?.focus(),
     }, []);
-    return html `
-			<cosmoz-input
+    return html ` <cosmoz-input
 				id="input"
 				part="input"
 				.label=${label}

package/dist/autocomplete/index.js

@@ -1,5 +1,5 @@
 import { component, useCallback } from '@pionjs/pion';
-import { Autocomplete, observedAttributes as atts, style, } from './autocomplete';
+import { Autocomplete, observedAttributes, style } from './autocomplete';
 import { sheet } from '@neovici/cosmoz-utils';
 const Standalone = (host) => {
     const { onChange, onText, ...props } = host;
@@ -15,6 +15,6 @@ const Standalone = (host) => {
         }, [onText]),
     });
 };
-const observedAttributes = atts, styleSheets = [sheet(style)];
+const styleSheets = [sheet(style)];
 customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes, styleSheets }));
 customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes, styleSheets }));

package/dist/autocomplete/util.d.ts

@@ -1,5 +1,5 @@
 export declare const search: <I>(source: I[], query: string, textual: (i: I) => string) => I[];
-export declare const normalize: <I>(source: false | I[] | null) => I[];
+export declare const normalize: <I>(source: I[] | false | null) => I[];
 export declare const notify: <T>(host: EventTarget, name: string, detail: T) => boolean;
 export declare const useNotify: <V>(host: EventTarget, fn: ((v: V) => void) | undefined, name: string) => (val: V) => void;
 export declare const EMPTY: never[], EMPTY$: Promise<never[]>;

package/dist/listbox/index.d.ts

@@ -1,8 +1,8 @@
 import { Props } from './use-listbox';
 export declare const listbox: <I>({ multi, ...thru }: Props<I> & {
     multi?: boolean | undefined;
-}) => import("lit-html/directive").DirectiveResult<{
-    new (_partInfo: import("lit-html/directive").PartInfo): {
+}) => 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;

package/dist/listbox/index.js

@@ -33,9 +33,30 @@ const Listbox = (props) => {
     })}
 	</div>`;
 };
+const supportsPopover = () => {
+    // eslint-disable-next-line no-prototype-builtins
+    return HTMLElement.prototype.hasOwnProperty('popover');
+};
+const showPopover = (popover) => {
+    const popoverElement = popover;
+    requestAnimationFrame(() => {
+        popoverElement?.showPopover();
+    });
+};
 customElements.define('cosmoz-listbox', component(Listbox, { styleSheets: [sheet(style)] }));
-export const listbox = ({ multi, ...thru }) => portal(html `<cosmoz-listbox
+export const listbox = ({ multi, ...thru }) => {
+    if (supportsPopover()) {
+        return html `<cosmoz-listbox
+			${ref(showPopover)}
+			popover="manual"
+			part="listbox"
+			?multi=${multi}
+			...=${spreadProps(props(properties)(thru))}
+		></cosmoz-listbox>`;
+    }
+    return portal(html `<cosmoz-listbox
 			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.4.0",
+	"version": "8.6.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -23,12 +23,14 @@
 	"scripts": {
 		"lint": "tsc && eslint --cache .",
 		"build": "tsc -p tsconfig.build.json",
-		"start": "wds",
+		"start": "npm run storybook:start",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
-		"prepare": "husky install",
-		"storybook:build": "build-storybook",
-		"storybook:deploy": "storybook-to-ghpages"
+		"prepare": "husky",
+		"storybook:start": "storybook dev -p 8000",
+		"storybook:build": "storybook build",
+		"storybook:deploy": "storybook-to-ghpages",
+		"storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/"
 	},
 	"release": {
 		"plugins": [
@@ -68,26 +70,35 @@
 	},
 	"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"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^18.0.0",
-		"@commitlint/config-conventional": "^18.0.0",
+		"@commitlint/cli": "^19.0.0",
+		"@commitlint/config-conventional": "^19.0.0",
 		"@neovici/cfg": "^1.34.0",
 		"@open-wc/testing": "^4.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
+		"@storybook/addon-essentials": "^7.0.0",
+		"@storybook/addon-links": "^7.0.0",
+		"@storybook/builder-vite": "7.6.17",
 		"@storybook/storybook-deployer": "^2.8.5",
-		"@types/mocha": "^10.0.3",
-		"@web/dev-server-storybook": "^2.0.0",
-		"husky": "^8.0.0",
+		"@storybook/web-components": "7.6.17",
+		"@types/mocha": "^10.0.6",
+		"@web/storybook-builder": "^0.1.9",
+		"@web/storybook-framework-web-components": "^0.1.1",
+		"esbuild": "^0.20.2",
+		"http-server": "^14.1.1",
+		"husky": "^9.0.0",
+		"rollup-plugin-esbuild": "^6.1.1",
 		"rollup-plugin-terser": "^7.0.2",
-		"semantic-release": "^22.0.0",
+		"semantic-release": "^23.0.0",
 		"sinon": "^17.0.0",
+		"storybook": "^7.6.17",
 		"typescript": "^5.0.0"
 	}
 }