@destyler/dialog 0.0.5 → 0.0.7-beta.1

package/dist/index.d.ts

@@ -1,4 +1,131 @@
-export { a as DialogClose, b as DialogCloseProps, c as DialogContent, g as DialogContentProps, h as DialogDescription, j as DialogDescriptionProps, k as DialogOverlay, z as DialogOverlayProps, l as DialogPortal, n as DialogPortalProps, o as DialogRoot, r as DialogRootProps, s as DialogTitle, u as DialogTitleProps, v as DialogTrigger, x as DialogTriggerProps, d as dialogCloseProps, e as dialogContentProps, i as dialogDescriptionProps, y as dialogOverlayProps, m as dialogPortalProps, p as dialogRootProps, t as dialogTitleProps, w as dialogTriggerProps } from './shared/dialog.f396ab6e.js';
-import 'vue';
-import '@destyler/shared';
-import '@destyler/primitive';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
+export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/dismissable';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"trigger" | "backdrop" | "positioner" | "content" | "title" | "description" | "closeTrigger">;
+
+interface OpenChangeDetails {
+    open: boolean;
+}
+type ElementIds = Partial<{
+    trigger: string;
+    positioner: string;
+    backdrop: string;
+    content: string;
+    closeTrigger: string;
+    title: string;
+    description: string;
+}>;
+interface PublicContext extends DirectionProperty, CommonProperties, DismissableElementHandlers, PersistentElementOptions {
+    /**
+     * The ids of the elements in the dialog. Useful for composition.
+     */
+    'ids'?: ElementIds | undefined;
+    /**
+     * Whether to trap focus inside the dialog when it's opened
+     * @default true
+     */
+    'trapFocus': boolean;
+    /**
+     * Whether to prevent scrolling behind the dialog when it's opened
+     * @default true
+     */
+    'preventScroll': boolean;
+    /**
+     * Whether to prevent pointer interaction outside the element and hide all content below it
+     * @default true
+     */
+    'modal'?: boolean | undefined;
+    /**
+     * Element to receive focus when the dialog is opened
+     */
+    'initialFocusEl'?: (() => HTMLElement | null) | undefined;
+    /**
+     * Element to receive focus when the dialog is closed
+     */
+    'finalFocusEl'?: (() => HTMLElement | null) | undefined;
+    /**
+     * Whether to restore focus to the element that had focus before the dialog was opened
+     */
+    'restoreFocus'?: boolean | undefined;
+    /**
+     * Callback to be invoked when the dialog is opened or closed
+     */
+    'onOpenChange'?: ((details: OpenChangeDetails) => void) | undefined;
+    /**
+     * Whether to close the dialog when the outside is clicked
+     * @default true
+     */
+    'closeOnInteractOutside': boolean;
+    /**
+     * Whether to close the dialog when the escape key is pressed
+     * @default true
+     */
+    'closeOnEscape': boolean;
+    /**
+     * Human readable label for the dialog, in event the dialog title is not rendered
+     */
+    'aria-label'?: string | undefined;
+    /**
+     * The dialog's role
+     * @default "dialog"
+     */
+    'role': 'dialog' | 'alertdialog';
+    /**
+     * Whether the dialog is open
+     */
+    'open'?: boolean | undefined;
+    /**
+     * Whether the dialog is controlled by the user
+     */
+    'open.controlled'?: boolean | undefined;
+}
+type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
+type ComputedContext = Readonly<{}>;
+interface PrivateContext {
+    /**
+     * @internal
+     * Whether some elements are rendered
+     */
+    renderedElements: {
+        title: boolean;
+        description: boolean;
+    };
+}
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+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 dialog is open
+     */
+    open: boolean;
+    /**
+     * Function to open or close the dialog
+     */
+    setOpen: (open: boolean) => void;
+    getTriggerProps: () => T['button'];
+    getBackdropProps: () => 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" | "trapFocus" | "preventScroll" | "modal" | "initialFocusEl" | "finalFocusEl" | "restoreFocus" | "onOpenChange" | "closeOnInteractOutside" | "closeOnEscape" | "aria-label" | "role" | "open" | "open.controlled" | "dir" | "id" | "getRootNode" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "trapFocus" | "preventScroll" | "modal" | "initialFocusEl" | "finalFocusEl" | "restoreFocus" | "onOpenChange" | "closeOnInteractOutside" | "closeOnEscape" | "aria-label" | "role" | "open" | "open.controlled" | "dir" | "id" | "getRootNode" | "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,11 +1,337 @@
-export { D as DialogClose, a as DialogContent, c as DialogDescription, f as DialogOverlay, h as DialogPortal, j as DialogRoot, l as DialogTitle, n as DialogTrigger, d as dialogCloseProps, b as dialogContentProps, e as dialogDescriptionProps, g as dialogOverlayProps, i as dialogPortalProps, k as dialogRootProps, m as dialogTitleProps, o as dialogTriggerProps } from './shared/dialog.1e7a01aa.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/composition';
-import '@destyler/shared';
-import '@destyler/presence';
-import '@destyler/focus-scope';
-import '@destyler/dismissable-layer';
-import '@destyler/dismissable-layer/component';
-import '@destyler/directives';
-import '@destyler/teleport';
+import { createAnatomy } from '@zag-js/anatomy';
+import { createScope, raf } from '@zag-js/dom-query';
+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("dialog").parts(
+  "trigger",
+  "backdrop",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+);
+const parts = anatomy.build();
+
+const dom = createScope({
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `dialog:${ctx.id}:positioner`,
+  getBackdropId: (ctx) => ctx.ids?.backdrop ?? `dialog:${ctx.id}:backdrop`,
+  getContentId: (ctx) => ctx.ids?.content ?? `dialog:${ctx.id}:content`,
+  getTriggerId: (ctx) => ctx.ids?.trigger ?? `dialog:${ctx.id}:trigger`,
+  getTitleId: (ctx) => ctx.ids?.title ?? `dialog:${ctx.id}:title`,
+  getDescriptionId: (ctx) => ctx.ids?.description ?? `dialog:${ctx.id}:description`,
+  getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `dialog:${ctx.id}:close`,
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getBackdropEl: (ctx) => dom.getById(ctx, dom.getBackdropId(ctx)),
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
+  getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
+  getCloseTriggerEl: (ctx) => dom.getById(ctx, dom.getCloseTriggerId(ctx))
+});
+
+function connect(state, send, normalize) {
+  const ariaLabel = state.context["aria-label"];
+  const open = state.matches("open");
+  const rendered = state.context.renderedElements;
+  return {
+    open,
+    setOpen(nextOpen) {
+      if (nextOpen === open)
+        return;
+      send(nextOpen ? "OPEN" : "CLOSE");
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        "dir": state.context.dir,
+        "id": dom.getTriggerId(state.context),
+        "aria-haspopup": "dialog",
+        "type": "button",
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": dom.getContentId(state.context),
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          send("TOGGLE");
+        }
+      });
+    },
+    getBackdropProps() {
+      return normalize.element({
+        ...parts.backdrop.attrs,
+        "dir": state.context.dir,
+        "hidden": !open,
+        "id": dom.getBackdropId(state.context),
+        "data-state": open ? "open" : "closed"
+      });
+    },
+    getPositionerProps() {
+      return normalize.element({
+        ...parts.positioner.attrs,
+        dir: state.context.dir,
+        id: dom.getPositionerId(state.context),
+        style: {
+          pointerEvents: open ? void 0 : "none"
+        }
+      });
+    },
+    getContentProps() {
+      return normalize.element({
+        ...parts.content.attrs,
+        "dir": state.context.dir,
+        "role": state.context.role,
+        "hidden": !open,
+        "id": dom.getContentId(state.context),
+        "tabIndex": -1,
+        "data-state": open ? "open" : "closed",
+        "aria-modal": true,
+        "aria-label": ariaLabel || void 0,
+        "aria-labelledby": ariaLabel || !rendered.title ? void 0 : dom.getTitleId(state.context),
+        "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...parts.title.attrs,
+        dir: state.context.dir,
+        id: dom.getTitleId(state.context)
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...parts.description.attrs,
+        dir: state.context.dir,
+        id: dom.getDescriptionId(state.context)
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        ...parts.closeTrigger.attrs,
+        dir: state.context.dir,
+        id: dom.getCloseTriggerId(state.context),
+        type: "button",
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          event.stopPropagation();
+          send("CLOSE");
+        }
+      });
+    }
+  };
+}
+
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "dialog",
+      initial: ctx.open ? "open" : "closed",
+      context: {
+        role: "dialog",
+        renderedElements: {
+          title: true,
+          description: true
+        },
+        modal: true,
+        trapFocus: true,
+        preventScroll: true,
+        closeOnInteractOutside: true,
+        closeOnEscape: true,
+        restoreFocus: true,
+        ...ctx
+      },
+      created: ["setAlertDialogProps"],
+      watch: {
+        open: ["toggleVisibility"]
+      },
+      states: {
+        open: {
+          entry: ["checkRenderedElements", "syncZIndex"],
+          activities: ["trackDismissableElement", "trapFocus", "preventScroll", "hideContentBelow"],
+          on: {
+            "CONTROLLED.CLOSE": {
+              target: "closed"
+            },
+            "CLOSE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "closed",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "TOGGLE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "closed",
+                actions: ["invokeOnClose"]
+              }
+            ]
+          }
+        },
+        closed: {
+          on: {
+            "CONTROLLED.OPEN": {
+              target: "open"
+            },
+            "OPEN": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "open",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "TOGGLE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "open",
+                actions: ["invokeOnOpen"]
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isOpenControlled: (ctx2) => !!ctx2["open.controlled"]
+      },
+      activities: {
+        trackDismissableElement(ctx2, _evt, { send }) {
+          const getContentEl = () => dom.getContentEl(ctx2);
+          return trackDismissableElement(getContentEl, {
+            defer: true,
+            pointerBlocking: ctx2.modal,
+            exclude: [dom.getTriggerEl(ctx2)],
+            onInteractOutside(event) {
+              ctx2.onInteractOutside?.(event);
+              if (!ctx2.closeOnInteractOutside) {
+                event.preventDefault();
+              }
+            },
+            persistentElements: ctx2.persistentElements,
+            onFocusOutside: ctx2.onFocusOutside,
+            onPointerDownOutside: ctx2.onPointerDownOutside,
+            onEscapeKeyDown(event) {
+              ctx2.onEscapeKeyDown?.(event);
+              if (!ctx2.closeOnEscape) {
+                event.preventDefault();
+              }
+            },
+            onDismiss() {
+              send({ type: "CLOSE", src: "interact-outside" });
+            }
+          });
+        },
+        preventScroll(ctx2) {
+          if (!ctx2.preventScroll)
+            return;
+          return preventBodyScroll(dom.getDoc(ctx2));
+        },
+        trapFocus(ctx2) {
+          if (!ctx2.trapFocus || !ctx2.modal)
+            return;
+          const contentEl = () => dom.getContentEl(ctx2);
+          return trapFocus(contentEl, {
+            preventScroll: true,
+            returnFocusOnDeactivate: !!ctx2.restoreFocus,
+            initialFocus: ctx2.initialFocusEl,
+            setReturnFocus: (el) => ctx2.finalFocusEl?.() ?? el
+          });
+        },
+        hideContentBelow(ctx2) {
+          if (!ctx2.modal)
+            return;
+          const getElements = () => [dom.getContentEl(ctx2)];
+          return ariaHidden(getElements, { defer: true });
+        }
+      },
+      actions: {
+        setAlertDialogProps(ctx2) {
+          if (ctx2.role !== "alertdialog")
+            return;
+          ctx2.initialFocusEl ||= () => dom.getCloseTriggerEl(ctx2);
+          ctx2.closeOnInteractOutside = false;
+        },
+        checkRenderedElements(ctx2) {
+          raf(() => {
+            ctx2.renderedElements.title = !!dom.getTitleEl(ctx2);
+            ctx2.renderedElements.description = !!dom.getDescriptionEl(ctx2);
+          });
+        },
+        syncZIndex(ctx2) {
+          raf(() => {
+            const contentEl = dom.getContentEl(ctx2);
+            if (!contentEl)
+              return;
+            const win = dom.getWin(ctx2);
+            const styles = win.getComputedStyle(contentEl);
+            const elems = [dom.getPositionerEl(ctx2), dom.getBackdropEl(ctx2)];
+            elems.forEach((node) => {
+              node?.style.setProperty("--z-index", styles.zIndex);
+            });
+          });
+        },
+        invokeOnClose(ctx2) {
+          ctx2.onOpenChange?.({ open: false });
+        },
+        invokeOnOpen(ctx2) {
+          ctx2.onOpenChange?.({ open: true });
+        },
+        toggleVisibility(ctx2, evt, { send }) {
+          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
+        }
+      }
+    }
+  );
+}
+
+const props = createProps()([
+  "aria-label",
+  "closeOnEscape",
+  "closeOnInteractOutside",
+  "dir",
+  "finalFocusEl",
+  "getRootNode",
+  "getRootNode",
+  "id",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "modal",
+  "onEscapeKeyDown",
+  "onFocusOutside",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "open.controlled",
+  "open",
+  "persistentElements",
+  "preventScroll",
+  "restoreFocus",
+  "role",
+  "trapFocus"
+]);
+const splitProps = createSplitProps(props);
+
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/dialog",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7-beta.1",
   "description": "before taking action, please confirm.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -10,14 +10,6 @@
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
     },
