@zag-js/popover 1.34.1 → 1.35.0

package/dist/index.mjs

@@ -1,441 +1,10 @@
-import { createAnatomy } from '@zag-js/anatomy';
-import { raf, getInitialFocus, proxyTabFocus, dataAttr, ariaAttr, isLeftClick, isSafari } from '@zag-js/dom-query';
-import { getPlacement, getPlacementStyles } 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 { createProps } from '@zag-js/types';
-import { createSplitProps } from '@zag-js/utils';
-
-// src/popover.anatomy.ts
-var anatomy = createAnatomy("popover").parts(
-  "arrow",
-  "arrowTip",
-  "anchor",
-  "trigger",
-  "indicator",
-  "positioner",
-  "content",
-  "title",
-  "description",
-  "closeTrigger"
-);
-var parts = anatomy.build();
-var getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
-var getTriggerId = (scope) => scope.ids?.trigger ?? `popover:${scope.id}:trigger`;
-var getContentId = (scope) => scope.ids?.content ?? `popover:${scope.id}:content`;
-var getPositionerId = (scope) => scope.ids?.positioner ?? `popover:${scope.id}:popper`;
-var getArrowId = (scope) => scope.ids?.arrow ?? `popover:${scope.id}:arrow`;
-var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
-var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
-var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
-var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
-var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
-var getContentEl = (scope) => scope.getById(getContentId(scope));
-var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
-var getTitleEl = (scope) => scope.getById(getTitleId(scope));
-var getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
-
-// src/popover.connect.ts
-function connect(service, normalize) {
-  const { state, context, send, computed, prop, scope } = service;
-  const open = state.matches("open");
-  const currentPlacement = context.get("currentPlacement");
-  const portalled = computed("currentPortalled");
-  const rendered = context.get("renderedElements");
-  const popperStyles = getPlacementStyles({
-    ...prop("positioning"),
-    placement: currentPlacement
-  });
-  return {
-    portalled,
-    open,
-    setOpen(nextOpen) {
-      const open2 = state.matches("open");
-      if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "OPEN" : "CLOSE" });
-    },
-    reposition(options = {}) {
-      send({ type: "POSITIONING.SET", options });
-    },
-    getArrowProps() {
-      return normalize.element({
-        id: getArrowId(scope),
-        ...parts.arrow.attrs,
-        dir: prop("dir"),
-        style: popperStyles.arrow
-      });
-    },
-    getArrowTipProps() {
-      return normalize.element({
-        ...parts.arrowTip.attrs,
-        dir: prop("dir"),
-        style: popperStyles.arrowTip
-      });
-    },
-    getAnchorProps() {
-      return normalize.element({
-        ...parts.anchor.attrs,
-        dir: prop("dir"),
-        id: getAnchorId(scope)
-      });
-    },
-    getTriggerProps() {
-      return normalize.button({
-        ...parts.trigger.attrs,
-        dir: prop("dir"),
-        type: "button",
-        "data-placement": currentPlacement,
-        id: getTriggerId(scope),
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
-        "data-state": open ? "open" : "closed",
-        "aria-controls": getContentId(scope),
-        onPointerDown(event) {
-          if (!isLeftClick(event)) return;
-          if (isSafari()) {
-            event.currentTarget.focus();
-          }
-        },
-        onClick(event) {
-          if (event.defaultPrevented) return;
-          send({ type: "TOGGLE" });
-        },
-        onBlur(event) {
-          send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
-        }
-      });
-    },
-    getIndicatorProps() {
-      return normalize.element({
-        ...parts.indicator.attrs,
-        dir: prop("dir"),
-        "data-state": open ? "open" : "closed"
-      });
-    },
-    getPositionerProps() {
-      return normalize.element({
-        id: getPositionerId(scope),
-        ...parts.positioner.attrs,
-        dir: prop("dir"),
-        style: popperStyles.floating
-      });
-    },
-    getContentProps() {
-      return normalize.element({
-        ...parts.content.attrs,
-        dir: prop("dir"),
-        id: getContentId(scope),
-        tabIndex: -1,
-        role: "dialog",
-        "aria-modal": ariaAttr(prop("modal")),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-expanded": dataAttr(open),
-        "aria-labelledby": rendered.title ? getTitleId(scope) : void 0,
-        "aria-describedby": rendered.description ? getDescriptionId(scope) : void 0,
-        "data-placement": currentPlacement
-      });
-    },
-    getTitleProps() {
-      return normalize.element({
-        ...parts.title.attrs,
-        id: getTitleId(scope),
-        dir: prop("dir")
-      });
-    },
-    getDescriptionProps() {
-      return normalize.element({
-        ...parts.description.attrs,
-        id: getDescriptionId(scope),
-        dir: prop("dir")
-      });
-    },
-    getCloseTriggerProps() {
-      return normalize.button({
-        ...parts.closeTrigger.attrs,
-        dir: prop("dir"),
-        id: getCloseTriggerId(scope),
-        type: "button",
-        "aria-label": "close",
-        onClick(event) {
-          if (event.defaultPrevented) return;
-          event.stopPropagation();
-          send({ type: "CLOSE" });
-        }
-      });
-    }
-  };
-}
-var machine = createMachine({
-  props({ props: props2 }) {
-    return {
-      closeOnInteractOutside: true,
-      closeOnEscape: true,
-      autoFocus: true,
-      modal: false,
-      portalled: true,
-      ...props2,
-      positioning: {
-        placement: "bottom",
-        ...props2.positioning
-      }
-    };
-  },
-  initialState({ prop }) {
-    const open = prop("open") || prop("defaultOpen");
-    return open ? "open" : "closed";
-  },
-  context({ bindable }) {
-    return {
-      currentPlacement: bindable(() => ({
-        defaultValue: void 0
-      })),
-      renderedElements: bindable(() => ({
-        defaultValue: { title: true, description: true }
-      }))
-    };
-  },
-  computed: {
-    currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled")
-  },
-  watch({ track, prop, action }) {
-    track([() => prop("open")], () => {
-      action(["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: {
-      effects: [
-        "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"]
-        }
-      }
-    }
-  },
-  implementations: {
-    guards: {
-      isOpenControlled: ({ prop }) => prop("open") != void 0
-    },
-    effects: {
-      trackPositioning({ context, prop, scope }) {
-        context.set("currentPlacement", prop("positioning").placement);
-        const anchorEl = getAnchorEl(scope) ?? getTriggerEl(scope);
-        const getPositionerEl2 = () => getPositionerEl(scope);
-        return getPlacement(anchorEl, getPositionerEl2, {
-          ...prop("positioning"),
-          defer: true,
-          onComplete(data) {
-            context.set("currentPlacement", data.placement);
-          }
-        });
-      },
-      trackDismissableElement({ send, prop, scope }) {
-        const getContentEl2 = () => getContentEl(scope);
-        let restoreFocus = true;
-        return trackDismissableElement(getContentEl2, {
-          type: "popover",
-          pointerBlocking: prop("modal"),
-          exclude: getTriggerEl(scope),
-          defer: true,
-          onEscapeKeyDown(event) {
-            prop("onEscapeKeyDown")?.(event);
-            if (prop("closeOnEscape")) return;
-            event.preventDefault();
-          },
-          onInteractOutside(event) {
-            prop("onInteractOutside")?.(event);
-            if (event.defaultPrevented) return;
-            restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-            if (!prop("closeOnInteractOutside")) {
-              event.preventDefault();
-            }
-          },
-          onPointerDownOutside: prop("onPointerDownOutside"),
-          onFocusOutside: prop("onFocusOutside"),
-          persistentElements: prop("persistentElements"),
-          onRequestDismiss: prop("onRequestDismiss"),
-          onDismiss() {
-            send({ type: "CLOSE", src: "interact-outside", restoreFocus });
-          }
-        });
-      },
-      proxyTabFocus({ prop, scope }) {
-        if (prop("modal") || !prop("portalled")) return;
-        const getContentEl2 = () => getContentEl(scope);
-        return proxyTabFocus(getContentEl2, {
-          triggerElement: getTriggerEl(scope),
-          defer: true,
-          getShadowRoot: true,
-          onFocus(el) {
-            el.focus({ preventScroll: true });
-          }
-        });
-      },
-      hideContentBelow({ prop, scope }) {
-        if (!prop("modal")) return;
-        const getElements = () => [getContentEl(scope), getTriggerEl(scope)];
-        return ariaHidden(getElements, { defer: true });
-      },
-      preventScroll({ prop, scope }) {
-        if (!prop("modal")) return;
-        return preventBodyScroll(scope.getDoc());
-      },
-      trapFocus({ prop, scope }) {
-        if (!prop("modal")) return;
-        const contentEl = () => getContentEl(scope);
-        return trapFocus(contentEl, {
-          initialFocus: () => getInitialFocus({
-            root: getContentEl(scope),
-            getInitialEl: prop("initialFocusEl"),
-            enabled: prop("autoFocus")
-          }),
-          getShadowRoot: true
-        });
-      }
-    },
-    actions: {
-      reposition({ event, prop, scope, context }) {
-        const anchorEl = getAnchorEl(scope) ?? getTriggerEl(scope);
-        const getPositionerEl2 = () => getPositionerEl(scope);
-        getPlacement(anchorEl, getPositionerEl2, {
-          ...prop("positioning"),
-          ...event.options,
-          defer: true,
-          listeners: false,
-          onComplete(data) {
-            context.set("currentPlacement", data.placement);
-          }
-        });
-      },
-      checkRenderedElements({ context, scope }) {
-        raf(() => {
-          Object.assign(context.get("renderedElements"), {
-            title: !!getTitleEl(scope),
-            description: !!getDescriptionEl(scope)
-          });
-        });
-      },
-      setInitialFocus({ prop, scope }) {
-        if (prop("modal")) return;
-        raf(() => {
-          const element = getInitialFocus({
-            root: getContentEl(scope),
-            getInitialEl: prop("initialFocusEl"),
-            enabled: prop("autoFocus")
-          });
-          element?.focus({ preventScroll: true });
-        });
-      },
-      setFinalFocus({ event, scope }) {
-        const restoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
-        if (restoreFocus != null && !restoreFocus) return;
-        raf(() => {
-          const element = getTriggerEl(scope);
-          element?.focus({ preventScroll: true });
-        });
-      },
-      invokeOnOpen({ prop, flush }) {
-        flush(() => {
-          prop("onOpenChange")?.({ open: true });
-        });
-      },
-      invokeOnClose({ prop, flush }) {
-        flush(() => {
-          prop("onOpenChange")?.({ open: false });
-        });
-      },
-      toggleVisibility({ event, send, prop }) {
-        send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: event });
-      }
-    }
-  }
-});
-var props = createProps()([
-  "autoFocus",
-  "closeOnEscape",
-  "closeOnInteractOutside",
-  "dir",
-  "getRootNode",
-  "id",
-  "ids",
-  "initialFocusEl",
-  "modal",
-  "onEscapeKeyDown",
-  "onFocusOutside",
-  "onInteractOutside",
-  "onOpenChange",
-  "onPointerDownOutside",
-  "onRequestDismiss",
-  "defaultOpen",
-  "open",
-  "persistentElements",
-  "portalled",
-  "positioning"
-]);
-var splitProps = createSplitProps(props);
-
-export { anatomy, connect, machine, props, splitProps };
+// src/index.ts
+import { anatomy } from "./popover.anatomy.mjs";
+import { connect } from "./popover.connect.mjs";
+import { machine } from "./popover.machine.mjs";
+export * from "./popover.props.mjs";
+export {
+  anatomy,
+  connect,
+  machine
+};

