@zag-js/popover 0.0.0-dev-20220707125149 → 0.0.0-dev-20220709094318

package/dist/index.js

@@ -43,6 +43,22 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -51,6 +67,9 @@ var runIfFn = (v, ...a) => {
   return res != null ? res : void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -61,12 +80,28 @@ function getDocument(el) {
   var _a;
   if (isWindow(el))
     return el.document;
+  if (isDocument(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function getEventTarget(event) {
   var _a, _b;
   return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
 }
+function withRootHelpers(domUtils) {
+  const roots = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(roots.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = roots.getDoc(ctx).defaultView) != null ? _a : window;
+    }
+  };
+  return __spreadValues2(__spreadValues2({}, roots), domUtils);
+}
 function contains(parent, child) {
   if (!parent)
     return false;
@@ -193,45 +228,33 @@ var runIfFn2 = (v, ...a) => {
 };
 
 // src/popover.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
+var dom = withRootHelpers({
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
   getAnchorId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.uid}:anchor`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
   },
   getTriggerId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.uid}:trigger`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
   },
   getContentId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.uid}:content`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
   },
-  getPositionerId: (ctx) => `popover:${ctx.uid}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.uid}:arrow`,
+  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.uid}:title`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
   },
   getDescriptionId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.uid}:desc`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
   },
   getCloseButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.uid}:close-button`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.id}:close-button`;
   },
   getAnchorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getAnchorId(ctx)),
   getTriggerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx)),
@@ -253,7 +276,7 @@ var dom = {
       el = dom.getContentEl(ctx);
     return el;
   }
-};
+});
 
 // src/popover.connect.ts
 function connect(state, send, normalize) {
@@ -358,6 +381,9 @@ function getPlatform() {
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
+function isDocument2(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
 function isWindow2(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -365,6 +391,8 @@ function getDocument2(el) {
   var _a;
   if (isWindow2(el))
     return el.document;
+  if (isDocument2(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function getWindow(el) {
@@ -665,12 +693,11 @@ var import_popper2 = require("@zag-js/popper");
 var import_remove_scroll = require("@zag-js/remove-scroll");
 var import_focus_trap = require("focus-trap");
 var { and, or, not } = import_core.guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "popover",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
       closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
@@ -695,7 +722,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: ctx.defaultOpen ? "open" : "closed",
-            actions: ["setupDocument", "checkRenderedElements"]
+            actions: "checkRenderedElements"
           }
         }
       },
@@ -869,13 +896,6 @@ function machine(ctx = {}) {
           });
         });
       },
-      setupDocument(ctx2, evt) {
-        if (evt.doc)
-          ctx2.doc = (0, import_core.ref)(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = (0, import_core.ref)(evt.root);
-        ctx2.uid = evt.id;
-      },
       clearPointerDown(ctx2) {
         ctx2.pointerdownNode = null;
       },

package/dist/index.mjs

@@ -19,6 +19,22 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -27,6 +43,9 @@ var runIfFn = (v, ...a) => {
   return res != null ? res : void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -37,12 +56,28 @@ function getDocument(el) {
   var _a;
   if (isWindow(el))
     return el.document;
+  if (isDocument(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function getEventTarget(event) {
   var _a, _b;
   return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
 }
+function withRootHelpers(domUtils) {
+  const roots = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(roots.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = roots.getDoc(ctx).defaultView) != null ? _a : window;
+    }
+  };
+  return __spreadValues2(__spreadValues2({}, roots), domUtils);
+}
 function contains(parent, child) {
   if (!parent)
     return false;
@@ -169,45 +204,33 @@ var runIfFn2 = (v, ...a) => {
 };
 
 // src/popover.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
+var dom = withRootHelpers({
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
   getAnchorId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.uid}:anchor`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
   },
   getTriggerId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.uid}:trigger`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
   },
   getContentId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.uid}:content`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
   },
-  getPositionerId: (ctx) => `popover:${ctx.uid}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.uid}:arrow`,
+  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.uid}:title`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
   },
   getDescriptionId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.uid}:desc`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
   },
   getCloseButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.uid}:close-button`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.id}:close-button`;
   },
   getAnchorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getAnchorId(ctx)),
   getTriggerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx)),
@@ -229,7 +252,7 @@ var dom = {
       el = dom.getContentEl(ctx);
     return el;
   }
