@ariakit/react-core 0.3.14 → 0.4.0

package/esm/__chunks/{7X4DYKYU.js → NIWODFOI.js}

@@ -1,15 +1,15 @@
 "use client";
 import {
   useHovercardProviderContext
-} from "./TI7CMBHW.js";
+} from "./TWDHCE7Y.js";
 import {
   useFocusable
-} from "./KK7H3W2B.js";
+} from "./VA234QKF.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -26,8 +26,9 @@ import {
 import { useCallback, useEffect, useRef } from "react";
 import { addGlobalEventListener } from "@ariakit/core/utils/events";
 import { disabledFromProps, invariant } from "@ariakit/core/utils/misc";
+var TagName = "a";
 var useHovercardAnchor = createHook(
-  (_a) => {
+  function useHovercardAnchor2(_a) {
     var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
     const context = useHovercardProviderContext();
     store = store || context;
@@ -55,43 +56,41 @@ var useHovercardAnchor = createHook(
     const onMouseMoveProp = props.onMouseMove;
     const showOnHoverProp = useBooleanEvent(showOnHover);
     const isMouseMoving = useIsMouseMoving();
-    const onMouseMove = useEvent(
-      (event) => {
-        onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
-        if (disabled)
-          return;
-        if (!store)
-          return;
-        if (event.defaultPrevented)
-          return;
-        if (showTimeoutRef.current)
-          return;
+    const onMouseMove = useEvent((event) => {
+      onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
+      if (disabled)
+        return;
+      if (!store)
+        return;
+      if (event.defaultPrevented)
+        return;
+      if (showTimeoutRef.current)
+        return;
+      if (!isMouseMoving())
+        return;
+      if (!showOnHoverProp(event))
+        return;
+      const element = event.currentTarget;
+      store.setAnchorElement(element);
+      store.setDisclosureElement(element);
+      const { showTimeout, timeout } = store.getState();
+      const showHovercard = () => {
+        showTimeoutRef.current = 0;
         if (!isMouseMoving())
           return;
-        if (!showOnHoverProp(event))
-          return;
-        const element = event.currentTarget;
-        store.setAnchorElement(element);
-        store.setDisclosureElement(element);
-        const { showTimeout, timeout } = store.getState();
-        const showHovercard = () => {
-          showTimeoutRef.current = 0;
-          if (!isMouseMoving())
-            return;
-          store == null ? void 0 : store.setAnchorElement(element);
-          store == null ? void 0 : store.show();
-          queueMicrotask(() => {
-            store == null ? void 0 : store.setDisclosureElement(element);
-          });
-        };
-        const timeoutMs = showTimeout != null ? showTimeout : timeout;
-        if (timeoutMs === 0) {
-          showHovercard();
-        } else {
-          showTimeoutRef.current = window.setTimeout(showHovercard, timeoutMs);
-        }
+        store == null ? void 0 : store.setAnchorElement(element);
+        store == null ? void 0 : store.show();
+        queueMicrotask(() => {
+          store == null ? void 0 : store.setDisclosureElement(element);
+        });
+      };
+      const timeoutMs = showTimeout != null ? showTimeout : timeout;
+      if (timeoutMs === 0) {
+        showHovercard();
+      } else {
+        showTimeoutRef.current = window.setTimeout(showHovercard, timeoutMs);
       }
-    );
+    });
     const ref = useCallback(
       (element) => {
         if (!store)
@@ -111,15 +110,10 @@ var useHovercardAnchor = createHook(
     return props;
   }
 );
-var HovercardAnchor = createComponent(
-  (props) => {
-    const htmlProps = useHovercardAnchor(props);
-    return createElement("a", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  HovercardAnchor.displayName = "HovercardAnchor";
-}
+var HovercardAnchor = forwardRef(function HovercardAnchor2(props) {
+  const htmlProps = useHovercardAnchor(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useHovercardAnchor,

package/esm/__chunks/{JCH6MLL2.js → NLT7LY5Y.js}

@@ -1,12 +1,12 @@
 "use client";
 import {
   usePopoverProviderContext
-} from "./7H5KSHHF.js";
+} from "./TE637IA7.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useMergeRefs
 } from "./6O5OEQGF.js";
@@ -17,8 +17,9 @@ import {
 } from "./4R3V3JGP.js";
 
 // src/popover/popover-anchor.ts
+var TagName = "div";
 var usePopoverAnchor = createHook(
-  (_a) => {
+  function usePopoverAnchor2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = usePopoverProviderContext();
     store = store || context;
@@ -28,13 +29,10 @@ var usePopoverAnchor = createHook(
     return props;
   }
 );
-var PopoverAnchor = createComponent((props) => {
+var PopoverAnchor = forwardRef(function PopoverAnchor2(props) {
   const htmlProps = usePopoverAnchor(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  PopoverAnchor.displayName = "PopoverAnchor";
-}
 
 export {
   usePopoverAnchor,

package/esm/__chunks/{H3TG2CZP.js → NNMCIH2I.js}

@@ -1,15 +1,15 @@
 "use client";
 import {
   useDisclosure
-} from "./BHEJ6NUH.js";
+} from "./TNUQLYBS.js";
 import {
   useDialogProviderContext
-} from "./G6BJYYBK.js";
+} from "./XXVAHUAO.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
@@ -18,8 +18,9 @@ import {
 // src/dialog/dialog-disclosure.ts
 import { getPopupRole } from "@ariakit/core/utils/dom";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "button";
 var useDialogDisclosure = createHook(
-  (_a) => {
+  function useDialogDisclosure2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useDialogProviderContext();
     store = store || context;
@@ -35,15 +36,10 @@ var useDialogDisclosure = createHook(
     return props;
   }
 );
-var DialogDisclosure = createComponent(
-  (props) => {
-    const htmlProps = useDialogDisclosure(props);
-    return createElement("button", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  DialogDisclosure.displayName = "DialogDisclosure";
-}
+var DialogDisclosure = forwardRef(function DialogDisclosure2(props) {
+  const htmlProps = useDialogDisclosure(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useDialogDisclosure,

package/esm/__chunks/{TQYOGOE2.js → NOYDL3YS.js}

@@ -46,11 +46,22 @@ function disableTree(element, ignoredElements) {
 function disableTreeOutside(id, elements) {
   const cleanups = [];
   const ids = elements.map((el) => el == null ? void 0 : el.id);
-  walkTreeOutside(id, elements, (element) => {
-    if (isBackdrop(element, ...ids))
-      return;
-    cleanups.unshift(disableTree(element, elements));
-  });
+  walkTreeOutside(
+    id,
+    elements,
+    (element) => {
+      if (isBackdrop(element, ...ids))
+        return;
+      cleanups.unshift(disableTree(element, elements));
+    },
+    (element) => {
+      if (!element.hasAttribute("role"))
+        return;
+      if (elements.some((el) => el && contains(el, element)))
+        return;
+      cleanups.unshift(setAttribute(element, "role", "none"));
+    }
+  );
   const restoreTreeOutside = () => {
     cleanups.forEach((fn) => fn());
   };

package/esm/__chunks/P3YRKQQJ.js

@@ -0,0 +1,25 @@
+"use client";
+import {
+  usePopoverDescription
+} from "./G7KEAOBE.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+
+// src/hovercard/hovercard-description.ts
+var TagName = "p";
+var useHovercardDescription = createHook(function useHovercardDescription2(props) {
+  props = usePopoverDescription(props);
+  return props;
+});
+var HovercardDescription = forwardRef(function HovercardDescription2(props) {
+  const htmlProps = useHovercardDescription(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useHovercardDescription,
+  HovercardDescription
+};

package/esm/__chunks/{I4Q3C2VT.js → PW2PHOSG.js}

@@ -3,10 +3,11 @@ import {
   selectTextField
 } from "./3IEDWLST.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef,
+  memo
+} from "./5M6RSQEC.js";
 import {
   useEvent
 } from "./6O5OEQGF.js";
@@ -22,6 +23,8 @@ import {
   getTextboxSelection,
   isTextField
 } from "@ariakit/core/utils/dom";
+import { removeUndefinedValues } from "@ariakit/core/utils/misc";
+var TagName = "input";
 function getValueLength(element) {
   if (isTextField(element)) {
     return element.value.length;
@@ -33,29 +36,27 @@ function getValueLength(element) {
   return 0;
 }
 var useCompositeInput = createHook(
-  (_a) => {
+  function useCompositeInput2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const onKeyDownCaptureProp = props.onKeyDownCapture;
-    const onKeyDownCapture = useEvent(
-      (event) => {
-        onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
-        if (event.defaultPrevented)
-          return;
-        const element = event.currentTarget;
-        if (!element.isContentEditable && !isTextField(element))
-          return;
-        const selection = getTextboxSelection(element);
-        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-          if (selection.end !== getValueLength(element)) {
-            event.stopPropagation();
-          }
-        } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-          if (selection.start !== 0) {
-            event.stopPropagation();
-          }
+    const onKeyDownCapture = useEvent((event) => {
+      onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
+      if (event.defaultPrevented)
+        return;
+      const element = event.currentTarget;
+      if (!element.isContentEditable && !isTextField(element))
+        return;
+      const selection = getTextboxSelection(element);
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        if (selection.end !== getValueLength(element)) {
+          event.stopPropagation();
+        }
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        if (selection.start !== 0) {
+          event.stopPropagation();
         }
       }
-    );
+    });
     const onFocusProp = props.onFocus;
     const onFocus = useEvent((event) => {
       onFocusProp == null ? void 0 : onFocusProp(event);
@@ -67,18 +68,15 @@ var useCompositeInput = createHook(
       onKeyDownCapture,
       onFocus
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var CompositeInput = createComponent(
-  (props) => {
+var CompositeInput = memo(
+  forwardRef(function CompositeInput2(props) {
     const htmlProps = useCompositeInput(props);
-    return createElement("input", htmlProps);
-  }
+    return createElement(TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  CompositeInput.displayName = "CompositeInput";
-}
 
 export {
   useCompositeInput,

package/esm/__chunks/RZWNNUWF.js

@@ -0,0 +1,64 @@
+"use client";
+import {
+  useDialogDisclosure
+} from "./NNMCIH2I.js";
+import {
+  usePopoverAnchor
+} from "./NLT7LY5Y.js";
+import {
+  PopoverScopedContextProvider,
+  usePopoverProviderContext
+} from "./TE637IA7.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useEvent,
+  useWrapElement
+} from "./6O5OEQGF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/popover/popover-disclosure.tsx
+import { invariant } from "@ariakit/core/utils/misc";
+import { jsx } from "react/jsx-runtime";
+var TagName = "button";
+var usePopoverDisclosure = createHook(function usePopoverDisclosure2(_a) {
+  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  const context = usePopoverProviderContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
+  );
+  const onClickProp = props.onClick;
+  const onClick = useEvent((event) => {
+    store == null ? void 0 : store.setAnchorElement(event.currentTarget);
+    onClickProp == null ? void 0 : onClickProp(event);
+  });
+  props = useWrapElement(
+    props,
+    (element) => /* @__PURE__ */ jsx(PopoverScopedContextProvider, { value: store, children: element }),
+    [store]
+  );
+  props = __spreadProps(__spreadValues({}, props), {
+    onClick
+  });
+  props = usePopoverAnchor(__spreadValues({ store }, props));
+  props = useDialogDisclosure(__spreadValues({ store }, props));
+  return props;
+});
+var PopoverDisclosure = forwardRef(function PopoverDisclosure2(props) {
+  const htmlProps = usePopoverDisclosure(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  usePopoverDisclosure,
+  PopoverDisclosure
+};

package/esm/__chunks/{UK7JL7PY.js → S7DYINJG.js}

@@ -2,18 +2,18 @@
 import {
   MenubarScopedContextProvider,
   useMenubarProviderContext
-} from "./KA4GX64Z.js";
+} from "./VBF5EZBB.js";
 import {
   useMenubarStore
 } from "./HVBNG5AF.js";
 import {
   useComposite
-} from "./7QTPYGNZ.js";
+} from "./6WQW7ZIA.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useWrapElement
 } from "./6O5OEQGF.js";
@@ -24,8 +24,9 @@ import {
 
 // src/menubar/menubar.tsx
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 var useMenubar = createHook(
-  (_a) => {
+  function useMenubar2(_a) {
     var _b = _a, {
       store: storeProp,
       composite = true,
@@ -68,13 +69,10 @@ var useMenubar = createHook(
     return props;
   }
 );
-var Menubar = createComponent((props) => {
+var Menubar = forwardRef(function Menubar2(props) {
   const htmlProps = useMenubar(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Menubar.displayName = "Menubar";
-}
 
 export {
   useMenubar,

package/esm/__chunks/{YZEJGRDQ.js → SDQLXKEV.js}

@@ -1,17 +1,18 @@
 "use client";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/separator/separator.ts
+var TagName = "hr";
 var useSeparator = createHook(
-  (_a) => {
+  function useSeparator2(_a) {
     var _b = _a, { orientation = "horizontal" } = _b, props = __objRest(_b, ["orientation"]);
     props = __spreadValues({
       role: "separator",
@@ -20,13 +21,10 @@ var useSeparator = createHook(
     return props;
   }
 );
-var Separator = createComponent((props) => {
+var Separator = forwardRef(function Separator2(props) {
   const htmlProps = useSeparator(props);
-  return createElement("hr", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Separator.displayName = "Separator";
-}
 
 export {
   useSeparator,