@ariakit/react-core 0.1.8 → 0.2.1

package/cjs/utils/types.d.ts

@@ -1,26 +1,25 @@
-import type { ComponentPropsWithRef, ElementType, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
-import type { AnyObject } from "@ariakit/core/utils/types";
+import type * as React from "react";
 /**
  * Render prop type.
  * @template P Props
  * @example
  * const children: RenderProp = (props) => <div {...props} />;
  */
-export type RenderProp<P = AnyObject> = (props: P) => ReactNode;
+export type RenderProp<P = React.HTMLAttributes<any> & React.RefAttributes<any>> = (props: P) => React.ReactNode;
 /**
  * The `as` prop.
  * @template P Props
  */
-export type As<P = any> = ElementType<P>;
+export type As<P = any> = React.ElementType<P>;
 /**
  * The `wrapElement` prop.
  */
-export type WrapElement = (element: ReactElement) => ReactElement;
+export type WrapElement = (element: React.ReactElement) => React.ReactElement;
 /**
  * The `children` prop that supports a function.
  * @template T Element type.
  */
-export type Children<T = any> = ReactNode | RenderProp<HTMLAttributes<T> & RefAttributes<T>>;
+export type Children<T = any> = React.ReactNode | RenderProp<React.HTMLAttributes<T> & React.RefAttributes<T>>;
 /**
  * Props with the `as` prop.
  * @template T The `as` prop
@@ -39,8 +38,9 @@ export type Options<T extends As = any> = {
 export type HTMLProps<O extends Options> = {
     wrapElement?: WrapElement;
     children?: Children;
+    render?: RenderProp;
     [index: `data-${string}`]: unknown;
-} & Omit<ComponentPropsWithRef<NonNullable<O["as"]>>, keyof O | "children">;
+} & Omit<React.ComponentPropsWithRef<NonNullable<O["as"]>>, keyof O | "children">;
 /**
  * Options & HTMLProps
  * @template O Options
@@ -55,11 +55,13 @@ export type Props<O extends Options> = O & HTMLProps<O>;
  * @example
  * type ButtonComponent = Component<Options<"button">>;
  */
-export type Component<O extends Options> = {
-    <T extends As>(props: Omit<O, "as"> & Omit<HTMLProps<Options<T>>, keyof O> & Required<Options<T>>): JSX.Element | null;
-    (props: Props<O>): JSX.Element | null;
+export interface Component<O extends Options> {
+    <T extends As>(props: Props<{
+        as: T;
+    } & Omit<O, "as">>): React.ReactElement | null;
+    (props: Props<O>): React.ReactElement | null;
     displayName?: string;
-};
+}
 /**
  * A component hook that supports the `as` prop and the `children` prop as a
  * function.
@@ -67,7 +69,7 @@ export type Component<O extends Options> = {
  * @example
  * type ButtonHook = Hook<Options<"button">>;
  */
-export type Hook<O extends Options> = {
-    <T extends As = NonNullable<O["as"]>>(props?: Omit<O, "as"> & Omit<HTMLProps<Options<T>>, keyof O> & Options<T>): HTMLProps<Options<T>>;
+export interface Hook<O extends Options> {
+    <T extends As = NonNullable<O["as"]>>(props?: Props<Options<T> & Omit<O, "as">>): HTMLProps<Options<T>>;
     displayName?: string;
-};
+}

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

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _QTPUX3NMcjs = require('../__chunks/QTPUX3NM.cjs');
-require('../__chunks/7NAIPZYN.cjs');
+var _VYKCWICKcjs = require('../__chunks/VYKCWICK.cjs');
+require('../__chunks/5U7AP6Y2.cjs');
 require('../__chunks/6455U47T.cjs');
 
 
 
-exports.VisuallyHidden = _QTPUX3NMcjs.VisuallyHidden; exports.useVisuallyHidden = _QTPUX3NMcjs.useVisuallyHidden;
+exports.VisuallyHidden = _VYKCWICKcjs.VisuallyHidden; exports.useVisuallyHidden = _VYKCWICKcjs.useVisuallyHidden;

package/esm/__chunks/{E6PO3W4O.js → 2A7SHVQX.js}

@@ -1,11 +1,11 @@
 import {
   useGroup
-} from "./ECY3BFPU.js";
+} from "./PPIHKGNC.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest
 } from "./4BKCJXBM.js";

package/esm/__chunks/{KPEUI6QX.js → 2COVM63T.js}