-};
+});
 
 // src/popover.connect.ts
 function connect(state, send, normalize) {
@@ -317,7 +340,7 @@ function connect(state, send, normalize) {
 
 // src/popover.machine.ts
 import { ariaHidden } from "@zag-js/aria-hidden";
-import { createMachine, guards, ref } from "@zag-js/core";
+import { createMachine, guards } from "@zag-js/core";
 
 // ../../utilities/interact-outside/dist/index.mjs
 var runIfFn3 = (v, ...a) => {
@@ -334,6 +357,9 @@ function getPlatform() {
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
+function isDocument2(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
 function isWindow2(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -341,6 +367,8 @@ function getDocument2(el) {
   var _a;
   if (isWindow2(el))
     return el.document;
+  if (isDocument2(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function getWindow(el) {
@@ -641,12 +669,11 @@ import { getPlacement } from "@zag-js/popper";
 import { preventBodyScroll } from "@zag-js/remove-scroll";
 import { createFocusTrap } from "focus-trap";
 var { and, or, not } = guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return createMachine({
     id: "popover",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
       closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
@@ -671,7 +698,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: ctx.defaultOpen ? "open" : "closed",
-            actions: ["setupDocument", "checkRenderedElements"]
+            actions: "checkRenderedElements"
           }
         }
       },
@@ -845,13 +872,6 @@ function machine(ctx = {}) {
           });
         });
       },
-      setupDocument(ctx2, evt) {
-        if (evt.doc)
-          ctx2.doc = ref(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = ref(evt.root);
-        ctx2.uid = evt.id;
-      },
       clearPointerDown(ctx2) {
         ctx2.pointerdownNode = null;
       },

package/dist/popover.dom.d.ts

@@ -1,9 +1,16 @@
 import type { MachineContext as Ctx } from "./popover.types";
 export declare const dom: {
-    getDoc: (ctx: Ctx) => Document;
-    getWin: (ctx: Ctx) => Window & typeof globalThis;
+    getRootNode: (ctx: {
+        getRootNode?: () => Document | Node | ShadowRoot;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: () => Document | Node | ShadowRoot;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: () => Document | Node | ShadowRoot;
+    }) => Window & typeof globalThis;
+} & {
     getActiveEl: (ctx: Ctx) => Element;
-    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
     getAnchorId: (ctx: Ctx) => string;
     getTriggerId: (ctx: Ctx) => string;
     getContentId: (ctx: Ctx) => string;

package/dist/popover.machine.d.ts

@@ -1,2 +1,2 @@
 import type { MachineContext, MachineState, UserDefinedContext } from "./popover.types";
-export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
+export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/popover.types.d.ts

@@ -1,7 +1,7 @@
 import type { StateMachine as S } from "@zag-js/core";
 import type { DismissableElementHandlers } from "@zag-js/dimissable";
 import type { PositioningOptions, Placement } from "@zag-js/popper";
-import type { Context, MaybeElement } from "@zag-js/types";
+import type { CommonProperties, Context, MaybeElement, RequiredBy } from "@zag-js/types";
 declare type ElementIds = Partial<{
     anchor: string;
     trigger: string;
@@ -10,7 +10,7 @@ declare type ElementIds = Partial<{
     description: string;
     closeBtn: string;
 }>;
-declare type PublicContext = DismissableElementHandlers & {
+declare type PublicContext = DismissableElementHandlers & CommonProperties & {
     /**
      * The ids of the elements in the popover. Useful for composition.
      */
@@ -59,7 +59,7 @@ declare type PublicContext = DismissableElementHandlers & {
      */
     defaultOpen?: boolean;
 };
-export declare type UserDefinedContext = Partial<PublicContext>;
+export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
 declare type ComputedContext = Readonly<{
     /**
      * @computed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.0.0-dev-20220707125149",
+  "version": "0.0.0-dev-20220709094318",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@zag-js/aria-hidden": "0.1.0",
-    "@zag-js/core": "0.0.0-dev-20220707125149",
-    "@zag-js/dom-utils": "0.0.0-dev-20220707125149",
-    "@zag-js/popper": "0.0.0-dev-20220707125149",
-    "@zag-js/remove-scroll": "0.0.0-dev-20220707125149",
-    "@zag-js/types": "0.0.0-dev-20220707125149",
+    "@zag-js/core": "0.1.7",
+    "@zag-js/dom-utils": "0.0.0-dev-20220709094318",
+    "@zag-js/popper": "0.0.0-dev-20220709094318",
+    "@zag-js/remove-scroll": "0.0.0-dev-20220709094318",
+    "@zag-js/types": "0.0.0-dev-20220709094318",
     "@zag-js/utils": "0.1.2",
     "focus-trap": "6.9.4"
   },