@ariakit/core 0.1.5 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @ariakit/core
 
+## 0.2.1
+
+### Patch Changes
+
+- Fixed `useHovercardStore` and `useTooltipStore` not updating the state when the `timeout`, `showTimeout` or `hideTimeout` props changed. ([#2421](https://github.com/ariakit/ariakit/pull/2421))
+
+## 0.2.0
+
+### Minor Changes
+
+- **BREAKING**: Moved props from the `usePopoverStore` hook to the `Popover` component: `fixed`, `gutter`, `shift`, `flip`, `slide`, `overlap`, `sameWidth`, `fitViewport`, `arrowPadding`, `overflowPadding`, `getAnchorRect`, `renderCallback` (renamed to `updatePosition`). ([#2279](https://github.com/ariakit/ariakit/pull/2279))
+
+  The exception is the `placement` prop that should still be passed to the store.
+
+  **Before**:
+
+  ```jsx
+  const popover = usePopoverStore({
+    placement: "bottom",
+    fixed: true,
+    gutter: 8,
+    shift: 8,
+    flip: true,
+    slide: true,
+    overlap: true,
+    sameWidth: true,
+    fitViewport: true,
+    arrowPadding: 8,
+    overflowPadding: 8,
+    getAnchorRect: (anchor) => anchor?.getBoundingClientRect(),
+    renderCallback: (props) => props.defaultRenderCallback(),
+  });
+
+  <Popover store={popover} />;
+  ```
+
+  **After**:
+
+  ```jsx
+  const popover = usePopoverStore({ placement: "bottom" });
+
+  <Popover
+    store={popover}
+    fixed
+    gutter={8}
+    shift={8}
+    flip
+    slide
+    overlap
+    sameWidth
+    fitViewport
+    arrowPadding={8}
+    overflowPadding={8}
+    getAnchorRect={(anchor) => anchor?.getBoundingClientRect()}
+    updatePosition={(props) => props.updatePosition()}
+  />;
+  ```
+
+  This change affects all the hooks and components that use `usePopoverStore` and `Popover` underneath: `useComboboxStore`, `ComboboxPopover`, `useHovercardStore`, `Hovercard`, `useMenuStore`, `Menu`, `useSelectStore`, `SelectPopover`, `useTooltipStore`, `Tooltip`.
+
+  With this change, the underlying `@floating-ui/dom` dependency has been also moved to the `Popover` component, which means it can be lazy loaded. See the [Lazy Popover](https://ariakit.org/examples/popover-lazy) example.
+
 ## 0.1.5
 
 ### Patch Changes

package/cjs/__chunks/{LBTLD2RB.cjs → NFVTF24Y.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _SDBF6KIYcjs = require('./SDBF6KIY.cjs');
+var _RD3S4VKYcjs = require('./RD3S4VKY.cjs');
 
 
 var _6SPJEESBcjs = require('./6SPJEESB.cjs');
@@ -16,38 +16,21 @@ var _6455U47Tcjs = require('./6455U47T.cjs');
 function createHovercardStore(props = {}) {
   var _a;
   const syncState = (_a = props.store) == null ? void 0 : _a.getState();
-  const timeout = _M6ZA7XUPcjs.defaultValue.call(void 0, props.timeout, syncState == null ? void 0 : syncState.timeout, 500);
-  const popover = _SDBF6KIYcjs.createPopoverStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
+  const popover = _RD3S4VKYcjs.createPopoverStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
     placement: _M6ZA7XUPcjs.defaultValue.call(void 0, 
       props.placement,
       syncState == null ? void 0 : syncState.placement,
       "bottom"
     )
   }));
+  const timeout = _M6ZA7XUPcjs.defaultValue.call(void 0, props.timeout, syncState == null ? void 0 : syncState.timeout, 500);
   const initialState = _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, popover.getState()), {
     timeout,
-    showTimeout: _M6ZA7XUPcjs.defaultValue.call(void 0, 
-      props.showTimeout,
-      syncState == null ? void 0 : syncState.showTimeout,
-      timeout
-    ),
-    hideTimeout: _M6ZA7XUPcjs.defaultValue.call(void 0, 
-      props.hideTimeout,
-      syncState == null ? void 0 : syncState.hideTimeout,
-      timeout
-    ),
+    showTimeout: _M6ZA7XUPcjs.defaultValue.call(void 0, props.showTimeout, syncState == null ? void 0 : syncState.showTimeout),
+    hideTimeout: _M6ZA7XUPcjs.defaultValue.call(void 0, props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout),
     autoFocusOnShow: _M6ZA7XUPcjs.defaultValue.call(void 0, syncState == null ? void 0 : syncState.autoFocusOnShow, false)
   });
   const hovercard = _6SPJEESBcjs.createStore.call(void 0, initialState, popover, props.store);
-  hovercard.setup(
-    () => hovercard.sync(
-      (state) => {
-        hovercard.setState("showTimeout", (value) => value != null ? value : state.timeout);
-        hovercard.setState("hideTimeout", (value) => value != null ? value : state.timeout);
-      },
-      ["timeout"]
-    )
-  );
   return _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, popover), hovercard), {
     setAutoFocusOnShow: (value) => hovercard.setState("autoFocusOnShow", value)
   });