@@ -2,7 +2,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest,
   __spreadValues

package/esm/__chunks/{X7UZWWYG.js → 2VSLIXPB.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useForkRef,
   useId

package/esm/__chunks/{MHR7JFVW.js → 3U3YLBMV.js}

@@ -1,11 +1,11 @@
 import {
   usePopoverDisclosureArrow
-} from "./TFLZHAF5.js";
+} from "./KTJKD3FC.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest,
   __spreadValues

package/esm/__chunks/{ZFMAA4DD.js → 44D6W47E.js}

@@ -1,9 +1,12 @@
 import {
   markAncestor
 } from "./BH4YAZB2.js";
+import {
+  Role
+} from "./R35SLIEE.js";
 import {
   useDisclosureContent
-} from "./6AJCHLAV.js";
+} from "./WYKPGIVG.js";
 import {
   useForkRef,
   useSafeLayoutEffect
@@ -14,15 +17,14 @@ import {
 } from "./4BKCJXBM.js";
 
 // src/dialog/dialog-backdrop.tsx
-import { useMemo, useRef } from "react";
+import { cloneElement, isValidElement, useMemo, useRef } from "react";
 import { noop } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 function DialogBackdrop({
   store,
   backdrop,
   backdropProps,
-  hidden,
-  children
+  hidden
 }) {
   const ref = useRef(null);
   store = useMemo(
@@ -52,11 +54,15 @@ function DialogBackdrop({
       return;
     return markAncestor(backdrop2, id);
   }, [contentElement]);
+  backdropProps = isValidElement(backdrop) ? __spreadValues(__spreadValues({
+    ref: "ref" in backdrop ? backdrop.ref : void 0
+  }, backdrop.props), backdropProps) : backdropProps;
   const props = useDisclosureContent(__spreadProps(__spreadValues({
     store,
     id: void 0,
     role: "presentation",
-    hidden
+    hidden,
+    "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || ""
   }, backdropProps), {
     ref: useForkRef(backdropProps == null ? void 0 : backdropProps.ref, ref),
     style: __spreadValues({
@@ -67,8 +73,13 @@ function DialogBackdrop({
       left: 0
     }, backdropProps == null ? void 0 : backdropProps.style)
   }));
+  if (!backdrop)
+    return null;
+  if (isValidElement(backdrop)) {
+    return /* @__PURE__ */ jsx(Role, __spreadProps(__spreadValues({}, props), { render: (props2) => cloneElement(backdrop, props2) }));
+  }
   const Component = typeof backdrop !== "boolean" ? backdrop || "div" : "div";
-  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, props), { "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "", children }));
+  return /* @__PURE__ */ jsx(Role, __spreadProps(__spreadValues({}, props), { as: Component }));
 }
 
 export {

package/esm/__chunks/{B7WY5IEM.js → 4GZHHNFX.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useEvent,
   useForkRef,

package/esm/__chunks/{4QNHBDVS.js → 5KLYDORO.js}

@@ -1,11 +1,11 @@
 import {
   useFocusable
-} from "./AGWM73EZ.js";
+} from "./K4QQOEEY.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useEvent,
   useForkRef,

package/esm/__chunks/5PIH3SMS.js

@@ -0,0 +1,35 @@
+import {
+  useDialogStoreOptions,
+  useDialogStoreProps
+} from "./OBNQHP6V.js";
+import {
+  useStore,
+  useStoreProps
+} from "./AV5WE37O.js";
+import {
+  __spreadValues
+} from "./4BKCJXBM.js";
+
+// src/popover/popover-store.ts
+import * as Core from "@ariakit/core/popover/popover-store";
+function usePopoverStoreOptions(props) {
+  return useDialogStoreOptions(props);
+}
+function usePopoverStoreProps(store, props) {
+  store = useDialogStoreProps(store, props);
+  useStoreProps(store, props, "placement");
+  return store;
+}
+function usePopoverStore(props = {}) {
+  const options = usePopoverStoreOptions(props);
+  const store = useStore(
+    () => Core.createPopoverStore(__spreadValues(__spreadValues({}, props), options))
+  );
+  return usePopoverStoreProps(store, props);
+}
+
+export {
+  usePopoverStoreOptions,
+  usePopoverStoreProps,
+  usePopoverStore
+};

package/esm/__chunks/{DQSQP4IL.js → 6JQLJMUQ.js}

@@ -4,15 +4,15 @@ import {
 } from "./HVBRRKV4.js";
 import {
   useCompositeTypeahead
-} from "./KSVEVAMH.js";
+} from "./GRNO2YNE.js";
 import {
   useComposite
-} from "./OY5YT7OV.js";
+} from "./JM74EEHT.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useStoreState
 } from "./AV5WE37O.js";

package/esm/__chunks/{LPZMU6Z4.js → 7DPLTL4U.js}

@@ -6,7 +6,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useId,
   useWrapElement

package/esm/__chunks/{HWXCBMWZ.js → 7SVOWQTM.js}

@@ -1,11 +1,11 @@
 import {
   useGroupLabel
-} from "./JNCKMFIN.js";
+} from "./RGAE7WHK.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   __objRest
 } from "./4BKCJXBM.js";

