@destyler/popover 0.0.7-beta.7 → 0.1.0

package/dist/index.js

@@ -0,0 +1,407 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { createScope, dataAttr, getFocusables, getInitialFocus, isSafari, proxyTabFocus, raf } from "@destyler/dom";
+import { getPlacement, getPlacementStyles } from "@destyler/popper";
+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("popover").parts("arrow", "arrowTip", "anchor", "trigger", "indicator", "positioner", "content", "title", "description", "closeTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+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]
+});
+
+//#endregion
+//#region src/connect.ts
+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");
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+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: (ctx$1) => !!ctx$1.modal || !!ctx$1.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: (ctx$1) => !!ctx$1["open.controlled"] },
+		activities: {
+			trackPositioning(ctx$1) {
+				ctx$1.currentPlacement = ctx$1.positioning.placement;
+				const anchorEl = dom.getAnchorEl(ctx$1) ?? dom.getTriggerEl(ctx$1);
+				const getPositionerEl = () => dom.getPositionerEl(ctx$1);
+				return getPlacement(anchorEl, getPositionerEl, {
+					...ctx$1.positioning,
+					defer: true,
+					onComplete(data) {
+						ctx$1.currentPlacement = data.placement;
+					}
+				});
+			},
+			trackDismissableElement(ctx$1, _evt, { send }) {
+				const getContentEl = () => dom.getContentEl(ctx$1);
+				let restoreFocus = true;
+				return trackDismissableElement(getContentEl, {
+					pointerBlocking: ctx$1.modal,
+					exclude: dom.getTriggerEl(ctx$1),
+					defer: true,
+					onEscapeKeyDown(event) {
+						ctx$1.onEscapeKeyDown?.(event);
+						if (ctx$1.closeOnEscape) return;
+						event.preventDefault();
+					},
+					onInteractOutside(event) {
+						ctx$1.onInteractOutside?.(event);
+						if (event.defaultPrevented) return;
+						restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+						if (!ctx$1.closeOnInteractOutside) event.preventDefault();
+					},
+					onPointerDownOutside: ctx$1.onPointerDownOutside,
+					onFocusOutside: ctx$1.onFocusOutside,
+					persistentElements: ctx$1.persistentElements,
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside",
+							restoreFocus
+						});
+					}
+				});
+			},
+			proxyTabFocus(ctx$1) {
+				if (ctx$1.modal || !ctx$1.portalled) return;
+				const getContentEl = () => dom.getContentEl(ctx$1);
+				return proxyTabFocus(getContentEl, {
+					triggerElement: dom.getTriggerEl(ctx$1),
+					defer: true,
+					onFocus(el) {
+						el.focus({ preventScroll: true });
+					}
+				});
+			},
+			hideContentBelow(ctx$1) {
+				if (!ctx$1.modal) return;
+				const getElements = () => [dom.getContentEl(ctx$1), dom.getTriggerEl(ctx$1)];
+				return ariaHidden(getElements, { defer: true });
+			},
+			preventScroll(ctx$1) {
+				if (!ctx$1.modal) return;
+				return preventBodyScroll(dom.getDoc(ctx$1));
+			},
+			trapFocus(ctx$1) {
+				if (!ctx$1.modal) return;
+				const contentEl = () => dom.getContentEl(ctx$1);
+				return trapFocus(contentEl, { initialFocus: () => getInitialFocus({
+					root: dom.getContentEl(ctx$1),
+					getInitialEl: ctx$1.initialFocusEl,
+					enabled: ctx$1.autoFocus
+				}) });
+			}
+		},
+		actions: {
+			reposition(ctx$1, evt) {
+				const anchorEl = dom.getAnchorEl(ctx$1) ?? dom.getTriggerEl(ctx$1);
+				const getPositionerEl = () => dom.getPositionerEl(ctx$1);
+				getPlacement(anchorEl, getPositionerEl, {
+					...ctx$1.positioning,
+					...evt.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						ctx$1.currentPlacement = data.placement;
+					}
+				});
+			},
+			checkRenderedElements(ctx$1) {
+				raf(() => {
+					Object.assign(ctx$1.renderedElements, {
+						title: !!dom.getTitleEl(ctx$1),
+						description: !!dom.getDescriptionEl(ctx$1)
+					});
+				});
+			},
+			setInitialFocus(ctx$1) {
+				if (ctx$1.modal) return;
+				raf(() => {
+					const element = getInitialFocus({
+						root: dom.getContentEl(ctx$1),
+						getInitialEl: ctx$1.initialFocusEl,
+						enabled: ctx$1.autoFocus
+					});
+					element?.focus({ preventScroll: true });
+				});
+			},
+			setFinalFocus(ctx$1, evt) {
+				const restoreFocus = evt.restoreFocus ?? evt.previousEvent?.restoreFocus;
+				if (restoreFocus != null && !restoreFocus) return;
+				raf(() => {
+					const element = dom.getTriggerEl(ctx$1);
+					element?.focus({ preventScroll: true });
+				});
+			},
+			invokeOnOpen(ctx$1) {
+				ctx$1.onOpenChange?.({ open: true });
+			},
+			invokeOnClose(ctx$1) {
+				ctx$1.onOpenChange?.({ open: false });
+			},
+			toggleVisibility(ctx$1, evt, { send }) {
+				send({
+					type: ctx$1.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: evt
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+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);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,40 +1,36 @@
 {
   "name": "@destyler/popover",
   "type": "module",
-  "version": "0.0.7-beta.7",
+  "version": "0.1.0",
   "description": "displays rich content in a portal, triggered by a button.",
   "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/popper": "^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.1.0",
+    "@destyler/aria-hidden": "0.1.0",
+    "@destyler/dismissable": "0.1.0",
+    "@destyler/focus-trap": "0.1.0",
+    "@destyler/popper": "0.1.0",
+    "@destyler/remove-scroll": "0.1.0",
+    "@destyler/utils": "0.1.0",
+    "@destyler/dom": "0.1.0",
+    "@destyler/types": "0.1.0",
+    "@destyler/xstate": "0.1.0"
   },
   "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"
   }
 }