@zag-js/popover 1.34.0 → 1.35.0

package/dist/popover.types.d.mts

@@ -0,0 +1,142 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
+import { PositioningOptions, Placement } from '@zag-js/popper';
+export { Placement, PositioningOptions } from '@zag-js/popper';
+import { PropTypes, RequiredBy, CommonProperties, DirectionProperty } from '@zag-js/types';
+
+interface OpenChangeDetails {
+    open: boolean;
+}
+type ElementIds = Partial<{
+    anchor: string;
+    trigger: string;
+    content: string;
+    title: string;
+    description: string;
+    closeTrigger: string;
+    positioner: string;
+    arrow: string;
+}>;
+interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
+    /**
+     * The ids of the elements in the popover. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * Whether the popover should be modal. When set to `true`:
+     * - interaction with outside elements will be disabled
+     * - only popover content will be visible to screen readers
+     * - scrolling is blocked
+     * - focus is trapped within the popover
+     *
+     * @default false
+     */
+    modal?: boolean | undefined;
+    /**
+     * Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
+     * of the popover content.
+     *
+     * @default true
+     */
+    portalled?: boolean | undefined;
+    /**
+     * Whether to automatically set focus on the first focusable
+     * content within the popover when opened.
+     *
+     * @default true
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * The element to focus on when the popover is opened.
+     */
+    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    /**
+     * Whether to close the popover when the user clicks outside of the popover.
+     * @default true
+     */
+    closeOnInteractOutside?: boolean | undefined;
+    /**
+     * Whether to close the popover when the escape key is pressed.
+     * @default true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Function invoked when the popover opens or closes
+     */
+    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+    /**
+     * The user provided options used to position the popover content
+     */
+    positioning?: PositioningOptions | undefined;
+    /**
+     * The controlled open state of the popover
+     */
+    open?: boolean | undefined;
+    /**
+     * The initial open state of the popover when rendered.
+     * Use when you don't need to control the open state of the popover.
+     */
+    defaultOpen?: boolean | undefined;
+}
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "positioning";
+type ComputedContext = Readonly<{
+    /**
+     * The computed value of `portalled`
+     */
+    currentPortalled: boolean;
+}>;
+interface PrivateContext {
+    /**
+     * The elements that are rendered on mount
+     */
+    renderedElements: {
+        title: boolean;
+        description: boolean;
+    };
+    /**
+     * The computed placement (maybe different from initial placement)
+     */
+    currentPlacement?: Placement | undefined;
+}
+interface PopoverSchema {
+    props: RequiredBy<PopoverProps, PropsWithDefault>;
+    state: "open" | "closed";
+    context: PrivateContext;
+    computed: ComputedContext;
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type PopoverService = Service<PopoverSchema>;
+type PopoverMachine = Machine<PopoverSchema>;
+interface PopoverApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the popover is portalled.
+     */
+    portalled: boolean;
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+    /**
+     * Function to open or close the popover
+     */
+    setOpen: (open: boolean) => void;
+    /**
+     * Function to reposition the popover
+     */
+    reposition: (options?: Partial<PositioningOptions>) => void;
+    getArrowProps: () => T["element"];
+    getArrowTipProps: () => T["element"];
+    getAnchorProps: () => T["element"];
+    getTriggerProps: () => T["button"];
+    getIndicatorProps: () => T["element"];
+    getPositionerProps: () => T["element"];
+    getContentProps: () => T["element"];
+    getTitleProps: () => T["element"];
+    getDescriptionProps: () => T["element"];
+    getCloseTriggerProps: () => T["button"];
+}
+
+export type { ElementIds, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService };

package/dist/popover.types.d.ts

