bits-ui 2.9.9 → 2.10.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.
|
@@ -28,7 +28,6 @@ interface SelectBaseRootStateOpts extends ReadableBoxedValues<{
|
|
|
28
28
|
isCombobox: boolean;
|
|
29
29
|
}
|
|
30
30
|
declare abstract class SelectBaseRootState {
|
|
31
|
-
#private;
|
|
32
31
|
readonly opts: SelectBaseRootStateOpts;
|
|
33
32
|
touchedInput: boolean;
|
|
34
33
|
inputNode: HTMLElement | null;
|
|
@@ -45,9 +44,7 @@ declare abstract class SelectBaseRootState {
|
|
|
45
44
|
constructor(opts: SelectBaseRootStateOpts);
|
|
46
45
|
setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
|
|
47
46
|
getCandidateNodes(): HTMLElement[];
|
|
48
|
-
setHighlightedToFirstCandidate(
|
|
49
|
-
debounced: boolean;
|
|
50
|
-
}): void;
|
|
47
|
+
setHighlightedToFirstCandidate(): void;
|
|
51
48
|
getNodeByValue(value: string): HTMLElement | null;
|
|
52
49
|
setOpen(open: boolean): void;
|
|
53
50
|
toggleOpen(): void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Context, Previous, watch } from "runed";
|
|
2
|
-
import { afterSleep, afterTick, onDestroyEffect,
|
|
2
|
+
import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext, box, } from "svelte-toolbelt";
|
|
3
3
|
import { on } from "svelte/events";
|
|
4
4
|
import { backward, forward, next, prev } from "../../internal/arrays.js";
|
|
5
5
|
import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
|
|
@@ -11,7 +11,6 @@ import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floati
|
|
|
11
11
|
import { DataTypeahead } from "../../internal/data-typeahead.svelte.js";
|
|
12
12
|
import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
|
|
13
13
|
import { OpenChangeComplete } from "../../internal/open-change-complete.js";
|
|
14
|
-
import { debounce } from "../../internal/debounce.js";
|
|
15
14
|
// prettier-ignore
|
|
16
15
|
export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
|
|
17
16
|
export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
|
|
@@ -83,7 +82,6 @@ class SelectBaseRootState {
|
|
|
83
82
|
}
|
|
84
83
|
});
|
|
85
84
|
}
|
|
86
|
-
#debouncedSetHighlightedToFirstCandidate = debounce(this.setHighlightedToFirstCandidate.bind(this), 20);
|
|
87
85
|
setHighlightedNode(node, initial = false) {
|
|
88
86
|
this.highlightedNode = node;
|
|
89
87
|
if (node && (this.isUsingKeyboard || initial)) {
|
|
@@ -96,11 +94,7 @@ class SelectBaseRootState {
|
|
|
96
94
|
return [];
|
|
97
95
|
return Array.from(node.querySelectorAll(`[${this.getBitsAttr("item")}]:not([data-disabled])`));
|
|
98
96
|
}
|
|
99
|
-
setHighlightedToFirstCandidate(
|
|
100
|
-
if (options.debounced) {
|
|
101
|
-
this.#debouncedSetHighlightedToFirstCandidate();
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
97
|
+
setHighlightedToFirstCandidate() {
|
|
104
98
|
this.setHighlightedNode(null);
|
|
105
99
|
const candidateNodes = this.getCandidateNodes();
|
|
106
100
|
if (!candidateNodes.length)
|
|
@@ -328,7 +322,9 @@ export class SelectInputState {
|
|
|
328
322
|
this.root.handleClose();
|
|
329
323
|
return;
|
|
330
324
|
}
|
|
331
|
-
if (this.root.highlightedValue
|
|
325
|
+
if (this.root.highlightedValue &&
|
|
326
|
+
this.root.highlightedNode &&
|
|
327
|
+
this.root.highlightedNode.isConnected) {
|
|
332
328
|
this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
|
|
333
329
|
}
|
|
334
330
|
if (!this.root.isMulti && !isCurrentSelectedValue) {
|
|
@@ -378,6 +374,7 @@ export class SelectInputState {
|
|
|
378
374
|
}
|
|
379
375
|
oninput(e) {
|
|
380
376
|
this.root.opts.inputValue.current = e.currentTarget.value;
|
|
377
|
+
this.root.setHighlightedToFirstCandidate();
|
|
381
378
|
}
|
|
382
379
|
props = $derived.by(() => ({
|
|
383
380
|
id: this.opts.id.current,
|
|
@@ -790,12 +787,6 @@ export class SelectItemState {
|
|
|
790
787
|
this.opts = opts;
|
|
791
788
|
this.root = root;
|
|
792
789
|
this.attachment = attachRef(opts.ref);
|
|
793
|
-
onMountEffect(() => {
|
|
794
|
-
this.root.setHighlightedToFirstCandidate({ debounced: true });
|
|
795
|
-
});
|
|
796
|
-
onDestroyEffect(() => {
|
|
797
|
-
this.root.setHighlightedToFirstCandidate({ debounced: true });
|
|
798
|
-
});
|
|
799
790
|
watch([() => this.isHighlighted, () => this.prevHighlighted.current], () => {
|
|
800
791
|
if (this.isHighlighted) {
|
|
801
792
|
this.opts.onHighlight.current();
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup
|
|
1
|
+
export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
|
|
2
2
|
export * from "./shared/index.js";
|
|
3
3
|
export type * from "./shared/index.js";
|
|
4
4
|
export * from "./types.js";
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup
|
|
1
|
+
export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
|
|
2
2
|
export * from "./shared/index.js";
|
|
3
3
|
export * from "./types.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bits-ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": "github:huntabyte/bits-ui",
|
|
6
6
|
"funding": "https://github.com/sponsors/huntabyte",
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
],
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@internationalized/date": "^3.8.2",
|
|
23
|
-
"@sveltejs/kit": "^2.
|
|
23
|
+
"@sveltejs/kit": "^2.42.0",
|
|
24
24
|
"@sveltejs/package": "2.5.0",
|
|
25
25
|
"@sveltejs/vite-plugin-svelte": "^6.2.0",
|
|
26
|
-
"@types/node": "^20.19.
|
|
26
|
+
"@types/node": "^20.19.16",
|
|
27
27
|
"@types/resize-observer-browser": "^0.1.11",
|
|
28
28
|
"csstype": "^3.1.3",
|
|
29
29
|
"jsdom": "^24.1.3",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@floating-ui/core": "^1.7.1",
|
|
42
42
|
"@floating-ui/dom": "^1.7.1",
|
|
43
43
|
"esm-env": "^1.1.2",
|
|
44
|
-
"runed": "^0.
|
|
44
|
+
"runed": "^0.31.1",
|
|
45
45
|
"svelte-toolbelt": "^0.9.3",
|
|
46
46
|
"tabbable": "^6.2.0"
|
|
47
47
|
},
|