package/cjs/__chunks/RD3S4VKY.cjs

@@ -0,0 +1,60 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _HEFJPUYDcjs = require('./HEFJPUYD.cjs');
+
+
+
+var _6SPJEESBcjs = require('./6SPJEESB.cjs');
+
+
+var _M6ZA7XUPcjs = require('./M6ZA7XUP.cjs');
+
+
+
+
+var _6455U47Tcjs = require('./6455U47T.cjs');
+
+// src/popover/popover-store.ts
+function createPopoverStore(_a = {}) {
+  var _b = _a, {
+    popover: otherPopover
+  } = _b, props = _6455U47Tcjs.__objRest.call(void 0, _b, [
+    "popover"
+  ]);
+  const store = _6SPJEESBcjs.mergeStore.call(void 0, 
+    props.store,
+    otherPopover == null ? void 0 : otherPopover.omit(
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    )
+  );
+  const syncState = store == null ? void 0 : store.getState();
+  const dialog = _HEFJPUYDcjs.createDialogStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), { store }));
+  const placement = _M6ZA7XUPcjs.defaultValue.call(void 0, 
+    props.placement,
+    syncState == null ? void 0 : syncState.placement,
+    "bottom"
+  );
+  const initialState = _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, dialog.getState()), {
+    placement,
+    currentPlacement: placement,
+    anchorElement: _M6ZA7XUPcjs.defaultValue.call(void 0, syncState == null ? void 0 : syncState.anchorElement, null),
+    popoverElement: _M6ZA7XUPcjs.defaultValue.call(void 0, syncState == null ? void 0 : syncState.popoverElement, null),
+    arrowElement: _M6ZA7XUPcjs.defaultValue.call(void 0, syncState == null ? void 0 : syncState.arrowElement, null),
+    rendered: Symbol("rendered")
+  });
+  const popover = _6SPJEESBcjs.createStore.call(void 0, initialState, dialog, store);
+  return _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, dialog), popover), {
+    setAnchorElement: (element) => popover.setState("anchorElement", element),
+    setPopoverElement: (element) => popover.setState("popoverElement", element),
+    setArrowElement: (element) => popover.setState("arrowElement", element),
+    render: () => popover.setState("rendered", Symbol("rendered"))
+  });
+}
+
+
+
+exports.createPopoverStore = createPopoverStore;

package/cjs/combobox/combobox-store.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _SDBF6KIYcjs = require('../__chunks/SDBF6KIY.cjs');
+var _RD3S4VKYcjs = require('../__chunks/RD3S4VKY.cjs');
 require('../__chunks/HEFJPUYD.cjs');
 require('../__chunks/27ZAGOYG.cjs');
 
@@ -86,7 +86,7 @@ function createComboboxStore(_a = {}) {
       !isSafariOnMobile
     )
   }));
