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,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 {
4
5
  type CreateMenuProps,
5
6
  type CreateMenuReturn,
6
7
  } from './create-menu.svelte.js';
7
8
 
8
- export interface MenuRootProps extends CreateMenuProps {
9
+ export interface MenuRootProps
10
+ extends CreateMenuProps,
11
+ PresenceStrategyProps {
9
12
  children?: Snippet<[CreateMenuReturn]>;
10
13
  }
11
14
  </script>
@@ -13,16 +16,49 @@
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 {setMenuContext} from './context.svelte.js';
17
22
  import {createMenu} from './create-menu.svelte.js';
18
23
 
19
24
  let {children, ...props}: MenuRootProps = $props();
20
25
 
21
- let menu = createMenu(props);
26
+ let [menuProps, presenceStrategyProps] = $derived(
27
+ createSplitProps<CreateMenuProps>([
28
+ 'anchorPoint',
29
+ 'aria-label',
30
+ 'closeOnSelect',
31
+ 'composite',
32
+ 'defaultOpen',
33
+ 'highlightedValue',
34
+ 'id',
35
+ 'ids',
36
+ 'loopFocus',
37
+ 'onEscapeKeyDown',
38
+ 'onFocusOutside',
39
+ 'onHighlightChange',
40
+ 'onInteractOutside',
41
+ 'onOpenChange',
42
+ 'onPointerDownOutside',
43
+ 'onSelect',
44
+ 'open',
45
+ 'positioning',
46
+ 'typeahead',
47
+ ])(props),
48
+ );
49
+
50
+ let menu = createMenu(reflect(() => menuProps));
51
+
22
52
  let presence = createPresence({
23
53
  get present() {
24
54
  return menu.open;
25
55
  },
56
+ get lazyMount() {
57
+ return presenceStrategyProps.lazyMount;
58
+ },
59
+ get keepMounted() {
60
+ return presenceStrategyProps.keepMounted;
61
+ },
26
62
  });
27
63
 
28
64
  setMenuContext(menu);
@@ -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 PopoverContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface PopoverContentProps
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,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
  CreatePopoverProps,
5
6
  CreatePopoverReturn,
6
7
  } from './create-popover.svelte.js';
7
8
 
8
- export interface PopoverProps extends CreatePopoverProps {
9
+ export interface PopoverProps
10
+ extends CreatePopoverProps,
11
+ PresenceStrategyProps {
9
12
  children?: Snippet<[CreatePopoverReturn]>;
10
13
  }
11
14
  </script>
@@ -13,16 +16,46 @@
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 {setPopoverContext} from './context.svelte.js';
17
22
  import {createPopover} from './create-popover.svelte.js';
18
23
 
19
24
  let {children, ...props}: PopoverProps = $props();
20
25
 
21
- let popover = createPopover(props);
26
+ let [popoverProps, presenceStrategyProps] = $derived(
27
+ createSplitProps<CreatePopoverProps>([
28
+ 'autoFocus',
29
+ 'closeOnEscape',
30
+ 'closeOnInteractOutside',
31
+ 'defaultOpen',
32
+ 'id',
33
+ 'ids',
34
+ 'initialFocusEl',
35
+ 'modal',
36
+ 'onEscapeKeyDown',
37
+ 'onFocusOutside',
38
+ 'onInteractOutside',
39
+ 'onOpenChange',
40
+ 'onPointerDownOutside',
41
+ 'open',
42
+ 'persistentElements',
43
+ 'portalled',
44
+ 'positioning',
45
+ ])(props),
46
+ );
47
+
48
+ let popover = createPopover(reflect(() => popoverProps));
22
49
  let presence = createPresence({
23
50
  get present() {
24
51
  return popover.open;
25
52
  },
53
+ get lazyMount() {
54
+ return presenceStrategyProps.lazyMount;
55
+ },
56
+ get keepMounted() {
57
+ return presenceStrategyProps.keepMounted;
58
+ },
26
59
  });
27
60
 
28
61
  setPopoverContext(popover);
@@ -5,6 +5,7 @@
5
5
  container?: HTMLElement;
6
6
  disabled?: boolean;
7
7
  children: Snippet;
8
+ [x: `data-${string}`]: string | number | boolean | null | undefined;
8
9
  }
9
10
  </script>
10
11
 
@@ -12,7 +13,7 @@
12
13
  import {getEnvironmentContext} from '../environment-provider/index.js';
13
14
  import {portal} from '@zag-js/svelte';
14
15
 
15
- let {container, disabled, children}: PortalProps = $props();
16
+ let {container, disabled, children, ...props}: PortalProps = $props();
16
17
 
17
18
  let environment = getEnvironmentContext();
18
19
  </script>
@@ -23,6 +24,9 @@
23
24
  container,
24
25
  getRootNode: environment?.getRootNode,
