@destyler/hover-card 0.0.7-beta.5 → 0.0.7-beta.9

package/dist/index.cjs

@@ -1,341 +0,0 @@
-'use strict';
-
-const anatomy$1 = require('@zag-js/anatomy');
-const popper = require('@zag-js/popper');
-const domQuery = require('@zag-js/dom-query');
-const core = require('@zag-js/core');
-const dismissable = require('@zag-js/dismissable');
-const utils = require('@zag-js/utils');
-const types = require('@zag-js/types');
-
-const anatomy = anatomy$1.createAnatomy("hoverCard").parts("arrow", "arrowTip", "trigger", "positioner", "content");
-const parts = anatomy.build();
-
-const dom = domQuery.createScope({
-  getTriggerId: (ctx) => ctx.ids?.trigger ?? `hover-card:${ctx.id}:trigger`,
-  getContentId: (ctx) => ctx.ids?.content ?? `hover-card:${ctx.id}:content`,
-  getPositionerId: (ctx) => ctx.ids?.positioner ?? `hover-card:${ctx.id}:popper`,
-  getArrowId: (ctx) => ctx.ids?.arrow ?? `hover-card:${ctx.id}:arrow`,
-  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
-  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
-  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx))
-});
-
-function connect(state, send, normalize) {
-  const open = state.hasTag("open");
-  const popperStyles = popper.getPlacementStyles({
-    ...state.context.positioning,
-    placement: state.context.currentPlacement
-  });
-  return {
-    open,
-    setOpen(nextOpen) {
-      if (nextOpen === open)
-        return;
-      send(nextOpen ? "OPEN" : "CLOSE");
-    },
-    reposition(options = {}) {
-      send({ type: "POSITIONING.SET", options });
-    },
-    getArrowProps() {
-      return normalize.element({
-        id: dom.getArrowId(state.context),
-        ...parts.arrow.attrs,
-        dir: state.context.dir,
-        style: popperStyles.arrow
-      });
-    },
-    getArrowTipProps() {
-      return normalize.element({
-        ...parts.arrowTip.attrs,
-        dir: state.context.dir,
-        style: popperStyles.arrowTip
-      });
-    },
-    getTriggerProps() {
-      return normalize.element({
-        ...parts.trigger.attrs,
-        "dir": state.context.dir,
-        "data-placement": state.context.currentPlacement,
-        "id": dom.getTriggerId(state.context),
-        "data-state": open ? "open" : "closed",
-        onPointerEnter(event) {
-          if (event.pointerType === "touch")
-            return;
-          send({ type: "POINTER_ENTER", src: "trigger" });
-        },
-        onPointerLeave(event) {
-          if (event.pointerType === "touch")
-            return;
-          send({ type: "POINTER_LEAVE", src: "trigger" });
-        },
-        onFocus() {
-          send("TRIGGER_FOCUS");
-        },
-        onBlur() {
-          send("TRIGGER_BLUR");
-        }
-      });
-    },
-    getPositionerProps() {
-      return normalize.element({
-        id: dom.getPositionerId(state.context),
-        ...parts.positioner.attrs,
-        dir: state.context.dir,
-        style: popperStyles.floating
-      });
-    },
-    getContentProps() {
-      return normalize.element({
-        ...parts.content.attrs,
-        "dir": state.context.dir,
-        "id": dom.getContentId(state.context),
-        "hidden": !open,
-        "data-state": open ? "open" : "closed",
-        "data-placement": state.context.currentPlacement,
-        onPointerEnter(event) {
-          if (event.pointerType === "touch")
-            return;
-          send({ type: "POINTER_ENTER", src: "content" });
-        },
-        onPointerLeave(event) {
-          if (event.pointerType === "touch")
-            return;
-          send({ type: "POINTER_LEAVE", src: "content" });
-        }
-      });
-    }
-  };
-}
-
-const { not, and } = core.guards;
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "hover-card",
-      initial: ctx.open ? "open" : "closed",
-      context: {
-        openDelay: 700,
-        closeDelay: 300,
-        currentPlacement: void 0,
-        ...ctx,
-        positioning: {
-          placement: "bottom",
-          ...ctx.positioning
-        }
-      },
-      watch: {
-        open: ["toggleVisibility"]
-      },
-      states: {
-        closed: {
-          tags: ["closed"],
-          entry: ["clearIsPointer"],
-          on: {
-            "CONTROLLED.OPEN": "open",
-            "POINTER_ENTER": {
-              target: "opening",
-              actions: ["setIsPointer"]
-            },
-            "TRIGGER_FOCUS": "opening",
-            "OPEN": "opening"
-          }
-        },
-        opening: {
-          tags: ["closed"],
-          after: {
-            OPEN_DELAY: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen"]
-              }
-            ]
-          },
-          on: {
-            "CONTROLLED.OPEN": "open",
-            "POINTER_LEAVE": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "TRIGGER_BLUR": [
-              {
-                guard: and("isOpenControlled", not("isPointer")),
-                actions: ["invokeOnClose"]
-              },
-              {
-                guard: not("isPointer"),
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "CLOSE": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ]
-          }
-        },
-        open: {
-          tags: ["open"],
-          activities: ["trackDismissableElement", "trackPositioning"],
-          on: {
-            "CONTROLLED.CLOSE": "closed",
-            "POINTER_ENTER": {
-              actions: ["setIsPointer"]
-            },
-            "POINTER_LEAVE": "closing",
-            "CLOSE": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "TRIGGER_BLUR": [
-              {
-                guard: and("isOpenControlled", not("isPointer")),
-                actions: ["invokeOnClose"]
-              },
-              {
-                guard: not("isPointer"),
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "POSITIONING.SET": {
-              actions: "reposition"
-            }
-          }
-        },
-        closing: {
-          tags: ["open"],
-          activities: ["trackPositioning"],
-          after: {
-            CLOSE_DELAY: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ]
-          },
-          on: {
-            "CONTROLLED.CLOSE": "closed",
-            "POINTER_ENTER": {
-              target: "open",
-              // no need to invokeOnOpen here because it's still open (but about to close)
-              actions: ["setIsPointer"]
-            }
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        isPointer: (ctx2) => !!ctx2.isPointer,
-        isOpenControlled: (ctx2) => !!ctx2["open.controlled"]
-      },
-      activities: {
-        trackPositioning(ctx2) {
-          ctx2.currentPlacement = ctx2.positioning.placement;
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          return popper.getPlacement(dom.getTriggerEl(ctx2), getPositionerEl, {
-            ...ctx2.positioning,
-            defer: true,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
-        },
-        trackDismissableElement(ctx2, _evt, { send }) {
-          const getContentEl = () => dom.getContentEl(ctx2);
-          return dismissable.trackDismissableElement(getContentEl, {
-            defer: true,
-            exclude: [dom.getTriggerEl(ctx2)],
-            onDismiss() {
-              send({ type: "CLOSE", src: "interact-outside" });
-            },
-            onFocusOutside(event) {
-              event.preventDefault();
-            }
-          });
-        }
-      },
-      actions: {
-        invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.({ open: false });
-        },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.({ open: true });
-        },
-        setIsPointer(ctx2) {
-          ctx2.isPointer = true;
-        },
-        clearIsPointer(ctx2) {
-          ctx2.isPointer = false;
-        },
-        reposition(ctx2, evt) {
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          popper.getPlacement(dom.getTriggerEl(ctx2), getPositionerEl, {
-            ...ctx2.positioning,
-            ...evt.options,
-            defer: true,
-            listeners: false,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
-        },
-        toggleVisibility(ctx2, evt, { send }) {
-          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
-        }
-      },
-      delays: {
-        OPEN_DELAY: (ctx2) => ctx2.openDelay,
-        CLOSE_DELAY: (ctx2) => ctx2.closeDelay
-      }
-    }
-  );
-}
-
-const props = types.createProps()([
-  "closeDelay",
-  "dir",
-  "getRootNode",
-  "id",
-  "ids",
-  "onOpenChange",
-  "open.controlled",
-  "open",
-  "openDelay",
-  "positioning"
-]);
-const splitProps = utils.createSplitProps(props);
-
-exports.anatomy = anatomy;
-exports.connect = connect;
-exports.machine = machine;
-exports.props = props;
-exports.splitProps = splitProps;

package/dist/index.d.cts

@@ -1,100 +0,0 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } from '@zag-js/core';
-import { PositioningOptions, Placement } from '@zag-js/popper';
-export { Placement, PositioningOptions } from '@zag-js/popper';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"arrow" | "arrowTip" | "trigger" | "positioner" | "content">;
-
-interface OpenChangeDetails {
-    open: boolean;
-}
-type ElementIds = Partial<{
-    trigger: string;
-    content: string;
-    positioner: string;
-    arrow: string;
-}>;
-interface PublicContext extends DirectionProperty, CommonProperties {
-    /**
-     * The ids of the elements in the popover. Useful for composition.
-     */
-    'ids'?: ElementIds | undefined;
-    /**
-     * Function called when the hover card opens or closes.
-     */
-    'onOpenChange'?: ((details: OpenChangeDetails) => void) | undefined;
-    /**
-     * The duration from when the mouse enters the trigger until the hover card opens.
-     * @default 700
-     */
-    'openDelay': number;
-    /**
-     * The duration from when the mouse leaves the trigger or content until the hover card closes.
-     * @default 300
-     */
-    'closeDelay': number;
-    /**
-     * Whether the hover card is open
-     */
-    'open'?: boolean | undefined;
-    /**
-     * Whether the hover card is controlled by the user
-     */
-    'open.controlled'?: boolean | undefined;
-    /**
-     * The user provided options used to position the popover content
-     */
-    'positioning': PositioningOptions;
-}
-interface PrivateContext {
-    /**
-     * @internal
-     * The computed placement of the tooltip.
-     */
-    currentPlacement?: Placement | undefined;
-    /**
-     * @internal
-     * Whether the hover card is open by pointer
-     */
-    isPointer?: boolean | undefined;
-}
-type ComputedContext = Readonly<{}>;
-type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-interface MachineState {
-    value: 'opening' | 'open' | 'closing' | 'closed';
-    tags: 'open' | 'closed';
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<T extends PropTypes = PropTypes> {
-    /**
-     * Whether the hover card is open
-     */
-    open: boolean;
-    /**
-     * Function to open the hover card
-     */
-    setOpen: (open: boolean) => void;
-    /**
-     * Function to reposition the popover
-     */
-    reposition: (options?: Partial<PositioningOptions>) => void;
-    getArrowProps: () => T['element'];
-    getArrowTipProps: () => T['element'];
-    getTriggerProps: () => T['element'];
-    getPositionerProps: () => T['element'];
-    getContentProps: () => T['element'];
-}
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-declare const props: ("ids" | "onOpenChange" | "openDelay" | "closeDelay" | "open" | "open.controlled" | "positioning" | "id" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "onOpenChange" | "openDelay" | "closeDelay" | "open" | "open.controlled" | "positioning" | "id" | "dir" | "getRootNode">];
-
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, type Service, anatomy, connect, machine, props, splitProps };

