@ariakit/react-core 0.2.6 → 0.2.8

package/cjs/utils/hooks.d.ts

@@ -53,10 +53,10 @@ export declare function useEvent<T extends AnyFunction>(callback?: T): T;
  * @example
  * const Component = React.forwardRef((props, ref) => {
  *   const internalRef = React.useRef();
- *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
+ *   return <div {...props} ref={useMergeRefs(internalRef, ref)} />;
  * });
  */
-export declare function useForkRef(...refs: Array<Ref<any> | undefined>): ((value: any) => void) | undefined;
+export declare function useMergeRefs(...refs: Array<Ref<any> | undefined>): ((value: unknown) => void) | undefined;
 /**
  * Returns the ref element's ID.
  */
@@ -70,7 +70,7 @@ export declare function useId(defaultId?: string): string | undefined;
  */
 export declare function useDeferredValue<T>(value: T): T;
 /**
- * Returns the tag name by parsing an element ref and the `as` prop.
+ * Returns the tag name by parsing an element ref.
  * @example
  * function Component(props) {
  *   const ref = React.useRef();
@@ -125,7 +125,7 @@ export declare function useWrapElement<P>(props: P & {
  * components that use Portal underneath.
  */
 export declare function usePortalRef(portalProp?: boolean, portalRefProp?: RefCallback<HTMLElement> | MutableRefObject<HTMLElement | null>): {
-    portalRef: ((value: any) => void) | undefined;
+    portalRef: ((value: unknown) => void) | undefined;
     portalNode: HTMLElement | null;
     domReady: true | HTMLElement | null;
 };

package/cjs/utils/misc.cjs

@@ -1,7 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _2X5K3J7Ycjs = require('../__chunks/2X5K3J7Y.cjs');
+
+
+
+var _2KYUOSJ4cjs = require('../__chunks/2KYUOSJ4.cjs');
 require('../__chunks/6455U47T.cjs');
 
 
-exports.setRef = _2X5K3J7Ycjs.setRef;
+
+
+
+exports.getRefProperty = _2KYUOSJ4cjs.getRefProperty; exports.isValidElementWithRef = _2KYUOSJ4cjs.isValidElementWithRef; exports.mergeProps = _2KYUOSJ4cjs.mergeProps; exports.setRef = _2KYUOSJ4cjs.setRef;

package/cjs/utils/misc.d.ts

@@ -1,5 +1,17 @@
-import type { MutableRefObject, RefCallback } from "react";
+import type { HTMLAttributes, MutableRefObject, ReactElement, RefAttributes, RefCallback } from "react";
 /**
  * Sets both a function and object React ref.
  */
 export declare function setRef<T>(ref: RefCallback<T> | MutableRefObject<T> | null | undefined, value: T): void;
+/**
+ * Checks if an element is a valid React element with a ref.
+ */
+export declare function isValidElementWithRef<P>(element: unknown): element is ReactElement<P> & RefAttributes<any>;
+/**
+ * Gets the ref property from a React element.
+ */
+export declare function getRefProperty(element: unknown): import("react").Ref<any> | undefined;
+/**
+ * Merges two sets of props.
+ */
+export declare function mergeProps<T extends HTMLAttributes<any>>(base: T, overrides: T): T;

package/cjs/utils/store.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _3YYDY5FNcjs = require('../__chunks/3YYDY5FN.cjs');
-require('../__chunks/K4FBPMJ3.cjs');
-require('../__chunks/2X5K3J7Y.cjs');
+var _C5W4YO2Wcjs = require('../__chunks/C5W4YO2W.cjs');
+require('../__chunks/FHX4GO67.cjs');
+require('../__chunks/2KYUOSJ4.cjs');
 require('../__chunks/6455U47T.cjs');
 
 
 
 
-exports.useStore = _3YYDY5FNcjs.useStore; exports.useStoreProps = _3YYDY5FNcjs.useStoreProps; exports.useStoreState = _3YYDY5FNcjs.useStoreState;
+exports.useStore = _C5W4YO2Wcjs.useStore; exports.useStoreProps = _C5W4YO2Wcjs.useStoreProps; exports.useStoreState = _C5W4YO2Wcjs.useStoreState;

