@ariakit/react-core 0.1.7 → 0.2.0

package/cjs/toolbar/toolbar-item.cjs

@@ -7,9 +7,9 @@ require('../__chunks/DASOL6J2.cjs');
 require('../__chunks/3FTPSHLH.cjs');
 require('../__chunks/ZQAFJQIS.cjs');
 require('../__chunks/KLZID3QO.cjs');
+require('../__chunks/NVMBKFRB.cjs');
 require('../__chunks/NVBNDB5B.cjs');
 require('../__chunks/LHHW5ZQP.cjs');
-require('../__chunks/NVMBKFRB.cjs');
 require('../__chunks/7NAIPZYN.cjs');
 require('../__chunks/F7HVNVHQ.cjs');
 require('../__chunks/NREUHWTU.cjs');

package/cjs/toolbar/toolbar.cjs

@@ -3,11 +3,11 @@
 var _56QOFCPOcjs = require('../__chunks/56QOFCPO.cjs');
 
 
-var _5I6IQHKQcjs = require('../__chunks/5I6IQHKQ.cjs');
+var _BIPONQXEcjs = require('../__chunks/BIPONQXE.cjs');
 require('../__chunks/KLZID3QO.cjs');
+require('../__chunks/NVMBKFRB.cjs');
 require('../__chunks/NVBNDB5B.cjs');
 require('../__chunks/LHHW5ZQP.cjs');
-require('../__chunks/NVMBKFRB.cjs');
 
 
 
@@ -38,7 +38,7 @@ var useToolbar = _7NAIPZYNcjs.createHook.call(void 0, (_a) => {
     role: "toolbar",
     "aria-orientation": orientation
   }, props);
