bits-ui 2.8.13 → 2.8.14
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/dist/bits/menubar/menubar.svelte.js +1 -1
- package/dist/bits/popover/components/popover-content-static.svelte +2 -0
- package/dist/bits/popover/components/popover-content.svelte +4 -0
- package/dist/bits/popover/popover.svelte.d.ts +2 -0
- package/dist/bits/popover/popover.svelte.js +12 -1
- package/dist/bits/select/components/select.svelte +3 -1
- package/dist/internal/date-time/field/time-helpers.js +1 -4
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, }
|
|
|
4
4
|
import { kbd } from "../../internal/kbd.js";
|
|
5
5
|
import { wrapArray } from "../../internal/arrays.js";
|
|
6
6
|
import { onMount } from "svelte";
|
|
7
|
-
import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte";
|
|
7
|
+
import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte.js";
|
|
8
8
|
import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
|
|
9
9
|
const menubarAttrs = createBitsAttrs({
|
|
10
10
|
component: "menubar",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
onInteractOutside = noop,
|
|
22
22
|
trapFocus = true,
|
|
23
23
|
preventScroll = false,
|
|
24
|
+
|
|
24
25
|
...restProps
|
|
25
26
|
}: PopoverContentStaticProps = $props();
|
|
26
27
|
|
|
@@ -33,6 +34,7 @@
|
|
|
33
34
|
onInteractOutside: box.with(() => onInteractOutside),
|
|
34
35
|
onEscapeKeydown: box.with(() => onEscapeKeydown),
|
|
35
36
|
onCloseAutoFocus: box.with(() => onCloseAutoFocus),
|
|
37
|
+
customAnchor: box.with(() => null),
|
|
36
38
|
});
|
|
37
39
|
|
|
38
40
|
const mergedProps = $derived(mergeProps(restProps, contentState.props));
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
onInteractOutside = noop,
|
|
22
22
|
trapFocus = true,
|
|
23
23
|
preventScroll = false,
|
|
24
|
+
customAnchor = null,
|
|
24
25
|
...restProps
|
|
25
26
|
}: PopoverContentProps = $props();
|
|
26
27
|
|
|
@@ -33,6 +34,7 @@
|
|
|
33
34
|
onInteractOutside: box.with(() => onInteractOutside),
|
|
34
35
|
onEscapeKeydown: box.with(() => onEscapeKeydown),
|
|
35
36
|
onCloseAutoFocus: box.with(() => onCloseAutoFocus),
|
|
37
|
+
customAnchor: box.with(() => customAnchor),
|
|
36
38
|
});
|
|
37
39
|
|
|
38
40
|
const mergedProps = $derived(mergeProps(restProps, contentState.props));
|
|
@@ -49,6 +51,7 @@
|
|
|
49
51
|
{preventScroll}
|
|
50
52
|
loop
|
|
51
53
|
forceMount={true}
|
|
54
|
+
{customAnchor}
|
|
52
55
|
>
|
|
53
56
|
{#snippet popper({ props, wrapperProps })}
|
|
54
57
|
{@const finalProps = mergeProps(props, {
|
|
@@ -76,6 +79,7 @@
|
|
|
76
79
|
{preventScroll}
|
|
77
80
|
loop
|
|
78
81
|
forceMount={false}
|
|
82
|
+
{customAnchor}
|
|
79
83
|
>
|
|
80
84
|
{#snippet popper({ props, wrapperProps })}
|
|
81
85
|
{@const finalProps = mergeProps(props, {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
|
|
2
2
|
import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
|
|
3
|
+
import type { Measurable } from "../../internal/floating-svelte/types.js";
|
|
3
4
|
interface PopoverRootStateOpts extends WritableBoxedValues<{
|
|
4
5
|
open: boolean;
|
|
5
6
|
}>, ReadableBoxedValues<{
|
|
@@ -43,6 +44,7 @@ interface PopoverContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
|
|
|
43
44
|
onInteractOutside: (e: PointerEvent) => void;
|
|
44
45
|
onEscapeKeydown: (e: KeyboardEvent) => void;
|
|
45
46
|
onCloseAutoFocus: (e: Event) => void;
|
|
47
|
+
customAnchor: string | HTMLElement | null | Measurable;
|
|
46
48
|
}> {
|
|
47
49
|
}
|
|
48
50
|
export declare class PopoverContentState {
|
|
@@ -103,8 +103,19 @@ export class PopoverContentState {
|
|
|
103
103
|
if (!isElement(e.target))
|
|
104
104
|
return;
|
|
105
105
|
const closestTrigger = e.target.closest(popoverAttrs.selector("trigger"));
|
|
106
|
-
if (closestTrigger === this.root.triggerNode)
|
|
106
|
+
if (closestTrigger && closestTrigger === this.root.triggerNode)
|
|
107
107
|
return;
|
|
108
|
+
if (this.opts.customAnchor.current) {
|
|
109
|
+
if (isElement(this.opts.customAnchor.current)) {
|
|
110
|
+
if (this.opts.customAnchor.current.contains(e.target))
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
else if (typeof this.opts.customAnchor.current === "string") {
|
|
114
|
+
const el = document.querySelector(this.opts.customAnchor.current);
|
|
115
|
+
if (el && el.contains(e.target))
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
108
119
|
this.root.handleClose();
|
|
109
120
|
};
|
|
110
121
|
onEscapeKeydown = (e) => {
|
|
@@ -80,7 +80,9 @@
|
|
|
80
80
|
</FloatingLayer>
|
|
81
81
|
|
|
82
82
|
{#if Array.isArray(rootState.opts.value.current)}
|
|
83
|
-
{#if rootState.opts.value.current.length}
|
|
83
|
+
{#if rootState.opts.value.current.length === 0}
|
|
84
|
+
<SelectHiddenInput {autocomplete} />
|
|
85
|
+
{:else}
|
|
84
86
|
{#each rootState.opts.value.current as item (item)}
|
|
85
87
|
<SelectHiddenInput value={item} {autocomplete} />
|
|
86
88
|
{/each}
|
|
@@ -294,8 +294,5 @@ export function isTimeAfter(timeToCompare, referenceTime) {
|
|
|
294
294
|
return timeToCompare.compare(referenceTime) > 0;
|
|
295
295
|
}
|
|
296
296
|
export function getISOTimeValue(time) {
|
|
297
|
-
|
|
298
|
-
return Time.toString();
|
|
299
|
-
}
|
|
300
|
-
return new Time(time.hour, time.minute, time.second, time.millisecond).toString();
|
|
297
|
+
return convertTimeValueToTime(time).toString();
|
|
301
298
|
}
|