-  const popover = _SDBF6KIYcjs.createPopoverStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
+  const popover = _RD3S4VKYcjs.createPopoverStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
     store,
     placement: _M6ZA7XUPcjs.defaultValue.call(void 0, 
       props.placement,

package/cjs/composite/composite-overflow-store.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _SDBF6KIYcjs = require('../__chunks/SDBF6KIY.cjs');
+var _RD3S4VKYcjs = require('../__chunks/RD3S4VKY.cjs');
 require('../__chunks/HEFJPUYD.cjs');
 require('../__chunks/27ZAGOYG.cjs');
 require('../__chunks/6SPJEESB.cjs');
@@ -9,7 +9,7 @@ require('../__chunks/6455U47T.cjs');
 
 // src/composite/composite-overflow-store.ts
 function createCompositeOverflowStore(props = {}) {
-  return _SDBF6KIYcjs.createPopoverStore.call(void 0, props);
+  return _RD3S4VKYcjs.createPopoverStore.call(void 0, props);
 }
 
 

package/cjs/hovercard/hovercard-store.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _LBTLD2RBcjs = require('../__chunks/LBTLD2RB.cjs');
-require('../__chunks/SDBF6KIY.cjs');
+var _NFVTF24Ycjs = require('../__chunks/NFVTF24Y.cjs');
+require('../__chunks/RD3S4VKY.cjs');
 require('../__chunks/HEFJPUYD.cjs');
 require('../__chunks/27ZAGOYG.cjs');
 require('../__chunks/6SPJEESB.cjs');
@@ -9,4 +9,4 @@ require('../__chunks/M6ZA7XUP.cjs');
 require('../__chunks/6455U47T.cjs');
 
 
-exports.createHovercardStore = _LBTLD2RBcjs.createHovercardStore;
+exports.createHovercardStore = _NFVTF24Ycjs.createHovercardStore;

package/cjs/hovercard/hovercard-store.d.ts

@@ -11,8 +11,9 @@ export interface HovercardStoreState extends PopoverStoreState {
      */
     placement: PopoverStoreState["placement"];
     /**
-     * The amount of time in milliseconds to wait before showing or hiding the
-     * popover.
+     * The amount of time in milliseconds to wait before showing and hiding the
+     * popover. To control the delay for showing and hiding separately, use
+     * `showTimeout` and `hideTimeout`.
      * @default 500
      */
     timeout: number;
@@ -20,12 +21,12 @@ export interface HovercardStoreState extends PopoverStoreState {
      * The amount of time in milliseconds to wait before **showing** the popover.
      * It defaults to the value passed to `timeout`.
      */
-    showTimeout: number;
+    showTimeout?: number;
     /**
      * The amount of time in milliseconds to wait before **hiding** the popover.
      * It defaults to the value passed to `timeout`.
      */
-    hideTimeout: number;
+    hideTimeout?: number;
     /**
      * Whether the popover or an element inside it should be focused when it is
      * shown.

package/cjs/menu/menu-store.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _LBTLD2RBcjs = require('../__chunks/LBTLD2RB.cjs');
-require('../__chunks/SDBF6KIY.cjs');
+var _NFVTF24Ycjs = require('../__chunks/NFVTF24Y.cjs');
+require('../__chunks/RD3S4VKY.cjs');
 require('../__chunks/HEFJPUYD.cjs');
 require('../__chunks/27ZAGOYG.cjs');
 
@@ -50,7 +50,7 @@ function createMenuStore(_a = {}) {
       "vertical"
     )
   }));
-  const hovercard = _LBTLD2RBcjs.createHovercardStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
+  const hovercard = _NFVTF24Ycjs.createHovercardStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
     store,
     placement: _M6ZA7XUPcjs.defaultValue.call(void 0, 
       props.placement,

package/cjs/menu/menu-store.d.ts

@@ -8,18 +8,6 @@ export declare function createMenuStore<T extends Values = Values>(props: PickRe
 export declare function createMenuStore(props?: MenuStoreProps): MenuStore;
 export type MenuStoreValues = Record<string, string | boolean | number | Array<string | number>>;
 export interface MenuStoreState<T extends Values = Values> extends CompositeStoreState, HovercardStoreState {
-    /**
-     * @default "vertical"
-     */
-    orientation: CompositeStoreState["orientation"];
-    /**
-     * @default "bottom-start"
-     */
-    placement: HovercardStoreState["placement"];
-    /**
-     * @default 0
-     */
-    hideTimeout: HovercardStoreState["hideTimeout"];
     /**
      * Determines the element that should be focused when the menu is opened.
      */
@@ -29,6 +17,12 @@ export interface MenuStoreState<T extends Values = Values> extends CompositeStor
      * `MenuItemRadio` components.
      */
     values: T;
+    /** @default "vertical" */
+    orientation: CompositeStoreState["orientation"];
+    /** @default "bottom-start" */
+    placement: HovercardStoreState["placement"];
+    /** @default 0 */
+    hideTimeout?: HovercardStoreState["hideTimeout"];
 }
 export interface MenuStoreFunctions<T extends Values = Values> extends CompositeStoreFunctions, HovercardStoreFunctions {
     /**

package/cjs/popover/popover-store.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _SDBF6KIYcjs = require('../__chunks/SDBF6KIY.cjs');
+var _RD3S4VKYcjs = require('../__chunks/RD3S4VKY.cjs');
 require('../__chunks/HEFJPUYD.cjs');
 require('../__chunks/27ZAGOYG.cjs');
 require('../__chunks/6SPJEESB.cjs');
@@ -8,4 +8,4 @@ require('../__chunks/M6ZA7XUP.cjs');
 require('../__chunks/6455U47T.cjs');
 
 
-exports.createPopoverStore = _SDBF6KIYcjs.createPopoverStore;
+exports.createPopoverStore = _RD3S4VKYcjs.createPopoverStore;

package/cjs/popover/popover-store.d.ts

@@ -3,27 +3,10 @@ import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
 import type { SetState } from "../utils/types.js";
 type BasePlacement = "top" | "bottom" | "left" | "right";
 type Placement = BasePlacement | `${BasePlacement}-start` | `${BasePlacement}-end`;
-type AnchorRect = {
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-};
 /**
  * Creates a popover store.
  */
-export declare function createPopoverStore({ getAnchorRect, renderCallback, popover: otherPopover, ...props }?: PopoverStoreProps): PopoverStore;
-export interface PopoverStoreRenderCallbackProps extends Pick<PopoverStoreState, "anchorElement" | "popoverElement" | "arrowElement" | "mounted" | "placement" | "fixed" | "gutter" | "shift" | "overlap" | "flip" | "sameWidth" | "fitViewport" | "arrowPadding" | "overflowPadding"> {
-    /**
-     * A method that updates the `currentPlacement` state.
-     */
-    setPlacement: SetState<Placement>;
-    /**
-     * The default render callback that will be called when the `renderCallback`
-     * prop is not provided.
-     */
-    defaultRenderCallback: () => () => void;
-}
+export declare function createPopoverStore({ popover: otherPopover, ...props }?: PopoverStoreProps): PopoverStore;
 export interface PopoverStoreState extends DialogStoreState {
     /**
      * The anchor element.
@@ -49,64 +32,10 @@ export interface PopoverStoreState extends DialogStoreState {
      */
     placement: Placement;
     /**
-     * Whether the popover has `position: fixed` or not.
-     * @default false
-     */
-    fixed: boolean;
-    /**
-     * The distance between the popover and the anchor element. By default, it's 0
-     * plus half of the arrow offset, if it exists.
+     * A symbol that's used to recompute the popover position when the `render`
+     * method is called.
      */
-    gutter: number | undefined;
-    /**
-     * The skidding of the popover along the anchor element.
-     * @default 0
-     */
-    shift: number;
-    /**
-     * Controls the behavior of the popover when it overflows the viewport:
-     *   - If a `boolean`, specifies whether the popover should flip to the
-     *     opposite side when it overflows.
-     *   - If a `string`, indicates the preferred fallback placements when it
-     *     overflows. The placements must be spaced-delimited, e.g. "top left".
-     * @default true
-     */
-    flip: boolean | string;
-    /**
-     * Whether the popover should slide when it overflows.
-     * @default true
-     */
-    slide: boolean;
-    /**
-     * Whether the popover can overlap the anchor element when it overflows.
-     * @default false
-     */
-    overlap: boolean;
-    /**
-     * Whether the popover should have the same width as the anchor element. This
-     * will be exposed to CSS as `--popover-anchor-width`.
-     * @default false
-     */
-    sameWidth: boolean;
-    /**
-     * Whether the popover should fit the viewport. If this is set to true, the
-     * popover wrapper will have `maxWidth` and `maxHeight` set to the viewport
-     * size. This will be exposed to CSS as `--popover-available-width` and
-     * `--popover-available-height`.
-     * @default false
-     */
-    fitViewport: boolean;
-    /**
-     * The minimum padding between the arrow and the popover corner.
-     * @default 4
-     */
-    arrowPadding: number;
-    /**
-     * The minimum padding between the popover and the viewport edge. This will be
-     * exposed to CSS as `--popover-overflow-padding`.
-     * @default 8
-     */
-    overflowPadding: number;
+    rendered: symbol;
 }
 export interface PopoverStoreFunctions extends DialogStoreFunctions {
     /**
@@ -122,23 +51,13 @@ export interface PopoverStoreFunctions extends DialogStoreFunctions {
      */
     setArrowElement: SetState<PopoverStoreState["arrowElement"]>;
     /**
-     * Function that returns the anchor element's DOMRect. If this is explicitly
-     * passed, it will override the anchor `getBoundingClientRect` method.
-     * @param anchor The anchor element.
-     */
-    getAnchorRect?: (anchor: HTMLElement | null) => AnchorRect | null;
-    /**
-     * A function that will be called when the popover needs to calculate its
-     * styles. It will override the internal behavior.
-     */
-    renderCallback?: (props: PopoverStoreRenderCallbackProps) => void | (() => void);
-    /**
-     * A function that can be used to recompute the popover styles. This is useful
-     * when the popover anchor changes in a way that affects the popover position.
+     * A function that can be used to recompute the popover position. This is
+     * useful when the popover anchor changes in a way that affects the popover
+     * position.
      */
     render: () => void;
 }
-export interface PopoverStoreOptions extends StoreOptions<PopoverStoreState, "placement" | "fixed" | "gutter" | "shift" | "flip" | "slide" | "overlap" | "sameWidth" | "fitViewport" | "arrowPadding" | "overflowPadding">, Partial<Pick<PopoverStoreFunctions, "getAnchorRect" | "renderCallback">>, DialogStoreOptions {
+export interface PopoverStoreOptions extends StoreOptions<PopoverStoreState, "placement">, DialogStoreOptions {
     /**
      * A reference to another popover store that's controlling another popover to
      * keep them in sync.

package/cjs/select/select-store.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _SDBF6KIYcjs = require('../__chunks/SDBF6KIY.cjs');
+var _RD3S4VKYcjs = require('../__chunks/RD3S4VKY.cjs');
 require('../__chunks/HEFJPUYD.cjs');
 require('../__chunks/27ZAGOYG.cjs');
 
@@ -70,7 +70,7 @@ function createSelectStore(_a = {}) {
       "vertical"
     )
   }));
-  const popover = _SDBF6KIYcjs.createPopoverStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
+  const popover = _RD3S4VKYcjs.createPopoverStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
     store,
     placement: _M6ZA7XUPcjs.defaultValue.call(void 0, 
       props.placement,

package/cjs/tooltip/tooltip-store.cjs

@@ -1,10 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _SDBF6KIYcjs = require('../__chunks/SDBF6KIY.cjs');
+var _NFVTF24Ycjs = require('../__chunks/NFVTF24Y.cjs');
+require('../__chunks/RD3S4VKY.cjs');
 require('../__chunks/HEFJPUYD.cjs');
-
-
-var _27ZAGOYGcjs = require('../__chunks/27ZAGOYG.cjs');
+require('../__chunks/27ZAGOYG.cjs');
 
 
 var _6SPJEESBcjs = require('../__chunks/6SPJEESB.cjs');
@@ -17,80 +16,23 @@ var _M6ZA7XUPcjs = require('../__chunks/M6ZA7XUP.cjs');
 var _6455U47Tcjs = require('../__chunks/6455U47T.cjs');
 
 // src/tooltip/tooltip-store.ts
-var tooltips = _6SPJEESBcjs.createStore.call(void 0, { activeRef: null });
-function afterTimeout(timeoutMs, cb) {
-  const timeoutId = setTimeout(cb, timeoutMs);
-  return () => clearTimeout(timeoutId);
-}
 function createTooltipStore(props = {}) {
   var _a;
   const syncState = (_a = props.store) == null ? void 0 : _a.getState();
-  const open = _M6ZA7XUPcjs.defaultValue.call(void 0, props.open, syncState == null ? void 0 : syncState.open, false);
-  const disclosure = _27ZAGOYGcjs.createDisclosureStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), { open }));
-  const popover = _SDBF6KIYcjs.createPopoverStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
-    open,
+  const hovercard = _NFVTF24Ycjs.createHovercardStore.call(void 0, _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
     placement: _M6ZA7XUPcjs.defaultValue.call(void 0, 
       props.placement,
       syncState == null ? void 0 : syncState.placement,
       "top"
     ),
-    gutter: _M6ZA7XUPcjs.defaultValue.call(void 0, props.gutter, syncState == null ? void 0 : syncState.gutter, 8)
+    hideTimeout: _M6ZA7XUPcjs.defaultValue.call(void 0, props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout, 0)
   }));
-  const initialState = _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, popover.getState()), {
-    timeout: _M6ZA7XUPcjs.defaultValue.call(void 0, props.timeout, syncState == null ? void 0 : syncState.timeout, 0)
-  });
-  const tooltip = _6SPJEESBcjs.createStore.call(void 0, 
-    initialState,
-    popover,
-    disclosure.omit("open", "mounted"),
-    props.store
-  );
-  const ref = Symbol();
-  tooltip.setup(
-    () => disclosure.sync(
-      (state, prev) => {
-        const { timeout } = tooltip.getState();
-        const { activeRef } = tooltips.getState();
-        if (state.open) {
-          if (!timeout || activeRef) {
-            tooltips.setState("activeRef", ref);
-            tooltip.setState("open", true);
-            return;
-          } else {
-            tooltips.setState("activeRef", null);
-            return afterTimeout(timeout, () => {
-              tooltips.setState("activeRef", ref);
-            });
-          }
-        } else if (state.open !== prev.open) {
-          tooltip.setState("open", false);
-          return afterTimeout(timeout, () => {
-            tooltips.setState(
-              "activeRef",
-              (activeRef2) => activeRef2 === ref ? null : activeRef2
-            );
-          });
-        }
-        return;
-      },
-      ["open"]
-    )
-  );
-  tooltip.setup(
-    () => tooltips.sync(
-      (state) => {
-        tooltip.setState("open", state.activeRef === ref);
-      },
-      ["activeRef"]
-    )
-  );
-  tooltip.setup(() => () => {
-    tooltips.setState(
-      "activeRef",
-      (activeRef) => activeRef === ref ? null : activeRef
-    );
+  const initialState = _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, hovercard.getState()), {
+    type: _M6ZA7XUPcjs.defaultValue.call(void 0, props.type, syncState == null ? void 0 : syncState.type, "description"),
+    skipTimeout: _M6ZA7XUPcjs.defaultValue.call(void 0, props.skipTimeout, syncState == null ? void 0 : syncState.skipTimeout, 300)
   });
-  return _6455U47Tcjs.__spreadValues.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, popover), disclosure), tooltip);
+  const tooltip = _6SPJEESBcjs.createStore.call(void 0, initialState, hovercard, props.store);
+  return _6455U47Tcjs.__spreadValues.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, hovercard), tooltip);
 }
 
 

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

@@ -1,28 +1,29 @@
-import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { HovercardStoreFunctions, HovercardStoreOptions, HovercardStoreState } from "../hovercard/hovercard-store.js";
 import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
 /**
  * Creates a tooltip store.
  */
 export declare function createTooltipStore(props?: TooltipStoreProps): TooltipStore;
-export interface TooltipStoreState extends PopoverStoreState {
+export interface TooltipStoreState extends HovercardStoreState {
     /**
-     * @default "top"
+     * Determines whether the tooltip is being used as a label or a description
+     * for the anchor element.
+     * @default "description"
      */
-    placement: PopoverStoreState["placement"];
+    type: "label" | "description";
     /**
-     * @default 8
+     * The amount of time after a tooltip is hidden while all tooltips on the
+     * page can be shown immediately, without waiting for the show timeout.
+     * @default 300
      */
-    gutter: PopoverStoreState["gutter"];
-    /**
-     * The amount in milliseconds to wait before showing the tooltip. When there's
-     * already an open tooltip in the page, this value will be ignored and other
-     * tooltips will be shown immediately.
-     * @default 0
-     */
-    timeout: number;
+    skipTimeout: number;
+    /** @default "top" */
+    placement: HovercardStoreState["placement"];
+    /** @default 0 */
+    hideTimeout?: HovercardStoreState["hideTimeout"];
 }
-export type TooltipStoreFunctions = PopoverStoreFunctions;
-export interface TooltipStoreOptions extends StoreOptions<TooltipStoreState, "placement" | "gutter" | "timeout">, PopoverStoreOptions {
+export type TooltipStoreFunctions = HovercardStoreFunctions;
+export interface TooltipStoreOptions extends StoreOptions<TooltipStoreState, "type" | "placement" | "timeout" | "showTimeout" | "hideTimeout" | "skipTimeout">, HovercardStoreOptions {
 }
 export type TooltipStoreProps = TooltipStoreOptions & StoreProps<TooltipStoreState>;
 export type TooltipStore = TooltipStoreFunctions & Store<TooltipStoreState>;