-  props = _5I6IQHKQcjs.useComposite.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, { store }, props));
+  props = _BIPONQXEcjs.useComposite.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, { store }, props));
   return props;
 });
 var Toolbar = _7NAIPZYNcjs.createComponent.call(void 0, (props) => {

package/cjs/tooltip/tooltip-anchor.cjs

@@ -1,6 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _CCVWD45Ycjs = require('../__chunks/CCVWD45Y.cjs');
+var _5C3EJRAKcjs = require('../__chunks/5C3EJRAK.cjs');
+require('../__chunks/NVBNDB5B.cjs');
+require('../__chunks/LHHW5ZQP.cjs');
 
 
 
@@ -17,12 +19,39 @@ require('../__chunks/2X5K3J7Y.cjs');
 var _6455U47Tcjs = require('../__chunks/6455U47T.cjs');
 
 // src/tooltip/tooltip-anchor.ts
+var _react = require('react');
+var _misc = require('@ariakit/core/utils/misc');
+var _store = require('@ariakit/core/utils/store');
+var globalStore = _store.createStore.call(void 0, {
+  activeStore: null
+});
 var useTooltipAnchor = _7NAIPZYNcjs.createHook.call(void 0, 
   (_a) => {
-    var _b = _a, { store, described } = _b, props = _6455U47Tcjs.__objRest.call(void 0, _b, ["store", "described"]);
-    const onFocusProp = props.onFocus;
-    const onFocus = _NREUHWTUcjs.useEvent.call(void 0, (event) => {
-      onFocusProp == null ? void 0 : onFocusProp(event);
+    var _b = _a, { store, showOnHover = true } = _b, props = _6455U47Tcjs.__objRest.call(void 0, _b, ["store", "showOnHover"]);
+    _react.useEffect.call(void 0, () => {
+      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 = _NREUHWTUcjs.useEvent.call(void 0, (event) => {
+      onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event);
       if (event.defaultPrevented)
         return;
       store.setAnchorElement(event.currentTarget);
@@ -33,35 +62,36 @@ var useTooltipAnchor = _7NAIPZYNcjs.createHook.call(void 0,
       onBlurProp == null ? void 0 : onBlurProp(event);
       if (event.defaultPrevented)
         return;
-      store.hide();
-    });
-    const onMouseEnterProp = props.onMouseEnter;
-    const onMouseEnter = _NREUHWTUcjs.useEvent.call(void 0, (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 = _NREUHWTUcjs.useEvent.call(void 0, (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 = _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {
       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 = _CCVWD45Ycjs.usePopoverAnchor.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, { store }, props));
+    props = _5C3EJRAKcjs.useHovercardAnchor.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {
+      store,
+      showOnHover: (event) => {
+        if (_misc.isFalsyBooleanCallback.call(void 0, showOnHover, event))
+          return false;
+        const { activeStore } = globalStore.getState();
+        if (!activeStore)
+          return true;
+        store.show();
+        return false;
+      }
+    }, props));
     return props;
   }
 );

package/cjs/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/cjs/tooltip/tooltip-store.cjs

@@ -1,7 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }
 
 
-var _AUDANYMJcjs = require('../__chunks/AUDANYMJ.cjs');
+var _27JG67F3cjs = require('../__chunks/27JG67F3.cjs');
+require('../__chunks/W2XKIB23.cjs');
 require('../__chunks/RD47UJK7.cjs');
 require('../__chunks/P7TWEJ6I.cjs');
 
@@ -16,10 +17,10 @@ var _6455U47Tcjs = require('../__chunks/6455U47T.cjs');
 // src/tooltip/tooltip-store.ts
 var _tooltipstore = require('@ariakit/core/tooltip/tooltip-store'); var Core = _interopRequireWildcard(_tooltipstore);
 function useTooltipStoreOptions(props) {
-  return _AUDANYMJcjs.usePopoverStoreOptions.call(void 0, props);
+  return _27JG67F3cjs.useHovercardStoreOptions.call(void 0, props);
 }
 function useTooltipStoreProps(store, props) {
-  return _AUDANYMJcjs.usePopoverStoreProps.call(void 0, store, props);
+  return _27JG67F3cjs.useHovercardStoreProps.call(void 0, store, props);
 }
 function useTooltipStore(props = {}) {
   const options = useTooltipStoreOptions(props);

package/cjs/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/cjs/tooltip/tooltip.cjs

@@ -1,14 +1,36 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _PFD4TS6Bcjs = require('../__chunks/PFD4TS6B.cjs');
+var _A6ZSQXNQcjs = require('../__chunks/A6ZSQXNQ.cjs');
+require('../__chunks/OLGMV24U.cjs');
+require('../__chunks/MHL3EECX.cjs');
+require('../__chunks/GOXUG4RX.cjs');
+require('../__chunks/D3EUPD6P.cjs');
+require('../__chunks/O45IXGJW.cjs');
+require('../__chunks/TVZPJJTX.cjs');
+require('../__chunks/QRAQT522.cjs');
+require('../__chunks/NZYGNCZL.cjs');
+require('../__chunks/E5VOJWDR.cjs');
+require('../__chunks/56NPFF7P.cjs');
+require('../__chunks/W32FX7DM.cjs');
+require('../__chunks/CARNFZQT.cjs');
+require('../__chunks/NR3SJH64.cjs');
+require('../__chunks/GHWBKA6H.cjs');
+require('../__chunks/EE6OIU6X.cjs');
+require('../__chunks/X2GXTE3P.cjs');
+require('../__chunks/SOPRUU56.cjs');
+require('../__chunks/WWDX5YPG.cjs');
 require('../__chunks/C7Y26CUV.cjs');
 require('../__chunks/NS56XHXG.cjs');
-
-
-var _EM2PMFEWcjs = require('../__chunks/EM2PMFEW.cjs');
+require('../__chunks/CQSUIL2D.cjs');
+require('../__chunks/N2VCZZLP.cjs');
+require('../__chunks/5P6HRGY6.cjs');
+require('../__chunks/EM2PMFEW.cjs');
+require('../__chunks/W5PBA4D6.cjs');
 
 
 var _ESS3KXVEcjs = require('../__chunks/ESS3KXVE.cjs');
+require('../__chunks/NVBNDB5B.cjs');
+require('../__chunks/LHHW5ZQP.cjs');
 require('../__chunks/QTPUX3NM.cjs');
 
 
@@ -17,8 +39,6 @@ require('../__chunks/QTPUX3NM.cjs');
 var _7NAIPZYNcjs = require('../__chunks/7NAIPZYN.cjs');
 
 
-
-
 var _NREUHWTUcjs = require('../__chunks/NREUHWTU.cjs');
 require('../__chunks/2X5K3J7Y.cjs');
 
@@ -28,82 +48,61 @@ require('../__chunks/2X5K3J7Y.cjs');
 var _6455U47Tcjs = require('../__chunks/6455U47T.cjs');
 
 // src/tooltip/tooltip.tsx
-var _react = require('react');
-var _events = require('@ariakit/core/utils/events');
+var _dom = require('@ariakit/core/utils/dom');
+var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
 var useTooltip = _7NAIPZYNcjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, {
       store,
       portal = true,
-      hideOnEscape = true,
-      hideOnControl = false,
-      wrapperProps
+      gutter = 8,
+      preserveTabOrder = false,
+      hideOnHoverOutside = true,
+      hideOnInteractOutside = true
     } = _b, props = _6455U47Tcjs.__objRest.call(void 0, _b, [
       "store",
       "portal",
-      "hideOnEscape",
-      "hideOnControl",
-      "wrapperProps"
+      "gutter",
+      "preserveTabOrder",
+      "hideOnHoverOutside",
+      "hideOnInteractOutside"
     ]);
-    const popoverElement = store.useState("popoverElement");
-    const contentElement = store.useState("contentElement");
-    _NREUHWTUcjs.useSafeLayoutEffect.call(void 0, () => {
-      const wrapper = popoverElement;
-      const popover = contentElement;
-      if (!wrapper)
-        return;
-      if (!popover)
-        return;
-      wrapper.style.zIndex = getComputedStyle(popover).zIndex;
-    }, [popoverElement, contentElement]);
-    const hideOnEscapeProp = _NREUHWTUcjs.useBooleanEvent.call(void 0, hideOnEscape);
-    const hideOnControlProp = _NREUHWTUcjs.useBooleanEvent.call(void 0, hideOnControl);
-    const open = store.useState("open");
-    _react.useEffect.call(void 0, () => {
-      if (!open)
-        return;
-      return _events.addGlobalEventListener.call(void 0, "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 = _NREUHWTUcjs.useWrapElement.call(void 0, 
-      props,
-      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "div",
-        _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {
-          role: "presentation"
-        }, wrapperProps), {
-          style: _6455U47Tcjs.__spreadValues.call(void 0, {
-            position,
-            top: 0,
-            left: 0
-          }, wrapperProps == null ? void 0 : wrapperProps.style),
-          ref: store.setPopoverElement,
-          children: element
-        })
-      ),
-      [store, position, wrapperProps]
-    );
     props = _NREUHWTUcjs.useWrapElement.call(void 0, 
       props,
       (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ESS3KXVEcjs.TooltipContext.Provider, { value: store, children: element }),
       [store]
     );
-    props = _6455U47Tcjs.__spreadValues.call(void 0, {
-      role: "tooltip"
-    }, props);
-    props = _EM2PMFEWcjs.useDisclosureContent.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, { store }, props));
-    props = _PFD4TS6Bcjs.usePortal.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, { portal }, props), { preserveTabOrder: false }));
+    const role = store.useState(
+      (state) => state.type === "description" ? "tooltip" : "none"
+    );
+    props = _6455U47Tcjs.__spreadValues.call(void 0, { role }, props);
+    props = _A6ZSQXNQcjs.useHovercard.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
+      store,
+      portal,
+      gutter,
+      preserveTabOrder,
+      hideOnHoverOutside: (event) => {
+        if (_misc.isFalsyBooleanCallback.call(void 0, hideOnHoverOutside, event))
+          return false;
+        const { anchorElement } = store.getState();
+        if (!anchorElement)
+          return true;
+        if ("focusVisible" in anchorElement.dataset)
+          return false;
+        return true;
+      },
+      hideOnInteractOutside: (event) => {
+        if (_misc.isFalsyBooleanCallback.call(void 0, hideOnInteractOutside, event))
+          return false;
+        const { anchorElement } = store.getState();
+        if (!anchorElement)
+          return true;
+        if (_dom.contains.call(void 0, anchorElement, event.target))
+          return false;
+        return true;
+      }
+    }));
     return props;
   }
 );

package/cjs/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>>;