@ark-ui/react 4.9.2 → 5.0.0

package/dist/components/tree-view/tree-view.d.ts

@@ -1,4 +1,4 @@
-export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails, } from '@zag-js/tree-view';
+export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails } from '@zag-js/tree-view';
 export { TreeViewBranch as Branch, type TreeViewBranchBaseProps as BranchBaseProps, type TreeViewBranchProps as BranchProps, } from './tree-view-branch';
 export { TreeViewBranchContent as BranchContent, type TreeViewBranchContentBaseProps as BranchContentBaseProps, type TreeViewBranchContentProps as BranchContentProps, } from './tree-view-branch-content';
 export { TreeViewBranchControl as BranchControl, type TreeViewBranchControlBaseProps as BranchControlBaseProps, type TreeViewBranchControlProps as BranchControlProps, } from './tree-view-branch-control';
@@ -6,7 +6,7 @@ export { TreeViewBranchIndentGuide as BranchIndentGuide, type TreeViewBranchInde
 export { TreeViewBranchIndicator as BranchIndicator, type TreeViewBranchIndicatorBaseProps as BranchIndicatorBaseProps, type TreeViewBranchIndicatorProps as BranchIndicatorProps, } from './tree-view-branch-indicator';
 export { TreeViewBranchText as BranchText, type TreeViewBranchTextBaseProps as BranchTextBaseProps, type TreeViewBranchTextProps as BranchTextProps, } from './tree-view-branch-text';
 export { TreeViewBranchTrigger as BranchTrigger, type TreeViewBranchTriggerBaseProps as BranchTriggerBaseProps, type TreeViewBranchTriggerProps as BranchTriggerProps, } from './tree-view-branch-trigger';
-export { TreeViewContext as Context, type TreeViewContextProps as ContextProps, } from './tree-view-context';
+export { TreeViewContext as Context, type TreeViewContextProps as ContextProps } from './tree-view-context';
 export { TreeViewItem as Item, type TreeViewItemBaseProps as ItemBaseProps, type TreeViewItemProps as ItemProps, } from './tree-view-item';
 export { TreeViewItemIndicator as ItemIndicator, type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, type TreeViewItemIndicatorProps as ItemIndicatorProps, } from './tree-view-item-indicator';
 export { TreeViewItemText as ItemText, type TreeViewItemTextBaseProps as ItemTextBaseProps, type TreeViewItemTextProps as ItemTextProps, } from './tree-view-item-text';

package/dist/components/tree-view/use-tree-view-node-context.cjs

@@ -5,13 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createContext = require('../../utils/create-context.cjs');
 
-const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext.createContext(
-  {
-    name: "TreeViewNodeContext",
-    hookName: "useTreeViewNodeContext",
-    providerName: "<TreeViewNodeProvider />"
-  }
-);
+const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext.createContext({
+  name: "TreeViewNodeContext",
+  hookName: "useTreeViewNodeContext",
+  providerName: "<TreeViewNodeProvider />"
+});
 
 exports.TreeViewNodeProvider = TreeViewNodeProvider;
 exports.useTreeViewNodeContext = useTreeViewNodeContext;

package/dist/components/tree-view/use-tree-view-node-context.js

@@ -1,12 +1,10 @@
 'use client';
 import { createContext } from '../../utils/create-context.js';
 
-const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext(
-  {
-    name: "TreeViewNodeContext",
-    hookName: "useTreeViewNodeContext",
-    providerName: "<TreeViewNodeProvider />"
-  }
-);
+const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext({
+  name: "TreeViewNodeContext",
+  hookName: "useTreeViewNodeContext",
+  providerName: "<TreeViewNodeProvider />"
+});
 
 export { TreeViewNodeProvider, useTreeViewNodeContext };

package/dist/components/tree-view/use-tree-view.cjs

@@ -8,7 +8,6 @@ const treeView = require('@zag-js/tree-view');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -30,36 +29,17 @@ function _interopNamespaceDefault(e) {
 const treeView__namespace = /*#__PURE__*/_interopNamespaceDefault(treeView);
 
 const useTreeView = (props) => {
-  const { collection, ...treeViewProps } = props;
-  const locale = useLocaleContext.useLocaleContext();
-  const environment = useEnvironmentContext.useEnvironmentContext();
-  const initialContext = {
-    id: react.useId(),
-    dir: locale.dir,
-    getRootNode: environment.getRootNode,
-    selectedValue: props.defaultSelectedValue,
-    expandedValue: props.defaultExpandedValue,
-    collection,
-    ...treeViewProps
+  const id = react.useId();
+  const { dir } = useLocaleContext.useLocaleContext();
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  const machineProps = {
+    id,
+    dir,
+    getRootNode,
+    ...props
   };
-  const context = (() => {
-    const { collection: _, ...restProps } = initialContext;
-    return {
-      ...restProps,
-      selectedValue: props.selectedValue,
-      expandedValue: props.expandedValue,
-      onFocusChange: useEvent.useEvent(props.onFocusChange),
-      onExpandedChange: useEvent.useEvent(props.onExpandedChange, { sync: true }),
-      onSelectionChange: useEvent.useEvent(props.onSelectionChange, { sync: true })
-    };
-  })();
-  const [state, send, service] = react$1.useMachine(treeView__namespace.machine(initialContext), {
-    context
-  });
-  react.useEffect(() => {
-    service.setContext({ collection });
-  }, [collection]);
-  return treeView__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(treeView__namespace.machine, machineProps);
+  return treeView__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useTreeView = useTreeView;

package/dist/components/tree-view/use-tree-view.d.cts

@@ -2,17 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import { TreeCollection, TreeNode } from '../collection';
 import * as treeView from '@zag-js/tree-view';
-export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<treeView.Context, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
-    /**
-     * The initial selected items of the tree view.
-     * Use this when you do not need to control the state of the tree view.
-     */
-    defaultSelectedValue?: treeView.Context['selectedValue'];
-    /**
-     * The initial expanded items of the tree view.
-     * Use this when you do not need to control the state of the tree view.
-     */
-    defaultExpandedValue?: treeView.Context['expandedValue'];
+export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<treeView.Props, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
     /**
      * The collection of tree nodes
      */
@@ -20,4 +10,4 @@ export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<tree
 }
 export interface UseTreeViewReturn<T extends TreeNode> extends treeView.Api<PropTypes, T> {
 }
-export declare const useTreeView: <T extends unknown>(props: UseTreeViewProps<T>) => UseTreeViewReturn<T>;
+export declare const useTreeView: <T extends TreeNode>(props: UseTreeViewProps<T>) => UseTreeViewReturn<T>;

package/dist/components/tree-view/use-tree-view.d.ts

@@ -2,17 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import { TreeCollection, TreeNode } from '../collection';
 import * as treeView from '@zag-js/tree-view';
-export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<treeView.Context, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
-    /**
-     * The initial selected items of the tree view.
-     * Use this when you do not need to control the state of the tree view.
-     */
-    defaultSelectedValue?: treeView.Context['selectedValue'];
-    /**
-     * The initial expanded items of the tree view.
-     * Use this when you do not need to control the state of the tree view.
-     */
-    defaultExpandedValue?: treeView.Context['expandedValue'];
+export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<treeView.Props, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
     /**
      * The collection of tree nodes
      */
@@ -20,4 +10,4 @@ export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<tree
 }
 export interface UseTreeViewReturn<T extends TreeNode> extends treeView.Api<PropTypes, T> {
 }
-export declare const useTreeView: <T extends unknown>(props: UseTreeViewProps<T>) => UseTreeViewReturn<T>;
+export declare const useTreeView: <T extends TreeNode>(props: UseTreeViewProps<T>) => UseTreeViewReturn<T>;

package/dist/components/tree-view/use-tree-view.js

@@ -1,42 +1,22 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as treeView from '@zag-js/tree-view';
-import { useId, useEffect } from 'react';
+import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 const useTreeView = (props) => {
-  const { collection, ...treeViewProps } = props;
-  const locale = useLocaleContext();
-  const environment = useEnvironmentContext();
-  const initialContext = {
-    id: useId(),
-    dir: locale.dir,
-    getRootNode: environment.getRootNode,
-    selectedValue: props.defaultSelectedValue,
-    expandedValue: props.defaultExpandedValue,
-    collection,
-    ...treeViewProps
+  const id = useId();
+  const { dir } = useLocaleContext();
+  const { getRootNode } = useEnvironmentContext();
+  const machineProps = {
+    id,
+    dir,
+    getRootNode,
+    ...props
   };
-  const context = (() => {
-    const { collection: _, ...restProps } = initialContext;
-    return {
-      ...restProps,
-      selectedValue: props.selectedValue,
-      expandedValue: props.expandedValue,
-      onFocusChange: useEvent(props.onFocusChange),
-      onExpandedChange: useEvent(props.onExpandedChange, { sync: true }),
-      onSelectionChange: useEvent(props.onSelectionChange, { sync: true })
-    };
-  })();
-  const [state, send, service] = useMachine(treeView.machine(initialContext), {
-    context
-  });
-  useEffect(() => {
-    service.setContext({ collection });
-  }, [collection]);
-  return treeView.connect(state, send, normalizeProps);
+  const service = useMachine(treeView.machine, machineProps);
+  return treeView.connect(service, normalizeProps);
 };
 
 export { useTreeView };

package/dist/providers/environment/environment-provider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { getWindow, getDocument } from '@zag-js/dom-query';
+import { getDocument, getWindow } from '@zag-js/dom-query';
 import { useState, useMemo } from 'react';
 import { runIfFn } from '../../utils/run-if-fn.js';
 import { EnvironmentContextProvider } from './use-environment-context.js';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@ark-ui/react",
-  "version": "4.9.2",
+  "type": "module",
+  "version": "5.0.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -53,10 +54,6 @@
   "bugs": {
     "url": "https://github.com/chakra-ui/ark/issues"
   },
-  "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -144,110 +141,103 @@
     "prepack": "clean-package",
     "postpack": "clean-package restore"
   },
-  "clean-package": {
-    "remove": [
-      "exports.\\..source",
-      "exports.\\./anatomy.source",
-      "exports.\\./collection.source",
-      "exports.\\./factory.source",
-      "exports.\\./environment.source",
-      "exports.\\./locale.source",
-      "exports.\\./*.source"
-    ]
-  },
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.7.0",
-    "@zag-js/accordion": "0.82.2",
-    "@zag-js/anatomy": "0.82.2",
-    "@zag-js/auto-resize": "0.82.2",
-    "@zag-js/avatar": "0.82.2",
-    "@zag-js/carousel": "0.82.2",
-    "@zag-js/checkbox": "0.82.2",
-    "@zag-js/clipboard": "0.82.2",
-    "@zag-js/collapsible": "0.82.2",
-    "@zag-js/collection": "0.82.2",
-    "@zag-js/color-picker": "0.82.2",
-    "@zag-js/color-utils": "0.82.2",
-    "@zag-js/combobox": "0.82.2",
-    "@zag-js/core": "0.82.2",
-    "@zag-js/date-picker": "0.82.2",
-    "@zag-js/date-utils": "0.82.2",
-    "@zag-js/dialog": "0.82.2",
-    "@zag-js/dom-query": "0.82.2",
-    "@zag-js/editable": "0.82.2",
-    "@zag-js/file-upload": "0.82.2",
-    "@zag-js/file-utils": "0.82.2",
-    "@zag-js/focus-trap": "0.82.2",
-    "@zag-js/highlight-word": "0.82.2",
-    "@zag-js/hover-card": "0.82.2",
-    "@zag-js/i18n-utils": "0.82.2",
-    "@zag-js/menu": "0.82.2",
-    "@zag-js/number-input": "0.82.2",
-    "@zag-js/pagination": "0.82.2",
-    "@zag-js/pin-input": "0.82.2",
-    "@zag-js/popover": "0.82.2",
-    "@zag-js/presence": "0.82.2",
-    "@zag-js/progress": "0.82.2",
-    "@zag-js/qr-code": "0.82.2",
-    "@zag-js/radio-group": "0.82.2",
-    "@zag-js/rating-group": "0.82.2",
-    "@zag-js/react": "0.82.2",
-    "@zag-js/select": "0.82.2",
-    "@zag-js/signature-pad": "0.82.2",
-    "@zag-js/slider": "0.82.2",
-    "@zag-js/splitter": "0.82.2",
-    "@zag-js/steps": "0.82.2",
-    "@zag-js/switch": "0.82.2",
-    "@zag-js/tabs": "0.82.2",
-    "@zag-js/tags-input": "0.82.2",
-    "@zag-js/time-picker": "0.82.2",
-    "@zag-js/timer": "0.82.2",
-    "@zag-js/toast": "0.82.2",
-    "@zag-js/toggle-group": "0.82.2",
-    "@zag-js/tooltip": "0.82.2",
-    "@zag-js/tour": "0.82.2",
-    "@zag-js/tree-view": "0.82.2",
-    "@zag-js/types": "0.82.2"
+    "@zag-js/accordion": "1.3.1",
+    "@zag-js/anatomy": "1.3.1",
+    "@zag-js/auto-resize": "1.3.1",
+    "@zag-js/avatar": "1.3.1",
+    "@zag-js/carousel": "1.3.1",
+    "@zag-js/checkbox": "1.3.1",
+    "@zag-js/clipboard": "1.3.1",
+    "@zag-js/collapsible": "1.3.1",
+    "@zag-js/collection": "1.3.1",
+    "@zag-js/color-picker": "1.3.1",
+    "@zag-js/color-utils": "1.3.1",
+    "@zag-js/combobox": "1.3.1",
+    "@zag-js/core": "1.3.1",
+    "@zag-js/date-picker": "1.3.1",
+    "@zag-js/date-utils": "1.3.1",
+    "@zag-js/dialog": "1.3.1",
+    "@zag-js/dom-query": "1.3.1",
+    "@zag-js/editable": "1.3.1",
+    "@zag-js/file-upload": "1.3.1",
+    "@zag-js/file-utils": "1.3.1",
+    "@zag-js/focus-trap": "1.3.1",
+    "@zag-js/highlight-word": "1.3.1",
+    "@zag-js/hover-card": "1.3.1",
+    "@zag-js/i18n-utils": "1.3.1",
+    "@zag-js/menu": "1.3.1",
+    "@zag-js/number-input": "1.3.1",
+    "@zag-js/pagination": "1.3.1",
+    "@zag-js/pin-input": "1.3.1",
+    "@zag-js/popover": "1.3.1",
+    "@zag-js/presence": "1.3.1",
+    "@zag-js/progress": "1.3.1",
+    "@zag-js/qr-code": "1.3.1",
+    "@zag-js/radio-group": "1.3.1",
+    "@zag-js/rating-group": "1.3.1",
+    "@zag-js/react": "1.3.1",
+    "@zag-js/select": "1.3.1",
+    "@zag-js/signature-pad": "1.3.1",
+    "@zag-js/slider": "1.3.1",
+    "@zag-js/splitter": "1.3.1",
+    "@zag-js/steps": "1.3.1",
+    "@zag-js/switch": "1.3.1",
+    "@zag-js/tabs": "1.3.1",
+    "@zag-js/tags-input": "1.3.1",
+    "@zag-js/time-picker": "1.3.1",
+    "@zag-js/timer": "1.3.1",
+    "@zag-js/toast": "1.3.1",
+    "@zag-js/toggle": "1.3.1",
+    "@zag-js/toggle-group": "1.3.1",
+    "@zag-js/tooltip": "1.3.1",
+    "@zag-js/tour": "1.3.1",
+    "@zag-js/tree-view": "1.3.1",
+    "@zag-js/types": "1.3.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@release-it/keep-a-changelog": "6.0.0",
-    "@storybook/addon-a11y": "8.5.6",
-    "@storybook/addon-essentials": "8.5.6",
-    "@storybook/react-vite": "8.5.6",
-    "@storybook/react": "8.5.6",
+    "@storybook/addon-a11y": "8.6.4",
+    "@storybook/addon-essentials": "8.6.4",
+    "@storybook/react": "8.6.4",
+    "@storybook/react-vite": "8.6.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jsdom": "21.1.7",
-    "@types/react": "19.0.9",
-    "@types/react-dom": "19.0.3",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
-    "@zag-js/stringify-state": "0.82.2",
+    "@zag-js/stringify-state": "1.3.1",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
-    "jsdom": "26.0.0",
-    "lucide-react": "0.475.0",
+    "happy-dom": "17.1.8",
+    "lucide-react": "0.477.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-frame-component": "5.2.7",
     "react-hook-form": "7.54.2",
     "release-it": "18.1.2",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.5.6",
-    "typescript": "5.7.3",
-    "vite": "5.4.14",
-    "vite-plugin-dts": "4.5.0",
-    "vitest": "3.0.5",
+    "storybook": "8.6.4",
+    "typescript": "5.8.2",
+    "vite": "6.2.0",
+    "vite-plugin-dts": "4.5.3",
+    "vitest": "3.0.7",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
-  }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts"
 }