ui-ingredients 0.0.40 → 0.0.42

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.
Files changed (40) hide show
  1. package/dist/accordion/item-content.svelte +19 -7
  2. package/dist/accordion/root.svelte +18 -6
  3. package/dist/color-picker/content.svelte +3 -1
  4. package/dist/color-picker/root.svelte +1 -1
  5. package/dist/combobox/content.svelte +11 -7
  6. package/dist/combobox/positioner.svelte +8 -6
  7. package/dist/combobox/root.svelte +21 -6
  8. package/dist/date-picker/content.svelte +11 -7
  9. package/dist/date-picker/positioner.svelte +8 -6
  10. package/dist/date-picker/root.svelte +21 -6
  11. package/dist/dialog/backdrop.svelte +20 -7
  12. package/dist/dialog/content.svelte +11 -7
  13. package/dist/dialog/positioner.svelte +8 -6
  14. package/dist/dialog/root.svelte +25 -3
  15. package/dist/hover-card/content.svelte +11 -7
  16. package/dist/hover-card/positioner.svelte +8 -6
  17. package/dist/hover-card/root.svelte +27 -2
  18. package/dist/menu/content.svelte +11 -7
  19. package/dist/menu/positioner.svelte +8 -6
  20. package/dist/menu/root.svelte +38 -2
  21. package/dist/popover/content.svelte +11 -7
  22. package/dist/popover/positioner.svelte +8 -6
  23. package/dist/popover/root.svelte +35 -2
  24. package/dist/portal/root.svelte +5 -1
  25. package/dist/presence/context.svelte.d.ts +2 -1
  26. package/dist/presence/context.svelte.js +1 -0
  27. package/dist/presence/create-presence.svelte.d.ts +9 -2
  28. package/dist/presence/create-presence.svelte.js +25 -5
  29. package/dist/presence/root.svelte +16 -6
  30. package/dist/select/content.svelte +11 -7
  31. package/dist/select/positioner.svelte +8 -6
  32. package/dist/select/root.svelte +19 -4
  33. package/dist/time-picker/content.svelte +14 -4
  34. package/dist/time-picker/positioner.svelte +7 -1
  35. package/dist/time-picker/root.svelte +29 -4
  36. package/dist/tooltip/content.svelte +11 -7
  37. package/dist/tooltip/positioner.svelte +8 -6
  38. package/dist/tooltip/root.svelte +20 -2
  39. package/dist/types.d.ts +8 -3
  40. package/package.json +1 -1
@@ -1,12 +1,14 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
5
  export interface AccordionItemContentProps
5
- extends HtmlIngredientProps<'div'> {}
6
+ extends HtmlIngredientProps<'div', never, Action> {}
6
7
  </script>
7
8
 
8
9
  <script lang="ts">
9
10
  import {mergeProps} from '../merge-props.js';
11
+ import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
10
12
  import {createPresence} from '../presence/create-presence.svelte.js';
