@ariakit/react-core 0.2.7 → 0.2.9

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/dialog/utils/use-root-dialog/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/react-core/dialog/utils/use-root-dialog",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/dialog/utils/use-root-dialog.cjs",
+  "module": "../../../esm/dialog/utils/use-root-dialog.js",
+  "types": "../../../cjs/dialog/utils/use-root-dialog.d.ts"
+}

package/esm/__chunks/{T2QG6N7V.js → 2NDM3R77.js}

@@ -3,21 +3,21 @@ import {
 } from "./5VGBBGF5.js";
 import {
   isHidden
-} from "./YJZ2FEUT.js";
+} from "./WFPVIVLA.js";
 import {
   useFocusable
-} from "./IMP6LK4U.js";
+} from "./YNUPNUID.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useEvent,
-  useForkRef,
   useId,
+  useMergeRefs,
   useWrapElement
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -85,7 +85,7 @@ var useComboboxList = createHook(
       role: "listbox",
       tabIndex: focusable ? -1 : void 0
     }, props), {
-      ref: useForkRef(id ? store.setContentElement : null, ref, props.ref),
+      ref: useMergeRefs(id ? store.setContentElement : null, ref, props.ref),
       style,
       onKeyDown,
       onFocusVisible,

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/{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/{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/{WVBEOY53.js → 6ICCUPPR.js}

@@ -3,21 +3,21 @@ import {
 } from "./6I2PARRP.js";
 import {
   useCompositeItem
-} from "./OTKCW3PM.js";
+} from "./OUTTLNN7.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useStoreState
-} from "./FY2SXATP.js";
+} from "./USB5JBON.js";
 import {
   useEvent,
-  useForkRef,
   useId,
+  useMergeRefs,
   useTagName
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -107,7 +107,7 @@ var useRadio = createHook(
       type: nativeRadio ? "radio" : void 0,
       "aria-checked": isChecked
     }, props), {
-      ref: useForkRef(ref, props.ref),
+      ref: useMergeRefs(ref, props.ref),
       onChange,
       onClick,
       onFocus

package/esm/__chunks/{XMEKWVLK.js → 77C2ITJF.js}

@@ -1,9 +1,9 @@
 import {
   useDialogDisclosure
-} from "./76X52BLD.js";
+} from "./KF3PP2P3.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/{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/{YBDXDAKQ.js → 7MJF27QJ.js}

@@ -10,19 +10,19 @@ import {
 } from "./Z3X3QN6P.js";
 import {
   useFocusable
-} from "./IMP6LK4U.js";
+} from "./YNUPNUID.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   useBooleanEvent,
   useEvent,