-    "./resolver": {
-      "types": "./dist/resolver.d.mts",
-      "default": "./dist/resolver.mjs"
-    },
-    "./component": {
-      "types": "./dist/component.d.mts",
-      "default": "./dist/component.mjs"
-    },
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -27,21 +19,20 @@
     "*.d.ts",
     "dist"
   ],
-  "peerDependencies": {
-    "vue": ">=3.4.21"
-  },
   "dependencies": {
-    "@destyler/composition": "0.0.5",
-    "@destyler/dismissable-layer": "0.0.5",
-    "@destyler/focus-scope": "0.0.5",
-    "@destyler/directives": "0.0.5",
-    "@destyler/shared": "0.0.5",
-    "@destyler/primitive": "0.0.5",
-    "@destyler/teleport": "0.0.5",
-    "@destyler/presence": "0.0.5"
+    "@zag-js/anatomy": "^0.80.0",
+    "@zag-js/aria-hidden": "^0.80.0",
+    "@zag-js/core": "^0.80.0",
+    "@zag-js/dismissable": "^0.80.0",
+    "@zag-js/dom-query": "^0.80.0",
+    "@zag-js/focus-trap": "^0.80.0",
+    "@zag-js/remove-scroll": "^0.80.0",
+    "@zag-js/types": "^0.80.0",
+    "@zag-js/utils": "^0.80.0"
   },
   "scripts": {
     "clear": "rimraf ./dist",
+    "clear:node_modules": "rimraf ./node_modules",
     "build": "pnpm run clear && unbuild",
     "stub": "unbuild --stub"
   }

