@destyler/popover 0.0.6 → 0.0.7-beta.2

package/dist/index.mjs

@@ -1,12 +1,437 @@
-export { P as PopoverArrow, a as PopoverClose, c as PopoverContent, l as PopoverPortal, n as PopoverRoot, r as PopoverTrigger, p as popoverArrowProps, b as popoverCloseProps, d as popoverContentProps, m as popoverPortalProps, o as popoverRootProps, s as popoverTriggerProps } from './shared/popover.005a231a.mjs';
-import 'vue';
-import '@destyler/popper';
-import '@destyler/primitive';
-import '@destyler/shared';
-import '@destyler/composition';
-import '@destyler/presence';
-import '@destyler/dismissable-layer';
-import '@destyler/dismissable-layer/component';
-import '@destyler/focus-scope';
-import '@destyler/directives';
-import '@destyler/teleport';
+import { createAnatomy } from '@zag-js/anatomy';
+import { createScope, getFocusables, isSafari, dataAttr, proxyTabFocus, getInitialFocus, raf } from '@zag-js/dom-query';
+import { getPlacementStyles, getPlacement } from '@zag-js/popper';
+import { ariaHidden } from '@zag-js/aria-hidden';
+import { createMachine } from '@zag-js/core';
+import { trackDismissableElement } from '@zag-js/dismissable';
+import { trapFocus } from '@zag-js/focus-trap';
+import { preventBodyScroll } from '@zag-js/remove-scroll';
+import { compact, createSplitProps } from '@zag-js/utils';
+import { createProps } from '@zag-js/types';
+
+const anatomy = createAnatomy("popover").parts(
+  "arrow",
+  "arrowTip",
+  "anchor",
+  "trigger",
+  "indicator",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+);
+const parts = anatomy.build();
+
+const dom = createScope({
+  getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
+  getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
+  getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
+  getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
+  getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
+  getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
+  getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
+  getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
+  getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
+  getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0]
+});
+
+function connect(state, send, normalize) {
+  const open = state.matches("open");
+  const currentPlacement = state.context.currentPlacement;
+  const portalled = state.context.currentPortalled;
+  const rendered = state.context.renderedElements;
+  const popperStyles = getPlacementStyles({
+    ...state.context.positioning,
+    placement: currentPlacement
+  });
+  return {
+    portalled,
+    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
+      });
+    },
+    getAnchorProps() {
+      return normalize.element({
+        ...parts.anchor.attrs,
+        dir: state.context.dir,
+        id: dom.getAnchorId(state.context)
+      });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        "dir": state.context.dir,
+        "type": "button",
+        "data-placement": currentPlacement,
+        "id": dom.getTriggerId(state.context),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": dom.getContentId(state.context),
+        onPointerDown(event) {
+          if (isSafari()) {
+            event.currentTarget.focus();
+          }
+        },
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          send("TOGGLE");
+        },
+        onBlur(event) {
+          send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
+        }
+      });
+    },
+    getIndicatorProps() {
+      return normalize.element({
+        ...parts.indicator.attrs,
+        "dir": state.context.dir,
+        "data-state": open ? "open" : "closed"
+      });
+    },
+    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),
+        "tabIndex": -1,
+        "role": "dialog",
+        "hidden": !open,
+        "data-state": open ? "open" : "closed",
+        "data-expanded": dataAttr(open),
+        "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
+        "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
+        "data-placement": currentPlacement
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...parts.title.attrs,
+        id: dom.getTitleId(state.context),
+        dir: state.context.dir
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...parts.description.attrs,
+        id: dom.getDescriptionId(state.context),
+        dir: state.context.dir
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        ...parts.closeTrigger.attrs,
+        "dir": state.context.dir,
+        "id": dom.getCloseTriggerId(state.context),
+        "type": "button",
+        "aria-label": "close",
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          send("CLOSE");
+        }
+      });
+    }
+  };
+}
+
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "popover",
+      initial: ctx.open ? "open" : "closed",
+      context: {
+        closeOnInteractOutside: true,
+        closeOnEscape: true,
+        autoFocus: true,
+        modal: false,
+        portalled: true,
+        positioning: {
+          placement: "bottom",
+          ...ctx.positioning
+        },
+        currentPlacement: void 0,
+        ...ctx,
+        renderedElements: {
+          title: true,
+          description: true
+        }
+      },
+      computed: {
+        currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
+      },
+      watch: {
+        open: ["toggleVisibility"]
+      },
+      entry: ["checkRenderedElements"],
+      states: {
+        closed: {
+          on: {
+            "CONTROLLED.OPEN": {
+              target: "open",
+              actions: ["setInitialFocus"]
+            },
+            "TOGGLE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "open",
+                actions: ["invokeOnOpen", "setInitialFocus"]
+              }
+            ],
+            "OPEN": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "open",
+                actions: ["invokeOnOpen", "setInitialFocus"]
+              }
+            ]
+          }
+        },
+        open: {
+          activities: [
+            "trapFocus",
+            "preventScroll",
+            "hideContentBelow",
+            "trackPositioning",
+            "trackDismissableElement",
+            "proxyTabFocus"
+          ],
+          on: {
+            "CONTROLLED.CLOSE": {
+              target: "closed",
+              actions: ["setFinalFocus"]
+            },
+            "CLOSE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "closed",
+                actions: ["invokeOnClose", "setFinalFocus"]
+              }
+            ],
+            "TOGGLE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "closed",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "POSITIONING.SET": {
+              actions: "reposition"
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isOpenControlled: (ctx2) => !!ctx2["open.controlled"]
+      },
+      activities: {
+        trackPositioning(ctx2) {
+          ctx2.currentPlacement = ctx2.positioning.placement;
+          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          return getPlacement(anchorEl, getPositionerEl, {
+            ...ctx2.positioning,
+            defer: true,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+            }
+          });
+        },
+        trackDismissableElement(ctx2, _evt, { send }) {
+          const getContentEl = () => dom.getContentEl(ctx2);
+          let restoreFocus = true;
+          return trackDismissableElement(getContentEl, {
+            pointerBlocking: ctx2.modal,
+            exclude: dom.getTriggerEl(ctx2),
+            defer: true,
+            onEscapeKeyDown(event) {
+              ctx2.onEscapeKeyDown?.(event);
+              if (ctx2.closeOnEscape)
+                return;
+              event.preventDefault();
+            },
+            onInteractOutside(event) {
+              ctx2.onInteractOutside?.(event);
+              if (event.defaultPrevented)
+                return;
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+              if (!ctx2.closeOnInteractOutside) {
+                event.preventDefault();
+              }
+            },
+            onPointerDownOutside: ctx2.onPointerDownOutside,
+            onFocusOutside: ctx2.onFocusOutside,
+            persistentElements: ctx2.persistentElements,
+            onDismiss() {
+              send({ type: "CLOSE", src: "interact-outside", restoreFocus });
+            }
+          });
+        },
+        proxyTabFocus(ctx2) {
+          if (ctx2.modal || !ctx2.portalled)
+            return;
+          const getContentEl = () => dom.getContentEl(ctx2);
+          return proxyTabFocus(getContentEl, {
+            triggerElement: dom.getTriggerEl(ctx2),
+            defer: true,
+            onFocus(el) {
+              el.focus({ preventScroll: true });
+            }
+          });
+        },
+        hideContentBelow(ctx2) {
+          if (!ctx2.modal)
+            return;
+          const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
+          return ariaHidden(getElements, { defer: true });
+        },
+        preventScroll(ctx2) {
+          if (!ctx2.modal)
+            return;
+          return preventBodyScroll(dom.getDoc(ctx2));
+        },
+        trapFocus(ctx2) {
+          if (!ctx2.modal)
+            return;
+          const contentEl = () => dom.getContentEl(ctx2);
+          return trapFocus(contentEl, {
+            initialFocus: () => getInitialFocus({
+              root: dom.getContentEl(ctx2),
+              getInitialEl: ctx2.initialFocusEl,
+              enabled: ctx2.autoFocus
+            })
+          });
+        }
+      },
+      actions: {
+        reposition(ctx2, evt) {
+          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          getPlacement(anchorEl, getPositionerEl, {
+            ...ctx2.positioning,
+            ...evt.options,
+            defer: true,
+            listeners: false,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+            }
+          });
+        },
+        checkRenderedElements(ctx2) {
+          raf(() => {
+            Object.assign(ctx2.renderedElements, {
+              title: !!dom.getTitleEl(ctx2),
+              description: !!dom.getDescriptionEl(ctx2)
+            });
+          });
+        },
+        setInitialFocus(ctx2) {
+          if (ctx2.modal)
+            return;
+          raf(() => {
+            const element = getInitialFocus({
+              root: dom.getContentEl(ctx2),
+              getInitialEl: ctx2.initialFocusEl,
+              enabled: ctx2.autoFocus
+            });
+            element?.focus({ preventScroll: true });
+          });
+        },
+        setFinalFocus(ctx2, evt) {
+          const restoreFocus = evt.restoreFocus ?? evt.previousEvent?.restoreFocus;
+          if (restoreFocus != null && !restoreFocus)
+            return;
+          raf(() => {
+            const element = dom.getTriggerEl(ctx2);
+            element?.focus({ preventScroll: true });
+          });
+        },
+        invokeOnOpen(ctx2) {
+          ctx2.onOpenChange?.({ open: true });
+        },
+        invokeOnClose(ctx2) {
+          ctx2.onOpenChange?.({ open: false });
+        },
+        toggleVisibility(ctx2, evt, { send }) {
+          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
+        }
+      }
+    }
+  );
+}
+
+const props = createProps()([
+  "autoFocus",
+  "closeOnEscape",
+  "closeOnInteractOutside",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "modal",
+  "onEscapeKeyDown",
+  "onFocusOutside",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "open.controlled",
+  "open",
+  "persistentElements",
+  "portalled",
+  "positioning"
+]);
+const splitProps = createSplitProps(props);
+
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/popover",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.7-beta.2",
   "description": "displays rich content in a portal, triggered by a button.",
   "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,22 +19,21 @@
     "*.d.ts",
     "dist"
   ],
