@neovici/cosmoz-autocomplete 14.0.2 → 14.1.1

package/dist/autocomplete/autocomplete-keybindings.d.ts

@@ -1,6 +1,5 @@
-import { Activity, ANY_KEY } from '@neovici/cosmoz-utils/keybindings';
+import { Activity } from '@neovici/cosmoz-utils/keybindings';
 export declare const AUTOCOMPLETE_DESELECT_LAST: Activity;
-export declare const AUTOCOMPLETE_SEARCH_WHEN_SELECTED: Activity;
 export declare const autocompleteKeybindings: readonly [readonly [{
     readonly key: "ArrowUp";
 }, [symbol], {
@@ -29,11 +28,4 @@ export declare const autocompleteKeybindings: readonly [readonly [{
     readonly description: "Remove the last selected item";
 }, {
     readonly allowInEditable: true;
-}], readonly [{
-    readonly key: typeof ANY_KEY;
-}, [symbol], {
-    readonly title: "Start searching";
-    readonly description: "Start searching when you start typing when an item is selected";
-}, {
-    readonly allowInEditable: true;
 }]];

package/dist/autocomplete/autocomplete-keybindings.js

@@ -1,7 +1,5 @@
-import { ANY_KEY, } from '@neovici/cosmoz-utils/keybindings';
 import { listboxKeybindings } from '../listbox/listbox-keybindings';
 export const AUTOCOMPLETE_DESELECT_LAST = Symbol('autocomplete.deselect.last');
-export const AUTOCOMPLETE_SEARCH_WHEN_SELECTED = Symbol('autocomplete.search.when.selected');
 export const autocompleteKeybindings = [
     ...listboxKeybindings,
     [
@@ -13,13 +11,4 @@ export const autocompleteKeybindings = [
         },
         { allowInEditable: true },
     ],
-    [
-        { key: ANY_KEY },
-        [AUTOCOMPLETE_SEARCH_WHEN_SELECTED],
-        {
-            title: 'Start searching',
-            description: 'Start searching when you start typing when an item is selected',
-        },
-        { allowInEditable: true },
-    ],
 ];

package/dist/autocomplete/autocomplete.d.ts

@@ -13,6 +13,7 @@ export interface Props<I> extends Base<I> {
     hint?: string;
     label?: string;
     placeholder?: string;
+    compact?: boolean;
     required?: boolean;
     showSingle?: boolean;
     itemHeight?: number | 'auto';
@@ -26,5 +27,5 @@ export interface Props<I> extends Base<I> {
 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: readonly ["variant", "disabled", "invalid", "required", "hint", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "default-index", "external-search", "item-height", "item-limit", "wrap", "lazy-open", "mode"];
+declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: readonly ["variant", "disabled", "invalid", "required", "compact", "hint", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "default-index", "external-search", "item-height", "item-limit", "wrap", "lazy-open", "mode"];
 export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -25,7 +25,7 @@ const shouldShowDropdown = ({ opened, isSingle, showSingle, hasResultsOrQuery, }
     return hasResultsOrQuery;
 };
 const autocomplete = (props) => {
-    const { variant, opened, invalid, errorMessage, hint, label, placeholder, required, disabled, textual, text, onText, onToggle, onDeselect, value, limit, min, showSingle, items, source$, loading, chipRenderer, mode, } = props, isOne = limit === 1, isSingle = isOne && value?.[0] != null;
+    const { variant, opened, invalid, errorMessage, hint, label, placeholder, compact, required, disabled, textual, text, onText, onToggle, onDeselect, value, limit, min, showSingle, items, source$, loading, chipRenderer, mode, } = props, isOne = limit === 1, isSingle = isOne && value?.[0] != null;
     const hasResultsOrQuery = loading || items.length > 0 || (text != null && text.length > 0);
     return html `<cosmoz-dropdown-next
 			open-on-focus
@@ -42,7 +42,7 @@ const autocomplete = (props) => {
 				.placeholder=${isSingle ? undefined : placeholder}
 				hint=${ifDefined(hint)}
 				variant=${ifDefined(variant)}
-				?readonly=${isSingle}
+				?compact=${compact}
 				?disabled=${disabled}
 				?required=${required}
 				?invalid=${guard([source$, invalid], () => until(source$.then(() => invalid, () => true), invalid))}
@@ -98,6 +98,7 @@ const autocomplete = (props) => {
     'disabled',
     'invalid',
     'required',
+    'compact',
     'hint',
     'text-property',
     'value-property',

package/dist/autocomplete/use-autocomplete.js

@@ -5,7 +5,7 @@ import { usePromise } from '@neovici/cosmoz-utils/hooks/use-promise';
 import { useActivity } from '@neovici/cosmoz-utils/keybindings';
 import { prop, strProp } from '@neovici/cosmoz-utils/object';
 import { useCallback, useEffect, useMemo, useProperty, useState, } from '@pionjs/pion';
-import { AUTOCOMPLETE_DESELECT_LAST, AUTOCOMPLETE_SEARCH_WHEN_SELECTED, } from './autocomplete-keybindings';
+import { AUTOCOMPLETE_DESELECT_LAST } from './autocomplete-keybindings';
 import { EMPTY, normalize, notify, search } from './util';
 const useNotify = (host, fn, name) => useCallback((val) => {
     fn?.(val);
@@ -34,19 +34,6 @@ export const useAutocomplete = ({ value: _value, text, mode, onChange: _onChange
         check: () => !disabled && empty && host.matches(':focus-within'),
         element: () => host,
     }, []);
-    useActivity({
-        activity: AUTOCOMPLETE_SEARCH_WHEN_SELECTED,
-        callback: (ev) => {
-            const values = array(value);
-            const isOne = limit === 1;
-            if (values.length > 0 && isOne && ev.key.length === 1) {
-                onChange(values.slice(0, -1));
-            }
-        },
-        allowDefault: true,
-        check: () => !disabled && empty && host.matches(':focus-within'),
-        element: () => host,
-    }, [limit]);
     // Clear query when popover closes
     useEffect(() => {
         if (!opened && !keepQuery)
@@ -106,9 +93,12 @@ export const useAutocomplete = ({ value: _value, text, mode, onChange: _onChange
         onText: useCallback((e) => {
             if (disabled)
                 return;
-            onText(e.target.value);
+            const text = e.target.value;
+            if (text && limit === 1 && value.length > 0)
+                onChange([]);
+            onText(text);
             setOpened(true);
-        }, [disabled, onText, text, setOpened]),
+        }, [disabled, onText, setOpened, limit, value, onChange]),
         onSelect: useCallback((newVal) => {
             if (disabled)
                 return;

package/dist/listbox/style.css.js

@@ -66,9 +66,7 @@ const style = css `
 	}
 
 	:host(:not([multi])) .item[aria-selected] {
-		background: rgb(
-			from var(--cz-color-bg-brand-solid) r g b / calc(alpha * 0.25)
-		);
+		background: rgb(from var(--cz-color-alpha-black) r g b / 0.22);
 	}
 
 	:host([multi]) .item::before {
@@ -101,9 +99,7 @@ export const styles = ({ index, itemHeight, auto, }) => css `
 			}
 		`)}
 	.item[data-index='${index || '0'}'] {
-		background: rgb(
-			from var(--cz-color-bg-brand-solid) r g b / calc(alpha * 0.15)
-		);
+		background: rgb(from var(--cz-color-alpha-black) r g b / 0.14);
 	}
 	.item[data-index='${index || '0'}'][part~='error'] {
 		background: var(--cz-color-bg-error);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "14.0.2",
+	"version": "14.1.1",
 	"type": "module",
 	"description": "A autocomplete input web component",
 	"keywords": [