svelte-multiselect 3.2.1 → 3.2.2
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/MultiSelect.svelte +29 -29
- package/MultiSelect.svelte.d.ts +1 -0
- package/package.json +12 -12
- package/readme.md +78 -49
package/MultiSelect.svelte
CHANGED
|
@@ -16,6 +16,11 @@ export let id = undefined;
|
|
|
16
16
|
export let name = id;
|
|
17
17
|
export let noOptionsMsg = `No matching options`;
|
|
18
18
|
export let activeOption = null;
|
|
19
|
+
export let filterFunc = (op, searchText) => {
|
|
20
|
+
if (!searchText)
|
|
21
|
+
return true;
|
|
22
|
+
return `${op.label}`.toLowerCase().includes(searchText.toLowerCase());
|
|
23
|
+
};
|
|
19
24
|
export let outerDivClass = ``;
|
|
20
25
|
export let ulSelectedClass = ``;
|
|
21
26
|
export let liSelectedClass = ``;
|
|
@@ -66,11 +71,7 @@ const dispatch = createEventDispatcher();
|
|
|
66
71
|
let searchText = ``;
|
|
67
72
|
let showOptions = false;
|
|
68
73
|
// options matching the current search text
|
|
69
|
-
$: matchingOptions = _options.filter((op) =>
|
|
70
|
-
if (!searchText)
|
|
71
|
-
return true;
|
|
72
|
-
return `${op.label}`.toLowerCase().includes(searchText.toLowerCase());
|
|
73
|
-
});
|
|
74
|
+
$: matchingOptions = _options.filter((op) => filterFunc(op, searchText));
|
|
74
75
|
$: matchingEnabledOptions = matchingOptions.filter((op) => !op.disabled);
|
|
75
76
|
$: if (
|
|
76
77
|
// if there was an active option but it's not in the filtered list of options
|
|
@@ -294,15 +295,15 @@ display above those of another following shortly after it -->
|
|
|
294
295
|
:where(div.multiselect) {
|
|
295
296
|
position: relative;
|
|
296
297
|
margin: 1em 0;
|
|
297
|
-
border: var(--sms-border, 1pt solid lightgray);
|
|
298
|
-
border-radius: var(--sms-border-radius, 5pt);
|
|
299
|
-
background: var(--sms-input-bg);
|
|
300
|
-
height: var(--sms-input-height, 2em);
|
|
301
298
|
align-items: center;
|
|
302
299
|
min-height: 18pt;
|
|
303
300
|
display: flex;
|
|
304
301
|
cursor: text;
|
|
305
302
|
padding: 0 3pt;
|
|
303
|
+
border: var(--sms-border, 1pt solid lightgray);
|
|
304
|
+
border-radius: var(--sms-border-radius, 5pt);
|
|
305
|
+
background: var(--sms-input-bg);
|
|
306
|
+
height: var(--sms-input-height, 2em);
|
|
306
307
|
}
|
|
307
308
|
:where(div.multiselect.open) {
|
|
308
309
|
z-index: var(--sms-open-z-index, 4);
|
|
@@ -314,31 +315,31 @@ display above those of another following shortly after it -->
|
|
|
314
315
|
background: var(--sms-readonly-bg, lightgray);
|
|
315
316
|
}
|
|
316
317
|
|
|
317
|
-
:where(ul.selected) {
|
|
318
|
+
:where(div.multiselect > ul.selected) {
|
|
318
319
|
display: flex;
|
|
319
320
|
padding: 0;
|
|
320
321
|
margin: 0;
|
|
321
322
|
flex-wrap: wrap;
|
|
322
323
|
}
|
|
323
|
-
:where(ul.selected > li) {
|
|
324
|
-
background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue));
|
|
324
|
+
:where(div.multiselect > ul.selected > li) {
|
|
325
325
|
align-items: center;
|
|
326
326
|
border-radius: 4pt;
|
|
327
327
|
display: flex;
|
|
328
328
|
margin: 2pt;
|
|
329
|
-
padding: 0 0 0
|
|
329
|
+
padding: 0 0 0 5pt;
|
|
330
330
|
transition: 0.3s;
|
|
331
331
|
white-space: nowrap;
|
|
332
|
-
|
|
332
|
+
background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue));
|
|
333
|
+
height: var(--sms-selected-li-height);
|
|
333
334
|
}
|
|
334
|
-
:where(ul.selected > li button, button.remove-all) {
|
|
335
|
+
:where(div.multiselect > ul.selected > li button, button.remove-all) {
|
|
335
336
|
align-items: center;
|
|
336
337
|
border-radius: 50%;
|
|
337
338
|
display: flex;
|
|
338
339
|
cursor: pointer;
|
|
339
340
|
transition: 0.2s;
|
|
340
341
|
}
|
|
341
|
-
:where(button) {
|
|
342
|
+
:where(div.multiselect button) {
|
|
342
343
|
color: inherit;
|
|
343
344
|
background: transparent;
|
|
344
345
|
border: none;
|
|
@@ -349,7 +350,7 @@ display above those of another following shortly after it -->
|
|
|
349
350
|
:where(ul.selected > li button:hover, button.remove-all:hover, button:focus) {
|
|
350
351
|
color: var(--sms-remove-x-hover-focus-color, lightskyblue);
|
|
351
352
|
}
|
|
352
|
-
:where(button:focus) {
|
|
353
|
+
:where(div.multiselect > button:focus) {
|
|
353
354
|
transform: scale(1.04);
|
|
354
355
|
}
|
|
355
356
|
|
|
@@ -357,15 +358,15 @@ display above those of another following shortly after it -->
|
|
|
357
358
|
border: none;
|
|
358
359
|
outline: none;
|
|
359
360
|
background: none;
|
|
360
|
-
color: var(--sms-text-color, inherit);
|
|
361
361
|
flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
|
|
362
362
|
min-width: 2em;
|
|
363
363
|
/* minimum font-size > 16px ensures iOS doesn't zoom in when focusing input */
|
|
364
364
|
/* https://stackoverflow.com/a/6394497 */
|
|
365
365
|
font-size: calc(16px + 0.1vw);
|
|
366
|
+
color: var(--sms-text-color, inherit);
|
|
366
367
|
}
|
|
367
368
|
|
|
368
|
-
:where(ul.options) {
|
|
369
|
+
:where(div.multiselect > ul.options) {
|
|
369
370
|
list-style: none;
|
|
370
371
|
max-height: 50vh;
|
|
371
372
|
padding: 0;
|
|
@@ -377,18 +378,18 @@ display above those of another following shortly after it -->
|
|
|
377
378
|
background: var(--sms-options-bg, white);
|
|
378
379
|
overscroll-behavior: var(--sms-options-overscroll, none);
|
|
379
380
|
}
|
|
380
|
-
:where(ul.options.hidden) {
|
|
381
|
+
:where(div.multiselect > ul.options.hidden) {
|
|
381
382
|
visibility: hidden;
|
|
382
383
|
}
|
|
383
|
-
:where(ul.options li) {
|
|
384
|
+
:where(div.multiselect > ul.options > li) {
|
|
384
385
|
padding: 3pt 2ex;
|
|
385
386
|
cursor: pointer;
|
|
386
387
|
}
|
|
387
388
|
/* for noOptionsMsg */
|
|
388
|
-
:where(ul.options span) {
|
|
389
|
+
:where(div.multiselect > ul.options span) {
|
|
389
390
|
padding: 3pt 2ex;
|
|
390
391
|
}
|
|
391
|
-
:where(ul.options li.selected) {
|
|
392
|
+
:where(div.multiselect > ul.options > li.selected) {
|
|
392
393
|
border-left: var(
|
|
393
394
|
--sms-li-selected-border-left,
|
|
394
395
|
3pt solid var(--sms-selected-color, green)
|
|
@@ -396,22 +397,21 @@ display above those of another following shortly after it -->
|
|
|
396
397
|
background: var(--sms-li-selected-bg, inherit);
|
|
397
398
|
color: var(--sms-li-selected-color, inherit);
|
|
398
399
|
}
|
|
399
|
-
:where(ul.options li:not(.selected):hover) {
|
|
400
|
+
:where(div.multiselect > ul.options > li:not(.selected):hover) {
|
|
400
401
|
border-left: var(
|
|
401
402
|
--sms-li-not-selected-hover-border-left,
|
|
402
403
|
3pt solid var(--sms-active-color, cornflowerblue)
|
|
403
404
|
);
|
|
404
|
-
border-left: 3pt solid var(--blue);
|
|
405
405
|
}
|
|
406
|
-
:where(ul.options li.active) {
|
|
406
|
+
:where(div.multiselect > ul.options > li.active) {
|
|
407
407
|
background: var(--sms-li-active-bg, var(--sms-active-color, cornflowerblue));
|
|
408
408
|
}
|
|
409
|
-
:where(ul.options li.disabled) {
|
|
409
|
+
:where(div.multiselect > ul.options > li.disabled) {
|
|
410
|
+
cursor: not-allowed;
|
|
410
411
|
background: var(--sms-li-disabled-bg, #f5f5f6);
|
|
411
412
|
color: var(--sms-li-disabled-text, #b8b8b8);
|
|
412
|
-
cursor: not-allowed;
|
|
413
413
|
}
|
|
414
|
-
:where(ul.options li.disabled:hover) {
|
|
414
|
+
:where(div.multiselect > ul.options > li.disabled:hover) {
|
|
415
415
|
border-left: unset;
|
|
416
416
|
}
|
|
417
417
|
</style>
|
package/MultiSelect.svelte.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ declare const __propDef: {
|
|
|
15
15
|
name?: string | undefined;
|
|
16
16
|
noOptionsMsg?: string | undefined;
|
|
17
17
|
activeOption?: Option | null | undefined;
|
|
18
|
+
filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
|
|
18
19
|
outerDivClass?: string | undefined;
|
|
19
20
|
ulSelectedClass?: string | undefined;
|
|
20
21
|
liSelectedClass?: string | undefined;
|
package/package.json
CHANGED
|
@@ -5,16 +5,16 @@
|
|
|
5
5
|
"homepage": "https://svelte-multiselect.netlify.app",
|
|
6
6
|
"repository": "https://github.com/janosh/svelte-multiselect",
|
|
7
7
|
"license": "MIT",
|
|
8
|
-
"version": "3.2.
|
|
8
|
+
"version": "3.2.2",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"svelte": "index.js",
|
|
11
11
|
"bugs": "https://github.com/janosh/svelte-multiselect/issues",
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"@sveltejs/adapter-static": "^1.0.0-next.
|
|
14
|
-
"@sveltejs/kit": "^1.0.0-next.
|
|
15
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
16
|
-
"@typescript-eslint/parser": "^5.
|
|
17
|
-
"eslint": "^8.
|
|
13
|
+
"@sveltejs/adapter-static": "^1.0.0-next.28",
|
|
14
|
+
"@sveltejs/kit": "^1.0.0-next.269",
|
|
15
|
+
"@typescript-eslint/eslint-plugin": "^5.12.0",
|
|
16
|
+
"@typescript-eslint/parser": "^5.12.0",
|
|
17
|
+
"eslint": "^8.9.0",
|
|
18
18
|
"eslint-plugin-svelte3": "^3.4.0",
|
|
19
19
|
"hastscript": "^7.0.2",
|
|
20
20
|
"mdsvex": "^0.10.5",
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"prettier-plugin-svelte": "^2.6.0",
|
|
23
23
|
"rehype-autolink-headings": "^6.1.1",
|
|
24
24
|
"rehype-slug": "^5.0.1",
|
|
25
|
-
"svelte": "^3.46.
|
|
26
|
-
"svelte-check": "^2.4.
|
|
25
|
+
"svelte": "^3.46.4",
|
|
26
|
+
"svelte-check": "^2.4.3",
|
|
27
27
|
"svelte-github-corner": "^0.1.0",
|
|
28
|
-
"svelte-preprocess": "^4.10.
|
|
29
|
-
"svelte-toc": "^0.2.
|
|
30
|
-
"svelte2tsx": "^0.5.
|
|
28
|
+
"svelte-preprocess": "^4.10.3",
|
|
29
|
+
"svelte-toc": "^0.2.5",
|
|
30
|
+
"svelte2tsx": "^0.5.3",
|
|
31
31
|
"tslib": "^2.3.1",
|
|
32
32
|
"typescript": "^4.5.5",
|
|
33
|
-
"vite": "^2.
|
|
33
|
+
"vite": "^2.8.2"
|
|
34
34
|
},
|
|
35
35
|
"keywords": [
|
|
36
36
|
"svelte",
|
package/readme.md
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
<slot />
|
|
24
24
|
|
|
25
|
-
## Key
|
|
25
|
+
## Key features
|
|
26
26
|
|
|
27
27
|
- **Single / multiple select:** pass `maxSelect={1}` prop to only allow one selection
|
|
28
28
|
- **Dropdowns:** scrollable lists for large numbers of options
|
|
@@ -88,23 +88,39 @@ Full list of props/bindable variables for this component:
|
|
|
88
88
|
<div class="table">
|
|
89
89
|
|
|
90
90
|
<!-- prettier-ignore -->
|
|
91
|
-
| name | default
|
|
92
|
-
| :--------------- |
|
|
93
|
-
| `options` | required prop
|
|
94
|
-
| `activeOption` | `null`
|
|
95
|
-
| `maxSelect` | `null`
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `name` | `id` | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. |
|
|
91
|
+
| name | default | description |
|
|
92
|
+
| :--------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
93
|
+
| `options` | required prop | Array of strings/numbers or `Option` objects that will be listed in the dropdown. See `src/lib/index.ts` for admissible fields. The `label` is the only mandatory one. It must also be unique. |
|
|
94
|
+
| `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. |
|
|
95
|
+
| `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. |
|
|
96
|
+
| `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. |
|
|
97
|
+
| `selectedLabels` | `[]` | Labels of currently selected options. |
|
|
98
|
+
| `selectedValues` | `[]` | Values of currently selected options. |
|
|
99
|
+
| `readonly` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. |
|
|
100
|
+
| `placeholder` | `undefined` | String shown in the text input when no option is selected. |
|
|
101
|
+
| `input` | `undefined` | Handle to the `<input>` DOM node. |
|
|
102
|
+
| `id` | `undefined` | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component. |
|
|
103
|
+
| `name` | `id` | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. |
|
|
105
104
|
|
|
106
105
|
</div>
|
|
107
106
|
|
|
107
|
+
## Exposed methods
|
|
108
|
+
|
|
109
|
+
1. `filterFunc = (op: Option, searchText: string) => boolean`: Determine what options are shown when user enters search string to filter dropdown list. Defaults to:
|
|
110
|
+
|
|
111
|
+
```ts
|
|
112
|
+
filterFunc = (op: Option, searchText: string) => {
|
|
113
|
+
if (!searchText) return true
|
|
114
|
+
return `${op.label}`.toLowerCase().includes(searchText.toLowerCase())
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
2. `maxSelectMsg = (current: number, max: number) => string`: Inform the user how many of the maximum allowed options they have currently selected. Return empty string to disable, i.e. `() => ''`. Is automatically disabled when `maxSelect === null`. Defaults to:
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
maxSelectMsg = (current: number, max: number) => `${current}/${max}`
|
|
122
|
+
```
|
|
123
|
+
|
|
108
124
|
## Slots
|
|
109
125
|
|
|
110
126
|
`MultiSelect.svelte` accepts two named slots
|
|
@@ -194,30 +210,36 @@ There are 3 ways to style this component. To understand which options do what, i
|
|
|
194
210
|
|
|
195
211
|
If you only want to make small adjustments, you can pass the following CSS variables directly to the component as props or define them in a `:global()` CSS context.
|
|
196
212
|
|
|
197
|
-
- `div.multiselect
|
|
213
|
+
- `div.multiselect`
|
|
198
214
|
- `border: var(--sms-border, 1pt solid lightgray)`: Change this to e.g. to `1px solid red` to indicate this form field is in an invalid state.
|
|
199
|
-
- `border-radius: var(--sms-border-radius, 5pt)
|
|
200
|
-
- `background: var(--sms-input-bg)
|
|
201
|
-
- `height: var(--sms-input-height, 2em)
|
|
202
|
-
|
|
215
|
+
- `border-radius: var(--sms-border-radius, 5pt)`
|
|
216
|
+
- `background: var(--sms-input-bg)`
|
|
217
|
+
- `height: var(--sms-input-height, 2em)`
|
|
218
|
+
- `div.multiselect.open`
|
|
219
|
+
- `z-index: var(--sms-open-z-index, 4)`: Increase this if needed to ensure the dropdown list is displayed atop all other page elements.
|
|
220
|
+
- `div.multiselect:focus-within`
|
|
221
|
+
- `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` if not set which defaults to `cornflowerblue`.
|
|
222
|
+
- `div.multiselect.readonly`
|
|
203
223
|
- `background: var(--sms-readonly-bg, lightgray)`: Background when in readonly state.
|
|
204
|
-
- `div.multiselect.open`:
|
|
205
|
-
- `z-index: var(--sms-open-z-index, 4)`: Useful to ensure the dropdown list of options is displayed on top of other page elements of increased `z-index`.
|
|
206
224
|
- `div.multiselect > input`
|
|
207
225
|
- `color: var(--sms-text-color, inherit)`: Input text color.
|
|
208
|
-
- `ul.selected > li
|
|
226
|
+
- `div.multiselect > ul.selected > li`
|
|
209
227
|
- `background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue))`: Background of selected options.
|
|
210
|
-
- `
|
|
228
|
+
- `height: var(--sms-selected-li-height)`: Height of selected options.
|
|
229
|
+
- `ul.selected > li button:hover, button.remove-all:hover, button:focus`
|
|
211
230
|
- `color: var(--sms-remove-x-hover-focus-color, lightskyblue)`: Color of the cross-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
|
|
212
|
-
- `ul.options`
|
|
213
|
-
- `background: var(--sms-options-bg, white)`: Background of
|
|
214
|
-
- `
|
|
215
|
-
- `ul.options > li.selected`
|
|
231
|
+
- `div.multiselect > ul.options`
|
|
232
|
+
- `background: var(--sms-options-bg, white)`: Background of dropdown list.
|
|
233
|
+
- `overscroll-behavior: var(--sms-options-overscroll, none)`: Whether scroll events bubble to parent elements when reaching the top/bottom of the options dropdown. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).
|
|
234
|
+
- `div.multiselect > ul.options > li.selected`
|
|
235
|
+
- `border-left: var(--sms-li-selected-border-left, 3pt solid var(--sms-selected-color, green))`
|
|
216
236
|
- `background: var(--sms-li-selected-bg, inherit)`: Background of selected list items in options pane.
|
|
217
237
|
- `color: var(--sms-li-selected-color, inherit)`: Text color of selected list items in options pane.
|
|
218
|
-
- `ul.options > li.
|
|
238
|
+
- `div.multiselect > ul.options > li:not(.selected):hover`
|
|
239
|
+
- `border-left: var(--sms-li-not-selected-hover-border-left, 3pt solid var(--sms-active-color, cornflowerblue))`
|
|
240
|
+
- `div.multiselect > ul.options > li.active`
|
|
219
241
|
- `background: var(--sms-li-active-bg, var(--sms-active-color, cornflowerblue))`: Background of active (currently with arrow keys highlighted) list item.
|
|
220
|
-
- `ul.options > li.disabled`
|
|
242
|
+
- `div.multiselect > ul.options > li.disabled`
|
|
221
243
|
- `background: var(--sms-li-disabled-bg, #f5f5f6)`: Background of disabled options in the dropdown list.
|
|
222
244
|
- `color: var(--sms-li-disabled-text, #b8b8b8)`: Text color of disabled option in the dropdown list.
|
|
223
245
|
|
|
@@ -257,40 +279,47 @@ This simplified version of the DOM structure of this component shows where these
|
|
|
257
279
|
You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component has focus.
|
|
258
280
|
|
|
259
281
|
```css
|
|
260
|
-
:global(.multiselect) {
|
|
282
|
+
:global(div.multiselect) {
|
|
261
283
|
/* top-level wrapper div */
|
|
262
284
|
}
|
|
263
|
-
:global(.multiselect
|
|
264
|
-
/*
|
|
285
|
+
:global(div.multiselect.open) {
|
|
286
|
+
/* top-level wrapper div when dropdown open */
|
|
287
|
+
}
|
|
288
|
+
:global(div.multiselect.readonly) {
|
|
289
|
+
/* top-level wrapper div when in readonly state */
|
|
265
290
|
}
|
|
266
|
-
:global(.multiselect ul.selected
|
|
267
|
-
|
|
291
|
+
:global(div.multiselect > ul.selected) {
|
|
292
|
+
/* selected list */
|
|
293
|
+
}
|
|
294
|
+
:global(div.multiselect > ul.selected > li) {
|
|
295
|
+
/* selected list items */
|
|
296
|
+
}
|
|
297
|
+
:global(div.multiselect button) {
|
|
298
|
+
/* target all buttons in this component */
|
|
299
|
+
}
|
|
300
|
+
:global(div.multiselect > ul.selected > li button, button.remove-all) {
|
|
268
301
|
/* buttons to remove a single or all selected options at once */
|
|
269
302
|
}
|
|
270
|
-
:global(.multiselect
|
|
303
|
+
:global(div.multiselect > input) {
|
|
304
|
+
/* input inside the top-level wrapper div */
|
|
305
|
+
}
|
|
306
|
+
:global(div.multiselect > ul.options) {
|
|
271
307
|
/* dropdown options */
|
|
272
308
|
}
|
|
273
|
-
:global(.multiselect ul.options li) {
|
|
274
|
-
/* dropdown list
|
|
309
|
+
:global(div.multiselect > ul.options > li) {
|
|
310
|
+
/* dropdown list items */
|
|
275
311
|
}
|
|
276
|
-
:global(.multiselect ul.options li.selected) {
|
|
312
|
+
:global(div.multiselect > ul.options > li.selected) {
|
|
277
313
|
/* selected options in the dropdown list */
|
|
278
314
|
}
|
|
279
|
-
:global(.multiselect ul.options li:not(.selected):hover) {
|
|
315
|
+
:global(div.multiselect > ul.options > li:not(.selected):hover) {
|
|
280
316
|
/* unselected but hovered options in the dropdown list */
|
|
281
317
|
}
|
|
282
|
-
:global(.multiselect ul.options li.
|
|
283
|
-
/* selected and hovered options in the dropdown list */
|
|
284
|
-
/* probably not necessary to style this state in most cases */
|
|
285
|
-
}
|
|
286
|
-
:global(.multiselect ul.options li.active) {
|
|
318
|
+
:global(div.multiselect > ul.options > li.active) {
|
|
287
319
|
/* active means item was navigated to with up/down arrow keys */
|
|
288
320
|
/* ready to be selected by pressing enter */
|
|
289
321
|
}
|
|
290
|
-
:global(.multiselect ul.options li.
|
|
291
|
-
/* both active and already selected, pressing enter now will deselect the item */
|
|
292
|
-
}
|
|
293
|
-
:global(.multiselect ul.options li.disabled) {
|
|
322
|
+
:global(div.multiselect > ul.options > li.disabled) {
|
|
294
323
|
/* options with disabled key set to true (see props above) */
|
|
295
324
|
}
|
|
296
325
|
```
|