-  "peerDependencies": {
-    "vue": ">=3.4.21"
-  },
   "dependencies": {
-    "@destyler/composition": "0.0.6",
-    "@destyler/directives": "0.0.6",
-    "@destyler/dismissable-layer": "0.0.6",
-    "@destyler/popper": "0.0.6",
-    "@destyler/primitive": "0.0.6",
-    "@destyler/presence": "0.0.6",
-    "@destyler/shared": "0.0.6",
-    "@destyler/teleport": "0.0.6",
-    "@destyler/focus-scope": "0.0.6"
+    "@zag-js/anatomy": "^0.80.0",
+    "@zag-js/aria-hidden": "^0.80.0",
+    "@zag-js/core": "^0.80.0",
+    "@zag-js/dismissable": "^0.80.0",
+    "@zag-js/dom-query": "^0.80.0",
+    "@zag-js/focus-trap": "^0.80.0",
+    "@zag-js/popper": "^0.80.0",
+    "@zag-js/remove-scroll": "^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/popover
-
-[![NPM version](https://img.shields.io/npm/v/@destyler/popover?color=a1b858&popover=)](https://www.npmjs.com/package/@destyler/popover)
-
-> displays rich content in a portal, triggered by a button.
-
-[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)

package/dist/component.cjs

@@ -1,56 +0,0 @@
-'use strict';
-
-const vue = require('vue');
-const popper = require('@destyler/popper');
-const index = require('./shared/popover.49550c9f.cjs');
-require('@destyler/primitive');
-require('@destyler/shared');
-require('@destyler/composition');
-require('@destyler/presence');
-require('@destyler/dismissable-layer');
-require('@destyler/dismissable-layer/component');
-require('@destyler/focus-scope');
-require('@destyler/directives');
-require('@destyler/teleport');
-
-const popoverAnchorProps = {
-  ...popper.popperAnchorProps
-};
-const PopoverAnchor = vue.defineComponent({
-  name: "DestylerPopoverAnchor",
-  props: popoverAnchorProps,
-  setup() {
-    const rootContext = index.injectPopoverRootContext();
-    vue.onBeforeMount(() => {
-      rootContext.hasCustomAnchor.value = true;
-    });
-    vue.onUnmounted(() => {
-      rootContext.hasCustomAnchor.value = false;
-    });
-  },
-  render() {
-    return vue.h(popper.PopperAnchor, vue.mergeProps(this.$props, {}), () => this.$slots.default?.());
-  }
-});
-
-exports.PopoverArrow = index.PopoverArrow;
-exports.PopoverClose = index.PopoverClose;
-exports.PopoverContent = index.PopoverContent;
-exports.PopoverContentImpl = index.PopoverContentImpl;
-exports.PopoverContentModal = index.PopoverContentModal;
-exports.PopoverContentNonModal = index.PopoverContentNonModal;
-exports.PopoverPortal = index.PopoverPortal;
-exports.PopoverRoot = index.PopoverRoot;
-exports.PopoverTrigger = index.PopoverTrigger;
-exports.popoverArrowProps = index.popoverArrowProps;
-exports.popoverCloseProps = index.popoverCloseProps;
-exports.popoverContentEmits = index.popoverContentEmits;
-exports.popoverContentImplEmits = index.popoverContentImplEmits;
-exports.popoverContentImplProps = index.popoverContentImplProps;
-exports.popoverContentProps = index.popoverContentProps;
-exports.popoverPortalProps = index.popoverPortalProps;
-exports.popoverRootEmits = index.popoverRootEmits;
-exports.popoverRootProps = index.popoverRootProps;
-exports.popoverTriggerProps = index.popoverTriggerProps;
-exports.PopoverAnchor = PopoverAnchor;
-exports.popoverAnchorProps = popoverAnchorProps;