@ariakit/react-core 0.1.8 → 0.2.0

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;
   }
 );