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.
@@ -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
- if (time instanceof Time) {
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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bits-ui",
3
- "version": "2.8.13",
3
+ "version": "2.8.14",
4
4
  "license": "MIT",
5
5
  "repository": "github:huntabyte/bits-ui",
6
6
  "funding": "https://github.com/sponsors/huntabyte",