@destyler/dialog 0.0.7-beta.5 → 0.0.7-beta.9

package/dist/index.d.ts

@@ -1,131 +1,134 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, 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';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"trigger" | "backdrop" | "positioner" | "content" | "title" | "description" | "closeTrigger">;
+import * as _destyler_anatomy0 from "@destyler/anatomy";
+import { DismissableElementHandlers, FocusOutsideEvent, InteractOutsideEvent, PersistentElementOptions, PointerDownOutsideEvent } from "@destyler/dismissable";
+import * as _destyler_xstate0 from "@destyler/xstate";
+import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
+import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
 
+//#region src/anatomy.d.ts
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"trigger" | "positioner" | "backdrop" | "content" | "closeTrigger" | "title" | "description">;
+//#endregion
+//#region src/types.d.ts
 interface OpenChangeDetails {
-    open: boolean;
+  open: boolean;
 }
 type ElementIds = Partial<{
-    trigger: string;
-    positioner: string;
-    backdrop: string;
-    content: string;
-    closeTrigger: string;
-    title: string;
-    description: string;
+  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;
+  /**
+   * 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 {
+  /**
+   * @internal
+   * Whether some elements are rendered
+   */
+  renderedElements: {
+    title: boolean;
+    description: boolean;
+  };
 }
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
 interface MachineState {
-    value: 'open' | 'closed';
+  value: 'open' | 'closed';
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type State = XState<MachineContext, MachineState>;
+type Send = XSend<AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, 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'];
+  /**
+   * 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'];
 }
-
+//#endregion
+//#region src/connect.d.ts
 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 };
+//#endregion
+//#region src/machine.d.ts
+declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+//#endregion
+//#region src/props.d.ts
+declare const props: ("open" | "id" | "ids" | "trapFocus" | "preventScroll" | "modal" | "initialFocusEl" | "finalFocusEl" | "restoreFocus" | "onOpenChange" | "closeOnInteractOutside" | "closeOnEscape" | "aria-label" | "role" | "open.controlled" | "dir" | "getRootNode" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "open" | "id" | "ids" | "trapFocus" | "preventScroll" | "modal" | "initialFocusEl" | "finalFocusEl" | "restoreFocus" | "onOpenChange" | "closeOnInteractOutside" | "closeOnEscape" | "aria-label" | "role" | "open.controlled" | "dir" | "getRootNode" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements">];
+//#endregion
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type OpenChangeDetails, type PointerDownOutsideEvent, type Service, anatomy, connect, machine, props, splitProps };

package/dist/index.js

@@ -0,0 +1,310 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { createScope, getComputedStyle, raf } from "@destyler/dom";
+import { ariaHidden } from "@destyler/aria-hidden";
+import { trackDismissableElement } from "@destyler/dismissable";
+import { trapFocus } from "@destyler/focus-trap";
+import { preventBodyScroll } from "@destyler/remove-scroll";
+import { compact, createSplitProps } from "@destyler/utils";
+import { createMachine } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("dialog").parts("trigger", "backdrop", "positioner", "content", "title", "description", "closeTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+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))
+});
+
+//#endregion
+//#region src/connect.ts
+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");
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+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: (ctx$1) => !!ctx$1["open.controlled"] },
+		activities: {
+			trackDismissableElement(ctx$1, _evt, { send }) {
+				const getContentEl = () => dom.getContentEl(ctx$1);
+				return trackDismissableElement(getContentEl, {
+					defer: true,
+					pointerBlocking: ctx$1.modal,
+					exclude: [dom.getTriggerEl(ctx$1)],
+					onInteractOutside(event) {
+						ctx$1.onInteractOutside?.(event);
+						if (!ctx$1.closeOnInteractOutside) event.preventDefault();
+					},
+					persistentElements: ctx$1.persistentElements,
+					onFocusOutside: ctx$1.onFocusOutside,
+					onPointerDownOutside: ctx$1.onPointerDownOutside,
+					onEscapeKeyDown(event) {
+						ctx$1.onEscapeKeyDown?.(event);
+						if (!ctx$1.closeOnEscape) event.preventDefault();
+					},
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside"
+						});
+					}
+				});
+			},
+			preventScroll(ctx$1) {
+				if (!ctx$1.preventScroll) return;
+				return preventBodyScroll(dom.getDoc(ctx$1));
+			},
+			trapFocus(ctx$1) {
+				if (!ctx$1.trapFocus || !ctx$1.modal) return;
+				const contentEl = () => dom.getContentEl(ctx$1);
+				return trapFocus(contentEl, {
+					preventScroll: true,
+					returnFocusOnDeactivate: !!ctx$1.restoreFocus,
+					initialFocus: ctx$1.initialFocusEl,
+					setReturnFocus: (el) => ctx$1.finalFocusEl?.() ?? el
+				});
+			},
+			hideContentBelow(ctx$1) {
+				if (!ctx$1.modal) return;
+				const getElements = () => [dom.getContentEl(ctx$1)];
+				return ariaHidden(getElements, { defer: true });
+			}
+		},
+		actions: {
+			setAlertDialogProps(ctx$1) {
+				if (ctx$1.role !== "alertdialog") return;
+				ctx$1.initialFocusEl ||= () => dom.getCloseTriggerEl(ctx$1);
+				ctx$1.closeOnInteractOutside = false;
+			},
+			checkRenderedElements(ctx$1) {
+				raf(() => {
+					ctx$1.renderedElements.title = !!dom.getTitleEl(ctx$1);
+					ctx$1.renderedElements.description = !!dom.getDescriptionEl(ctx$1);
+				});
+			},
+			syncZIndex(ctx$1) {
+				raf(() => {
+					const contentEl = dom.getContentEl(ctx$1);
+					if (!contentEl) return;
+					const styles = getComputedStyle(contentEl);
+					const elems = [dom.getPositionerEl(ctx$1), dom.getBackdropEl(ctx$1)];
+					elems.forEach((node) => {
+						node?.style.setProperty("--z-index", styles.zIndex);
+					});
+				});
+			},
+			invokeOnClose(ctx$1) {
+				ctx$1.onOpenChange?.({ open: false });
+			},
+			invokeOnOpen(ctx$1) {
+				ctx$1.onOpenChange?.({ open: true });
+			},
+			toggleVisibility(ctx$1, evt, { send }) {
+				send({
+					type: ctx$1.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: evt
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+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);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,39 +1,35 @@
 {
   "name": "@destyler/dialog",
   "type": "module",
-  "version": "0.0.7-beta.5",
+  "version": "0.0.7-beta.9",
   "description": "before taking action, please confirm.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./*": "./*"
+    ".": "./dist/index.js"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@zag-js/anatomy": "^0.82.1",
-    "@zag-js/aria-hidden": "^0.82.1",
-    "@zag-js/core": "^0.82.1",
-    "@zag-js/dismissable": "^0.82.1",
-    "@zag-js/dom-query": "^0.82.1",
-    "@zag-js/focus-trap": "^0.82.1",
-    "@zag-js/remove-scroll": "^0.82.1",
-    "@zag-js/types": "^0.82.1",
-    "@zag-js/utils": "^0.82.1"
+    "@destyler/anatomy": "0.0.7-beta.9",
+    "@destyler/dismissable": "0.0.7-beta.9",
+    "@destyler/dom": "0.0.7-beta.9",
+    "@destyler/focus-trap": "0.0.7-beta.9",
+    "@destyler/aria-hidden": "0.0.7-beta.9",
+    "@destyler/remove-scroll": "0.0.7-beta.9",
+    "@destyler/types": "0.0.7-beta.9",
+    "@destyler/utils": "0.0.7-beta.9",
+    "@destyler/xstate": "0.0.7-beta.9"
   },
   "scripts": {
     "clear": "rimraf ./dist",
     "clear:node_modules": "rimraf ./node_modules",
-    "build": "pnpm run clear && unbuild",
-    "stub": "unbuild --stub"
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
   }
 }