@ariakit/core - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

CHANGELOG.md

 # @ariakit/core
 
+## 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
@@ -4,0 +60,0 @@

cjs/hovercard/hovercard-store.d.ts

@@ -14,4 +14,5 @@ import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
     /**
-     * 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
@@ -18,0 +19,0 @@ */

cjs/popover/popover-store.d.ts

@@ -6,23 +6,6 @@ import type { DialogStoreFunctions, DialogStoreOptions, DialogStoreState } from "../dialog/dialog-store.js";
 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 {
@@ -53,60 +36,6 @@ /**
     /**
-     * Whether the popover has `position: fixed` or not.
-     * @default false
+     * A symbol that's used to recompute the popover position when the `render`
+     * method is called.
      */
-    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.
-     */
-    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;
 }
@@ -127,19 +56,9 @@ export interface PopoverStoreFunctions extends DialogStoreFunctions {
     /**
-     * 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.
+     * 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.
      */
-    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.
-     */
     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 {
     /**
@@ -146,0 +65,0 @@ * A reference to another popover store that's controlling another popover to

cjs/tooltip/tooltip-store.d.ts

@@ -1,2 +0,2 @@
-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";
@@ -7,23 +7,28 @@ /**
 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>;

esm/combobox/combobox-store.js

 import {
   createPopoverStore
-} from "../__chunks/CUW3E24J.js";
+} from "../__chunks/Z5IDQSMV.js";
 import "../__chunks/MNNKHNLW.js";
@@ -5,0 +5,0 @@ import "../__chunks/ZV2GEGPL.js";

esm/composite/composite-overflow-store.js

 import {
   createPopoverStore
-} from "../__chunks/CUW3E24J.js";
+} from "../__chunks/Z5IDQSMV.js";
 import "../__chunks/MNNKHNLW.js";
@@ -5,0 +5,0 @@ import "../__chunks/ZV2GEGPL.js";

esm/hovercard/hovercard-store.d.ts

@@ -14,4 +14,5 @@ import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
     /**
-     * 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
@@ -18,0 +19,0 @@ */

esm/hovercard/hovercard-store.js

 import {
   createHovercardStore
-} from "../__chunks/AHZW5LR4.js";
-import "../__chunks/CUW3E24J.js";
+} from "../__chunks/3BAGFTL5.js";
+import "../__chunks/Z5IDQSMV.js";
 import "../__chunks/MNNKHNLW.js";
@@ -6,0 +6,0 @@ import "../__chunks/ZV2GEGPL.js";

esm/menu/menu-store.js

 import {
   createHovercardStore
-} from "../__chunks/AHZW5LR4.js";
-import "../__chunks/CUW3E24J.js";
+} from "../__chunks/3BAGFTL5.js";
+import "../__chunks/Z5IDQSMV.js";
 import "../__chunks/MNNKHNLW.js";
@@ -6,0 +6,0 @@ import "../__chunks/ZV2GEGPL.js";

esm/popover/popover-store.d.ts

@@ -6,23 +6,6 @@ import type { DialogStoreFunctions, DialogStoreOptions, DialogStoreState } from "../dialog/dialog-store.js";
 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 {
@@ -53,60 +36,6 @@ /**
     /**
-     * Whether the popover has `position: fixed` or not.
-     * @default false
+     * A symbol that's used to recompute the popover position when the `render`
+     * method is called.
      */
-    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.
-     */
-    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;
 }
@@ -127,19 +56,9 @@ export interface PopoverStoreFunctions extends DialogStoreFunctions {
     /**
-     * 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.
+     * 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.
      */
-    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.
-     */
     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 {
     /**
@@ -146,0 +65,0 @@ * A reference to another popover store that's controlling another popover to

esm/popover/popover-store.js

 import {
   createPopoverStore
-} from "../__chunks/CUW3E24J.js";
+} from "../__chunks/Z5IDQSMV.js";
 import "../__chunks/MNNKHNLW.js";
@@ -5,0 +5,0 @@ import "../__chunks/ZV2GEGPL.js";

esm/select/select-store.js

 import {
   createPopoverStore
-} from "../__chunks/CUW3E24J.js";
+} from "../__chunks/Z5IDQSMV.js";
 import "../__chunks/MNNKHNLW.js";
@@ -5,0 +5,0 @@ import "../__chunks/ZV2GEGPL.js";

esm/tooltip/tooltip-store.d.ts

@@ -1,2 +0,2 @@
-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";
@@ -7,23 +7,28 @@ /**
 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>;

esm/tooltip/tooltip-store.js

 import {
-  createPopoverStore
-} from "../__chunks/CUW3E24J.js";
+  createHovercardStore
+} from "../__chunks/3BAGFTL5.js";
+import "../__chunks/Z5IDQSMV.js";
 import "../__chunks/MNNKHNLW.js";
+import "../__chunks/ZV2GEGPL.js";
 import {
-  createDisclosureStore
-} from "../__chunks/ZV2GEGPL.js";
-import {
   createStore
@@ -20,14 +19,6 @@ } from "../__chunks/BOKMNDR7.js";
 // src/tooltip/tooltip-store.ts
-var tooltips = createStore({ 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 = defaultValue(props.open, syncState == null ? void 0 : syncState.open, false);
-  const disclosure = createDisclosureStore(__spreadProps(__spreadValues({}, props), { open }));
-  const popover = createPopoverStore(__spreadProps(__spreadValues({}, props), {
-    open,
+  const hovercard = createHovercardStore(__spreadProps(__spreadValues({}, props), {
     placement: defaultValue(
@@ -38,59 +29,21 @@ props.placement,
     ),
-    gutter: defaultValue(props.gutter, syncState == null ? void 0 : syncState.gutter, 8)
+    showTimeout: defaultValue(
+      props.showTimeout,
+      syncState == null ? void 0 : syncState.showTimeout,
+      props.timeout,
+      500
+    ),
+    hideTimeout: defaultValue(
+      props.hideTimeout,
+      syncState == null ? void 0 : syncState.hideTimeout,
+      props.timeout,
+      0
+    )
   }));
-  const initialState = __spreadProps(__spreadValues({}, popover.getState()), {
-    timeout: defaultValue(props.timeout, syncState == null ? void 0 : syncState.timeout, 0)
+  const initialState = __spreadProps(__spreadValues({}, hovercard.getState()), {
+    type: defaultValue(props.type, syncState == null ? void 0 : syncState.type, "description"),
+    skipTimeout: defaultValue(props.skipTimeout, syncState == null ? void 0 : syncState.skipTimeout, 300)
   });
-  const tooltip = createStore(
-    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
-    );
-  });
-  return __spreadValues(__spreadValues(__spreadValues({}, popover), disclosure), tooltip);
+  const tooltip = createStore(initialState, hovercard, props.store);
+  return __spreadValues(__spreadValues({}, hovercard), tooltip);
 }
@@ -97,0 +50,0 @@ export {

package.json

 {
   "name": "@ariakit/core",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Ariakit core",
@@ -5,0 +5,0 @@ "sideEffects": false,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

421349

decreased by-21.03%

Lines of code

9125

decreased by-25.41%

No dependency changes