@ark-ui/react 0.0.0-rc-20230126030105 → 0.0.0-rc-20230128111337

package/dist/accordion/use-accordion.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const accordion = require('@zag-js/accordion');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion);
 
 const useAccordion = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/accordion/use-accordion.mjs

@@ -1,10 +1,13 @@
 import * as accordion from '@zag-js/accordion';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useAccordion = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/checkbox/use-checkbox.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const checkbox = require('@zag-js/checkbox');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
 
 const useCheckbox = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
     id: React.useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = react.useMachine(checkbox__namespace.machine(context), { context });

package/dist/checkbox/use-checkbox.mjs

@@ -1,10 +1,13 @@
 import * as checkbox from '@zag-js/checkbox';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId, useEffect } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useCheckbox = (props) => {
+  const getRootNode = useEnvironmentContext();
   const context = {
     id: useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = useMachine(checkbox.machine(context), { context });

package/dist/dialog/use-dialog.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const dialog = require('@zag-js/dialog');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
 
 const useDialog = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
     id: React.useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = react.useMachine(dialog__namespace.machine(context), { context });

package/dist/dialog/use-dialog.mjs

@@ -1,10 +1,13 @@
 import * as dialog from '@zag-js/dialog';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useDialog = (props) => {
+  const getRootNode = useEnvironmentContext();
   const context = {
     id: useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = useMachine(dialog.machine(context), { context });

package/dist/editable/use-editable.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const editable = require('@zag-js/editable');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
 
 const useEditable = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/editable/use-editable.mjs

@@ -1,10 +1,13 @@
 import * as editable from '@zag-js/editable';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useEditable = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/environment/environment-context.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [EnvironmentProvider, useEnvironmentContext] = createContext.createContext({
+  name: "EnvironmentContext",
+  hookName: "useEnvironmentContext",
+  providerName: "<EnvironmentProvider />",
+  strict: false
+});
+
+exports.EnvironmentProvider = EnvironmentProvider;
+exports.useEnvironmentContext = useEnvironmentContext;

package/dist/environment/environment-context.d.ts

@@ -0,0 +1,4 @@
+import type { Provider } from 'react';
+import type { CommonProperties } from '@zag-js/types';
+export declare type EnvironmentContext = CommonProperties['getRootNode'];
+export declare const EnvironmentProvider: Provider<(() => Node | ShadowRoot | Document) | undefined>, useEnvironmentContext: () => (() => Node | ShadowRoot | Document) | undefined;

package/dist/environment/environment-context.mjs

@@ -0,0 +1,10 @@
+import { createContext } from '../create-context.mjs';
+
+const [EnvironmentProvider, useEnvironmentContext] = createContext({
+  name: "EnvironmentContext",
+  hookName: "useEnvironmentContext",
+  providerName: "<EnvironmentProvider />",
+  strict: false
+});
+
+export { EnvironmentProvider, useEnvironmentContext };

package/dist/environment/environment.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export declare type EnvironmentProps = {
+    children?: ReactNode;
+    value?: ShadowRoot | Document | Node;
+};
+export declare const Environment: (props: EnvironmentProps) => JSX.Element;

package/dist/environment/index.d.ts

@@ -0,0 +1,2 @@
+export { Environment, type EnvironmentProps } from './environment';
+export { useEnvironmentContext } from './environment-context';

package/dist/hover-card/use-hover-card.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const hoverCard = require('@zag-js/hover-card');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const hoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(hoverCard);
 
 const useHoverCard = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
     id: React.useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = react.useMachine(hoverCard__namespace.machine(context), { context });

package/dist/hover-card/use-hover-card.mjs

@@ -1,10 +1,13 @@
 import * as hoverCard from '@zag-js/hover-card';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useHoverCard = (props) => {
+  const getRootNode = useEnvironmentContext();
   const context = {
     id: useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = useMachine(hoverCard.machine(context), { context });

package/dist/menu/use-menu.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const menu = require('@zag-js/menu');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const menu__namespace = /*#__PURE__*/_interopNamespaceDefault(menu);
 
 const useMenu = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
     id: React.useId(),
+    getRootNode,
     ...props
   };
   const [state, send, machine] = react.useMachine(menu__namespace.machine(context), { context });

package/dist/menu/use-menu.mjs

@@ -1,10 +1,13 @@
 import * as menu from '@zag-js/menu';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useMenu = (props) => {
+  const getRootNode = useEnvironmentContext();
   const context = {
     id: useId(),
+    getRootNode,
     ...props
   };
   const [state, send, machine] = useMachine(menu.machine(context), { context });

package/dist/number-input/use-number-input.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const numberInput = require('@zag-js/number-input');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput);
 
 const useNumberInput = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/number-input/use-number-input.mjs

@@ -1,10 +1,13 @@
 import * as numberInput from '@zag-js/number-input';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useNumberInput = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/pagination/use-pagination.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const pagination = require('@zag-js/pagination');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination);
 
 const usePagination = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
     id: React.useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = react.useMachine(pagination__namespace.machine(context), { context });

package/dist/pagination/use-pagination.mjs

@@ -1,10 +1,13 @@
 import * as pagination from '@zag-js/pagination';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const usePagination = (props) => {
+  const getRootNode = useEnvironmentContext();
   const context = {
     id: useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = useMachine(pagination.machine(context), { context });

package/dist/pin-input/use-pin-input.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const pinInput = require('@zag-js/pin-input');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
 
 const usePinInput = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue ?? []
   };

package/dist/pin-input/use-pin-input.mjs

@@ -1,10 +1,13 @@
 import * as pinInput from '@zag-js/pin-input';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const usePinInput = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue ?? []
   };

package/dist/popover/use-popover.cjs

@@ -6,6 +6,7 @@ const popover = require('@zag-js/popover');
 const react = require('@zag-js/react');
 const React = require('react');
 const useLatestRef = require('../use-latest-ref.cjs');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -28,8 +29,10 @@ const popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover);
 
 const usePopover = (props) => {
   const { isOpen, ...restProps } = props;
+  const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
     id: React.useId(),
+    getRootNode,
     ...restProps
   };
   const [state, send] = react.useMachine(popover__namespace.machine(context), { context });

package/dist/popover/use-popover.d.ts

@@ -12,7 +12,11 @@ export declare type UsePopoverProps = Optional<popover.Context, 'id'> & {
 export declare const usePopover: (props: UsePopoverProps) => {
     portalled: boolean;
     isOpen: boolean;
-    open(): void;
+    open(): void; /**
+     * Control the open state of the popover.
+     *
+     * @default false
+     */
     close(): void;
     arrowProps: HTMLAttributes<HTMLElement>;
     arrowTipProps: HTMLAttributes<HTMLElement>;

package/dist/popover/use-popover.mjs

@@ -2,11 +2,14 @@ import * as popover from '@zag-js/popover';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId, useEffect } from 'react';
 import { useLatestRef } from '../use-latest-ref.mjs';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const usePopover = (props) => {
   const { isOpen, ...restProps } = props;
+  const getRootNode = useEnvironmentContext();
   const context = {
     id: useId(),
+    getRootNode,
     ...restProps
   };
   const [state, send] = useMachine(popover.machine(context), { context });

package/dist/pressable/use-pressable.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const pressable = require('@zag-js/pressable');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const pressable__namespace = /*#__PURE__*/_interopNamespaceDefault(pressable);
 
 const usePressable = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
     id: React.useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = react.useMachine(pressable__namespace.machine(context), { context });

package/dist/pressable/use-pressable.mjs

@@ -1,10 +1,13 @@
 import * as pressable from '@zag-js/pressable';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const usePressable = (props) => {
+  const getRootNode = useEnvironmentContext();
   const context = {
     id: useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = useMachine(pressable.machine(context), { context });

package/dist/radio-group/use-radio-group.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const radio = require('@zag-js/radio-group');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 
 const useRadioGroup = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/radio-group/use-radio-group.mjs

@@ -1,10 +1,13 @@
 import * as radio from '@zag-js/radio-group';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRadioGroup = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/range-slider/use-range-slider.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const rangeSlider = require('@zag-js/range-slider');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const rangeSlider__namespace = /*#__PURE__*/_interopNamespaceDefault(rangeSlider);
 
 const useRangeSlider = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/range-slider/use-range-slider.mjs

@@ -1,10 +1,13 @@
 import * as rangeSlider from '@zag-js/range-slider';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRangeSlider = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/rating-group/use-rating-group.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const ratingGroup = require('@zag-js/rating-group');
 const react = require('@zag-js/react');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const ratingGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(ratingGroup);
 
 const useRatingGroup = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/rating-group/use-rating-group.mjs

@@ -1,10 +1,13 @@
 import * as ratingGroup from '@zag-js/rating-group';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRatingGroup = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/select/use-select.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react = require('@zag-js/react');
 const select = require('@zag-js/select');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
 
 const useSelect = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/select/use-select.mjs

@@ -1,10 +1,13 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as select from '@zag-js/select';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSelect = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.defaultValue
   };

package/dist/slider/use-slider.cjs

@@ -6,6 +6,7 @@ const react = require('@zag-js/react');
 const slider = require('@zag-js/slider');
 const React = require('react');
 const reactDom = require('react-dom');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -27,7 +28,13 @@ function _interopNamespaceDefault(e) {
 const slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider);
 
 const useSlider = (props) => {
-  const initialContext = { id: React.useId(), ...props, value: props.defaultValue };
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const initialContext = {
+    id: React.useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
   const onChange = props.onChange;
   const onChangeWithFlushSync = React.useCallback(
     (e) => reactDom.flushSync(() => onChange?.(e)),

package/dist/slider/use-slider.mjs

@@ -2,9 +2,16 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import * as slider from '@zag-js/slider';
 import { useId, useCallback } from 'react';
 import { flushSync } from 'react-dom';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSlider = (props) => {
-  const initialContext = { id: useId(), ...props, value: props.defaultValue };
+  const getRootNode = useEnvironmentContext();
+  const initialContext = {
+    id: useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
   const onChange = props.onChange;
   const onChangeWithFlushSync = useCallback(
     (e) => flushSync(() => onChange?.(e)),

package/dist/tabs/use-tabs.cjs

@@ -5,9 +5,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react = require('@zag-js/react');
 const tabs = require('@zag-js/tabs');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 const useTabs = (props) => {
-  const initialContext = { id: React.useId(), ...props, value: props.defaultValue };
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const initialContext = {
+    id: React.useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
   const context = {
     ...initialContext,
     value: props.value

package/dist/tabs/use-tabs.mjs

@@ -1,9 +1,16 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { machine, connect } from '@zag-js/tabs';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useTabs = (props) => {
-  const initialContext = { id: useId(), ...props, value: props.defaultValue };
+  const getRootNode = useEnvironmentContext();
+  const initialContext = {
+    id: useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
   const context = {
     ...initialContext,
     value: props.value

package/dist/tags-input/use-tags-input.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react = require('@zag-js/react');
 const tagsInput = require('@zag-js/tags-input');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const tagsInput__namespace = /*#__PURE__*/_interopNamespaceDefault(tagsInput);
 
 const useTagsInput = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: React.useId(),
+    getRootNode,
     ...props,
     value: props.value ?? props.defaultValue
   };

package/dist/tags-input/use-tags-input.mjs

@@ -1,10 +1,13 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as tagsInput from '@zag-js/tags-input';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useTagsInput = (props) => {
+  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
+    getRootNode,
     ...props,
     value: props.value ?? props.defaultValue
   };

package/dist/toast/toast-provider.cjs

@@ -7,6 +7,7 @@ const react = require('@zag-js/react');
 const toast = require('@zag-js/toast');
 const React = require('react');
 const createContext = require('../create-context.cjs');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -30,7 +31,9 @@ const toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
 const [ToastContextProvider, useToast] = createContext.createContext();
 const ToastProvider = (props) => {
   const { children, ...restProps } = props;
-  const [state, send] = react.useMachine(toast__namespace.group.machine({ id: React.useId(), ...restProps }));
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = { id: React.useId(), getRootNode, ...restProps };
+  const [state, send] = react.useMachine(toast__namespace.group.machine(context));
   const api = toast__namespace.group.connect(state, send, react.normalizeProps);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastContextProvider, { value: api, children });
 };

package/dist/toast/toast-provider.mjs

@@ -3,11 +3,14 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import * as toast from '@zag-js/toast';
 import { useId } from 'react';
 import { createContext } from '../create-context.mjs';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const [ToastContextProvider, useToast] = createContext();
 const ToastProvider = (props) => {
   const { children, ...restProps } = props;
-  const [state, send] = useMachine(toast.group.machine({ id: useId(), ...restProps }));
+  const getRootNode = useEnvironmentContext();
+  const context = { id: useId(), getRootNode, ...restProps };
+  const [state, send] = useMachine(toast.group.machine(context));
   const api = toast.group.connect(state, send, normalizeProps);
   return /* @__PURE__ */ jsx(ToastContextProvider, { value: api, children });
 };

package/dist/tooltip/use-tooltip.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react = require('@zag-js/react');
 const tooltip = require('@zag-js/tooltip');
 const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,8 +27,10 @@ function _interopNamespaceDefault(e) {
 const tooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(tooltip);
 
 const useTooltip = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
     id: React.useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = react.useMachine(tooltip__namespace.machine(context), { context });

package/dist/tooltip/use-tooltip.mjs

@@ -1,10 +1,13 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as tooltip from '@zag-js/tooltip';
 import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useTooltip = (props) => {
+  const getRootNode = useEnvironmentContext();
   const context = {
     id: useId(),
+    getRootNode,
     ...props
   };
   const [state, send] = useMachine(tooltip.machine(context), { context });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.0.0-rc-20230126030105",
+  "version": "0.0.0-rc-20230128111337",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/chakra-ui/ark#readme",
@@ -45,7 +45,8 @@
     "@zag-js/tabs": "0.2.7",
     "@zag-js/tags-input": "0.3.8",
     "@zag-js/toast": "0.2.8",
-    "@zag-js/tooltip": "0.2.7"
+    "@zag-js/tooltip": "0.2.7",
+    "@zag-js/types": "0.3.3"
   },
   "devDependencies": {
     "@testing-library/dom": "8.20.0",
@@ -67,6 +68,7 @@
     "jsdom": "21.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-frame-component": "5.2.6",
     "resize-observer-polyfill": "1.5.1",
     "typescript": "4.9.4",
     "vite": "4.0.4",