25
26
  }}
27
+ data-scope="portal"
28
+ data-part="root"
29
+ {...props}
26
30
  >
27
31
  {@render children?.()}
28
32
  </div>
@@ -1,2 +1,3 @@
1
- import type { CreatePresenceReturn } from './create-presence.svelte.js';
1
+ import type { CreatePresenceReturn, PresenceStrategyProps } from './create-presence.svelte.js';
2
2
  export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => void;
3
+ export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => void;
@@ -1,2 +1,3 @@
1
1
  import { createContext } from '../create-context.svelte.js';
2
2
  export const [getPresenceContext, setPresenceContext] = createContext('Presence');
3
+ export const [getPresenceStrategyPropsContext, setPresenceStrategyPropsContext,] = createContext('PresenceStrategyProps');
@@ -1,10 +1,17 @@
1
1
  import type { HTMLAttributes } from 'svelte/elements';
2
- export interface CreatePresenceProps {
3
- present?: boolean;
2
+ export interface PresenceStrategyProps {
3
+ /** @default false */
4
+ lazyMount?: boolean;
5
+ /** @default true */
6
+ keepMounted?: boolean;
7
+ }
8
+ export interface CreatePresenceProps extends PresenceStrategyProps {
9
+ present: boolean;
4
10
  }
5
11
  export interface CreatePresenceReturn extends ReturnType<typeof createPresence> {
6
12
  }
7
13
  export declare function createPresence(props: CreatePresenceProps): {
8
14
  ref: (node: HTMLElement) => void;
9
15
  getPresenceProps: () => HTMLAttributes<HTMLElement>;
16
+ readonly mounted: boolean;
10
17
  };
@@ -1,10 +1,12 @@
1
1
  import * as presence from '@zag-js/presence';
2
2
  import { normalizeProps, useMachine } from '@zag-js/svelte';
3
- import { tick } from 'svelte';
4
3
  export function createPresence(props) {
4
+ const present = $derived(props.present);
5
+ const lazyMount = $derived(props.lazyMount ?? false);
6
+ const keepMounted = $derived(props.keepMounted ?? true);
5
7
  const context = $derived({
6
8
  get present() {
7
- return props.present;
9
+ return present;
8
10
  },
9
11
  });
10
12
  const [state, send] = useMachine(presence.machine(context), { context });
@@ -15,13 +17,31 @@ export function createPresence(props) {
15
17
  'data-state': context.present ? 'open' : 'closed',
16
18
  };
17
19
  }
20
+ let wasPresent = $state(false);
21
+ $effect(() => {
22
+ if (!api.present)
23
+ return;
24
+ if (wasPresent)
25
+ return;
26
+ wasPresent = true;
27
+ });
28
+ const unmounted = $derived.by(() => {
29
+ if (api.present)
30
+ return false;
31
+ if (!wasPresent && lazyMount)
32
+ return true;
33
+ if (wasPresent && !keepMounted)
34
+ return true;
35
+ return false;
36
+ });
18
37
  function ref(node) {
19
- tick().then(() => {
20
- api.setNode(node);
21
- });
38
+ api.setNode(node);
22
39
  }
23
40
  return {
24
41
  ref,
25
42
  getPresenceProps,
43
+ get mounted() {
44
+ return !unmounted;
45
+ },
26
46
  };
27
47
  }
@@ -1,18 +1,22 @@
1
1
  <script lang="ts" module>
2
- import type {Assign, HtmlProps} from '../types.js';
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
3
  import type {CreatePresenceProps} from './create-presence.svelte.js';
4
4
 
5
5
  export interface PresenceProps
6
- extends Assign<HtmlProps<'div'>, CreatePresenceProps> {}
6
+ extends Assign<
7
+ HtmlIngredientProps<'div', never, Action>,
8
+ CreatePresenceProps
9
+ > {}
7
10
  </script>
8
11
 
9
12
  <script lang="ts">
10
13
  import {mergeProps} from '../merge-props.js';
11
14
  import {reflect} from '@zag-js/svelte';
12
15
  import {createSplitProps} from '@zag-js/utils';
16
+ import type {Action} from 'svelte/action';
13
17
  import {createPresence} from './create-presence.svelte.js';
14
18
 
15
- let {children, ...props}: PresenceProps = $props();
19
+ let {asChild, children, ...props}: PresenceProps = $props();
16
20
 
17
21
  let [presenceProps, otherProps] = $derived(
18
22
  createSplitProps<CreatePresenceProps>(['present'])(props),
@@ -25,6 +29,12 @@
25
29
  );
26
30
  </script>
27
31
 
