@ark-ui/react 2.1.1 → 2.2.1

package/presence/split-presence-props.d.ts

@@ -1,2 +1,2 @@
 import type { UsePresenceProps } from './use-presence';
-export declare function splitPresenceProps<T>(props: T & UsePresenceProps): [UsePresenceProps, Omit<T & UsePresenceProps, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];
+export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [UsePresenceProps, Omit<T, "lazyMount" | "unmountOnExit" | "onExitComplete" | "present">];

package/presence/split-presence-props.mjs

@@ -1,13 +1,11 @@
 'use client';
 import { createSplitProps } from '../create-split-props.mjs';
 
-function splitPresenceProps(props) {
-  return createSplitProps()(props, [
-    "lazyMount",
-    "onExitComplete",
-    "present",
-    "unmountOnExit"
-  ]);
-}
+const splitPresenceProps = (props) => createSplitProps()(props, [
+  "lazyMount",
+  "onExitComplete",
+  "present",
+  "unmountOnExit"
+]);
 
 export { splitPresenceProps };

package/presence/use-presence.d.ts

@@ -1,17 +1,8 @@
 import * as presence from '@zag-js/presence';
 import { type ForwardedRef } from 'react';
+import type { RenderStrategyProps } from '../render-strategy';
 import type { Optional } from '../types';
-export interface UsePresenceProps extends Optional<presence.Context, 'present'> {
-    /**
-     * Whether to enable lazy mounting
-     * @default false
-     */
-    lazyMount?: boolean;
-    /**
-     * Whether to unmount on exit.
-     * @default false
-     */
-    unmountOnExit?: boolean;
+export interface UsePresenceProps extends Optional<presence.Context, 'present'>, RenderStrategyProps {
 }
 export type UsePresenceReturn = ReturnType<typeof usePresence>;
 export declare const usePresence: (props: UsePresenceProps) => {

package/render-strategy.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('./create-context.cjs');
+const createSplitProps = require('./create-split-props.cjs');
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext.createContext({
+  name: "RenderStrategyContext",
+  hookName: "useRenderStrategyContext",
+  providerName: "<RenderStrategyProvider />"
+});
+const splitRenderStrategyProps = (props) => createSplitProps.createSplitProps()(props, ["lazyMount", "unmountOnExit"]);
+
+exports.RenderStrategyProvider = RenderStrategyProvider;
+exports.splitRenderStrategyProps = splitRenderStrategyProps;
+exports.useRenderStrategyContext = useRenderStrategyContext;

package/render-strategy.d.ts

@@ -0,0 +1,16 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+export interface RenderStrategyProps {
+    /**
+     * Whether to enable lazy mounting
+     * @default false
+     */
+    lazyMount?: boolean;
+    /**
+     * Whether to unmount on exit.
+     * @default false
+     */
+    unmountOnExit?: boolean;
+}
+export declare const RenderStrategyProvider: Provider<RenderStrategyProps>, useRenderStrategyContext: () => RenderStrategyProps;
+export declare const splitRenderStrategyProps: <T extends RenderStrategyProps>(props: T) => [RenderStrategyProps, Omit<T, "lazyMount" | "unmountOnExit">];

package/render-strategy.mjs

@@ -0,0 +1,12 @@
+'use client';
+import { createContext } from './create-context.mjs';
+import { createSplitProps } from './create-split-props.mjs';
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
+  name: "RenderStrategyContext",
+  hookName: "useRenderStrategyContext",
+  providerName: "<RenderStrategyProvider />"
+});
+const splitRenderStrategyProps = (props) => createSplitProps()(props, ["lazyMount", "unmountOnExit"]);
+
+export { RenderStrategyProvider, splitRenderStrategyProps, useRenderStrategyContext };

package/splitter/splitter-root.cjs

