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

package/dist/index.mjs

@@ -1,335 +0,0 @@
-import { createAnatomy } from '@zag-js/anatomy';
-import { getPlacementStyles, getPlacement } from '@zag-js/popper';
-import { createScope } from '@zag-js/dom-query';
-import { guards, createMachine } 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 };