@destyler/hover-card 0.0.5 → 0.0.7-beta.1

package/dist/index.mjs

@@ -1,10 +1,335 @@
-export { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, hoverCardArrowProps, hoverCardContentProps, hoverCardPortalProps, hoverCardRootProps, hoverCardTriggerProps } from './component.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/composition';
-import '@destyler/popper';
-import '@destyler/presence';
-import '@destyler/dismissable-layer';
-import '@destyler/dismissable-layer/component';
-import '@destyler/shared';
-import '@destyler/teleport';
+import { createAnatomy } from '@zag-js/anatomy';
+import { getPlacementStyles, getPlacement } from '@zag-js/popper';
+import { createScope } from '@zag-js/dom-query';
+import { createMachine, guards } from '@zag-js/core';
+import { trackDismissableElement } from '@zag-js/dismissable';
+import { compact, createSplitProps } from '@zag-js/utils';
+import { createProps } from '@zag-js/types';
+
+const anatomy = createAnatomy("hoverCard").parts("arrow", "arrowTip", "trigger", "positioner", "content");
+const parts = anatomy.build();
+
+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))
+});
+
+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" });
+        }
+      });
+    }
+  };
+}
+
+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",
+            "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 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 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);
+          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 = createProps()([
+  "closeDelay",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "onOpenChange",
+  "open.controlled",
+  "open",
+  "openDelay",
+  "positioning"
+]);
+const splitProps = createSplitProps(props);
+
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/hover-card",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7-beta.1",
   "description": "for sighted users to preview content available behind a link.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -10,14 +10,6 @@
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
     },
-    "./resolver": {
-      "types": "./dist/resolver.d.mts",
-      "default": "./dist/resolver.mjs"
-    },
-    "./component": {
-      "types": "./dist/component.d.mts",
-      "default": "./dist/component.mjs"
-    },
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -27,20 +19,18 @@
     "*.d.ts",
     "dist"
   ],
-  "peerDependencies": {
-    "vue": ">=3.4.21"
-  },
   "dependencies": {
-    "@destyler/composition": "0.0.5",
-    "@destyler/dismissable-layer": "0.0.5",
-    "@destyler/popper": "0.0.5",
-    "@destyler/presence": "0.0.5",
-    "@destyler/shared": "0.0.5",
-    "@destyler/teleport": "0.0.5",
-    "@destyler/primitive": "0.0.5"
+    "@zag-js/anatomy": "^0.80.0",
+    "@zag-js/core": "^0.80.0",
+    "@zag-js/dismissable": "^0.80.0",
+    "@zag-js/dom-query": "^0.80.0",
+    "@zag-js/popper": "^0.80.0",
+    "@zag-js/types": "^0.80.0",
+    "@zag-js/utils": "^0.80.0"
   },
   "scripts": {
     "clear": "rimraf ./dist",
+    "clear:node_modules": "rimraf ./node_modules",
     "build": "pnpm run clear && unbuild",
     "stub": "unbuild --stub"
   }

package/README.md

@@ -1,7 +0,0 @@
-# @destyler/hover-card
-
-[![NPM version](https://img.shields.io/npm/v/@destyler/hover-card?color=a1b858&label=)](https://www.npmjs.com/package/@destyler/hover-card)
-
-> for sighted users to preview content available behind a link.
-
-[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)