@ariakit/core 0.1.4 → 0.2.0

package/esm/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/esm/popover/popover-store.js

@@ -1,10 +1,11 @@
 import {
   createPopoverStore
-} from "../__chunks/6PEWNRTN.js";
-import "../__chunks/4T5RHRE5.js";
-import "../__chunks/IOAGNCXX.js";
-import "../__chunks/NA5BK7DD.js";
-import "../__chunks/RMD7SNCC.js";
+} from "../__chunks/Z5IDQSMV.js";
+import "../__chunks/MNNKHNLW.js";
+import "../__chunks/ZV2GEGPL.js";
+import "../__chunks/BOKMNDR7.js";
+import "../__chunks/NWU4GBZ6.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   createPopoverStore
 };

package/esm/radio/radio-store.js

@@ -1,40 +1,41 @@
 import {
   createCompositeStore
-} from "../__chunks/X7MJ3FB5.js";
-import "../__chunks/WFGVC6LE.js";
+} from "../__chunks/R6VHFWTV.js";
+import "../__chunks/EWHSN7GO.js";
 import {
   createStore
-} from "../__chunks/NA5BK7DD.js";
+} from "../__chunks/BOKMNDR7.js";
 import {
   defaultValue
-} from "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
 import "../__chunks/5XEKIOCW.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/radio/radio-store.ts
-function createRadioStore({
-  ...props
-} = {}) {
-  const syncState = props.store?.getState();
-  const composite = createCompositeStore({
-    ...props,
-    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true)
-  });
-  const initialState = {
-    ...composite.getState(),
+function createRadioStore(_a = {}) {
+  var props = __objRest(_a, []);
+  var _a2;
+  const syncState = (_a2 = props.store) == null ? void 0 : _a2.getState();
+  const composite = createCompositeStore(__spreadProps(__spreadValues({}, props), {
+    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
+  }));
+  const initialState = __spreadProps(__spreadValues({}, composite.getState()), {
     value: defaultValue(
       props.value,
-      syncState?.value,
+      syncState == null ? void 0 : syncState.value,
       props.defaultValue,
       null
     )
-  };
+  });
   const radio = createStore(initialState, composite, props.store);
-  return {
-    ...composite,
-    ...radio,
+  return __spreadProps(__spreadValues(__spreadValues({}, composite), radio), {
     setValue: (value) => radio.setState("value", value)
-  };
+  });
 }
 export {
   createRadioStore

package/esm/select/select-store.js

@@ -1,32 +1,39 @@
 import {
   createPopoverStore
-} from "../__chunks/6PEWNRTN.js";
-import "../__chunks/4T5RHRE5.js";
-import "../__chunks/IOAGNCXX.js";
+} from "../__chunks/Z5IDQSMV.js";
+import "../__chunks/MNNKHNLW.js";
+import "../__chunks/ZV2GEGPL.js";
 import {
   createCompositeStore
-} from "../__chunks/X7MJ3FB5.js";
-import "../__chunks/WFGVC6LE.js";
+} from "../__chunks/R6VHFWTV.js";
+import "../__chunks/EWHSN7GO.js";
 import {
   createStore,
   mergeStore
-} from "../__chunks/NA5BK7DD.js";
+} from "../__chunks/BOKMNDR7.js";
 import {
   defaultValue
-} from "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
 import {
   toArray
 } from "../__chunks/5XEKIOCW.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/select/select-store.ts