11
13
  import {
12
14
  getAccordionContext,
@@ -18,10 +20,18 @@
18
20
  let accordion = getAccordionContext();
19
21
  let itemProps = getAccordionItemPropsContext();
20
22
  let itemsState = $derived(accordion.getItemState(itemProps));
23
+
24
+ let presenceStrategyProps = getPresenceStrategyPropsContext();
21
25
  let presence = createPresence({
22
26
  get present() {
23
27
  return itemsState.expanded;
24
28
  },
29
+ get lazyMount() {
30
+ return presenceStrategyProps.lazyMount;
31
+ },
32
+ get keepMounted() {
33
+ return presenceStrategyProps.keepMounted;
34
+ },
25
35
  });
26
36
 
27
37
  let mergedProps = $derived(
@@ -33,10 +43,12 @@
33
43
  );
34
44
  </script>
35
45
 
36
- {#if asChild}
37
- {@render asChild(mergedProps)}
38
- {:else}
39
- <div use:presence.ref {...mergedProps}>
40
- {@render children?.()}
41
- </div>
46
+ {#if presence.mounted}
47
+ {#if asChild}
48
+ {@render asChild(presence.ref, mergedProps)}
49
+ {:else}
50
+ <div use:presence.ref {...mergedProps}>
51
+ {@render children?.()}
52
+ </div>
53
+ {/if}
42
54
  {/if}
@@ -1,4 +1,5 @@
1
1
  <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
2
3
  import type {Assign, HtmlIngredientProps} from '../types.js';
3
4
  import type {
4
5
  CreateAccordionProps,
@@ -7,13 +8,15 @@
7
8
 
8
9
  export interface AccordionProps
9
10
  extends Assign<
10
- HtmlIngredientProps<'div', CreateAccordionReturn>,
11
- CreateAccordionProps
12
- > {}
11
+ HtmlIngredientProps<'div', CreateAccordionReturn>,
12
+ CreateAccordionProps
13
+ >,
14
+ PresenceStrategyProps {}
13
15
  </script>
14
16
 
15
17
  <script lang="ts">
16
18
  import {mergeProps} from '../merge-props.js';
19
+ import {setPresenceStrategyPropsContext} from '../presence/context.svelte.js';
17
20
  import {reflect} from '@zag-js/svelte';
18
21
  import {createSplitProps} from '@zag-js/utils';
19
22
  import {setAccordionContext} from './context.svelte.js';
@@ -21,7 +24,13 @@
21
24
 
22
25
  let {asChild, children, ...props}: AccordionProps = $props();
23
26
 
24
- let [accordionProps, otherProps] = $derived(
27
+ let [presenceStrategyProps, otherProps] = $derived(
28
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
29
+ props,
30
+ ),
31
+ );
32
+
33
+ let [accordionProps, elementProps] = $derived(
25
34
  createSplitProps<CreateAccordionProps>([
26
35
  'id',
27
36
  'ids',
@@ -32,14 +41,17 @@
32
41
  'collapsible',
33
42
  'onFocusChange',
34
43
  'onValueChange',
35
- ])(props),
44
+ ])(otherProps),
36
45
  );
37
46
 
38
47
  let accordion = createAccordion(reflect(() => accordionProps));
39
48
 
40
- let mergedProps = $derived(mergeProps(otherProps, accordion.getRootProps()));
49
+ let mergedProps = $derived(
50
+ mergeProps(elementProps, accordion.getRootProps()),
51
+ );
41
52
 
42
53
  setAccordionContext(accordion);
54
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
43
55
  </script>
44
56
 
45
57
  {#if asChild}
@@ -1,7 +1,9 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
- export interface ColorPickerContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface ColorPickerContentProps
6
+ extends HtmlIngredientProps<'div', never, Action> {}
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
@@ -51,7 +51,7 @@
51
51
  let colorPicker = createColorPicker(reflect(() => colorPickerProps));
52
52
  let presence = createPresence({
53
53
  get present() {
54
- return colorPickerProps.open;
54
+ return colorPicker.open;
55
55
  },
56
56
  });
57
57
 
@@ -1,7 +1,9 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
- export interface ComboboxContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface ComboboxContentProps
6
+ extends HtmlIngredientProps<'div', never, Action> {}
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
@@ -19,10 +21,12 @@
19
21
  );
20
22
  </script>
21
23
 
22
- {#if asChild}
23
- {@render asChild(mergedProps)}
24
- {:else}
25
- <div use:presence.ref {...mergedProps}>
26
- {@render children?.()}
27
- </div>
24
+ {#if presence.mounted}
25
+ {#if asChild}
26
+ {@render asChild(presence.ref, mergedProps)}
27
+ {:else}
28
+ <div use:presence.ref {...mergedProps}>
29
+ {@render children?.()}
30
+ </div>
31
+ {/if}
28
32
  {/if}
@@ -23,10 +23,12 @@
23
23
  );
24
24
  </script>
25
25
 
26
- {#if asChild}
27
- {@render asChild(mergedProps)}
28
- {:else}
29
- <div {...mergedProps}>
30
- {@render children?.()}
31
- </div>
26
+ {#if presence.mounted}
27
+ {#if asChild}
28
+ {@render asChild(mergedProps)}
29
+ {:else}
30
+ <div {...mergedProps}>
31
+ {@render children?.()}
32
+ </div>
33
+ {/if}
32
34
  {/if}
@@ -1,4 +1,5 @@
1
1
  <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
2
3
  import type {Assign, HtmlIngredientProps} from '../types.js';
3
4
  import type {
4
5
  CreateComboboxProps,
@@ -7,9 +8,10 @@
7
8
 
8
9
  export interface ComboboxProps<T>
9
10
  extends Assign<
10
- HtmlIngredientProps<'div', CreateComboboxReturn>,
11
- CreateComboboxProps<T>
12
- > {}
11
+ HtmlIngredientProps<'div', CreateComboboxReturn>,
12
+ CreateComboboxProps<T>
13
+ >,
14
+ PresenceStrategyProps {}
13
15
  </script>
14
16
 
15
17
  <script lang="ts" generics="T">
@@ -23,7 +25,13 @@
23
25
 
24
26
  let {asChild, children, ...props}: ComboboxProps<T> = $props();
25
27
 
26
- let [comboboxProps, otherProps] = $derived(
28
+ let [presenceStrategyProps, otherProps] = $derived(
29
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
30
+ props,
31
+ ),
32
+ );
33
+
34
+ let [comboboxProps, elementProps] = $derived(
27
35
  createSplitProps<CreateComboboxProps<T>>([
28
36
  'id',
29
37
  'ids',
@@ -66,17 +74,24 @@
66
74
  'onPointerDownOutside',
67
75
  'getSelectionValue',
68
76
  'scrollToIndexFn',
69
- ])(props),
77
+ ])(otherProps),
70
78
  );
71
79
 
72
80
  let combobox = createCombobox(reflect(() => comboboxProps));
81
+
73
82
  let presence = createPresence({
74
83
  get present() {
75
84
  return combobox.open;
76
85
  },
86
+ get lazyMount() {
87
+ return presenceStrategyProps.lazyMount;
88
+ },
89
+ get keepMounted() {
90
+ return presenceStrategyProps.keepMounted;
91
+ },
77
92
  });
78
93
 
79
- let mergedProps = $derived(mergeProps(otherProps, combobox.getRootProps()));
94
+ let mergedProps = $derived(mergeProps(elementProps, combobox.getRootProps()));
80
95
 
81
96
  setComboboxContext(combobox);
82
97
  setPresenceContext(presence);
@@ -1,7 +1,9 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
- export interface DatePickerContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface DatePickerContentProps
6
+ extends HtmlIngredientProps<'div', never, Action> {}
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
@@ -23,10 +25,12 @@
23
25
  );
24
26
  </script>
25
27
 
26
- {#if asChild}
27
- {@render asChild(mergedProps)}
28
- {:else}
29
- <div use:presence.ref {...mergedProps}>
30
- {@render children?.()}
31
- </div>
28
+ {#if presence.mounted}
29
+ {#if asChild}
30
+ {@render asChild(presence.ref, mergedProps)}
31
+ {:else}
32
+ <div use:presence.ref {...mergedProps}>
33
+ {@render children?.()}
34
+ </div>
35
+ {/if}
32
36
  {/if}
@@ -24,10 +24,12 @@
24
24
  );
25
25
  </script>
26
26
 
27
- {#if asChild}
28
- {@render asChild(mergedProps)}
29
- {:else}
30
- <div {...mergedProps}>
31
- {@render children?.()}
32
- </div>
27
+ {#if presence.mounted}
28
+ {#if asChild}
29
+ {@render asChild(mergedProps)}
30
+ {:else}
31
+ <div {...mergedProps}>
32
+ {@render children?.()}
33
+ </div>
34
+ {/if}
33
35
  {/if}
@@ -1,4 +1,5 @@
1
1
  <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
2
3
  import type {Assign, HtmlIngredientProps} from '../types.js';
3
4
  import type {
4
5
  CreateDatePickerProps,
@@ -7,9 +8,10 @@
7
8
 
8
9
  export interface DatePickerProps
9
10
  extends Assign<
10
- HtmlIngredientProps<'div', CreateDatePickerReturn>,
11
- CreateDatePickerProps
12
- > {}
11
+ HtmlIngredientProps<'div', CreateDatePickerReturn>,
12
+ CreateDatePickerProps
13
+ >,
14
+ PresenceStrategyProps {}
13
15
  </script>
14
16
 
15
17
  <script lang="ts">
@@ -23,7 +25,11 @@
23
25
 
24
26
  let {asChild, children, ...props}: DatePickerProps = $props();
25
27
 
26
- let [datePickerProps, otherProps] = $derived(
28
+ let [presenceStrategyProps, otherProps] = $derived(
29
+ createSplitProps<PresenceStrategyProps>([])(props),
30
+ );
31
+
32
+ let [datePickerProps, elementProps] = $derived(
27
33
  createSplitProps<CreateDatePickerProps>([
28
34
  'id',
29
35
  'ids',
@@ -53,17 +59,26 @@
53
59
  'onValueChange',
54
60
  'onFocusChange',
55
61
  'isDateUnavailable',
56
- ])(props),
62
+ ])(otherProps),
57
63
  );
58
64
 
59
65
  let datePicker = createDatePicker(reflect(() => datePickerProps));
66
+
60
67
  let presence = createPresence({
61
68
  get present() {
62
69
  return datePicker.open;
63
70
  },
71
+ get lazyMount() {
72
+ return presenceStrategyProps.lazyMount;
73
+ },
74
+ get keepMounted() {
75
+ return presenceStrategyProps.keepMounted;
76
+ },
64
77
  });
65
78
 
66
- let mergedProps = $derived(mergeProps(otherProps, datePicker.getRootProps()));
79
+ let mergedProps = $derived(
80
+ mergeProps(elementProps, datePicker.getRootProps()),
81
+ );
67
82
 
68
83
  setDatePickerContext(datePicker);
69
84
  setPresenceContext(presence);
@@ -1,21 +1,32 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
- export interface DialogBackdropProps extends HtmlIngredientProps<'div'> {}
5
+ export interface DialogBackdropProps
6
+ extends HtmlIngredientProps<'div', never, Action> {}
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
8
10
  import {mergeProps} from '../merge-props.js';
11
+ import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
9
12
  import {createPresence} from '../presence/create-presence.svelte.js';
10
13
  import {getDialogContext} from './context.svelte.js';
11
14
 
12
15
  let {asChild, children, ...props}: DialogBackdropProps = $props();
13
16
 
14
17
  let dialog = getDialogContext();
18
+
19
+ let presenceStrategyProps = getPresenceStrategyPropsContext();
15
20
  let presence = createPresence({
16
21
  get present() {
17
22
  return dialog.open;
18
23
  },
24
+ get lazyMount() {
25
+ return presenceStrategyProps.lazyMount;
26
+ },
27
+ get keepMounted() {
28
+ return presenceStrategyProps.keepMounted;
29
+ },
19
30
  });
20
31
 
21
32
  let mergedProps = $derived(
@@ -23,10 +34,12 @@
23
34
  );
24
35
  </script>
25
36
 
26
- {#if asChild}
27
- {@render asChild(mergedProps)}
28
- {:else}
29
- <div use:presence.ref {...mergedProps}>
30
- {@render children?.()}
31
- </div>
37
+ {#if presence.mounted}
38
+ {#if asChild}
39
+ {@render asChild(presence.ref, mergedProps)}
40
+ {:else}
41
+ <div use:presence.ref {...mergedProps}>
42
+ {@render children?.()}
43
+ </div>
44
+ {/if}
32
45
  {/if}
@@ -1,7 +1,9 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
- export interface DialogContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface DialogContentProps
6
+ extends HtmlIngredientProps<'div', never, Action> {}
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
@@ -19,10 +21,12 @@
19
21
  );
20
22
  </script>
21
23
 
22
- {#if asChild}
23
- {@render asChild(mergedProps)}
24
- {:else}
25
- <div use:presence.ref {...mergedProps}>
26
- {@render children?.()}
27
- </div>
24
+ {#if presence.mounted}
25
+ {#if asChild}
26
+ {@render asChild(presence.ref, mergedProps)}
27
+ {:else}
28
+ <div use:presence.ref {...mergedProps}>
29
+ {@render children?.()}
30
+ </div>
31
+ {/if}
28
32
  {/if}
@@ -19,10 +19,12 @@
19
19
  );
20
20
  </script>
21
21
 
22
- {#if asChild}
23
- {@render asChild(mergedProps)}
24
- {:else}
25
- <div {...mergedProps}>
26
- {@render children?.()}
27
- </div>
22
+ {#if presence.mounted}
23
+ {#if asChild}
24
+ {@render asChild(mergedProps)}
25
+ {:else}
26
+ <div {...mergedProps}>
27
+ {@render children?.()}
28
+ </div>
29
+ {/if}
28
30
  {/if}
@@ -1,32 +1,54 @@
1
1
  <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
2
3
  import type {Snippet} from 'svelte';
3
4
  import type {
4
5
  CreateDialogProps,
5
6
  CreateDialogReturn,
6
7
  } from './create-dialog.svelte.js';
7
8
 
8
- export interface DialogProps extends CreateDialogProps {
9
+ export interface DialogProps
10
+ extends CreateDialogProps,
11
+ PresenceStrategyProps {
9
12
  children?: Snippet<[CreateDialogReturn]>;
10
13
  }
11
14
  </script>
12
15
 
13
16
  <script lang="ts">
14
- import {setPresenceContext} from '../presence/context.svelte.js';
17
+ import {
18
+ setPresenceContext,
19
+ setPresenceStrategyPropsContext,
20
+ } from '../presence/context.svelte.js';
15
21
  import {createPresence} from '../presence/create-presence.svelte.js';
22
+ import {reflect} from '@zag-js/svelte';
23
+ import {createSplitProps} from '@zag-js/utils';
16
24
  import {setDialogContext} from './context.svelte.js';
17
25
  import {createDialog} from './create-dialog.svelte.js';
18
26
 
19
27
  let {children, ...props}: DialogProps = $props();
20
28
 
21
- let dialog = createDialog(props);
29
+ let [presenceStrategyProps, dialogProps] = $derived(
30
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
31
+ props,
32
+ ),
33
+ );
34
+
35
+ let dialog = createDialog(reflect(() => dialogProps));
36
+
22
37
  let presence = createPresence({
23
38
  get present() {
24
39
  return dialog.open;
25
40
  },
41
+ get lazyMount() {
42
+ return presenceStrategyProps.lazyMount;
43
+ },
44
+ get keepMounted() {
45
+ return presenceStrategyProps.keepMounted;
46
+ },
26
47
  });
27
48
 
28
49
  setDialogContext(dialog);
29
50
  setPresenceContext(presence);
51
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
30
52
  </script>
31
53
 
32
54
  {@render children?.(dialog)}
@@ -1,7 +1,9 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
- export interface HoverCardContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface HoverCardContentProps
6
+ extends HtmlIngredientProps<'div', never, Action> {}
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
@@ -19,10 +21,12 @@
19
21
  );
20
22
  </script>
21
23
 
22
- {#if asChild}
23
- {@render asChild(mergedProps)}
24
- {:else}
25
- <div use:presence.ref {...mergedProps}>
26
- {@render children?.()}
27
- </div>
24
+ {#if presence.mounted}
25
+ {#if asChild}
26
+ {@render asChild(presence.ref, mergedProps)}
27
+ {:else}
28
+ <div use:presence.ref {...mergedProps}>
29
+ {@render children?.()}
30
+ </div>
31
+ {/if}
28
32
  {/if}
@@ -24,10 +24,12 @@
24
24
  );
25
25
  </script>
26
26
 
27
- {#if asChild}
28
- {@render asChild(mergedProps)}
29
- {:else}
30
- <div {...mergedProps}>
31
- {@render children?.()}
32
- </div>
27
+ {#if presence.mounted}
28
+ {#if asChild}
29
+ {@render asChild(mergedProps)}
30
+ {:else}
31
+ <div {...mergedProps}>
32
+ {@render children?.()}
33
+ </div>
34
+ {/if}
33
35
  {/if}
@@ -1,11 +1,14 @@
1
1
  <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
2
3
  import type {Snippet} from 'svelte';
3
4
  import type {
4
5
  CreateHoverCardProps,
5
6
  CreateHoverCardReturn,
6
7
  } from './create-hover-card.svelte.js';
7
8
 
8
- export interface HoverCardProps extends CreateHoverCardProps {
9
+ export interface HoverCardProps
10
+ extends CreateHoverCardProps,
11
+ PresenceStrategyProps {
9
12
  children?: Snippet<[CreateHoverCardReturn]>;
10
13
  }
11
14
  </script>
@@ -13,16 +16,38 @@
13
16
  <script lang="ts">
14
17
  import {setPresenceContext} from '../presence/context.svelte.js';
15
18
  import {createPresence} from '../presence/create-presence.svelte.js';
19
+ import {reflect} from '@zag-js/svelte';
20
+ import {createSplitProps} from '@zag-js/utils';
16
21
  import {setHoverCardContext} from './context.svelte.js';
17
22
  import {createHoverCard} from './create-hover-card.svelte.js';
18
23
 
19
24
  let {children, ...props}: HoverCardProps = $props();
20
25
 
21
- let hoverCard = createHoverCard(props);
26
+ let [hoverCardProps, presenceStrategyProps] = $derived(
27
+ createSplitProps<CreateHoverCardProps>([
28
+ 'id',
29
+ 'ids',
30
+ 'open',
31
+ 'openDelay',
32
+ 'closeDelay',
33
+ 'defaultOpen',
34
+ 'positioning',
35
+ 'onOpenChange',
36
+ ])(props),
37
+ );
38
+
39
+ let hoverCard = createHoverCard(reflect(() => hoverCardProps));
40
+
22
41
  let presence = createPresence({
23
42
  get present() {
24
43
  return hoverCard.open;
25
44
  },
45
+ get lazyMount() {
46
+ return presenceStrategyProps.lazyMount;
47
+ },
48
+ get keepMounted() {
49
+ return presenceStrategyProps.keepMounted;
50
+ },
26
51
  });
27
52
 
28
53
  setHoverCardContext(hoverCard);
@@ -1,7 +1,9 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
+ import type {Action} from 'svelte/action';
3
4
 
4
- export interface MenuContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface MenuContentProps
6
+ extends HtmlIngredientProps<'div', never, Action> {}
5
7
  </script>
6
8
 
7
9
  <script lang="ts">
@@ -19,10 +21,12 @@
19
21
  );
20
22
  </script>
21
23
 
22
- {#if asChild}
23
- {@render asChild(mergedProps)}
24
- {:else}
25
- <div use:presence.ref {...mergedProps}>
26
- {@render children?.()}
27
- </div>
24
+ {#if presence.mounted}
25
+ {#if asChild}
26
+ {@render asChild(presence.ref, mergedProps)}
27
+ {:else}
28
+ <div use:presence.ref {...mergedProps}>
29
+ {@render children?.()}
30
+ </div>
31
+ {/if}
28
32
  {/if}
@@ -19,10 +19,12 @@
19
19
  );
20
20
  </script>
21
21
 
22
- {#if asChild}
23
- {@render asChild(mergedProps)}
24
- {:else}
25
- <div {...mergedProps}>
26
- {@render children?.()}
27
- </div>
22
+ {#if presence.mounted}
23
+ {#if asChild}
24
+ {@render asChild(mergedProps)}
25
+ {:else}
26
+ <div {...mergedProps}>
27
+ {@render children?.()}
28
+ </div>
29
+ {/if}
28
30
  {/if}