@ariakit/react-core 0.1.7 → 0.2.0

package/esm/select/select-store.d.ts

@@ -6,13 +6,6 @@ import type { Store } from "../utils/store.js";
 type Item = Core.SelectStoreItem;
 type Value = Core.SelectStoreValue;
 export declare function useSelectStoreOptions<T extends Value = Value>(props: SelectStoreProps<T>): {
-    getAnchorRect: ((anchor: HTMLElement | null) => {
-        x?: number | undefined;
-        y?: number | undefined;
-        width?: number | undefined;
-        height?: number | undefined;
-    } | null) | undefined;
-    renderCallback: ((props: import("@ariakit/core/popover/popover-store").PopoverStoreRenderCallbackProps) => void | (() => void)) | undefined;
     setOpen?: ((open: boolean) => void) | undefined;
     defaultOpen?: boolean | undefined;
     open?: boolean | undefined;

package/esm/select/select-store.js

@@ -6,7 +6,7 @@ import "../__chunks/MEYEPL2D.js";
 import {
   usePopoverStoreOptions,
   usePopoverStoreProps
-} from "../__chunks/SHGWT5HV.js";
+} from "../__chunks/5PIH3SMS.js";
 import "../__chunks/OBNQHP6V.js";
 import "../__chunks/HN4VMOUI.js";
 import {

package/esm/select/select.js

@@ -1,8 +1,9 @@
 import {
   usePopoverDisclosure
-} from "../__chunks/6O3TZMB4.js";
+} from "../__chunks/U2KSDJ3W.js";
 import "../__chunks/LSTZ5Q72.js";
 import "../__chunks/24P2K6AU.js";