@@ -0,0 +1,142 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
+import { PositioningOptions, Placement } from '@zag-js/popper';
+export { Placement, PositioningOptions } from '@zag-js/popper';
+import { PropTypes, RequiredBy, CommonProperties, DirectionProperty } from '@zag-js/types';
+
+interface OpenChangeDetails {
+    open: boolean;
+}
+type ElementIds = Partial<{
+    anchor: string;
+    trigger: string;
+    content: string;
+    title: string;
+    description: string;
+    closeTrigger: string;
+    positioner: string;
+    arrow: string;
+}>;
+interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
+    /**
+     * The ids of the elements in the popover. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * Whether the popover should be modal. When set to `true`:
+     * - interaction with outside elements will be disabled
+     * - only popover content will be visible to screen readers
+     * - scrolling is blocked
+     * - focus is trapped within the popover
+     *
+     * @default false
+     */
+    modal?: boolean | undefined;
+    /**
+     * Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
+     * of the popover content.
+     *
+     * @default true
+     */
+    portalled?: boolean | undefined;
+    /**
+     * Whether to automatically set focus on the first focusable
+     * content within the popover when opened.
+     *
+     * @default true
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * The element to focus on when the popover is opened.
+     */
+    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    /**
+     * Whether to close the popover when the user clicks outside of the popover.
+     * @default true
+     */
+    closeOnInteractOutside?: boolean | undefined;
+    /**
+     * Whether to close the popover when the escape key is pressed.
+     * @default true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Function invoked when the popover opens or closes
+     */
+    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+    /**
+     * The user provided options used to position the popover content
+     */
+    positioning?: PositioningOptions | undefined;
+    /**
+     * The controlled open state of the popover
+     */
+    open?: boolean | undefined;
+    /**
+     * The initial open state of the popover when rendered.
+     * Use when you don't need to control the open state of the popover.
+     */
+    defaultOpen?: boolean | undefined;
+}
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "positioning";
+type ComputedContext = Readonly<{
+    /**
+     * The computed value of `portalled`
+     */
+    currentPortalled: boolean;
+}>;
+interface PrivateContext {
+    /**
+     * The elements that are rendered on mount
+     */
+    renderedElements: {
+        title: boolean;
+        description: boolean;
+    };
+    /**
+     * The computed placement (maybe different from initial placement)
+     */
+    currentPlacement?: Placement | undefined;
+}
+interface PopoverSchema {
+    props: RequiredBy<PopoverProps, PropsWithDefault>;
+    state: "open" | "closed";
+    context: PrivateContext;
+    computed: ComputedContext;
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type PopoverService = Service<PopoverSchema>;
+type PopoverMachine = Machine<PopoverSchema>;
+interface PopoverApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the popover is portalled.
+     */
+    portalled: boolean;
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+    /**
+     * Function to open or close the popover
+     */
+    setOpen: (open: boolean) => void;
+    /**
+     * Function to reposition the popover
+     */
+    reposition: (options?: Partial<PositioningOptions>) => void;
+    getArrowProps: () => T["element"];
+    getArrowTipProps: () => T["element"];
+    getAnchorProps: () => T["element"];
+    getTriggerProps: () => T["button"];
+    getIndicatorProps: () => T["element"];
+    getPositionerProps: () => T["element"];
+    getContentProps: () => T["element"];
+    getTitleProps: () => T["element"];
+    getDescriptionProps: () => T["element"];
+    getCloseTriggerProps: () => T["button"];
+}
+
+export type { ElementIds, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService };

package/dist/popover.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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.types.ts
+var popover_types_exports = {};
+module.exports = __toCommonJS(popover_types_exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,21 +26,21 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.34.0",
-    "@zag-js/aria-hidden": "1.34.0",
-    "@zag-js/core": "1.34.0",
-    "@zag-js/dom-query": "1.34.0",
-    "@zag-js/utils": "1.34.0",
-    "@zag-js/dismissable": "1.34.0",
-    "@zag-js/popper": "1.34.0",
-    "@zag-js/remove-scroll": "1.34.0",
-    "@zag-js/types": "1.34.0",
-    "@zag-js/focus-trap": "1.34.0"
+    "@zag-js/anatomy": "1.35.0",
+    "@zag-js/aria-hidden": "1.35.0",
+    "@zag-js/core": "1.35.0",
+    "@zag-js/dom-query": "1.35.0",
+    "@zag-js/utils": "1.35.0",
+    "@zag-js/dismissable": "1.35.0",
+    "@zag-js/popper": "1.35.0",
+    "@zag-js/remove-scroll": "1.35.0",
+    "@zag-js/types": "1.35.0",
+    "@zag-js/focus-trap": "1.35.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
   },
-  "clean-package": "../../../clean-package.config.json",
+  "clean-package": "./clean-package.config.json",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -55,6 +55,16 @@
         "default": "./dist/index.js"
       }
     },
+    "./anatomy": {
+      "import": {
+        "types": "./dist/popover.anatomy.d.mts",
+        "default": "./dist/popover.anatomy.mjs"
+      },
+      "require": {
+        "types": "./dist/popover.anatomy.d.ts",
+        "default": "./dist/popover.anatomy.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {