@zag-js/popover - npm Package Compare versions

Comparing version 0.0.0-dev-20220416152643 to 0.0.0-dev-20220417135151

dist/index.d.ts

 export { connect } from "./popover.connect";
 export { machine } from "./popover.machine";
-export type { MachineContext, MachineState } from "./popover.types";
+export type { UserDefinedContext as Context } from "./popover.types";
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -730,243 +730,247 @@ var __defProp = Object.defineProperty;
 var { and, or } = import_core.guards;
-var machine = (0, import_core.createMachine)({
-  id: "popover",
-  initial: "unknown",
-  context: {
-    isTitleRendered: true,
-    isDescriptionRendered: true,
-    isAnchorRendered: false,
-    uid: "",
-    closeOnBlur: true,
-    closeOnEsc: true,
-    autoFocus: true,
-    modal: false,
-    positioning: { placement: "bottom" },
-    currentPlacement: void 0
-  },
-  computed: {
-    currentPortalled: (ctx) => !!ctx.modal || !!ctx.portalled
-  },
-  states: {
-    unknown: {
-      on: {
-        SETUP: {
-          target: "closed",
-          actions: ["setupDocument", "checkRenderedElements"]
+function machine(ctx = {}) {
+  return (0, import_core.createMachine)({
+    id: "popover",
+    initial: "unknown",
+    context: __spreadValues({
+      isTitleRendered: true,
+      isDescriptionRendered: true,
+      isAnchorRendered: false,
+      uid: "",
+      closeOnBlur: true,
+      closeOnEsc: true,
+      autoFocus: true,
+      modal: false,
+      positioning: __spreadValues({
+        placement: "bottom"
+      }, ctx.positioning),
+      currentPlacement: void 0
+    }, ctx),
+    computed: {
+      currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
+    },
+    states: {
+      unknown: {
+        on: {
+          SETUP: {
+            target: "closed",
+            actions: ["setupDocument", "checkRenderedElements"]
+          }
         }
-      }
-    },
-    closed: {
-      entry: ["clearPointerDown", "invokeOnClose"],
-      on: {
-        TRIGGER_CLICK: "open",
-        OPEN: "open"
-      }
-    },
-    open: {
-      activities: [
-        "trackPointerDown",
-        "trapFocus",
-        "preventScroll",
-        "hideContentBelow",
-        "disableOutsidePointerEvents",
-        "computePlacement"
-      ],
-      entry: (0, import_core.choose)([
-        {
-          guard: "autoFocus",
-          actions: ["setInitialFocus", "invokeOnOpen"]
-        },
-        { actions: ["focusContent", "invokeOnOpen"] }
-      ]),
-      on: {
-        CLOSE: {
-          target: "closed",
-          actions: "focusTrigger"
-        },
-        TRIGGER_CLICK: {
-          target: "closed",
-          actions: "focusTrigger"
-        },
-        ESCAPE: {
-          guard: "closeOnEsc",
-          target: "closed",
-          actions: "focusTrigger"
-        },
-        TAB: {
-          guard: and("isLastTabbableElement", "closeOnBlur", "portalled"),
-          target: "closed",
-          actions: "focusNextTabbableElementAfterTrigger"
-        },
-        SHIFT_TAB: {
-          guard: and(or("isFirstTabbableElement", "isContentFocused"), "closeOnBlur", "portalled"),
-          target: "closed",
-          actions: "focusTrigger"
-        },
-        INTERACT_OUTSIDE: [
+      },
+      closed: {
+        entry: ["clearPointerDown", "invokeOnClose"],
+        on: {
+          TRIGGER_CLICK: "open",
+          OPEN: "open"
+        }
+      },
+      open: {
+        activities: [
+          "trackPointerDown",
+          "trapFocus",
+          "preventScroll",
+          "hideContentBelow",
+          "disableOutsidePointerEvents",
+          "computePlacement"
+        ],
+        entry: (0, import_core.choose)([
           {
-            guard: and("closeOnBlur", "isRelatedTargetFocusable"),
-            target: "closed"
+            guard: "autoFocus",
+            actions: ["setInitialFocus", "invokeOnOpen"]
           },
-          {
-            guard: "closeOnBlur",
+          { actions: ["focusContent", "invokeOnOpen"] }
+        ]),
+        on: {
+          CLOSE: {
             target: "closed",
             actions: "focusTrigger"
-          }
-        ]
+          },
+          TRIGGER_CLICK: {
+            target: "closed",
+            actions: "focusTrigger"
+          },
+          ESCAPE: {
+            guard: "closeOnEsc",
+            target: "closed",
+            actions: "focusTrigger"
+          },
+          TAB: {
+            guard: and("isLastTabbableElement", "closeOnBlur", "portalled"),
+            target: "closed",
+            actions: "focusNextTabbableElementAfterTrigger"
+          },
+          SHIFT_TAB: {
+            guard: and(or("isFirstTabbableElement", "isContentFocused"), "closeOnBlur", "portalled"),
+            target: "closed",
+            actions: "focusTrigger"
+          },
+          INTERACT_OUTSIDE: [
+            {
+              guard: and("closeOnBlur", "isRelatedTargetFocusable"),
+              target: "closed"
+            },
+            {
+              guard: "closeOnBlur",
+              target: "closed",
+              actions: "focusTrigger"
+            }
+          ]
+        }
       }
     }
-  }
-}, {
-  activities: {
-    computePlacement(ctx) {
-      ctx.currentPlacement = ctx.positioning.placement;
-      const anchorEl = ctx.isAnchorRendered ? dom.getAnchorEl(ctx) : dom.getTriggerEl(ctx);
-      return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx), __spreadProps(__spreadValues({}, ctx.positioning), {
-        onComplete(data) {
-          ctx.currentPlacement = data.placement;
-          ctx.isPlacementComplete = true;
-        },
-        onCleanup() {
-          ctx.currentPlacement = void 0;
-          ctx.isPlacementComplete = false;
-        }
-      }));
-    },
-    trackPointerDown(ctx) {
-      return trackPointerDown(dom.getDoc(ctx), (el) => {
-        ctx.pointerdownNode = (0, import_core.ref)(el);
-      });
-    },
-    disableOutsidePointerEvents(ctx) {
-      const el = dom.getContentEl(ctx);
-      return preventBodyPointerEvents(el, {
-        document: dom.getDoc(ctx),
-        disabled: !ctx.modal
-      });
-    },
-    hideContentBelow(ctx) {
-      if (!ctx.modal)
-        return;
-      let unhide;
-      nextTick(() => {
-        const el = dom.getContentEl(ctx);
-        if (!el)
+  }, {
+    activities: {
+      computePlacement(ctx2) {
+        ctx2.currentPlacement = ctx2.positioning.placement;
+        const anchorEl = ctx2.isAnchorRendered ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+        return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), __spreadProps(__spreadValues({}, ctx2.positioning), {
+          onComplete(data) {
+            ctx2.currentPlacement = data.placement;
+            ctx2.isPlacementComplete = true;
+          },
+          onCleanup() {
+            ctx2.currentPlacement = void 0;
+            ctx2.isPlacementComplete = false;
+          }
+        }));
+      },
+      trackPointerDown(ctx2) {
+        return trackPointerDown(dom.getDoc(ctx2), (el) => {
+          ctx2.pointerdownNode = (0, import_core.ref)(el);
+        });
+      },
+      disableOutsidePointerEvents(ctx2) {
+        const el = dom.getContentEl(ctx2);
+        return preventBodyPointerEvents(el, {
+          document: dom.getDoc(ctx2),
+          disabled: !ctx2.modal
+        });
+      },
+      hideContentBelow(ctx2) {
+        if (!ctx2.modal)
           return;
-        try {
-          unhide = (0, import_aria_hidden.hideOthers)(el);
-        } catch (e2) {
-        }
-      });
-      return () => unhide == null ? void 0 : unhide();
-    },
-    preventScroll(ctx) {
-      return preventBodyScroll({
-        allowPinchZoom: true,
-        disabled: !ctx.modal,
-        document: dom.getDoc(ctx)
-      });
-    },
-    trapFocus(ctx) {
-      if (!ctx.modal)
-        return;
-      let trap;
-      nextTick(() => {
-        const el = dom.getContentEl(ctx);
-        if (!el)
+        let unhide;
+        nextTick(() => {
+          const el = dom.getContentEl(ctx2);
+          if (!el)
+            return;
+          try {
+            unhide = (0, import_aria_hidden.hideOthers)(el);
+          } catch (e2) {
+          }
+        });
+        return () => unhide == null ? void 0 : unhide();
+      },
+      preventScroll(ctx2) {
+        return preventBodyScroll({
+          allowPinchZoom: true,
+          disabled: !ctx2.modal,
+          document: dom.getDoc(ctx2)
+        });
+      },
+      trapFocus(ctx2) {
+        if (!ctx2.modal)
           return;
-        trap = (0, import_focus_trap.createFocusTrap)(el, {
-          escapeDeactivates: false,
-          allowOutsideClick: true,
-          returnFocusOnDeactivate: true,
-          document: dom.getDoc(ctx),
-          fallbackFocus: el,
-          initialFocus: runIfFn2(ctx.initialFocusEl)
+        let trap;
+        nextTick(() => {
+          const el = dom.getContentEl(ctx2);
+          if (!el)
+            return;
+          trap = (0, import_focus_trap.createFocusTrap)(el, {
+            escapeDeactivates: false,
+            allowOutsideClick: true,
+            returnFocusOnDeactivate: true,
+            document: dom.getDoc(ctx2),
+            fallbackFocus: el,
+            initialFocus: runIfFn2(ctx2.initialFocusEl)
+          });
+          try {
+            trap.activate();
+          } catch (e2) {
+          }
         });
-        try {
-          trap.activate();
-        } catch (e2) {
-        }
-      });
-      return () => trap == null ? void 0 : trap.deactivate();
-    }
-  },
-  guards: {
-    closeOnEsc: (ctx) => !!ctx.closeOnEsc,
-    autoFocus: (ctx) => !!ctx.autoFocus,
-    modal: (ctx) => !!ctx.modal,
-    portalled: (ctx) => !!ctx.portalled,
-    isRelatedTargetFocusable: (_ctx, evt) => evt.focusable,
-    closeOnBlur: (ctx) => !!ctx.closeOnBlur,
-    isContentFocused: (ctx) => dom.getContentEl(ctx) === dom.getActiveEl(ctx),
-    isFirstTabbableElement: (ctx) => dom.getFirstTabbableEl(ctx) === dom.getActiveEl(ctx),
-    isLastTabbableElement: (ctx) => dom.getLastTabbableEl(ctx) === dom.getActiveEl(ctx)
-  },
-  actions: {
-    checkRenderedElements(ctx) {
-      raf(() => {
-        ctx.isAnchorRendered = !!dom.getAnchorEl(ctx);
-        ctx.isTitleRendered = !!dom.getTitleEl(ctx);
-        ctx.isDescriptionRendered = !!dom.getDescriptionEl(ctx);
-      });
+        return () => trap == null ? void 0 : trap.deactivate();
+      }
     },
-    setupDocument(ctx, evt) {
-      if (evt.doc)
-        ctx.doc = (0, import_core.ref)(evt.doc);
-      ctx.uid = evt.id;
+    guards: {
+      closeOnEsc: (ctx2) => !!ctx2.closeOnEsc,
+      autoFocus: (ctx2) => !!ctx2.autoFocus,
+      modal: (ctx2) => !!ctx2.modal,
+      portalled: (ctx2) => !!ctx2.portalled,
+      isRelatedTargetFocusable: (_ctx, evt) => evt.focusable,
+      closeOnBlur: (ctx2) => !!ctx2.closeOnBlur,
+      isContentFocused: (ctx2) => dom.getContentEl(ctx2) === dom.getActiveEl(ctx2),
+      isFirstTabbableElement: (ctx2) => dom.getFirstTabbableEl(ctx2) === dom.getActiveEl(ctx2),
+      isLastTabbableElement: (ctx2) => dom.getLastTabbableEl(ctx2) === dom.getActiveEl(ctx2)
     },
-    clearPointerDown(ctx) {
-      ctx.pointerdownNode = null;
-    },
-    focusContent(ctx) {
-      nextTick(() => {
+    actions: {
+      checkRenderedElements(ctx2) {
+        raf(() => {
+          ctx2.isAnchorRendered = !!dom.getAnchorEl(ctx2);
+          ctx2.isTitleRendered = !!dom.getTitleEl(ctx2);
+          ctx2.isDescriptionRendered = !!dom.getDescriptionEl(ctx2);
+        });
+      },
+      setupDocument(ctx2, evt) {
+        if (evt.doc)
+          ctx2.doc = (0, import_core.ref)(evt.doc);
+        ctx2.uid = evt.id;
+      },
+      clearPointerDown(ctx2) {
+        ctx2.pointerdownNode = null;
+      },
+      focusContent(ctx2) {
+        nextTick(() => {
+          var _a;
+          (_a = dom.getContentEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      setInitialFocus(ctx2) {
+        nextTick(() => {
+          var _a;
+          (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      focusTrigger(ctx2) {
+        nextTick(() => {
+          var _a;
+          (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      invokeOnOpen(ctx2, evt) {
         var _a;
-        (_a = dom.getContentEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    setInitialFocus(ctx) {
-      nextTick(() => {
+        if (evt.type !== "SETUP") {
+          (_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
+        }
+      },
+      invokeOnClose(ctx2, evt) {
         var _a;
-        (_a = dom.getInitialFocusEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    focusTrigger(ctx) {
-      nextTick(() => {
-        var _a;
-        (_a = dom.getTriggerEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    invokeOnOpen(ctx, evt) {
-      var _a;
-      if (evt.type !== "SETUP") {
-        (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
+        if (evt.type !== "SETUP") {
+          (_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
+        }
+      },
+      focusNextTabbableElementAfterTrigger(ctx2, evt) {
+        const content = dom.getContentEl(ctx2);
+        const doc = dom.getDoc(ctx2);
+        const button = dom.getTriggerEl(ctx2);
+        if (!content || !button)
+          return;
+        const lastTabbable = dom.getLastTabbableEl(ctx2);
+        if (lastTabbable !== doc.activeElement)
+          return;
+        let tabbables = dom.getDocTabbableEls(ctx2);
+        let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+        if (elementAfterTrigger === content) {
+          tabbables = tabbables.filter((el) => !contains(content, el));
+          elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+        }
+        if (!elementAfterTrigger || elementAfterTrigger === button)
+          return;
+        evt.preventDefault();
+        nextTick(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
       }
-    },
-    invokeOnClose(ctx, evt) {
-      var _a;
-      if (evt.type !== "SETUP") {
-        (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
-      }
-    },
-    focusNextTabbableElementAfterTrigger(ctx, evt) {
-      const content = dom.getContentEl(ctx);
-      const doc = dom.getDoc(ctx);
-      const button = dom.getTriggerEl(ctx);
-      if (!content || !button)
-        return;
-      const lastTabbable = dom.getLastTabbableEl(ctx);
-      if (lastTabbable !== doc.activeElement)
-        return;
-      let tabbables = dom.getDocTabbableEls(ctx);
-      let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
-      if (elementAfterTrigger === content) {
-        tabbables = tabbables.filter((el) => !contains(content, el));
-        elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
-      }
-      if (!elementAfterTrigger || elementAfterTrigger === button)
-        return;
-      evt.preventDefault();
-      nextTick(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
     }
-  }
-});
+  });
+}
 //# sourceMappingURL=index.js.map

dist/popover.connect.d.ts

@@ -1,5 +0,4 @@
-import { StateMachine as S } from "@zag-js/core";
 import { PropTypes, ReactPropTypes } from "@zag-js/types";
-import type { MachineContext, MachineState } from "./popover.types";
-export declare function connect<T extends PropTypes = ReactPropTypes>(state: S.State<MachineContext, MachineState>, send: (event: S.Event<S.AnyEventObject>) => void, normalize?: import("@zag-js/types").NormalizeProps): {
+import type { Send, State } from "./popover.types";
+export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
     portalled: boolean;
@@ -6,0 +5,0 @@ isOpen: boolean;

dist/popover.machine.d.ts

@@ -1,3 +0,3 @@
-import { MachineContext, MachineState } from "./popover.types";
-export declare const machine: import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
+import { 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>;
 //# sourceMappingURL=popover.machine.d.ts.map

dist/popover.types.d.ts

@@ -0,4 +1,5 @@
+import type { StateMachine as S } from "@zag-js/core";
 import type { PositioningOptions, Placement } from "@zag-js/popper";
 import type { Context, MaybeElement } from "@zag-js/types";
-declare type IdMap = Partial<{
+declare type ElementIds = Partial<{
     anchor: string;
@@ -11,22 +12,8 @@ trigger: string;
 }>;
-export declare type MachineContext = Context<{
+declare type PublicContext = {
     /**
      * The ids of the elements in the popover. Useful for composition.
      */
-    ids?: IdMap;
+    ids?: ElementIds;
     /**
-     * @internal Whether the dialog title is rendered
-     */
-    isTitleRendered: boolean;
-    /**
-     * @internal Whether the dialog description is rendered
-     */
-    isDescriptionRendered: boolean;
-    /**
-     *
-     * @internal Whether the reference element is rendered to be used as the
-     * positioning reference
-     */
-    isAnchorRendered: boolean;
-    /**
      * Whether the popover should be modal. When set to `true`:
@@ -46,6 +33,2 @@ * - interaction with outside elements will be disabled
     /**
-     * @computed The computed value of `portalled`
-     */
-    readonly currentPortalled: boolean;
-    /**
      * Whether to automatically set focus on the first focusable
@@ -79,15 +62,46 @@ * content within the popover when opened.
     positioning: PositioningOptions;
+};
+export declare type UserDefinedContext = Partial<PublicContext>;
+declare type ComputedContext = Readonly<{
     /**
-     * @internal The computed placement (maybe different from initial placement)
+     * @computed
+     * The computed value of `portalled`
      */
+    currentPortalled: boolean;
+}>;
+declare type PrivateContext = Context<{
+    /**
+     * @internal
+     * Whether the dialog title is rendered
+     */
+    isTitleRendered: boolean;
+    /**
+     * @internal
+     * Whether the dialog description is rendered
+     */
+    isDescriptionRendered: boolean;
+    /**
+     *
+     * @internal
+     * Whether the reference element is rendered to be used as the positioning reference
+     */
+    isAnchorRendered: boolean;
+    /**
+     * @internal
+     * The computed placement (maybe different from initial placement)
+     */
     currentPlacement?: Placement;
     /**
-     * @internal Whether the dynamic placement has been computed
+     * @internal
+     * Whether the dynamic placement has been computed
      */
     isPlacementComplete?: boolean;
 }>;
+export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
 export declare type MachineState = {
     value: "unknown" | "open" | "closed";
 };
+export declare type State = S.State<MachineContext, MachineState>;
+export declare type Send = S.Send<S.AnyEventObject>;
 export {};
 //# sourceMappingURL=popover.types.d.ts.map

package.json

 {
   "name": "@zag-js/popover",
-  "version": "0.0.0-dev-20220416152643",
+  "version": "0.0.0-dev-20220417135151",
   "description": "Core logic for the popover widget implemented as a state machine",
@@ -32,7 +32,7 @@ "keywords": [
   "dependencies": {
-    "@zag-js/core": "^0.0.0-dev-20220416152643",
-    "@zag-js/dom-utils": "^0.0.0-dev-20220416152643",
-    "@zag-js/types": "^0.0.0-dev-20220416152643",
-    "@zag-js/popper": "^0.0.0-dev-20220416152643",
-    "@zag-js/utils": "^0.0.0-dev-20220416152643",
+    "@zag-js/core": "^0.0.0-dev-20220417135151",
+    "@zag-js/dom-utils": "^0.0.0-dev-20220417135151",
+    "@zag-js/types": "^0.0.0-dev-20220417135151",
+    "@zag-js/popper": "^0.0.0-dev-20220417135151",
+    "@zag-js/utils": "^0.0.0-dev-20220417135151",
     "aria-hidden": "^1.1.3",
@@ -39,0 +39,0 @@ "focus-trap": "^6.7.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

311426

increased by0.95%

Lines of code

2069

increased by1.03%

Dependency changes

• Updated@zag-js/core@^0.0.0-dev-20220417135151

• Updated@zag-js/dom-utils@^0.0.0-dev-20220417135151

• Updated@zag-js/popper@^0.0.0-dev-20220417135151

• Updated@zag-js/types@^0.0.0-dev-20220417135151

• Updated@zag-js/utils@^0.0.0-dev-20220417135151