@neovici/cosmoz-autocomplete 12.0.0 → 13.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,6 +2,7 @@ import '@neovici/cosmoz-dropdown/cosmoz-dropdown-next';
|
|
|
2
2
|
import '@neovici/cosmoz-input';
|
|
3
3
|
import { t } from 'i18next';
|
|
4
4
|
import { html } from 'lit-html';
|
|
5
|
+
import { guard } from 'lit-html/directives/guard.js';
|
|
5
6
|
import { live } from 'lit-html/directives/live.js';
|
|
6
7
|
import { until } from 'lit-html/directives/until.js';
|
|
7
8
|
import { when } from 'lit-html/directives/when.js';
|
|
@@ -27,6 +28,7 @@ const autocomplete = (props) => {
|
|
|
27
28
|
const hasResultsOrQuery = loading || items.length > 0 || (text != null && text.length > 0);
|
|
28
29
|
return html `<cosmoz-dropdown-next
|
|
29
30
|
open-on-focus
|
|
31
|
+
.opened=${opened}
|
|
30
32
|
@dropdown-toggle=${onToggle}
|
|
31
33
|
>
|
|
32
34
|
<cosmoz-input
|
|
@@ -39,8 +41,8 @@ const autocomplete = (props) => {
|
|
|
39
41
|
?always-float-label=${value?.length > 0 || alwaysFloatLabel}
|
|
40
42
|
?readonly=${isSingle}
|
|
41
43
|
?disabled=${disabled}
|
|
42
|
-
?invalid=${until(source$.then(() => invalid, () => true), invalid)}
|
|
43
|
-
.errorMessage=${until(source$.then(() => errorMessage, (e) => e.message), errorMessage)}
|
|
44
|
+
?invalid=${guard([source$], () => until(source$.then(() => invalid, () => true), invalid))}
|
|
45
|
+
.errorMessage=${guard([source$], () => until(source$.then(() => errorMessage, (e) => e.message), errorMessage))}
|
|
44
46
|
.value=${live(text)}
|
|
45
47
|
@value-changed=${onText}
|
|
46
48
|
autocomplete="off"
|
|
@@ -4,7 +4,7 @@ import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
|
|
|
4
4
|
import { usePromise } from '@neovici/cosmoz-utils/hooks/use-promise';
|
|
5
5
|
import { useActivity } from '@neovici/cosmoz-utils/keybindings';
|
|
6
6
|
import { prop, strProp } from '@neovici/cosmoz-utils/object';
|
|
7
|
-
import { useCallback, useEffect, useMemo, useState } from '@pionjs/pion';
|
|
7
|
+
import { useCallback, useEffect, useMemo, useProperty, useState, } from '@pionjs/pion';
|
|
8
8
|
import { AUTOCOMPLETE_DESELECT_LAST } from './autocomplete-keybindings';
|
|
9
9
|
import { EMPTY, normalize, notify, search } from './util';
|
|
10
10
|
const useNotify = (host, fn, name) => useCallback((val) => {
|
|
@@ -12,9 +12,7 @@ const useNotify = (host, fn, name) => useCallback((val) => {
|
|
|
12
12
|
host.dispatchEvent(new CustomEvent(name, { detail: val }));
|
|
13
13
|
}, [fn]);
|
|
14
14
|
export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, }) => {
|
|
15
|
-
const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), host = useHost(),
|
|
16
|
-
// Popover open/close state, synced from cosmoz-dropdown-next's dropdown-toggle event
|
|
17
|
-
[opened, setOpened] = useState(false), empty = !text, query = useMemo(() => text?.trim(), [text]), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
|
|
15
|
+
const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), host = useHost(), [opened, setOpened] = useProperty('opened', false), empty = !text, query = useMemo(() => text?.trim(), [text]), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
|
|
18
16
|
_onChange?.(val, () => setOpened(false));
|
|
19
17
|
notify(host, 'value', val);
|
|
20
18
|
}, [_onChange]), [options, setOptions] = useState([]), source$ = useMemo(() => Promise.resolve(typeof source === 'function'
|
|
@@ -38,6 +36,10 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
|
|
|
38
36
|
if (!opened && !keepQuery)
|
|
39
37
|
onText('');
|
|
40
38
|
}, [opened, keepQuery]);
|
|
39
|
+
// Reflect opened state to host attribute for CSS :host([opened]) selectors
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
host.toggleAttribute('opened', !!opened);
|
|
42
|
+
}, [opened]);
|
|
41
43
|
const meta = useMeta({
|
|
42
44
|
onText,
|
|
43
45
|
onChange,
|
|
@@ -75,7 +77,6 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
|
|
|
75
77
|
valueProperty,
|
|
76
78
|
externalSearch,
|
|
77
79
|
]),
|
|
78
|
-
// Sync opened state from cosmoz-dropdown-next's composed dropdown-toggle event
|
|
79
80
|
onToggle: useCallback((e) => {
|
|
80
81
|
setOpened(e.newState === 'open');
|
|
81
82
|
}, []),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-autocomplete",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A autocomplete input web component",
|
|
6
6
|
"keywords": [
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
},
|
|
80
80
|
"dependencies": {
|
|
81
81
|
"@lit-labs/virtualizer": "^2.0.0",
|
|
82
|
-
"@neovici/cosmoz-dropdown": "^7.
|
|
82
|
+
"@neovici/cosmoz-dropdown": "^7.4.0",
|
|
83
83
|
"@neovici/cosmoz-input": "^5.6.0",
|
|
84
84
|
"@neovici/cosmoz-utils": "^6.19.0",
|
|
85
85
|
"@pionjs/pion": "^2.7.1",
|