@destyler/hover-card 0.0.7-beta.7 → 0.1.0

package/dist/index.d.ts

@@ -1,100 +1,104 @@
-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">;
+import * as _destyler_anatomy0 from "@destyler/anatomy";
+import { Placement, PositioningOptions } from "@destyler/popper";
+import * as _destyler_xstate0 from "@destyler/xstate";
+import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
+import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
 
+//#region src/anatomy.d.ts
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"arrow" | "arrowTip" | "trigger" | "positioner" | "content">;
+//#endregion
+//#region src/types.d.ts
 interface OpenChangeDetails {
-    open: boolean;
+  open: boolean;
 }
 type ElementIds = Partial<{
-    trigger: string;
-    content: string;
-    positioner: string;
-    arrow: string;
+  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;
+  /**
+   * 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;
+  /**
+   * @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';
+  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>;
+type State = XState<MachineContext, MachineState>;
+type Send = XSend<AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, 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'];
+  /**
+   * 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'];
 }
-
+//#endregion
+//#region src/connect.d.ts
 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 };
+//#endregion
+//#region src/machine.d.ts
+declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+//#endregion
+//#region src/props.d.ts
+declare const props: ("open" | "id" | "ids" | "onOpenChange" | "openDelay" | "closeDelay" | "open.controlled" | "positioning" | "dir" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "open" | "id" | "ids" | "onOpenChange" | "openDelay" | "closeDelay" | "open.controlled" | "positioning" | "dir" | "getRootNode">];
+//#endregion
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, type Placement, type PositioningOptions, type Service, anatomy, connect, machine, props, splitProps };

package/dist/index.js

@@ -0,0 +1,330 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { getPlacement, getPlacementStyles } from "@destyler/popper";
+import { createScope } from "@destyler/dom";
+import { trackDismissableElement } from "@destyler/dismissable";
+import { compact, createSplitProps } from "@destyler/utils";
+import { createMachine, guards } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("hoverCard").parts("arrow", "arrowTip", "trigger", "positioner", "content");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = 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))
+});
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const open = state.hasTag("open");
+	const popperStyles = 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"
+					});
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+const { not, and } = guards;
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return 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",
+					"CONTROLLED.CLOSE": "closed",
+					"POINTER_LEAVE": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose", "toggleVisibility"]
+					}, {
+						target: "closed",
+						actions: ["invokeOnClose"]
+					}],
+					"TRIGGER_BLUR": [{
+						guard: and("isOpenControlled", not("isPointer")),
+						actions: ["invokeOnClose", "toggleVisibility"]
+					}, {
+						guard: not("isPointer"),
+						target: "closed",
+						actions: ["invokeOnClose"]
+					}],
+					"CLOSE": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose", "toggleVisibility"]
+					}, {
+						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",
+					"CONTROLLED.OPEN": "open",
+					"POINTER_ENTER": {
+						target: "open",
+						actions: ["setIsPointer"]
+					}
+				}
+			}
+		}
+	}, {
+		delays: {
+			OPEN_DELAY: (ctx$1) => ctx$1.openDelay,
+			CLOSE_DELAY: (ctx$1) => ctx$1.closeDelay
+		},
+		guards: {
+			isPointer: (ctx$1) => !!ctx$1.isPointer,
+			isOpenControlled: (ctx$1) => !!ctx$1["open.controlled"]
+		},
+		activities: {
+			trackPositioning(ctx$1) {
+				ctx$1.currentPlacement ||= ctx$1.positioning.placement;
+				const getPositionerEl = () => dom.getPositionerEl(ctx$1);
+				return getPlacement(dom.getTriggerEl(ctx$1), getPositionerEl, {
+					...ctx$1.positioning,
+					defer: true,
+					onComplete(data) {
+						ctx$1.currentPlacement = data.placement;
+					}
+				});
+			},
+			trackDismissableElement(ctx$1, _evt, { send }) {
+				const getContentEl = () => dom.getContentEl(ctx$1);
+				return trackDismissableElement(getContentEl, {
+					defer: true,
+					exclude: [dom.getTriggerEl(ctx$1)],
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside"
+						});
+					},
+					onFocusOutside(event) {
+						event.preventDefault();
+					}
+				});
+			}
+		},
+		actions: {
+			invokeOnClose(ctx$1) {
+				ctx$1.onOpenChange?.({ open: false });
+			},
+			invokeOnOpen(ctx$1) {
+				ctx$1.onOpenChange?.({ open: true });
+			},
+			setIsPointer(ctx$1) {
+				ctx$1.isPointer = true;
+			},
+			clearIsPointer(ctx$1) {
+				ctx$1.isPointer = false;
+			},
+			reposition(ctx$1, evt) {
+				const getPositionerEl = () => dom.getPositionerEl(ctx$1);
+				getPlacement(dom.getTriggerEl(ctx$1), getPositionerEl, {
+					...ctx$1.positioning,
+					...evt.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						ctx$1.currentPlacement = data.placement;
+					}
+				});
+			},
+			toggleVisibility(ctx$1, evt, { send }) {
+				queueMicrotask(() => {
+					send({
+						type: ctx$1.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+						previousEvent: evt
+					});
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"closeDelay",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"onOpenChange",
+	"open.controlled",
+	"open",
+	"openDelay",
+	"positioning"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,37 +1,33 @@
 {
   "name": "@destyler/hover-card",
   "type": "module",
-  "version": "0.0.7-beta.7",
+  "version": "0.1.0",
   "description": "for sighted users to preview content available behind a link.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./*": "./*"
+    ".": "./dist/index.js"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@zag-js/anatomy": "^0.82.1",
-    "@zag-js/core": "^0.82.1",
-    "@zag-js/dismissable": "^0.82.1",
-    "@zag-js/dom-query": "^0.82.1",
-    "@zag-js/popper": "^0.82.1",
-    "@zag-js/types": "^0.82.1",
-    "@zag-js/utils": "^0.82.1"
+    "@destyler/anatomy": "0.1.0",
+    "@destyler/dismissable": "0.1.0",
+    "@destyler/popper": "0.1.0",
+    "@destyler/dom": "0.1.0",
+    "@destyler/types": "0.1.0",
+    "@destyler/utils": "0.1.0",
+    "@destyler/xstate": "0.1.0"
   },
   "scripts": {
     "clear": "rimraf ./dist",
     "clear:node_modules": "rimraf ./node_modules",
-    "build": "pnpm run clear && unbuild",
-    "stub": "unbuild --stub"
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
   }
 }