package/dist/popover.anatomy.d.mts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger">;
+declare const parts: Record<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/popover.anatomy.d.ts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger">;
+declare const parts: Record<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/popover.anatomy.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/popover.anatomy.ts
+var popover_anatomy_exports = {};
+__export(popover_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(popover_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("popover").parts(
+  "arrow",
+  "arrowTip",
+  "anchor",
+  "trigger",
+  "indicator",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+);
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/popover.anatomy.mjs

@@ -0,0 +1,19 @@
+// src/popover.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("popover").parts(
+  "arrow",
+  "arrowTip",
+  "anchor",
+  "trigger",
+  "indicator",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+);
+var parts = anatomy.build();
+export {
+  anatomy,
+  parts
+};

package/dist/popover.connect.d.mts

@@ -0,0 +1,9 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { PopoverService, PopoverApi } from './popover.types.mjs';
+import '@zag-js/core';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+
+declare function connect<T extends PropTypes>(service: PopoverService, normalize: NormalizeProps<T>): PopoverApi<T>;
+
+export { connect };

package/dist/popover.connect.d.ts

@@ -0,0 +1,9 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { PopoverService, PopoverApi } from './popover.types.js';
+import '@zag-js/core';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+
+declare function connect<T extends PropTypes>(service: PopoverService, normalize: NormalizeProps<T>): PopoverApi<T>;
+
+export { connect };