package/README.md

@@ -1,7 +0,0 @@
-# @destyler/dialog
-
-[![NPM version](https://img.shields.io/npm/v/@destyler/dialog?color=a1b858&label=)](https://www.npmjs.com/package/@destyler/dialog)
-
-> before taking action, please confirm.
-
-[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)

package/dist/component.cjs

@@ -1,40 +0,0 @@
-'use strict';
-
-const index = require('./shared/dialog.d09a7a95.cjs');
-require('vue');
-require('@destyler/primitive');
-require('@destyler/composition');
-require('@destyler/shared');
-require('@destyler/presence');
-require('@destyler/focus-scope');
-require('@destyler/dismissable-layer');
-require('@destyler/dismissable-layer/component');
-require('@destyler/directives');
-require('@destyler/teleport');
-
-
-
-exports.DialogClose = index.DialogClose;
-exports.DialogContent = index.DialogContent;
-exports.DialogContentImpl = index.DialogContentImpl;
-exports.DialogContentModal = index.DialogContentModal;
-exports.DialogContentNonModal = index.DialogContentNonModal;
-exports.DialogDescription = index.DialogDescription;
-exports.DialogOverlay = index.DialogOverlay;
-exports.DialogOverlayImpl = index.DialogOverlayImpl;
-exports.DialogPortal = index.DialogPortal;
-exports.DialogRoot = index.DialogRoot;
-exports.DialogTitle = index.DialogTitle;
-exports.DialogTrigger = index.DialogTrigger;
-exports.dialogCloseProps = index.dialogCloseProps;
-exports.dialogContentEmits = index.dialogContentEmits;
-exports.dialogContentImplEmtis = index.dialogContentImplEmtis;
-exports.dialogContentImplProps = index.dialogContentImplProps;
-exports.dialogContentProps = index.dialogContentProps;
-exports.dialogDescriptionProps = index.dialogDescriptionProps;
-exports.dialogOverlayImplProps = index.dialogOverlayImplProps;
-exports.dialogPortalProps = index.dialogPortalProps;
-exports.dialogRootEmits = index.dialogRootEmits;
-exports.dialogRootProps = index.dialogRootProps;
-exports.dialogTitleProps = index.dialogTitleProps;
-exports.dialogTriggerProps = index.dialogTriggerProps;