-function createSelectStore({
-  combobox,
-  ...props
-} = {}) {
+function createSelectStore(_a = {}) {
+  var _b = _a, {
+    combobox
+  } = _b, props = __objRest(_b, [
+    "combobox"
+  ]);
   const store = mergeStore(
     props.store,
-    combobox?.omit(
+    combobox == null ? void 0 : combobox.omit(
       "value",
       "items",
       "renderedItems",
@@ -39,8 +46,7 @@ function createSelectStore({
     )
   );
   const syncState = store.getState();
-  const composite = createCompositeStore({
-    ...props,
+  const composite = createCompositeStore(__spreadProps(__spreadValues({}, props), {
     store,
     virtualFocus: defaultValue(
       props.virtualFocus,
@@ -63,20 +69,17 @@ function createSelectStore({
       syncState.orientation,
       "vertical"
     )
-  });
-  const popover = createPopoverStore({
-    ...props,
+  }));
+  const popover = createPopoverStore(__spreadProps(__spreadValues({}, props), {
     store,
     placement: defaultValue(
       props.placement,
       syncState.placement,
       "bottom-start"
     )
-  });
+  }));
   const initialValue = new String("");
-  const initialState = {
-    ...composite.getState(),
-    ...popover.getState(),
+  const initialState = __spreadProps(__spreadValues(__spreadValues({}, composite.getState()), popover.getState()), {
     value: defaultValue(
       props.value,
       syncState.value,
@@ -90,7 +93,7 @@ function createSelectStore({
     ),
     selectElement: defaultValue(syncState.selectElement, null),
     labelElement: defaultValue(syncState.labelElement, null)
-  };
+  });
   const select = createStore(initialState, composite, popover, store);
   select.setup(
     () => select.sync(
@@ -102,7 +105,7 @@ function createSelectStore({
         const item = state.items.find(
           (item2) => !item2.disabled && item2.value != null
         );
-        if (item?.value == null)
+        if ((item == null ? void 0 : item.value) == null)
           return;
         select.setState("value", item.value);
       },
@@ -150,14 +153,11 @@ function createSelectStore({
       ["setValueOnMove", "moves"]
     )
   );
-  return {
-    ...composite,
-    ...popover,
-    ...select,
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, composite), popover), select), {
     setValue: (value) => select.setState("value", value),
     setSelectElement: (element) => select.setState("selectElement", element),
     setLabelElement: (element) => select.setState("labelElement", element)
-  };
+  });
 }
 export {
   createSelectStore

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

@@ -23,11 +23,17 @@ export interface TabStoreState extends CompositeStoreState<Item> {
     /**
      * The id of the tab whose panel is currently visible. If it's `undefined`, it
      * will be automatically set to the first enabled tab.
+     *
+     * Live examples:
+     * - [Tab with React Router](https://ariakit.org/examples/tab-react-router)
      */
     selectedId: TabStoreState["activeId"];
     /**
      * Whether the tab should be selected when it receives focus. If it's set to
      * `false`, the tab will be selected only when it's clicked.
+     *
+     * Live examples:
+     * - [Tab with React Router](https://ariakit.org/examples/tab-react-router)
      * @default true
      */
     selectOnMove?: boolean;
@@ -36,6 +42,9 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<Item> {
     /**
      * Sets the `selectedId` state without moving focus. If you want to move focus,
      * use the `select` function instead.
+     *
+     * Live examples:
+     * - [Tab with React Router](https://ariakit.org/examples/tab-react-router)
      * @example
      * // Selects the tab with id "tab-1"
      * store.setSelectedId("tab-1");

package/esm/tab/tab-store.js

@@ -1,45 +1,48 @@
 import {
   createCompositeStore
-} from "../__chunks/X7MJ3FB5.js";
+} from "../__chunks/R6VHFWTV.js";
 import {
   createCollectionStore
-} from "../__chunks/WFGVC6LE.js";
+} from "../__chunks/EWHSN7GO.js";
 import {
   createStore
-} from "../__chunks/NA5BK7DD.js";
+} from "../__chunks/BOKMNDR7.js";
 import {
   defaultValue
-} from "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
 import "../__chunks/5XEKIOCW.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/tab/tab-store.ts
 function createTabStore(props = {}) {
-  const syncState = props.store?.getState();
-  const composite = createCompositeStore({
-    ...props,
+  var _a;
+  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+  const composite = createCompositeStore(__spreadProps(__spreadValues({}, props), {
     orientation: defaultValue(
       props.orientation,
-      syncState?.orientation,
+      syncState == null ? void 0 : syncState.orientation,
       "horizontal"
     ),
-    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true)
-  });
+    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
+  }));
   const panels = createCollectionStore();
-  const initialState = {
-    ...composite.getState(),
+  const initialState = __spreadProps(__spreadValues({}, composite.getState()), {
     selectedId: defaultValue(
       props.selectedId,
-      syncState?.selectedId,
+      syncState == null ? void 0 : syncState.selectedId,
       props.defaultSelectedId,
       void 0
     ),
     selectOnMove: defaultValue(
       props.selectOnMove,
-      syncState?.selectOnMove,
+      syncState == null ? void 0 : syncState.selectOnMove,
       true
     )
-  };
+  });
   const tab = createStore(initialState, composite, props.store);
   tab.setup(
     () => tab.sync(() => {
@@ -77,7 +80,7 @@ function createTabStore(props = {}) {
           const tabItem2 = renderedItems.find(
             (item) => !item.disabled && !item.dimmed
           );
-          tab.setState("selectedId", tabItem2?.id);
+          tab.setState("selectedId", tabItem2 == null ? void 0 : tabItem2.id);
         }
       },
       ["selectedId", "renderedItems"]
@@ -101,7 +104,7 @@ function createTabStore(props = {}) {
               const tabItem = tabs[i];
               if (!tabItem)
                 return;
-              panels.renderItem({ ...panel, tabId: tabItem.id });
+              panels.renderItem(__spreadProps(__spreadValues({}, panel), { tabId: tabItem.id }));
             });
           },
           ["renderedItems"]
@@ -110,16 +113,14 @@ function createTabStore(props = {}) {
       ["renderedItems"]
     )
   );
-  return {
-    ...composite,
-    ...tab,
+  return __spreadProps(__spreadValues(__spreadValues({}, composite), tab), {
     panels,
     setSelectedId: (id) => tab.setState("selectedId", id),
     select: (id) => {
       tab.setState("selectedId", id);
       composite.move(id);
     }
-  };
+  });
 }
 export {
   createTabStore

package/esm/toolbar/toolbar-store.js

@@ -1,26 +1,30 @@
 import {
   createCompositeStore
-} from "../__chunks/X7MJ3FB5.js";
-import "../__chunks/WFGVC6LE.js";
-import "../__chunks/NA5BK7DD.js";
+} from "../__chunks/R6VHFWTV.js";
+import "../__chunks/EWHSN7GO.js";
+import "../__chunks/BOKMNDR7.js";
 import {
   defaultValue
-} from "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
 import "../__chunks/5XEKIOCW.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/toolbar/toolbar-store.ts
 function createToolbarStore(props = {}) {
-  const syncState = props.store?.getState();
-  return createCompositeStore({
-    ...props,
+  var _a;
+  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+  return createCompositeStore(__spreadProps(__spreadValues({}, props), {
     orientation: defaultValue(
       props.orientation,
-      syncState?.orientation,
+      syncState == null ? void 0 : syncState.orientation,
       "horizontal"
     ),
-    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true)
-  });
+    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
+  }));
 }
 export {
   createToolbarStore

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

@@ -1,28 +1,33 @@
-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 */
+    timeout: HovercardStoreState["timeout"];
+    /** @default 500 */
+    showTimeout: HovercardStoreState["showTimeout"];
+    /** @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>;