package/cjs/utils/system.cjs

@@ -3,11 +3,13 @@
 
 
 
-var _5U7AP6Y2cjs = require('../__chunks/5U7AP6Y2.cjs');
+var _O3Z4C76Tcjs = require('../__chunks/O3Z4C76T.cjs');
+require('../__chunks/FHX4GO67.cjs');
+require('../__chunks/2KYUOSJ4.cjs');
 require('../__chunks/6455U47T.cjs');
 
 
 
 
 
-exports.createComponent = _5U7AP6Y2cjs.createComponent; exports.createElement = _5U7AP6Y2cjs.createElement; exports.createHook = _5U7AP6Y2cjs.createHook; exports.createMemoComponent = _5U7AP6Y2cjs.createMemoComponent;
+exports.createComponent = _O3Z4C76Tcjs.createComponent; exports.createElement = _O3Z4C76Tcjs.createElement; exports.createHook = _O3Z4C76Tcjs.createHook; exports.createMemoComponent = _O3Z4C76Tcjs.createMemoComponent;

package/cjs/utils/system.d.ts

@@ -15,7 +15,7 @@ import type { Component, HTMLProps, Hook, Options, Props } from "./types.js";
  *   return <div {...props} />;
  * });
  *
- * <Component as="button" customProp />
+ * <Component customProp render={<button />} />
  */
 export declare function createComponent<O extends Options>(render: (props: Props<O>) => ReactElement): Component<O>;
 /**
@@ -34,20 +34,17 @@ export declare function createComponent<O extends Options>(render: (props: Props
  *   return <div {...props} />;
  * });
  *
- * <Component as="button" customProp />
+ * <Component customProp render={<button />} />
  */
 export declare function createMemoComponent<O extends Options>(render: (props: Props<O>) => ReactElement): Component<O>;
 /**
- * Creates a React element that supports the `as` prop, children as a
- * function (render props) and a `wrapElement` function.
- *
+ * Creates a React element that supports the `render` and `wrapElement` props.
  * @example
  * import { createElement } from "@ariakit/react-core/utils/system";
  *
  * function Component() {
  *   const props = {
- *     as: "button" as const,
- *     children: (htmlProps) => <button {...htmlProps} />,
+ *     render: (htmlProps) => <button {...htmlProps} />,
  *     wrapElement: (element) => <div>{element}</div>,
  *   };
  *   return createElement("div", props);

package/cjs/utils/types.d.ts

@@ -38,7 +38,7 @@ export type Options<T extends As = any> = {
 export type HTMLProps<O extends Options> = {
     wrapElement?: WrapElement;
     children?: Children;
-    render?: RenderProp;
+    render?: RenderProp | React.ReactElement;
     [index: `data-${string}`]: unknown;
 } & Omit<React.ComponentPropsWithRef<NonNullable<O["as"]>>, keyof O | "children">;
 /**

package/cjs/visually-hidden/visually-hidden.cjs

@@ -1,10 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _VYKCWICKcjs = require('../__chunks/VYKCWICK.cjs');
-require('../__chunks/5U7AP6Y2.cjs');
+var _ZKPH2VTWcjs = require('../__chunks/ZKPH2VTW.cjs');
+require('../__chunks/O3Z4C76T.cjs');
+require('../__chunks/FHX4GO67.cjs');
+require('../__chunks/2KYUOSJ4.cjs');
 require('../__chunks/6455U47T.cjs');
 
 
 
-exports.VisuallyHidden = _VYKCWICKcjs.VisuallyHidden; exports.useVisuallyHidden = _VYKCWICKcjs.useVisuallyHidden;
+exports.VisuallyHidden = _ZKPH2VTWcjs.VisuallyHidden; exports.useVisuallyHidden = _ZKPH2VTWcjs.useVisuallyHidden;

package/esm/__chunks/{EKB2TUKR.js → 265D6T7T.js}

@@ -1,6 +1,6 @@
 import {
   setAttribute
-} from "./DJESYNLE.js";
+} from "./T6V23Y6E.js";
 import {
   walkTreeOutside
 } from "./FV23EKJL.js";

package/esm/__chunks/{JX7L6AQW.js → 2XOPWNSQ.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./FY2SXATP.js";
+} from "./USB5JBON.js";
 import {
   __spreadValues
 } from "./4BKCJXBM.js";

package/esm/__chunks/{A5P4XOHC.js → 3O3K4H2I.js}

@@ -1,11 +1,11 @@
 import {
   useDialogHeading
-} from "./G5LGVBEX.js";
+} from "./HE7AYLA4.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 
 // src/popover/popover-heading.ts
 var usePopoverHeading = createHook((props) => {

package/esm/__chunks/{4OUEWDQI.js → 4E4RWZ6B.js}

@@ -1,36 +1,37 @@
 import {
   DialogBackdrop
-} from "./3DWMKQHI.js";
+} from "./QTOJ32BQ.js";
 import {
   disableTreeOutside
-} from "./4GMZGYHX.js";
+} from "./CKSO3V6B.js";
 import {
   disableAccessibilityTreeOutside
-} from "./EKB2TUKR.js";
+} from "./265D6T7T.js";
 import {
   usePreventBodyScroll
-} from "./LMWFU6EQ.js";
+} from "./MCW3SATG.js";
 import {
   useNestedDialogs
-} from "./NOIOBRWH.js";
+} from "./J4BKICPJ.js";
 import {
   useHideOnInteractOutside
-} from "./H2CSFGIT.js";
+} from "./PZMNV3SF.js";
 import {
   prependHiddenDismiss
 } from "./62DFK33R.js";
 import {
+  isElementMarked,
   markTreeOutside
-} from "./ACAQG6DN.js";
+} from "./TJKNVC7W.js";
 import {
   useFocusableContainer
-} from "./URYSNCDU.js";
+} from "./GKH7N3JM.js";
 import {
   HeadingLevel
 } from "./6OMX4H3W.js";
 import {
   usePortal
-} from "./56DUJ462.js";
+} from "./ENZR4N3P.js";
 import {
   DialogContext,
   DialogDescriptionContext,
@@ -39,24 +40,24 @@ import {
 import {
   isHidden,
   useDisclosureContent
-} from "./YJZ2FEUT.js";
+} from "./WFPVIVLA.js";
 import {
   useFocusable
-} from "./IMP6LK4U.js";
+} from "./OMYYUT2M.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useBooleanEvent,
   useEvent,
-  useForkRef,
   useId,
+  useMergeRefs,
   usePortalRef,
   useSafeLayoutEffect,
   useWrapElement
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -229,12 +230,15 @@ var useDialog = createHook(
       const dialog = ref.current;
       const persistentElements = getPersistentElementsProp() || [];
       const allElements = [
-        // In addition to the dialog element, we also include the portal node here
-        // so nested dialogs are considered as well.
+        // In addition to the dialog element, we also include the portal node
+        // here so nested dialogs are considered as well.
         dialog,
         portalNode,
-        ...nestedDialogs,
-        ...persistentElements
+        ...persistentElements,
+        // We still need to include nested dialogs here because they may be
+        // outside the portal node or the parent dialog may not be using a
+        // portal.
+        ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement)
       ];
       if (!shouldDisableAccessibilityTree) {
         return markTreeOutside(id, disclosureElement, ...allElements);
@@ -368,6 +372,8 @@ var useDialog = createHook(
         const dialog = ref.current;
         if (!dialog)
           return;
+        if (isElementMarked(dialog))
+          return;
         const target = event.target;
         if (!target)
           return;
@@ -387,7 +393,6 @@ var useDialog = createHook(
           return;
         if (!hideOnEscapeProp(event))
           return;
-        event.stopImmediatePropagation();
         store.hide();
       };
       return addGlobalEventListener("keydown", onKeyDown);
@@ -436,7 +441,7 @@ var useDialog = createHook(
       "aria-labelledby": headingId,
       "aria-describedby": descriptionId
     }, props), {
-      ref: useForkRef(ref, props.ref)
+      ref: useMergeRefs(ref, props.ref)
     });
     props = useFocusableContainer(__spreadProps(__spreadValues({}, props), {
       autoFocusOnShow: autoFocusEnabled

package/esm/__chunks/{UZWTAYHH.js → 5DAYRSML.js}

@@ -3,18 +3,18 @@ import {
 } from "./P3I4MECH.js";
 import {
   useCollectionItem
-} from "./CWGC7RDD.js";
+} from "./EJLZ2L22.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useBooleanEvent,
   useEvent,
-  useForkRef,
-  useId
-} from "./JSNCZ2E2.js";
+  useId,
+  useMergeRefs
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -110,7 +110,7 @@ var useFormField = createHook(
       "aria-invalid": invalid
     }, props), {
       "aria-describedby": describedBy || void 0,
-      ref: useForkRef(ref, props.ref),
+      ref: useMergeRefs(ref, props.ref),
       onBlur
     });
     props = useCollectionItem(__spreadProps(__spreadValues({ store }, props), { name, getItem }));

package/esm/__chunks/{6BBYWAIS.js → 5EHZOHU4.js}

@@ -1,17 +1,17 @@
 import {
   useFocusable
-} from "./IMP6LK4U.js";
+} from "./OMYYUT2M.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useBooleanEvent,
   useEvent,
-  useForkRef,
-  useIsMouseMoving
-} from "./JSNCZ2E2.js";
+  useIsMouseMoving,
+  useMergeRefs
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -66,7 +66,7 @@ var useHovercardAnchor = createHook(
       }
     );
     props = __spreadProps(__spreadValues({}, props), {
-      ref: useForkRef(store.setAnchorElement, props.ref),
+      ref: useMergeRefs(store.setAnchorElement, props.ref),
       onMouseMove
     });
     props = useFocusable(props);

package/esm/__chunks/{UYBDYDBM.js → 5NQLWI7E.js}

@@ -2,10 +2,10 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
-  useForkRef
-} from "./JSNCZ2E2.js";
+  useMergeRefs
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -17,7 +17,7 @@ var usePopoverAnchor = createHook(
   (_a) => {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     props = __spreadProps(__spreadValues({}, props), {
-      ref: useForkRef(store.setAnchorElement, props.ref)
+      ref: useMergeRefs(store.setAnchorElement, props.ref)
     });
     return props;
   }

package/esm/__chunks/{6RRCHXOA.js → 5OP64YHR.js}

@@ -1,7 +1,7 @@
 import {
   useStore,
   useStoreProps
-} from "./FY2SXATP.js";
+} from "./USB5JBON.js";
 
 // src/checkbox/checkbox-store.ts
 import * as Core from "@ariakit/core/checkbox/checkbox-store";

package/esm/__chunks/{GJAZZDOH.js → 6P5ZHMMU.js}

@@ -4,27 +4,27 @@ import {
 } from "./HVBRRKV4.js";
 import {
   useCompositeTypeahead
-} from "./XXMIY262.js";
+} from "./ZSRI7KJ2.js";
 import {
   useComposite
-} from "./YBDXDAKQ.js";
+} from "./ZAKCZSVG.js";
 import {
   isHidden
-} from "./YJZ2FEUT.js";
+} from "./WFPVIVLA.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useStoreState
-} from "./FY2SXATP.js";
+} from "./USB5JBON.js";
 import {
   useEvent,
-  useForkRef,
   useId,
+  useMergeRefs,
   useWrapElement
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -139,7 +139,7 @@ var useMenuList = createHook(
       "aria-labelledby": ariaLabelledBy,
       hidden
     }, props), {
-      ref: useForkRef(id ? store.setContentElement : null, props.ref),
+      ref: useMergeRefs(id ? store.setContentElement : null, props.ref),
       style,
       onKeyDown
     });

package/esm/__chunks/{GKEHNDOU.js → 6R5NAG5K.js}

@@ -1,16 +1,16 @@
 import {
   useFocusable
-} from "./IMP6LK4U.js";
+} from "./OMYYUT2M.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useEvent,
-  useForkRef,
+  useMergeRefs,
   useTagName
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -128,7 +128,7 @@ var useCommand = createHook(
       "data-active": active ? "" : void 0,
       type: isNativeButton ? "button" : void 0
     }, props), {
-      ref: useForkRef(ref, props.ref),
+      ref: useMergeRefs(ref, props.ref),
       onKeyDown,
       onKeyUp
     });

package/esm/__chunks/{U2LXZPCY.js → 7GCARSHZ.js}

@@ -1,3 +1,10 @@
+import {
+  useMergeRefs
+} from "./SN2N5P2D.js";
+import {
+  getRefProperty,
+  mergeProps
+} from "./UWUL6FFR.js";
 import {
   __objRest,
   __spreadProps,
@@ -5,7 +12,7 @@ import {
 } from "./4BKCJXBM.js";
 
 // src/utils/system.tsx
-import { forwardRef, memo } from "react";
+import { cloneElement, forwardRef, isValidElement, memo } from "react";
 import { hasOwnProperty } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 function isRenderProp(children) {
@@ -22,8 +29,12 @@ function createMemoComponent(render) {
 function createElement(Type, props) {
   const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
   let element;
+  const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
   if (As && typeof As !== "string") {
     element = /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, rest), { render }));
+  } else if (isValidElement(render)) {
+    const renderProps = __spreadProps(__spreadValues({}, render.props), { ref: mergedRef });
+    element = cloneElement(render, mergeProps(rest, renderProps));
   } else if (render) {
     element = render(rest);
   } else if (isRenderProp(props.children)) {

package/esm/__chunks/{XMEKWVLK.js → 7GXM6KPX.js}

@@ -1,9 +1,9 @@
 import {
   useDialogDisclosure
-} from "./76X52BLD.js";
+} from "./YKJNQJWA.js";
 import {
   usePopoverAnchor
-} from "./UYBDYDBM.js";
+} from "./5NQLWI7E.js";
 import {
   PopoverContext
 } from "./6GS36SYX.js";
@@ -11,11 +11,11 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useEvent,
   useWrapElement
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,

package/esm/__chunks/{GFYEEYL2.js → ACET4OGQ.js}

@@ -1,11 +1,11 @@
 import {
   useCollectionStoreOptions,
   useCollectionStoreProps
-} from "./NVLKN7BK.js";
+} from "./KQUSQ6BH.js";
 import {
   useStore,
   useStoreProps
-} from "./FY2SXATP.js";
+} from "./USB5JBON.js";
 import {
   __spreadValues
 } from "./4BKCJXBM.js";

package/esm/__chunks/{HWYCCPYU.js → AF6MSKOW.js}

@@ -5,11 +5,11 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useId,
   useSafeLayoutEffect
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadValues

package/esm/__chunks/{RIASES6X.js → B2QL7O62.js}

@@ -1,11 +1,11 @@
 import {
   useVisuallyHidden
-} from "./KMIAQUPF.js";
+} from "./K4NEG23J.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   __spreadProps,
   __spreadValues

package/esm/__chunks/{EZKI7X4G.js → B3A7CWGN.js}

@@ -1,11 +1,11 @@
 import {
   useDialogDescription
-} from "./HWYCCPYU.js";
+} from "./AF6MSKOW.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 
 // src/popover/popover-description.ts
 var usePopoverDescription = createHook(

package/esm/__chunks/{QDEVTSDD.js → B4DAIM7E.js}

@@ -1,6 +1,6 @@
 import {
   useButton
-} from "./WPWRDZX3.js";
+} from "./WANT555J.js";
 import {
   DialogContext
 } from "./LNHZLQEK.js";
@@ -8,10 +8,10 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useEvent
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,

package/esm/__chunks/{4GMZGYHX.js → CKSO3V6B.js}

@@ -1,6 +1,6 @@
 import {
   hideElementFromAccessibilityTree
-} from "./EKB2TUKR.js";
+} from "./265D6T7T.js";
 import {
   supportsInert
 } from "./KOVUJERF.js";
@@ -8,7 +8,7 @@ import {
   assignStyle,
   setAttribute,
   setProperty
-} from "./DJESYNLE.js";
+} from "./T6V23Y6E.js";
 import {
   walkTreeOutside
 } from "./FV23EKJL.js";

package/esm/__chunks/{BBUDEDX6.js → DCSOYJXT.js}

@@ -1,11 +1,11 @@
 import {
   useDialogDismiss
-} from "./QDEVTSDD.js";
+} from "./B4DAIM7E.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 
 // src/popover/popover-dismiss.ts
 var usePopoverDismiss = createHook((props) => {