ui-ingredients 0.0.67 → 0.0.68

package/dist/tree-view/tree-view-branch-content.svelte

@@ -1,12 +1,16 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
   export interface TreeViewBranchContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
   import {
     getTreeViewBranchPropsContext,
     getTreeViewContext,
@@ -22,16 +26,31 @@
   let treeView = getTreeViewContext();
 
   let branchProps = getTreeViewBranchPropsContext();
+  let branchState = $derived(treeView.getBranchState(branchProps));
+
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      present: branchState.expanded,
+      ...presenceStrategyProps,
+    })),
+  );
 
   let mergedProps = $derived(
-    mergeProps(treeView.getBranchContentProps(branchProps), props),
+    mergeProps(
+      treeView.getBranchContentProps(branchProps),
+      presence.getPresenceProps(),
+      props,
+    ),
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/tree-view/tree-view-branch-content.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface TreeViewBranchContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+import type { Action } from 'svelte/action';
+export interface TreeViewBranchContentProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tree-view/tree-view-root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateTreeViewProps,
@@ -7,13 +8,15 @@
 
   export interface TreeViewProps
     extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>,
-      CreateTreeViewProps
-    > {}
+        HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>,
+        CreateTreeViewProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {createTreeView} from './create-tree-view.svelte.js';
@@ -26,6 +29,12 @@
     ...props
   }: TreeViewProps = $props();
 
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
   let [createTreeViewProps, localProps] = $derived(
     createSplitProps<CreateTreeViewProps>([
       'id',
@@ -39,14 +48,14 @@
       'onFocusChange',
       'onExpandedChange',
       'onSelectionChange',
-    ])(props),
+    ])(rest),
   );
 
   let treeView = createTreeView(reflect(() => createTreeViewProps));
-
   let mergedProps = $derived(mergeProps(treeView.getRootProps(), localProps));
 
   setTreeViewContext(treeView);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
 </script>
 
 {#if asChild}

package/dist/tree-view/tree-view-root.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { CreateTreeViewProps, CreateTreeViewReturn } from './create-tree-view.svelte.js';
-export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps> {
+export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps>, PresenceStrategyProps {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",