ui-ingredients 0.31.2 → 1.0.0

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

@@ -1,6 +1,5 @@
 import * as treeView from '@zag-js/tree-view';
-export interface CreateTreeViewProps extends Omit<treeView.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateTreeViewProps extends Omit<treeView.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateTreeViewReturn extends treeView.Api {
 }

package/dist/tree-view/create-tree-view.svelte.js

@@ -1,18 +1,14 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as treeView from '@zag-js/tree-view';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createTreeView(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(treeView.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(treeView.machine(context), { context });
-    return reflect(() => treeView.connect(state, send, normalizeProps));
+    return reflect(() => treeView.connect(service, normalizeProps));
 }

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

@@ -27,6 +27,8 @@
     ...props
   }: TreeViewBranchProps = $props();
 
+  let uid = $props.id();
+
   let [nodeProps, localProps] = $derived(
     createSplitProps<NodeProps>(['node', 'indexPath'])(props),
   );
@@ -36,6 +38,7 @@
   let branchContentProps = $derived(treeView.getBranchContentProps(nodeProps));
   let collapbsible = createCollapsible(
     reflect(() => ({
+      id: uid,
       ids: {content: branchContentProps.id},
       open: nodeState.expanded,
       disabled: nodeState.disabled,

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

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateTreeViewProps,
     CreateTreeViewReturn,
@@ -9,7 +9,7 @@
   export interface TreeViewProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>,
-        CreateTreeViewProps
+        Optional<CreateTreeViewProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -23,25 +23,29 @@
   import {setTreeViewContext} from './tree-view-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: TreeViewProps = $props();
 
-  let [presenceStrategyProps, rest] = $derived(
+  let uid = $props.id();
+
+  let [presenceStrategyProps, treeviewProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
   let [createTreeViewProps, localProps] = $derived(
-    createSplitProps<CreateTreeViewProps>([
+    createSplitProps<Omit<CreateTreeViewProps, 'id'>>([
       'collection',
+      'defaultExpandedValue',
+      'defaultSelectedValue',
       'expandOnClick',
       'expandedValue',
       'focusedValue',
-      'id',
       'ids',
       'onExpandedChange',
       'onFocusChange',
@@ -49,10 +53,13 @@
       'selectedValue',
       'selectionMode',
       'typeahead',
-    ])(rest),
+    ])(treeviewProps),
+  );
+
+  let treeView = createTreeView(
+    reflect(() => ({...createTreeViewProps, id: id ?? uid})),
   );
 
-  let treeView = createTreeView(reflect(() => createTreeViewProps));
   let mergedProps = $derived(mergeProps(treeView.getRootProps(), localProps));
 
   setTreeViewContext(treeView);

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

@@ -1,7 +1,7 @@
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateTreeViewProps, CreateTreeViewReturn } from './create-tree-view.svelte.js';
-export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps>, PresenceStrategyProps {
+export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, Optional<CreateTreeViewProps, 'id'>>, PresenceStrategyProps {
 }
 declare const TreeViewRoot: import("svelte").Component<TreeViewProps, {}, "ref">;
 type TreeViewRoot = ReturnType<typeof TreeViewRoot>;

package/dist/types.d.ts

@@ -18,4 +18,5 @@ export type HtmlIngredientProps<TElement extends SvelteHTMLElement, TRef extends
     asChild?: AsChild<TAction, TContext>;
     children?: Children<TContext>;
 };
+export type Optional<T extends GenericObject, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 export {};