package/esm/__chunks/{PZK3B6LX.js → BRUBRRXY.js}

@@ -1,17 +1,17 @@
 import {
   useCompositeTypeahead
-} from "./KSVEVAMH.js";
+} from "./GRNO2YNE.js";
 import {
   SelectContext
 } from "./EEVSGAZW.js";
 import {
   useComposite
-} from "./OY5YT7OV.js";
+} from "./JM74EEHT.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{HFDCAETG.js → C2EK56NQ.js}

@@ -3,12 +3,12 @@ import {
 } from "./M5KYRTQG.js";
 import {
   useCommand
-} from "./4QNHBDVS.js";
+} from "./5KLYDORO.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useStoreState
 } from "./AV5WE37O.js";

package/esm/__chunks/{6O3TZMB4.js → CUXAE5EP.js}

@@ -1,17 +1,17 @@
 import {
   useDialogDisclosure
-} from "./LSTZ5Q72.js";
+} from "./PI5KZQST.js";
+import {
+  usePopoverAnchor
+} from "./NBC642OI.js";
 import {
   PopoverContext
 } from "./6GS36SYX.js";
-import {
-  usePopoverAnchor
-} from "./D6NPK2DL.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useEvent,
   useWrapElement

package/esm/__chunks/{RPJS3S4B.js → F6CM5SN4.js}

@@ -7,15 +7,15 @@ import {
 } from "./W7JXAQKF.js";
 import {
   useCompositeHover
-} from "./UGXJ5IN7.js";
+} from "./Y2V2DFHD.js";
 import {
   useCompositeItem
-} from "./M32DI6TL.js";
+} from "./X4UE5ZYC.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useStoreState
 } from "./AV5WE37O.js";

package/esm/__chunks/{6WVG5KFF.js → FYVEOR7R.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useWrapElement
 } from "./ASYR66PQ.js";

package/esm/__chunks/{R3XRDDO7.js → GHFGDKVL.js}

@@ -1,11 +1,11 @@
 import {
   usePopoverHeading
-} from "./MR7KGB6U.js";
+} from "./THRMCR5V.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 
 // src/hovercard/hovercard-heading.ts
 var useHovercardHeading = createHook(

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

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

package/esm/__chunks/{4JRG3QNR.js → GQ73PJK4.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useId,
   useSafeLayoutEffect

package/esm/__chunks/{KSVEVAMH.js → GRNO2YNE.js}

@@ -8,7 +8,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useEvent
 } from "./ASYR66PQ.js";

package/esm/__chunks/{65MJJ4BW.js → HJ244IIK.js}

@@ -1,11 +1,11 @@
 import {
   useFocusable
-} from "./AGWM73EZ.js";
+} from "./K4QQOEEY.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{USCWE5QL.js → HNQXN4AI.js}

@@ -1,6 +1,6 @@
 import {
   FocusTrap
-} from "./DIO64N2C.js";
+} from "./RIASES6X.js";
 import {
   PortalContext
 } from "./LDDPB3PY.js";
@@ -8,7 +8,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useForkRef,
   useSafeLayoutEffect,