@@ -23,7 +23,6 @@ const SplitterRoot = react.forwardRef((props, ref) => {
       "ids",
       "onSizeChange",
       "onSizeChangeEnd",
-      "onSizeChangeStart",
       "orientation",
       "size"
     ]

package/splitter/splitter-root.mjs

@@ -19,7 +19,6 @@ const SplitterRoot = forwardRef((props, ref) => {
       "ids",
       "onSizeChange",
       "onSizeChangeEnd",
-      "onSizeChangeStart",
       "orientation",
       "size"
     ]

package/splitter/use-splitter.cjs

@@ -39,8 +39,7 @@ const useSplitter = (props) => {
     ...initialContext,
     size: props.size,
     onSizeChange: useEvent.useEvent(props.onSizeChange, { sync: true }),
-    onSizeChangeEnd: useEvent.useEvent(props.onSizeChangeEnd),
-    onSizeChangeStart: useEvent.useEvent(props.onSizeChangeStart)
+    onSizeChangeEnd: useEvent.useEvent(props.onSizeChangeEnd)
   };
   const [state, send] = react$1.useMachine(splitter__namespace.machine(initialContext), { context });
   return splitter__namespace.connect(state, send, react$1.normalizeProps);

package/splitter/use-splitter.mjs

@@ -16,8 +16,7 @@ const useSplitter = (props) => {
     ...initialContext,
     size: props.size,
     onSizeChange: useEvent(props.onSizeChange, { sync: true }),
-    onSizeChangeEnd: useEvent(props.onSizeChangeEnd),
-    onSizeChangeStart: useEvent(props.onSizeChangeStart)
+    onSizeChangeEnd: useEvent(props.onSizeChangeEnd)
   };
   const [state, send] = useMachine(splitter.machine(initialContext), { context });
   return splitter.connect(state, send, normalizeProps);

package/tabs/tab-content.cjs

@@ -10,15 +10,15 @@ const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
 const usePresence = require('../presence/use-presence.cjs');
+const renderStrategy = require('../render-strategy.cjs');
 const tabsContext = require('./tabs-context.cjs');
 
 const TabContent = react.forwardRef((props, ref) => {
   const [contentProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
   const api = tabsContext.useTabsContext();
-  const presenceProps = presencePropsContext.usePresencePropsContext();
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.value === props.value });
+  const renderStrategyProps = renderStrategy.useRenderStrategyContext();
+  const presenceApi = usePresence.usePresence({ ...renderStrategyProps, present: api.value === props.value });
   const mergedProps = react$1.mergeProps(
     api.getContentProps(contentProps),
     presenceApi.getPresenceProps(ref),

package/tabs/tab-content.mjs

@@ -6,15 +6,15 @@ import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { PresenceProvider } from '../presence/presence-context.mjs';
-import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
 import { usePresence } from '../presence/use-presence.mjs';
+import { useRenderStrategyContext } from '../render-strategy.mjs';
 import { useTabsContext } from './tabs-context.mjs';
 
 const TabContent = forwardRef((props, ref) => {
   const [contentProps, localProps] = createSplitProps()(props, ["value"]);
   const api = useTabsContext();
-  const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence({ ...presenceProps, present: api.value === props.value });
+  const renderStrategyProps = useRenderStrategyContext();
+  const presenceApi = usePresence({ ...renderStrategyProps, present: api.value === props.value });
   const mergedProps = mergeProps(
     api.getContentProps(contentProps),
     presenceApi.getPresenceProps(ref),

package/tabs/tabs-root.cjs

@@ -8,13 +8,12 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const renderStrategy = require('../render-strategy.cjs');
 const tabsContext = require('./tabs-context.cjs');
 const useTabs = require('./use-tabs.cjs');
 
 const TabsRoot = react.forwardRef((props, ref) => {
-  const [presenceProps, tabsProps] = splitPresenceProps.splitPresenceProps(props);
+  const [renderStrategyProps, tabsProps] = renderStrategy.splitRenderStrategyProps(props);
   const [useTabsProps, localprops] = createSplitProps.createSplitProps()(tabsProps, [
     "activationMode",
     "defaultValue",
@@ -31,7 +30,7 @@ const TabsRoot = react.forwardRef((props, ref) => {
   ]);
   const api = useTabs.useTabs(useTabsProps);
   const mergedProps = react$1.mergeProps(api.rootProps, localprops);
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 TabsRoot.displayName = "TabsRoot";
 

package/tabs/tabs-root.d.ts

@@ -1,9 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
+import { type RenderStrategyProps } from '../render-strategy';
 import { type Assign } from '../types';
 import { type UseTabsProps } from './use-tabs';
-export interface TabsRootProps extends Assign<HTMLArkProps<'div'>, UseTabsProps>, UsePresenceProps {
+export interface TabsRootProps extends Assign<HTMLArkProps<'div'>, UseTabsProps>, RenderStrategyProps {
 }
 export declare const TabsRoot: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;

package/tabs/tabs-root.mjs

@@ -4,13 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { splitRenderStrategyProps, RenderStrategyProvider } from '../render-strategy.mjs';
 import { TabsProvider } from './tabs-context.mjs';
 import { useTabs } from './use-tabs.mjs';
 
 const TabsRoot = forwardRef((props, ref) => {
-  const [presenceProps, tabsProps] = splitPresenceProps(props);
+  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
   const [useTabsProps, localprops] = createSplitProps()(tabsProps, [
     "activationMode",
     "defaultValue",
@@ -27,7 +26,7 @@ const TabsRoot = forwardRef((props, ref) => {
   ]);
   const api = useTabs(useTabsProps);
   const mergedProps = mergeProps(api.rootProps, localprops);
-  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(RenderStrategyProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 TabsRoot.displayName = "TabsRoot";
 

package/toast/create-toaster.d.ts

@@ -1,12 +1,13 @@
 import { type PropTypes } from '@zag-js/react';
 import * as toast from '@zag-js/toast';
 import { type JSX } from 'react';
+import { type HTMLArkProps } from '../factory';
 import type { Optional } from '../types';
 type GroupContext = Partial<toast.GroupMachineContext>;
 export interface CreateToasterProps extends Omit<Optional<GroupContext, 'id'>, 'render'> {
     placement: toast.Placement;
     render: (api: toast.Api<PropTypes>) => JSX.Element;
 }
-export type CreateToasterReturn = [React.ElementType, toast.GroupApi<PropTypes>];
+export type CreateToasterReturn = [React.FC<HTMLArkProps<'ol'>>, toast.GroupApi<PropTypes>];
 export declare const createToaster: (props: CreateToasterProps) => CreateToasterReturn;
 export {};

package/tree-view/tree-view-branch-indicator.cjs

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
@@ -15,12 +14,7 @@ const TreeViewBranchIndicator = react.forwardRef(
   (props, ref) => {
     const api = treeViewContext.useTreeViewContext();
     const branchProps = treeViewBranchContext.useTreeViewBranchContext();
-    const mergedProps = react$1.mergeProps(
-      api.getBranchProps(branchProps),
-      // TODO use api.getBranchIndicatorProps() when available
-      anatomy.treeViewAnatomy.build().branchIndicator.attrs,
-      props
-    );
+    const mergedProps = react$1.mergeProps(api.getBranchIndicatorProps(branchProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/tree-view/tree-view-branch-indicator.mjs

@@ -1,6 +1,5 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { treeViewAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -11,12 +10,7 @@ const TreeViewBranchIndicator = forwardRef(
   (props, ref) => {
     const api = useTreeViewContext();
     const branchProps = useTreeViewBranchContext();
-    const mergedProps = mergeProps(
-      api.getBranchProps(branchProps),
-      // TODO use api.getBranchIndicatorProps() when available
-      treeViewAnatomy.build().branchIndicator.attrs,
-      props
-    );
+    const mergedProps = mergeProps(api.getBranchIndicatorProps(branchProps), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/tree-view/tree-view-root.cjs

@@ -16,7 +16,8 @@ const TreeViewRoot = react.forwardRef((props, ref) => {
   const [useTreeViewProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
-      "defaultFocusedId",
+      "defaultExpandedIds",
+      "defaultSelectedIds",
       "dir",
       "expandedIds",
       "focusedId",

package/tree-view/tree-view-root.mjs

@@ -12,7 +12,8 @@ const TreeViewRoot = forwardRef((props, ref) => {
   const [useTreeViewProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
-      "defaultFocusedId",
+      "defaultExpandedIds",
+      "defaultSelectedIds",
       "dir",
       "expandedIds",
       "focusedId",

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

@@ -32,12 +32,12 @@ const useTreeView = (props = {}) => {
   const initialContext = {
     id: react.useId(),
     getRootNode: environmentContext.useEnvironmentContext(),
-    focusedId: props.defaultFocusedId,
+    selectedIds: props.defaultSelectedIds,
+    expandedIds: props.defaultExpandedIds,
     ...props
   };
   const context = {
     ...initialContext,
-    focusedId: props.focusedId,
     onFocusChange: useEvent.useEvent(props.onFocusChange, { sync: true }),
     onExpandedChange: useEvent.useEvent(props.onExpandedChange),
     onSelectionChange: useEvent.useEvent(props.onSelectionChange)

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

@@ -3,9 +3,13 @@ import * as treeView from '@zag-js/tree-view';
 import { type Optional } from '../types';
 export interface UseTreeViewProps extends Optional<treeView.Context, 'id'> {
     /**
-     * The initial focused index of the tree view.
+     * The initial selected ids of the tree view.
      */
-    defaultFocusedId?: treeView.Context['focusedId'];
+    defaultSelectedIds?: treeView.Context['selectedIds'];
+    /**
+     * The initial expanded ids of the tree view.
+     */
+    defaultExpandedIds?: treeView.Context['expandedIds'];
 }
 export interface UseTreeViewReturn extends treeView.Api<PropTypes> {
 }

package/tree-view/use-tree-view.mjs

@@ -9,12 +9,12 @@ const useTreeView = (props = {}) => {
   const initialContext = {
     id: useId(),
     getRootNode: useEnvironmentContext(),
-    focusedId: props.defaultFocusedId,
+    selectedIds: props.defaultSelectedIds,
+    expandedIds: props.defaultExpandedIds,
     ...props
   };
   const context = {
     ...initialContext,
-    focusedId: props.focusedId,
     onFocusChange: useEvent(props.onFocusChange, { sync: true }),
     onExpandedChange: useEvent(props.onExpandedChange),
     onSelectionChange: useEvent(props.onSelectionChange)

package/presence/presence-props-context.cjs

@@ -1,17 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const createContext = require('../create-context.cjs');
-
-const [PresencePropsProvider, usePresencePropsContext] = createContext.createContext(
-  {
-    name: "PresencePropsContext",
-    hookName: "usePresencePropsContext",
-    providerName: "<PresencePropsProvider />"
-  }
-);
-
-exports.PresencePropsProvider = PresencePropsProvider;
-exports.usePresencePropsContext = usePresencePropsContext;

package/presence/presence-props-context.d.ts

@@ -1,6 +0,0 @@
-import { Provider } from 'react';
-/// <reference types="react" />
-import type { UsePresenceProps } from './use-presence';
-export interface PresencePropsContext extends UsePresenceProps {
-}
-export declare const PresencePropsProvider: Provider<PresencePropsContext>, usePresencePropsContext: () => PresencePropsContext;

package/presence/presence-props-context.mjs

@@ -1,12 +0,0 @@
-'use client';
-import { createContext } from '../create-context.mjs';
-
-const [PresencePropsProvider, usePresencePropsContext] = createContext(
-  {
-    name: "PresencePropsContext",
-    hookName: "usePresencePropsContext",
-    providerName: "<PresencePropsProvider />"
-  }
-);
-
-export { PresencePropsProvider, usePresencePropsContext };