+import "../__chunks/D6NPK2DL.js";
 import "../__chunks/OQUXG6FE.js";
 import {
   SelectArrow
@@ -14,13 +15,12 @@ import {
 import {
   SelectContext
 } from "../__chunks/EEVSGAZW.js";
-import "../__chunks/6GS36SYX.js";
-import "../__chunks/D6NPK2DL.js";
 import "../__chunks/4QNHBDVS.js";
 import "../__chunks/OXPV2NBK.js";
+import "../__chunks/Z3X3QN6P.js";
+import "../__chunks/6GS36SYX.js";
 import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/Z3X3QN6P.js";
 import {
   VisuallyHidden
 } from "../__chunks/JQEVJM46.js";

package/esm/tab/tab-list.js

@@ -3,11 +3,11 @@ import {
 } from "../__chunks/UZKBEGMB.js";
 import {
   useComposite
-} from "../__chunks/OY5YT7OV.js";
+} from "../__chunks/RTOWJJVI.js";
 import "../__chunks/OXPV2NBK.js";
+import "../__chunks/Z3X3QN6P.js";
 import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/Z3X3QN6P.js";
 import {
   createComponent,
   createElement,

package/esm/tab/tab-panel.js

@@ -2,13 +2,13 @@ import {
   useCollectionItem
 } from "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
+import {
+  useDisclosureContent
+} from "../__chunks/6AJCHLAV.js";
 import {
   useFocusable
 } from "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
-import {
-  useDisclosureContent
-} from "../__chunks/6AJCHLAV.js";
 import {
   createComponent,
   createElement,

package/esm/tab/tab.js

@@ -8,9 +8,9 @@ import "../__chunks/4QNHBDVS.js";
 import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
 import "../__chunks/OXPV2NBK.js";
+import "../__chunks/Z3X3QN6P.js";
 import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/Z3X3QN6P.js";
 import {
   createElement,
   createHook,

package/esm/toolbar/toolbar-container.js

@@ -9,9 +9,9 @@ import "../__chunks/4QNHBDVS.js";
 import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
 import "../__chunks/OXPV2NBK.js";
+import "../__chunks/Z3X3QN6P.js";
 import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/Z3X3QN6P.js";
 import {
   createElement,
   createHook,

package/esm/toolbar/toolbar-input.js

@@ -9,9 +9,9 @@ import "../__chunks/4QNHBDVS.js";
 import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
 import "../__chunks/OXPV2NBK.js";
+import "../__chunks/Z3X3QN6P.js";
 import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/Z3X3QN6P.js";
 import {
   createElement,
   createHook,

package/esm/toolbar/toolbar-item.js

@@ -7,9 +7,9 @@ import "../__chunks/4QNHBDVS.js";
 import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
 import "../__chunks/OXPV2NBK.js";
+import "../__chunks/Z3X3QN6P.js";
 import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/Z3X3QN6P.js";
 import "../__chunks/5ETIGB6O.js";
 import "../__chunks/AV5WE37O.js";
 import "../__chunks/ASYR66PQ.js";

package/esm/toolbar/toolbar.js

@@ -3,11 +3,11 @@ import {
 } from "../__chunks/DFUIIKXE.js";
 import {
   useComposite
-} from "../__chunks/OY5YT7OV.js";
+} from "../__chunks/RTOWJJVI.js";
 import "../__chunks/OXPV2NBK.js";
+import "../__chunks/Z3X3QN6P.js";
 import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/Z3X3QN6P.js";
 import {
   createComponent,
   createElement,

package/esm/tooltip/tooltip-anchor.d.ts

@@ -1,4 +1,4 @@
-import type { PopoverAnchorOptions } from "../popover/popover-anchor.js";
+import type { HovercardAnchorOptions } from "../hovercard/hovercard-anchor.js";
 import type { As, Props } from "../utils/types.js";
 import type { TooltipStore } from "./tooltip-store.js";
 /**
@@ -26,26 +26,10 @@ export declare const useTooltipAnchor: import("../utils/types.js").Hook<TooltipA
  * ```
  */
 export declare const TooltipAnchor: import("../utils/types.js").Component<TooltipAnchorOptions<"div">>;
-export interface TooltipAnchorOptions<T extends As = "div"> extends PopoverAnchorOptions<T> {
+export interface TooltipAnchorOptions<T extends As = "div"> extends HovercardAnchorOptions<T> {
     /**
      * Object returned by the `useTooltipStore` hook.
      */
     store: TooltipStore;
-    /**
-     * Determines wether the tooltip anchor is described or labelled by the
-     * tooltip. If `true`, the tooltip id will be set as the `aria-describedby`
-     * attribute on the anchor element, and not as the `aria-labelledby`
-     * attribute.
-     * @default false
-     * @example
-     * ```jsx
-     * const tooltip = useTooltipStore();
-     * <TooltipAnchor store={tooltip} described>
-     *   This is an element with a visible label.
-     * </TooltipAnchor>
-     * <Tooltip store={tooltip}>Description</Tooltip>
-     * ```
-     */
-    described?: boolean;
 }
 export type TooltipAnchorProps<T extends As = "div"> = Props<TooltipAnchorOptions<T>>;

package/esm/tooltip/tooltip-anchor.js

@@ -1,6 +1,8 @@
 import {
-  usePopoverAnchor
-} from "../__chunks/D6NPK2DL.js";
+  useHovercardAnchor
+} from "../__chunks/65MJJ4BW.js";
+import "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,
   createElement,
@@ -17,12 +19,39 @@ import {
 } from "../__chunks/4BKCJXBM.js";
 
 // src/tooltip/tooltip-anchor.ts
+import { useEffect } from "react";
+import { isFalsyBooleanCallback } from "@ariakit/core/utils/misc";
+import { createStore } from "@ariakit/core/utils/store";
+var globalStore = createStore({
+  activeStore: null
+});
 var useTooltipAnchor = createHook(
   (_a) => {
-    var _b = _a, { store, described } = _b, props = __objRest(_b, ["store", "described"]);
-    const onFocusProp = props.onFocus;
-    const onFocus = useEvent((event) => {
-      onFocusProp == null ? void 0 : onFocusProp(event);
+    var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]);
+    useEffect(() => {
+      return store.sync(
+        (state) => {
+          if (state.mounted) {
+            const { activeStore } = globalStore.getState();
+            if (activeStore !== store) {
+              activeStore == null ? void 0 : activeStore.hide();
+            }
+            return globalStore.setState("activeStore", store);
+          }
+          const id = setTimeout(() => {
+            const { activeStore } = globalStore.getState();
+            if (activeStore !== store)
+              return;
+            globalStore.setState("activeStore", null);
+          }, state.skipTimeout);
+          return () => clearTimeout(id);
+        },
+        ["mounted", "skipTimeout"]
+      );
+    }, [store]);
+    const onFocusVisibleProp = props.onFocusVisible;
+    const onFocusVisible = useEvent((event) => {
+      onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event);
       if (event.defaultPrevented)
         return;
       store.setAnchorElement(event.currentTarget);
@@ -33,35 +62,36 @@ var useTooltipAnchor = createHook(
       onBlurProp == null ? void 0 : onBlurProp(event);
       if (event.defaultPrevented)
         return;
-      store.hide();
-    });
-    const onMouseEnterProp = props.onMouseEnter;
-    const onMouseEnter = useEvent((event) => {
-      onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
-      if (event.defaultPrevented)
-        return;
-      store.setAnchorElement(event.currentTarget);
-      store.show();
+      const { activeStore } = globalStore.getState();
+      if (activeStore === store) {
+        globalStore.setState("activeStore", null);
+      }
     });
-    const onMouseLeaveProp = props.onMouseLeave;
-    const onMouseLeave = useEvent((event) => {
-      onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
-      if (event.defaultPrevented)
-        return;
-      store.hide();
+    const type = store.useState("type");
+    const contentId = store.useState((state) => {
+      var _a2;
+      return (_a2 = state.contentElement) == null ? void 0 : _a2.id;
     });
-    const contentElement = store.useState("contentElement");
     props = __spreadProps(__spreadValues({
       tabIndex: 0,
-      "aria-labelledby": !described ? contentElement == null ? void 0 : contentElement.id : void 0,
-      "aria-describedby": described ? contentElement == null ? void 0 : contentElement.id : void 0
+      "aria-labelledby": type === "label" ? contentId : void 0,
+      "aria-describedby": type === "description" ? contentId : void 0
     }, props), {
-      onFocus,
-      onBlur,
-      onMouseEnter,
-      onMouseLeave
+      onFocusVisible,
+      onBlur
     });
-    props = usePopoverAnchor(__spreadValues({ store }, props));
+    props = useHovercardAnchor(__spreadValues({
+      store,
+      showOnHover: (event) => {
+        if (isFalsyBooleanCallback(showOnHover, event))
+          return false;
+        const { activeStore } = globalStore.getState();
+        if (!activeStore)
+          return true;
+        store.show();
+        return false;
+      }
+    }, props));
     return props;
   }
 );

package/esm/tooltip/tooltip-store.d.ts

@@ -1,19 +1,7 @@
 import * as Core from "@ariakit/core/tooltip/tooltip-store";
-import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { HovercardStoreFunctions, HovercardStoreOptions, HovercardStoreState } from "../hovercard/hovercard-store.js";
 import type { Store } from "../utils/store.js";
-export declare function useTooltipStoreOptions(props: TooltipStoreProps): {
-    getAnchorRect: ((anchor: HTMLElement | null) => {
-        x?: number | undefined;
-        y?: number | undefined;
-        width?: number | undefined;
-        height?: number | undefined;
-    } | null) | undefined;
-    renderCallback: ((props: import("@ariakit/core/popover/popover-store").PopoverStoreRenderCallbackProps) => void | (() => void)) | undefined;
-    setOpen?: ((open: boolean) => void) | undefined;
-    defaultOpen?: boolean | undefined;
-    open?: boolean | undefined;
-    animated?: number | boolean | undefined;
-};
+export declare function useTooltipStoreOptions(props: TooltipStoreProps): Partial<import("../disclosure/disclosure-store.js").DisclosureStoreOptions>;
 export declare function useTooltipStoreProps<T extends TooltipStore>(store: T, props: TooltipStoreProps): T;
 /**
  * Creates a tooltip store.
@@ -26,11 +14,11 @@ export declare function useTooltipStoreProps<T extends TooltipStore>(store: T, p
  * ```
  */
 export declare function useTooltipStore(props?: TooltipStoreProps): TooltipStore;
-export interface TooltipStoreState extends Core.TooltipStoreState, PopoverStoreState {
+export interface TooltipStoreState extends Core.TooltipStoreState, HovercardStoreState {
 }
-export interface TooltipStoreFunctions extends Core.TooltipStoreFunctions, PopoverStoreFunctions {
+export interface TooltipStoreFunctions extends Core.TooltipStoreFunctions, HovercardStoreFunctions {
 }
-export interface TooltipStoreOptions extends Core.TooltipStoreOptions, PopoverStoreOptions {
+export interface TooltipStoreOptions extends Core.TooltipStoreOptions, HovercardStoreOptions {
 }
 export type TooltipStoreProps = TooltipStoreOptions & Core.TooltipStoreProps;
 export type TooltipStore = TooltipStoreFunctions & Store<Core.TooltipStore>;

package/esm/tooltip/tooltip-store.js

@@ -1,7 +1,8 @@
 import {
-  usePopoverStoreOptions,
-  usePopoverStoreProps
-} from "../__chunks/SHGWT5HV.js";
+  useHovercardStoreOptions,
+  useHovercardStoreProps
+} from "../__chunks/K5R24MFH.js";
+import "../__chunks/5PIH3SMS.js";
 import "../__chunks/OBNQHP6V.js";
 import "../__chunks/HN4VMOUI.js";
 import {
@@ -16,10 +17,10 @@ import {
 // src/tooltip/tooltip-store.ts
 import * as Core from "@ariakit/core/tooltip/tooltip-store";
 function useTooltipStoreOptions(props) {
-  return usePopoverStoreOptions(props);
+  return useHovercardStoreOptions(props);
 }
 function useTooltipStoreProps(store, props) {
-  return usePopoverStoreProps(store, props);
+  return useHovercardStoreProps(store, props);
 }
 function useTooltipStore(props = {}) {
   const options = useTooltipStoreOptions(props);

package/esm/tooltip/tooltip.d.ts

@@ -1,7 +1,4 @@
-import type { HTMLAttributes } from "react";
-import type { BooleanOrCallback } from "@ariakit/core/utils/types";
-import type { DisclosureContentOptions } from "../disclosure/disclosure-content.js";
-import type { PortalOptions } from "../portal/portal.js";
+import type { HovercardOptions } from "../hovercard/hovercard.js";
 import type { As, Props } from "../utils/types.js";
 import type { TooltipStore } from "./tooltip-store.js";
 /**
@@ -27,30 +24,14 @@ export declare const useTooltip: import("../utils/types.js").Hook<TooltipOptions
  * ```
  */
 export declare const Tooltip: import("../utils/types.js").Component<TooltipOptions<"div">>;
-export interface TooltipOptions<T extends As = "div"> extends DisclosureContentOptions<T>, Omit<PortalOptions<T>, "preserveTabOrder"> {
+export interface TooltipOptions<T extends As = "div"> extends HovercardOptions<T> {
     /**
      * Object returned by the `useTooltipStore` hook.
      */
     store: TooltipStore;
-    /**
-     * Determines whether the tooltip will be hidden when the user presses the
-     * Escape key.
-     * @default true
-     */
-    hideOnEscape?: BooleanOrCallback<KeyboardEvent>;
-    /**
-     * Determines whether the tooltip will be hidden when the user presses the
-     * Control key. This has been proposed as an alternative to the Escape key,
-     * which may introduce some issues, especially when tooltips are used within
-     * dialogs that also hide on Escape. See
-     * https://github.com/w3c/aria-practices/issues/1506
-     * @default false
-     */
-    hideOnControl?: BooleanOrCallback<KeyboardEvent>;
-    /**
-     * Props that will be passed to the popover wrapper element. This element
-     * will be used to position the popover.
-     */
-    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    /** @default true */
+    portal?: HovercardOptions<T>["portal"];
+    /** @default 8 */
+    gutter?: HovercardOptions<T>["gutter"];
 }
 export type TooltipProps<T extends As = "div"> = Props<TooltipOptions<T>>;

package/esm/tooltip/tooltip.js

@@ -1,14 +1,36 @@
 import {
-  usePortal
-} from "../__chunks/USCWE5QL.js";
+  useHovercard
+} from "../__chunks/HJWYYQGA.js";
+import "../__chunks/X7FKJQME.js";
+import "../__chunks/MLEIJKSM.js";
+import "../__chunks/NAG6UD2X.js";
+import "../__chunks/MR75RQGW.js";
+import "../__chunks/4H6H5RRM.js";
+import "../__chunks/7A3SODQV.js";
+import "../__chunks/RBUEJWRA.js";
+import "../__chunks/T3WBUAHU.js";
+import "../__chunks/KUXENZYT.js";
+import "../__chunks/KOVUJERF.js";
+import "../__chunks/62DFK33R.js";
+import "../__chunks/BH4YAZB2.js";
+import "../__chunks/DJESYNLE.js";
+import "../__chunks/6WVG5KFF.js";
+import "../__chunks/ISPCL6N4.js";
+import "../__chunks/7JNF6I52.js";
+import "../__chunks/6OMX4H3W.js";
+import "../__chunks/2CA5JWPW.js";
 import "../__chunks/DIO64N2C.js";
 import "../__chunks/LDDPB3PY.js";
-import {
-  useDisclosureContent
-} from "../__chunks/6AJCHLAV.js";
+import "../__chunks/COQHFAEN.js";
+import "../__chunks/LNHZLQEK.js";
+import "../__chunks/XIACQCPS.js";
+import "../__chunks/6AJCHLAV.js";
+import "../__chunks/6GS36SYX.js";
 import {
   TooltipContext
 } from "../__chunks/Z5BJMNGY.js";
+import "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/JQEVJM46.js";
 import {
   createComponent,
@@ -16,8 +38,6 @@ import {
   createHook
 } from "../__chunks/5ETIGB6O.js";
 import {
-  useBooleanEvent,
-  useSafeLayoutEffect,
   useWrapElement
 } from "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
@@ -28,82 +48,61 @@ import {
 } from "../__chunks/4BKCJXBM.js";
 
 // src/tooltip/tooltip.tsx
-import { useEffect } from "react";
-import { addGlobalEventListener } from "@ariakit/core/utils/events";
+import { contains } from "@ariakit/core/utils/dom";
+import { isFalsyBooleanCallback } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 var useTooltip = createHook(
   (_a) => {
     var _b = _a, {
       store,
       portal = true,
-      hideOnEscape = true,
-      hideOnControl = false,
-      wrapperProps
+      gutter = 8,
+      preserveTabOrder = false,
+      hideOnHoverOutside = true,
+      hideOnInteractOutside = true
     } = _b, props = __objRest(_b, [
       "store",
       "portal",
-      "hideOnEscape",
-      "hideOnControl",
-      "wrapperProps"
+      "gutter",
+      "preserveTabOrder",
+      "hideOnHoverOutside",
+      "hideOnInteractOutside"
     ]);
-    const popoverElement = store.useState("popoverElement");
-    const contentElement = store.useState("contentElement");
-    useSafeLayoutEffect(() => {
-      const wrapper = popoverElement;
-      const popover = contentElement;
-      if (!wrapper)
-        return;
-      if (!popover)
-        return;
-      wrapper.style.zIndex = getComputedStyle(popover).zIndex;
-    }, [popoverElement, contentElement]);
-    const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
-    const hideOnControlProp = useBooleanEvent(hideOnControl);
-    const open = store.useState("open");
-    useEffect(() => {
-      if (!open)
-        return;
-      return addGlobalEventListener("keydown", (event) => {
-        if (event.defaultPrevented)
-          return;
-        const isEscape = event.key === "Escape" && hideOnEscapeProp(event);
-        const isControl = event.key === "Control" && hideOnControlProp(event);
-        if (isEscape || isControl) {
-          store.hide();
-        }
-      });
-    }, [store, open, hideOnEscapeProp, hideOnControlProp]);
-    const position = store.useState(
-      (state) => state.fixed ? "fixed" : "absolute"
-    );
-    props = useWrapElement(
-      props,
-      (element) => /* @__PURE__ */ jsx(
-        "div",
-        __spreadProps(__spreadValues({
-          role: "presentation"
-        }, wrapperProps), {
-          style: __spreadValues({
-            position,
-            top: 0,
-            left: 0
-          }, wrapperProps == null ? void 0 : wrapperProps.style),
-          ref: store.setPopoverElement,
-          children: element
-        })
-      ),
-      [store, position, wrapperProps]
-    );
     props = useWrapElement(
       props,
       (element) => /* @__PURE__ */ jsx(TooltipContext.Provider, { value: store, children: element }),
       [store]
     );
-    props = __spreadValues({
-      role: "tooltip"
-    }, props);
-    props = useDisclosureContent(__spreadValues({ store }, props));
-    props = usePortal(__spreadProps(__spreadValues({ portal }, props), { preserveTabOrder: false }));
+    const role = store.useState(
+      (state) => state.type === "description" ? "tooltip" : "none"
+    );
+    props = __spreadValues({ role }, props);
+    props = useHovercard(__spreadProps(__spreadValues({}, props), {
+      store,
+      portal,
+      gutter,
+      preserveTabOrder,
+      hideOnHoverOutside: (event) => {
+        if (isFalsyBooleanCallback(hideOnHoverOutside, event))
+          return false;
+        const { anchorElement } = store.getState();
+        if (!anchorElement)
+          return true;
+        if ("focusVisible" in anchorElement.dataset)
+          return false;
+        return true;
+      },
+      hideOnInteractOutside: (event) => {
+        if (isFalsyBooleanCallback(hideOnInteractOutside, event))
+          return false;
+        const { anchorElement } = store.getState();
+        if (!anchorElement)
+          return true;
+        if (contains(anchorElement, event.target))
+          return false;
+        return true;
+      }
+    }));
     return props;
   }
 );