@destyler/popover 0.0.7-beta.7 → 0.0.7-beta.9

package/dist/index.d.mts

@@ -1,152 +0,0 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { CommonProperties, DirectionProperty, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } from '@zag-js/core';
-import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
-export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/dismissable';
-import { PositioningOptions, Placement } from '@zag-js/popper';
-export { Placement, PositioningOptions } from '@zag-js/popper';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "title" | "description" | "closeTrigger">;
-
-interface OpenChangeDetails {
-    open: boolean;
-}
-type ElementIds = Partial<{
-    anchor: string;
-    trigger: string;
-    content: string;
-    title: string;
-    description: string;
-    closeTrigger: string;
-    positioner: string;
-    arrow: string;
-}>;
-interface PublicContext 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;
-    /**
-     * Whether the popover is open
-     */
-    'open'?: boolean | undefined;
-    /**
-     * Whether the popover is controlled by the user
-     */
-    'open.controlled'?: boolean | undefined;
-}
-type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * The computed value of `portalled`
-     */
-    currentPortalled: boolean;
-}>;
-interface PrivateContext {
-    /**
-     * @internal
-     * The elements that are rendered on mount
-     */
-    renderedElements: {
-        title: boolean;
-        description: boolean;
-    };
-    /**
-     * @internal
-     * The computed placement (maybe different from initial placement)
-     */
-    currentPlacement?: Placement | undefined;
-}
-interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
-}
-interface MachineState {
-    value: 'open' | 'closed';
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<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'];
-}
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-declare const props: ("ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "open" | "open.controlled" | "id" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "open" | "open.controlled" | "id" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements">];
-
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, type Service, anatomy, connect, machine, props, splitProps };

package/dist/index.mjs

@@ -1,437 +0,0 @@
-import { createAnatomy } from '@zag-js/anatomy';
-import { createScope, getFocusables, dataAttr, isSafari, raf, getInitialFocus, proxyTabFocus } 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 };