@neovici/cosmoz-autocomplete 5.1.3 → 5.3.0
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.
- package/cosmoz-listbox.js +26 -16
- package/lib/autocomplete.css.js +8 -5
- package/lib/use-listbox.js +19 -8
- package/package.json +5 -4
package/cosmoz-listbox.js
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
import { html, component, useEffect } from 'haunted';
|
|
2
|
-
import {
|
|
1
|
+
import { html, component, useEffect, useRef } from 'haunted';
|
|
2
|
+
import { ref } from 'lit-html/directives/ref.js';
|
|
3
|
+
import {
|
|
4
|
+
virtualize,
|
|
5
|
+
virtualizerRef,
|
|
6
|
+
} from '@lit-labs/virtualizer/virtualize.js';
|
|
3
7
|
import { tagged as css } from '@neovici/cosmoz-utils';
|
|
4
8
|
import { portal } from '@neovici/cosmoz-utils/directives/portal';
|
|
5
9
|
import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
|
|
6
10
|
import { props } from '@neovici/cosmoz-utils/object';
|
|
7
11
|
import { useListbox, properties } from './lib/use-listbox';
|
|
8
|
-
import { scrollIntoViewIfNeeded } from './lib/utils';
|
|
9
12
|
|
|
10
13
|
const svg =
|
|
11
|
-
|
|
12
|
-
'
|
|
14
|
+
/* eslint-disable quotes */
|
|
15
|
+
"data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath " +
|
|
16
|
+
"d='M9.5 1L5.20039 7.04766L1.66348 3.46152' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E",
|
|
17
|
+
/* eslint-enable quotes */
|
|
13
18
|
styles = ({ index, height, itemHeight }) => css`
|
|
14
19
|
:host {
|
|
15
20
|
position: fixed;
|
|
@@ -98,23 +103,28 @@ const svg =
|
|
|
98
103
|
}
|
|
99
104
|
`,
|
|
100
105
|
Listbox = (host) => {
|
|
101
|
-
const
|
|
106
|
+
const listRef = useRef(undefined);
|
|
107
|
+
const { position, items, renderItem, height, itemHeight } =
|
|
108
|
+
useListbox(host);
|
|
102
109
|
|
|
103
110
|
useEffect(() => {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
);
|
|
110
|
-
}, [index]);
|
|
111
|
+
if (!position.scroll) return;
|
|
112
|
+
const vl = listRef.current[virtualizerRef];
|
|
113
|
+
if (!vl._layout) return;
|
|
114
|
+
vl.element(position.index)?.scrollIntoView({ block: 'nearest' });
|
|
115
|
+
}, [position]);
|
|
111
116
|
|
|
112
117
|
return html` <style>
|
|
113
|
-
${styles({
|
|
118
|
+
${styles({ ...position, height, itemHeight })}
|
|
114
119
|
</style>
|
|
115
|
-
<div class="items">
|
|
120
|
+
<div class="items" ${ref((el) => (listRef.current = el))}>
|
|
116
121
|
<div virtualizer-sizer></div>
|
|
117
|
-
${virtualize({
|
|
122
|
+
${virtualize({
|
|
123
|
+
items,
|
|
124
|
+
renderItem,
|
|
125
|
+
scroller: true,
|
|
126
|
+
layout: { _itemSize: { height: itemHeight - 0.00001 } },
|
|
127
|
+
})}
|
|
118
128
|
</div>`;
|
|
119
129
|
};
|
|
120
130
|
|
package/lib/autocomplete.css.js
CHANGED
|
@@ -6,7 +6,7 @@ export default css`
|
|
|
6
6
|
position: relative;
|
|
7
7
|
}
|
|
8
8
|
.chip {
|
|
9
|
-
border-radius: 500px;
|
|
9
|
+
border-radius: var(--cosmoz-autocomplete-chip-border-radius, 500px);
|
|
10
10
|
background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
|
|
11
11
|
margin: 1px 4px 1px 0;
|
|
12
12
|
white-space: nowrap;
|
|
@@ -31,9 +31,9 @@ export default css`
|
|
|
31
31
|
}
|
|
32
32
|
.chip-text {
|
|
33
33
|
color: var(--cosmoz-autocomplete-chip-color, #424242);
|
|
34
|
-
margin: 0 10px;
|
|
35
|
-
font-size: 12px;
|
|
36
|
-
line-height: 22px;
|
|
34
|
+
margin: var(--cosmoz-autocomplete-chip-text-margin, 0 10px);
|
|
35
|
+
font-size: var(--cosmoz-autocomplete-chip-text-font-size, 12px);
|
|
36
|
+
line-height: var(--cosmoz-autocomplete-chip-text-line-height, 22px);
|
|
37
37
|
overflow: hidden;
|
|
38
38
|
text-overflow: ellipsis;
|
|
39
39
|
flex: 1;
|
|
@@ -45,7 +45,10 @@ export default css`
|
|
|
45
45
|
cursor: pointer;
|
|
46
46
|
width: 16px;
|
|
47
47
|
height: 16px;
|
|
48
|
-
stroke: var(
|
|
48
|
+
stroke: var(
|
|
49
|
+
--cosmoz-autocomplete-chip-clear-stroke,
|
|
50
|
+
var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb)
|
|
51
|
+
);
|
|
49
52
|
display: block;
|
|
50
53
|
}
|
|
51
54
|
|
package/lib/use-listbox.js
CHANGED
|
@@ -6,20 +6,31 @@ import defaultItemRenderer from './item-renderer';
|
|
|
6
6
|
import { byValue } from './utils';
|
|
7
7
|
|
|
8
8
|
const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
|
|
9
|
-
const [
|
|
9
|
+
const [position, setPosition] = useState({
|
|
10
|
+
index: defaultIndex,
|
|
11
|
+
}),
|
|
12
|
+
{ index } = position,
|
|
10
13
|
{ length } = items;
|
|
11
14
|
|
|
12
15
|
useEffect(() => {
|
|
13
|
-
|
|
16
|
+
setPosition({ index: defaultIndex, scroll: true });
|
|
14
17
|
}, [items, defaultIndex]);
|
|
15
18
|
|
|
16
19
|
useKeyboard({
|
|
17
20
|
onUp: useCallback(
|
|
18
|
-
() =>
|
|
21
|
+
() =>
|
|
22
|
+
setPosition(({ index }) => ({
|
|
23
|
+
index: index > 0 ? index - 1 : length - 1,
|
|
24
|
+
scroll: true,
|
|
25
|
+
})),
|
|
19
26
|
[length]
|
|
20
27
|
),
|
|
21
28
|
onDown: useCallback(
|
|
22
|
-
() =>
|
|
29
|
+
() =>
|
|
30
|
+
setPosition(({ index }) => ({
|
|
31
|
+
index: index < length - 1 ? index + 1 : 0,
|
|
32
|
+
scroll: true,
|
|
33
|
+
})),
|
|
23
34
|
[length]
|
|
24
35
|
),
|
|
25
36
|
onEnter: useCallback(
|
|
@@ -29,8 +40,8 @@ const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
|
|
|
29
40
|
});
|
|
30
41
|
|
|
31
42
|
return {
|
|
32
|
-
|
|
33
|
-
highlight:
|
|
43
|
+
position,
|
|
44
|
+
highlight: useCallback((index) => setPosition({ index }), []),
|
|
34
45
|
select: useCallback((item) => onSelect?.(item), [onSelect]),
|
|
35
46
|
};
|
|
36
47
|
},
|
|
@@ -62,7 +73,7 @@ const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
|
|
|
62
73
|
[value, valueProperty]
|
|
63
74
|
),
|
|
64
75
|
items = useMemo(() => _items.slice(), [_items, isSelected]),
|
|
65
|
-
{
|
|
76
|
+
{ position, highlight, select } = useItems({
|
|
66
77
|
items,
|
|
67
78
|
onSelect,
|
|
68
79
|
defaultIndex: isNaN(defaultIndex) ? undefined : Number(defaultIndex),
|
|
@@ -77,7 +88,7 @@ const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
|
|
|
77
88
|
});
|
|
78
89
|
|
|
79
90
|
return {
|
|
80
|
-
|
|
91
|
+
position,
|
|
81
92
|
items,
|
|
82
93
|
height: Math.min(itemLimit, items.length) * itemHeight,
|
|
83
94
|
highlight,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-autocomplete",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"description": "A autocomplete input web component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit-html",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@lit-labs/virtualizer": "^0.
|
|
65
|
+
"@lit-labs/virtualizer": "^1.0.0",
|
|
66
66
|
"@neovici/cosmoz-dropdown": "^3.0.0",
|
|
67
67
|
"@neovici/cosmoz-input": "^3.0.0",
|
|
68
68
|
"@neovici/cosmoz-utils": "^5.0.0",
|
|
@@ -78,9 +78,10 @@
|
|
|
78
78
|
"@semantic-release/changelog": "^6.0.0",
|
|
79
79
|
"@semantic-release/git": "^10.0.0",
|
|
80
80
|
"@storybook/storybook-deployer": "^2.8.5",
|
|
81
|
-
"@web/dev-server-storybook": "^0.
|
|
81
|
+
"@web/dev-server-storybook": "^0.6.0",
|
|
82
|
+
"eslint-import-resolver-exports": "^1.0.0-beta.5",
|
|
82
83
|
"husky": "^8.0.0",
|
|
83
|
-
"semantic-release": "^
|
|
84
|
+
"semantic-release": "^20.0.0",
|
|
84
85
|
"sinon": "^15.0.0",
|
|
85
86
|
"typescript": "^4.6.0"
|
|
86
87
|
}
|