28
- <div use:presence.ref {...mergedProps}>
29
- {@render children?.()}
30
- </div>
32
+ {#if presence.mounted}
33
+ {#if asChild}
34
+ {@render asChild(presence.ref, mergedProps)}
35
+ {:else}
36
+ <div use:presence.ref {...mergedProps}>
37
+ {@render children?.()}
38
+ </div>
39
+ {/if}
40
+ {/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 SelectContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface SelectContentProps
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,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
  CreateSelectProps,
@@ -7,9 +8,10 @@
7
8
 
8
9
  export interface SelectProps<T>
9
10
  extends Assign<
10
- HtmlIngredientProps<'div', CreateSelectReturn>,
11
- CreateSelectProps<T>
12
- > {}
11
+ HtmlIngredientProps<'div', CreateSelectReturn>,
12
+ CreateSelectProps<T>
13
+ >,
14
+ PresenceStrategyProps {}
13
15
  </script>
14
16
 
15
17
  <script lang="ts" generics="T">
@@ -57,13 +59,26 @@
57
59
  );
58
60
 
59
61
  let select = createSelect(reflect(() => selectProps));
62
+
63
+ let [presenceStrategyProps, elementProps] = $derived(
64
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
65
+ otherProps,
66
+ ),
67
+ );
68
+
60
69
  let presence = createPresence({
61
70
  get present() {
62
71
  return select.open;
63
72
  },
73
+ get lazyMount() {
74
+ return presenceStrategyProps.lazyMount;
75
+ },
76
+ get keepMounted() {
77
+ return presenceStrategyProps.keepMounted;
78
+ },
64
79
  });
65
80
 
66
- let mergedProps = $derived(mergeProps(otherProps, select.getRootProps()));
81
+ let mergedProps = $derived(mergeProps(elementProps, select.getRootProps()));
67
82
 
68
83
  setSelectContext(select);
69
84
  setPresenceContext(presence);
@@ -1,24 +1,34 @@
1
1
  <script lang="ts" module>
2
2
  import type {HtmlIngredientProps} from '../types.js';
3
3
 
4
- export interface TimePickerContentProps extends HtmlIngredientProps<'div'> {}
4
+ export interface TimePickerContentProps
5
+ extends HtmlIngredientProps<'div', never, Action> {}
5
6
  </script>
6
7
 
7
8
  <script lang="ts">
8
9
  import {mergeProps} from '../merge-props.js';
10
+ import {getPresenceContext} from '../presence/context.svelte.js';
11
+ import type {Action} from 'svelte/action';
9
12
  import {getTimePickerContext} from './context.svelte.js';
10
13
 
11
14
  let {asChild, children, ...props}: TimePickerContentProps = $props();
12
15
 
13
16
  let timePicker = getTimePickerContext();
17
+ let presence = getPresenceContext();
14
18
 
15
- let mergedProps = $derived(mergeProps(props, timePicker.getContentProps()));
19
+ let mergedProps = $derived(
20
+ mergeProps(
21
+ props,
22
+ timePicker.getContentProps(),
23
+ presence.getPresenceProps(),
24
+ ),
25
+ );
16
26
  </script>
17
27
 
18
28
  {#if asChild}
19
- {@render asChild(mergedProps)}
29
+ {@render asChild(presence.ref, mergedProps)}
20
30
  {:else}
21
- <div {...mergedProps}>
31
+ <div use:presence.ref {...mergedProps}>
22
32
  {@render children?.()}
23
33
  </div>
24
34
  {/if}
@@ -7,14 +7,20 @@
7
7
 
8
8
  <script lang="ts">
9
9
  import {mergeProps} from '../merge-props.js';
10
+ import {getPresenceContext} from '../presence/context.svelte.js';
10
11
  import {getTimePickerContext} from './context.svelte.js';
11
12
 
12
13
  let {asChild, children, ...props}: TimePickerPositionerProps = $props();
13
14
 
14
15
  let timePicker = getTimePickerContext();
16
+ let presence = getPresenceContext();
15
17
 
16
18
  let mergedProps = $derived(
17
- mergeProps(props, timePicker.getPositionerProps()),
19
+ mergeProps(
20
+ props,
21
+ timePicker.getPositionerProps(),
22
+ presence.getPresenceProps(),
23
+ ),
18
24
  );
19
25
  </script>
20
26
 
@@ -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
  CreateTimePickerProps,
@@ -7,13 +8,16 @@
7
8
 
8
9
  export interface TimePickerProps
9
10
  extends Assign<
10
- HtmlIngredientProps<'div', CreateTimePickerReturn>,
11
- CreateTimePickerProps
12
- > {}
11
+ HtmlIngredientProps<'div', CreateTimePickerReturn>,
12
+ CreateTimePickerProps
13
+ >,
14
+ PresenceStrategyProps {}
13
15
  </script>
14
16
 
15
17
  <script lang="ts">
16
18
  import {mergeProps} from '../merge-props.js';
19
+ import {setPresenceContext} from '../presence/context.svelte.js';
20
+ import {createPresence} from '../presence/create-presence.svelte.js';
17
21
  import {reflect} from '@zag-js/svelte';
18
22
  import {createSplitProps} from '@zag-js/utils';
19
23
  import {setTimePickerContext} from './context.svelte.js';
@@ -47,9 +51,30 @@
47
51
 
48
52
  let timePicker = createTimePicker(reflect(() => timePickerProps));
49
53
 
50
- let mergedProps = $derived(mergeProps(otherProps, timePicker.getRootProps()));
54
+ let [presenceStrategyProps, elementProps] = $derived(
55
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
56
+ otherProps,
57
+ ),
58
+ );
59
+
60
+ let presence = createPresence({
61
+ get present() {
62
+ return timePicker.open;
63
+ },
64
+ get lazyMount() {
65
+ return presenceStrategyProps.lazyMount;
66
+ },
67
+ get keepMounted() {
68
+ return presenceStrategyProps.keepMounted;
69
+ },
70
+ });
71
+
72
+ let mergedProps = $derived(
73
+ mergeProps(elementProps, timePicker.getRootProps()),
74
+ );
51
75
 
52
76
  setTimePickerContext(timePicker);
77
+ setPresenceContext(presence);
53
78
  </script>
54
79
 
55
80
  {#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 TooltipContentProps extends HtmlIngredientProps<'div'> {}
5
+ export interface TooltipContentProps
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,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
  CreateTooltipProps,
5
6
  CreateTooltipReturn,
6
7
  } from './create-tooltip.svelte.js';
7
8
 
8
- export interface TooltipProps extends CreateTooltipProps {
9
+ export interface TooltipProps
10
+ extends CreateTooltipProps,
11
+ PresenceStrategyProps {
9
12
  children?: Snippet<[CreateTooltipReturn]>;
10
13
  }
11
14
  </script>
@@ -13,16 +16,31 @@
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 {setTooltipContext} from './context.svelte.js';
17
22
  import {createTooltip} from './create-tooltip.svelte.js';
18
23
 
19
24
  let {children, ...props}: TooltipProps = $props();
20
25
 
21
- let tooltip = createTooltip(props);
26
+ let [presenceStrategyProps, tooltipProps] = $derived(
27
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
28
+ props,
29
+ ),
30
+ );
31
+
32
+ let tooltip = createTooltip(reflect(() => tooltipProps));
33
+
22
34
  let presence = createPresence({
23
35
  get present() {
24
36
  return tooltip.open;
25
37
  },
38
+ get lazyMount() {
39
+ return presenceStrategyProps.lazyMount;
40
+ },
41
+ get keepMounted() {
42
+ return presenceStrategyProps.keepMounted;
43
+ },
26
44
  });
27
45
 
28
46
  setTooltipContext(tooltip);
package/dist/types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { Snippet } from 'svelte';
2
+ import type { Action } from 'svelte/action';
2
3
  import type { SvelteHTMLElements } from 'svelte/elements';
3
4
  import type { TransitionConfig } from 'svelte/transition';
4
5
  export type GenericObject = Record<string, any>;
@@ -13,10 +14,14 @@ export interface TransitionProps {
13
14
  out?: TransitionFunction;
14
15
  transition?: TransitionFunction;
15
16
  }
16
- export type AsChild<Context = never> = [Context] extends [never] ? Snippet<[attrs: GenericObject]> : Snippet<[attrs: GenericObject, context: Context]>;
17
+ export type AsChildWithRef<Ref extends Action, Context = never> = [
18
+ Context
19
+ ] extends [never] ? Snippet<[ref: Ref, attrs: GenericObject]> : Snippet<[ref: Ref, attrs: GenericObject, context: Context]>;
20
+ export type AsChildWithoutRef<Context = never> = [Context] extends [never] ? Snippet<[attrs: GenericObject]> : Snippet<[attrs: GenericObject, context: Context]>;
21
+ export type AsChild<Ref extends Action, Context = never> = [Ref] extends [never] ? AsChildWithoutRef<Context> : AsChildWithRef<Ref, Context>;
17
22
  export type Children<T = never> = [T] extends [never] ? Snippet : Snippet<[context: T]>;
18
23
  export type PropsWithoutChildren<T> = Omit<T, 'children'>;
19
- export type HtmlIngredientProps<T extends IntrinsicElements, Context = never> = TransitionProps & PropsWithoutChildren<HtmlProps<T>> & {
20
- asChild?: AsChild<Context>;
24
+ export type HtmlIngredientProps<Element extends IntrinsicElements, Context = never, Ref extends Action = never> = TransitionProps & PropsWithoutChildren<HtmlProps<Element>> & {
21
25
  children?: Children<Context>;
26
+ asChild?: AsChild<Ref, Context>;
22
27
  };