package/dist/index.d.mts

@@ -1,100 +0,0 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } from '@zag-js/core';
-import { PositioningOptions, Placement } from '@zag-js/popper';
-export { Placement, PositioningOptions } from '@zag-js/popper';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"arrow" | "arrowTip" | "trigger" | "positioner" | "content">;
-
-interface OpenChangeDetails {
-    open: boolean;
-}
-type ElementIds = Partial<{
-    trigger: string;
-    content: string;
-    positioner: string;
-    arrow: string;
-}>;
-interface PublicContext extends DirectionProperty, CommonProperties {
-    /**
-     * The ids of the elements in the popover. Useful for composition.
-     */
-    'ids'?: ElementIds | undefined;
-    /**
-     * Function called when the hover card opens or closes.
-     */
-    'onOpenChange'?: ((details: OpenChangeDetails) => void) | undefined;
-    /**
-     * The duration from when the mouse enters the trigger until the hover card opens.
-     * @default 700
-     */
-    'openDelay': number;
-    /**
-     * The duration from when the mouse leaves the trigger or content until the hover card closes.
-     * @default 300
-     */
-    'closeDelay': number;
-    /**
-     * Whether the hover card is open
-     */
-    'open'?: boolean | undefined;
-    /**
-     * Whether the hover card is controlled by the user
-     */
-    'open.controlled'?: boolean | undefined;
-    /**
-     * The user provided options used to position the popover content
-     */
-    'positioning': PositioningOptions;
-}
-interface PrivateContext {
-    /**
-     * @internal
-     * The computed placement of the tooltip.
-     */
-    currentPlacement?: Placement | undefined;
-    /**
-     * @internal
-     * Whether the hover card is open by pointer
-     */
-    isPointer?: boolean | undefined;
-}
-type ComputedContext = Readonly<{}>;
-type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-interface MachineState {
-    value: 'opening' | 'open' | 'closing' | 'closed';
-    tags: 'open' | 'closed';
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<T extends PropTypes = PropTypes> {
-    /**
-     * Whether the hover card is open
-     */
-    open: boolean;
-    /**
-     * Function to open the hover card
-     */
-    setOpen: (open: boolean) => void;
-    /**
-     * Function to reposition the popover
-     */
-    reposition: (options?: Partial<PositioningOptions>) => void;
-    getArrowProps: () => T['element'];
-    getArrowTipProps: () => T['element'];
-    getTriggerProps: () => T['element'];
-    getPositionerProps: () => T['element'];
-    getContentProps: () => T['element'];
-}
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-declare const props: ("ids" | "onOpenChange" | "openDelay" | "closeDelay" | "open" | "open.controlled" | "positioning" | "id" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "onOpenChange" | "openDelay" | "closeDelay" | "open" | "open.controlled" | "positioning" | "id" | "dir" | "getRootNode">];
-
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, type Service, anatomy, connect, machine, props, splitProps };