-  useForkRef,
+  useMergeRefs,
   useSafeLayoutEffect,
   useWrapElement
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -314,7 +314,7 @@ var useComposite = createHook(
     props = __spreadProps(__spreadValues({
       "aria-activedescendant": activeDescendant
     }, props), {
-      ref: useForkRef(composite ? store.setBaseElement : null, props.ref),
+      ref: useMergeRefs(composite ? store.setBaseElement : null, props.ref),
       onKeyDownCapture,
       onKeyUpCapture,
       onFocusCapture,

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/{265D6T7T.js → CYJJUQU3.js}

@@ -1,6 +1,9 @@
+import {
+  isBackdrop
+} from "./IXXFVVA2.js";
 import {
   setAttribute
-} from "./T6V23Y6E.js";
+} from "./FW6QFGFT.js";
 import {
   walkTreeOutside
 } from "./FV23EKJL.js";
@@ -11,7 +14,10 @@ function hideElementFromAccessibilityTree(element) {
 }
 function disableAccessibilityTreeOutside(...elements) {
   const cleanups = [];
+  const ids = elements.map((el) => el == null ? void 0 : el.id);
   walkTreeOutside(elements, (element) => {
+    if (isBackdrop(element, ...ids))
+      return;
     cleanups.unshift(hideElementFromAccessibilityTree(element));
   });
   const restoreAccessibilityTree = () => {

package/esm/__chunks/{CWGC7RDD.js → EJLZ2L22.js}

@@ -5,11 +5,11 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
-  useForkRef,
-  useId
-} from "./JSNCZ2E2.js";
+  useId,
+  useMergeRefs
+} from "./SN2N5P2D.js";
 import {
   __objRest,
   __spreadProps,
@@ -38,7 +38,7 @@ var useCollectionItem = createHook(
       [id, shouldRegisterItem, getItem, store]
     );
     props = __spreadProps(__spreadValues({}, props), {
-      ref: useForkRef(ref, props.ref)
+      ref: useMergeRefs(ref, props.ref)
     });
     return props;
   }

package/esm/__chunks/{56DUJ462.js → ENZR4N3P.js}

@@ -1,6 +1,6 @@
 import {
   FocusTrap
-} from "./RIASES6X.js";
+} from "./B2QL7O62.js";
 import {
   PortalContext
 } from "./LDDPB3PY.js";
@@ -8,15 +8,15 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
-  useForkRef,
+  useMergeRefs,
   useSafeLayoutEffect,
   useWrapElement
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   setRef
-} from "./SXC6BPOF.js";
+} from "./UWUL6FFR.js";
 import {
   __objRest,
   __spreadProps,
@@ -59,7 +59,7 @@ var usePortal = createHook(
   (_a) => {
     var _b = _a, { preserveTabOrder, portalElement, portalRef, portal = true } = _b, props = __objRest(_b, ["preserveTabOrder", "portalElement", "portalRef", "portal"]);
     const ref = useRef(null);
-    const refProp = useForkRef(ref, props.ref);
+    const refProp = useMergeRefs(ref, props.ref);
     const context = useContext(PortalContext);
     const [portalNode, setPortalNode] = useState(null);
     const outerBeforeRef = useRef(null);

package/esm/__chunks/{WPWRDZX3.js → EUD77B6Z.js}

@@ -1,15 +1,15 @@
 import {
   useCommand
-} from "./GKEHNDOU.js";
+} from "./WQIYBPAY.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
-  useForkRef,
+  useMergeRefs,
   useTagName
-} from "./JSNCZ2E2.js";
+} from "./SN2N5P2D.js";
 import {
   __spreadProps,
   __spreadValues
@@ -32,7 +32,7 @@ var useButton = createHook((props) => {
   props = __spreadProps(__spreadValues({
     role: !isNativeButton && tagName !== "a" ? "button" : void 0
   }, props), {
-    ref: useForkRef(ref, props.ref)
+    ref: useMergeRefs(ref, props.ref)
   });
   props = useCommand(props);
   return props;

package/esm/__chunks/{GL6H2TE2.js → FK3LYGHG.js}

@@ -1,6 +1,6 @@
 import {
   useSeparator
-} from "./2COVM63T.js";
+} from "./QLHYK3GC.js";
 import {
   CompositeContext
 } from "./Z3X3QN6P.js";
@@ -8,7 +8,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./U2LXZPCY.js";
+} from "./7GCARSHZ.js";
 import {
   __objRest,
   __spreadProps,

package/esm/__chunks/{T6V23Y6E.js → FW6QFGFT.js}

@@ -1,10 +1,10 @@
 // src/dialog/utils/orchestrate.ts
-var cleanups = Symbol();
+var cleanups = /* @__PURE__ */ new WeakMap();
 function orchestrate(element, key, setup) {
-  if (!element[cleanups]) {
-    element[cleanups] = /* @__PURE__ */ new Map();
+  if (!cleanups.has(element)) {
+    cleanups.set(element, /* @__PURE__ */ new Map());
   }
-  const elementCleanups = element[cleanups];
+  const elementCleanups = cleanups.get(element);
   const prevCleanup = elementCleanups.get(key);
   if (!prevCleanup) {
     elementCleanups.set(key, setup());
@@ -22,7 +22,8 @@ function orchestrate(element, key, setup) {
   };
   elementCleanups.set(key, nextCleanup);
   return () => {
-    if (elementCleanups.get(key) !== nextCleanup)
+    const isCurrent = elementCleanups.get(key) === nextCleanup;
+    if (!isCurrent)
       return;
     cleanup();
     elementCleanups.set(key, prevCleanup);