@@ -62,10 +62,10 @@ var usePortal = createHook(
     const refProp = useForkRef(ref, props.ref);
     const context = useContext(PortalContext);
     const [portalNode, setPortalNode] = useState(null);
-    const beforeOutsideRef = useRef(null);
-    const beforeInsideRef = useRef(null);
-    const afterInsideRef = useRef(null);
-    const afterOutsideRef = useRef(null);
+    const outerBeforeRef = useRef(null);
+    const innerBeforeRef = useRef(null);
+    const innerAfterRef = useRef(null);
+    const outerAfterRef = useRef(null);
     useSafeLayoutEffect(() => {
       const element = ref.current;
       if (!element || !portal) {
@@ -83,7 +83,7 @@ var usePortal = createHook(
         rootElement.appendChild(portalEl);
       }
       if (!portalEl.id) {
-        portalEl.id = element.id ? `${element.id}-portal` : getRandomId();
+        portalEl.id = element.id ? `portal/${element.id}` : getRandomId();
       }
       setPortalNode(portalEl);
       setRef(portalRef, portalEl);
@@ -142,12 +142,13 @@ var usePortal = createHook(
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
-              ref: beforeInsideRef,
+              ref: innerBeforeRef,
+              className: "__focus-trap-inner-before",
               onFocus: (event) => {
                 if (isFocusEventOutside(event, portalNode)) {
                   queueFocus(getNextTabbable());
                 } else {
-                  queueFocus(beforeOutsideRef.current);
+                  queueFocus(outerBeforeRef.current);
                 }
               }
             }
@@ -156,12 +157,13 @@ var usePortal = createHook(
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
-              ref: afterInsideRef,
+              ref: innerAfterRef,
+              className: "__focus-trap-inner-after",
               onFocus: (event) => {
                 if (isFocusEventOutside(event, portalNode)) {
                   queueFocus(getPreviousTabbable());
                 } else {
-                  queueFocus(afterOutsideRef.current);
+                  queueFocus(outerAfterRef.current);
                 }
               }
             }
@@ -174,10 +176,12 @@ var usePortal = createHook(
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
-              ref: beforeOutsideRef,
+              ref: outerBeforeRef,
+              className: "__focus-trap-outer-before",
               onFocus: (event) => {
-                if (isFocusEventOutside(event, portalNode)) {
-                  queueFocus(beforeInsideRef.current);
+                const fromOuter = event.relatedTarget === outerAfterRef.current;
+                if (!fromOuter && isFocusEventOutside(event, portalNode)) {
+                  queueFocus(innerBeforeRef.current);
                 } else {
                   queueFocus(getPreviousTabbable());
                 }
@@ -191,12 +195,21 @@ var usePortal = createHook(
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
-              ref: afterOutsideRef,
+              ref: outerAfterRef,
+              className: "__focus-trap-outer-after",
               onFocus: (event) => {
                 if (isFocusEventOutside(event, portalNode)) {
-                  queueFocus(afterInsideRef.current);
+                  queueFocus(innerAfterRef.current);
                 } else {
-                  queueFocus(getNextTabbable());
+                  const nextTabbable = getNextTabbable();
+                  if (nextTabbable === innerBeforeRef.current) {
+                    requestAnimationFrame(() => {
+                      var _a2;
+                      return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
+                    });
+                    return;
+                  }
+                  queueFocus(nextTabbable);
                 }
               }
             }

package/esm/__chunks/{6M5FZNI5.js → IMFOFYLN.js}

@@ -3,12 +3,12 @@ import {
 } from "./P3I4MECH.js";
 import {
   useCollectionItem
-} from "./X7UZWWYG.js";
+} from "./2VSLIXPB.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{OY5YT7OV.js → JM74EEHT.js}

@@ -5,17 +5,17 @@ import {
   isItem,
   silentlyFocused
 } from "./OXPV2NBK.js";
-import {
-  useFocusable
-} from "./AGWM73EZ.js";
 import {
   CompositeContext
 } from "./Z3X3QN6P.js";
+import {
+  useFocusable
+} from "./K4QQOEEY.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/__chunks/{C5MG6ALB.js → JTWJOAF2.js}

@@ -3,12 +3,12 @@ import {
 } from "./6I2PARRP.js";
 import {
   useCompositeItem
-} from "./M32DI6TL.js";
+} from "./X4UE5ZYC.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useStoreState
 } from "./AV5WE37O.js";

package/esm/__chunks/{UBPCHT5E.js → K4JNSIDS.js}

@@ -8,7 +8,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useForkRef,
   useSafeLayoutEffect

package/esm/__chunks/{AGWM73EZ.js → K4QQOEEY.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./5ETIGB6O.js";
+} from "./U2LXZPCY.js";
 import {
   useEvent,
   useForkRef,

package/esm/__chunks/{3FKA4P4C.js → K5R24MFH.js}

@@ -1,7 +1,7 @@
 import {
   usePopoverStoreOptions,
   usePopoverStoreProps
-} from "./SHGWT5HV.js";
+} from "./5PIH3SMS.js";
 import {
   useStore
 } from "./AV5WE37O.js";