@neovici/cosmoz-autocomplete 13.3.1 → 13.4.1

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

@@ -1,5 +1,6 @@
-import type { Activity } from '@neovici/cosmoz-utils/keybindings';
+import { Activity, ANY_KEY } 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], {
@@ -28,4 +29,11 @@ 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,5 +1,7 @@
+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,
     [
@@ -11,4 +13,13 @@ 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/use-autocomplete.d.ts

@@ -15,6 +15,7 @@ interface Base<I> {
 interface Meta<I> extends Omit<Base<I>, 'value'> {
     setOpened: (opened: boolean) => void;
     value: I[];
+    valueProperty?: string;
 }
 export interface Props<I> extends Base<I> {
     text?: string;

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 } from './autocomplete-keybindings';
+import { AUTOCOMPLETE_DESELECT_LAST, AUTOCOMPLETE_SEARCH_WHEN_SELECTED, } from './autocomplete-keybindings';
 import { EMPTY, normalize, notify, search } from './util';
 const useNotify = (host, fn, name) => useCallback((val) => {
     fn?.(val);
@@ -33,6 +33,19 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         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)
@@ -52,6 +65,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         keepOpened,
         setOpened,
         onSelect,
+        valueProperty,
     });
     const [, , state] = usePromise(source$);
     return {
@@ -98,22 +112,22 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             if (disabled)
                 return;
             meta.onSelect?.(newVal, meta);
-            const { onChange, onText, limit, min, value: val, keepQuery, keepOpened, setOpened, } = meta;
+            const { onChange, onText, limit, min, value: val, keepQuery, keepOpened, setOpened, valueProperty, } = meta;
             if (!keepQuery)
                 onText('');
             if (!keepOpened)
                 setOpened(false);
-            const value = array(val), deselect = value.includes(newVal);
+            const value = array(val), predicate = prop(valueProperty), deselect = value.some((v) => predicate(v) === predicate(newVal));
             if (deselect && value.length === min)
                 return;
             onChange((deselect
-                ? without(newVal)(value)
+                ? without(newVal, predicate)(value)
                 : [...value, newVal]).slice(-limit));
         }, [disabled, meta]),
         onDeselect: useCallback((val) => {
             if (disabled)
                 return;
-            meta.onChange(without(val)(meta.value));
+            meta.onChange(without(val, prop(meta.valueProperty))(meta.value));
         }, [disabled, meta]),
         // whenever there is a query, override defaultIndex to 0, so the first result gets selected
         defaultIndex: query !== undefined && query?.length > 0 ? 0 : defaultIndex,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "13.3.1",
+	"version": "13.4.1",
 	"type": "module",
 	"description": "A autocomplete input web component",
 	"keywords": [
@@ -81,7 +81,7 @@
 		"@lit-labs/virtualizer": "^2.0.0",
 		"@neovici/cosmoz-dropdown": "^7.5.0",
 		"@neovici/cosmoz-input": "^5.6.0",
-		"@neovici/cosmoz-utils": "^6.19.0",
+		"@neovici/cosmoz-utils": "^6.20.0",
 		"@pionjs/pion": "^2.7.1",
 		"i18next": "^23.16.8",
 		"lit-html": "^2.0.0 || ^3.0.0"