@destyler/popover 0.2.11 → 0.2.12

package/dist/index.d.mts

@@ -1,12 +1,9 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
 import { Placement, PositioningOptions } from "@destyler/popper";
 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<"arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "title" | "description" | "closeTrigger">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "title" | "description" | "closeTrigger">;
 //#endregion
 //#region src/types.d.ts
 interface OpenChangeDetails {
@@ -94,7 +91,7 @@ type ComputedContext = Readonly<{
 interface PrivateContext {
   /**
    * @internal
-   * The elements that are rendered on mount
+   * The elements that are rendered on startup and opening
    */
   renderedElements: {
     title: boolean;
@@ -143,13 +140,13 @@ interface MachineApi<T extends PropTypes = PropTypes> {
 }
 //#endregion
 //#region src/connect.d.ts
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 //#endregion
 //#region src/machine.d.ts
-declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("open" | "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "defaultOpen" | "id" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "open" | "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "defaultOpen" | "id" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements">];
+export declare const props: ("open" | "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "defaultOpen" | "id" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "open" | "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "defaultOpen" | "id" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements">];
 //#endregion
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type OpenChangeDetails, type Placement, type PointerDownOutsideEvent, type PositioningOptions, type Service, anatomy, connect, machine, props, splitProps };
+export type { MachineApi as Api, UserDefinedContext as Context, ElementIds, FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, Placement, PointerDownOutsideEvent, PositioningOptions, Service };

package/dist/index.mjs

@@ -6,13 +6,11 @@ import { trackDismissableElement } from "@destyler/dismissable";
 import { trapFocus } from "@destyler/focus-trap";
 import { preventBodyScroll } from "@destyler/remove-scroll";
 import { compact, createSplitProps, isControlled, resolveControllableOpen, withControllableProvided } from "@destyler/utils";
-import { createMachine } from "@destyler/xstate";
+import { ActionTypes, 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({
@@ -33,7 +31,6 @@ const dom = createScope({
 	getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
 	getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0]
 });
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
@@ -165,12 +162,12 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 function machine(userContext) {
 	const ctx = compact(withControllableProvided(userContext, ["open"]));
 	const { initialOpen } = resolveControllableOpen(ctx);
+	const renderedElementChecks = /* @__PURE__ */ new WeakMap();
 	return createMachine({
 		id: "popover",
 		initial: initialOpen ? "open" : "closed",
@@ -191,32 +188,37 @@ function machine(userContext) {
 				description: true
 			}
 		},
-		computed: { currentPortalled: (ctx$1) => !!ctx$1.modal || !!ctx$1.portalled },
+		computed: { currentPortalled: (ctx) => !!ctx.modal || !!ctx.portalled },
 		watch: { open: ["toggleVisibility"] },
+		activities: ["trackRenderedElements"],
 		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"]
-				}]
-			} },
+			closed: {
+				activities: ["trackRenderedElements"],
+				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: [
+					"trackRenderedElements",
 					"trapFocus",
 					"preventScroll",
 					"hideContentBelow",
@@ -248,41 +250,50 @@ function machine(userContext) {
 			}
 		}
 	}, {
-		guards: { isOpenControlled: (ctx$1) => isControlled(ctx$1, "open") },
+		guards: { isOpenControlled: (ctx) => isControlled(ctx, "open") },
 		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);
+			trackRenderedElements(ctx, evt, meta) {
+				if (evt.type === ActionTypes.Start) renderedElementChecks.set(ctx, {});
+				const checks = renderedElementChecks.get(ctx);
+				if (meta.state.matches("open") && evt.type !== ActionTypes.Init) meta.getAction("checkRenderedElements")?.(ctx, evt, meta);
+				return () => {
+					checks.cancel?.();
+					delete checks.cancel;
+				};
+			},
+			trackPositioning(ctx) {
+				ctx.currentPlacement = ctx.positioning.placement;
+				const anchorEl = dom.getAnchorEl(ctx) ?? dom.getTriggerEl(ctx);
+				const getPositionerEl = () => dom.getPositionerEl(ctx);
 				return getPlacement(anchorEl, getPositionerEl, {
-					...ctx$1.positioning,
+					...ctx.positioning,
 					defer: true,
 					onComplete(data) {
-						ctx$1.currentPlacement = data.placement;
+						ctx.currentPlacement = data.placement;
 					}
 				});
 			},
-			trackDismissableElement(ctx$1, _evt, { send }) {
-				const getContentEl = () => dom.getContentEl(ctx$1);
+			trackDismissableElement(ctx, _evt, { send }) {
+				const getContentEl = () => dom.getContentEl(ctx);
 				let restoreFocus = true;
 				return trackDismissableElement(getContentEl, {
-					pointerBlocking: ctx$1.modal,
-					exclude: dom.getTriggerEl(ctx$1),
+					pointerBlocking: ctx.modal,
+					exclude: dom.getTriggerEl(ctx),
 					defer: true,
 					onEscapeKeyDown(event) {
-						ctx$1.onEscapeKeyDown?.(event);
-						if (ctx$1.closeOnEscape) return;
+						ctx.onEscapeKeyDown?.(event);
+						if (ctx.closeOnEscape) return;
 						event.preventDefault();
 					},
 					onInteractOutside(event) {
-						ctx$1.onInteractOutside?.(event);
+						ctx.onInteractOutside?.(event);
 						if (event.defaultPrevented) return;
 						restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-						if (!ctx$1.closeOnInteractOutside) event.preventDefault();
+						if (!ctx.closeOnInteractOutside) event.preventDefault();
 					},
-					onPointerDownOutside: ctx$1.onPointerDownOutside,
-					onFocusOutside: ctx$1.onFocusOutside,
-					persistentElements: ctx$1.persistentElements,
+					onPointerDownOutside: ctx.onPointerDownOutside,
+					onFocusOutside: ctx.onFocusOutside,
+					persistentElements: ctx.persistentElements,
 					onDismiss() {
 						send({
 							type: "CLOSE",
@@ -292,91 +303,94 @@ function machine(userContext) {
 					}
 				});
 			},
-			proxyTabFocus(ctx$1) {
-				if (ctx$1.modal || !ctx$1.portalled) return;
-				const getContentEl = () => dom.getContentEl(ctx$1);
+			proxyTabFocus(ctx) {
+				if (ctx.modal || !ctx.portalled) return;
+				const getContentEl = () => dom.getContentEl(ctx);
 				return proxyTabFocus(getContentEl, {
-					triggerElement: dom.getTriggerEl(ctx$1),
+					triggerElement: dom.getTriggerEl(ctx),
 					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)];
+			hideContentBelow(ctx) {
+				if (!ctx.modal) return;
+				const getElements = () => [dom.getContentEl(ctx), dom.getTriggerEl(ctx)];
 				return ariaHidden(getElements, { defer: true });
 			},
-			preventScroll(ctx$1) {
-				if (!ctx$1.modal) return;
-				return preventBodyScroll(dom.getDoc(ctx$1));
+			preventScroll(ctx) {
+				if (!ctx.modal) return;
+				return preventBodyScroll(dom.getDoc(ctx));
 			},
-			trapFocus(ctx$1) {
-				if (!ctx$1.modal) return;
-				const contentEl = () => dom.getContentEl(ctx$1);
+			trapFocus(ctx) {
+				if (!ctx.modal) return;
+				const contentEl = () => dom.getContentEl(ctx);
 				return trapFocus(contentEl, { initialFocus: () => getInitialFocus({
-					root: dom.getContentEl(ctx$1),
-					getInitialEl: ctx$1.initialFocusEl,
-					enabled: ctx$1.autoFocus
+					root: dom.getContentEl(ctx),
+					getInitialEl: ctx.initialFocusEl,
+					enabled: ctx.autoFocus
 				}) });
 			}
 		},
 		actions: {
-			reposition(ctx$1, evt) {
-				const anchorEl = dom.getAnchorEl(ctx$1) ?? dom.getTriggerEl(ctx$1);
-				const getPositionerEl = () => dom.getPositionerEl(ctx$1);
+			reposition(ctx, evt) {
+				const anchorEl = dom.getAnchorEl(ctx) ?? dom.getTriggerEl(ctx);
+				const getPositionerEl = () => dom.getPositionerEl(ctx);
 				getPlacement(anchorEl, getPositionerEl, {
-					...ctx$1.positioning,
+					...ctx.positioning,
 					...evt.options,
 					defer: true,
 					listeners: false,
 					onComplete(data) {
-						ctx$1.currentPlacement = data.placement;
+						ctx.currentPlacement = data.placement;
 					}
 				});
 			},
-			checkRenderedElements(ctx$1) {
-				raf(() => {
-					Object.assign(ctx$1.renderedElements, {
-						title: !!dom.getTitleEl(ctx$1),
-						description: !!dom.getDescriptionEl(ctx$1)
+			checkRenderedElements(ctx) {
+				const checks = renderedElementChecks.get(ctx) ?? {};
+				renderedElementChecks.set(ctx, checks);
+				checks.cancel?.();
+				checks.cancel = raf(() => {
+					delete checks.cancel;
+					Object.assign(ctx.renderedElements, {
+						title: !!dom.getTitleEl(ctx),
+						description: !!dom.getDescriptionEl(ctx)
 					});
 				});
 			},
-			setInitialFocus(ctx$1) {
-				if (ctx$1.modal) return;
+			setInitialFocus(ctx) {
+				if (ctx.modal) return;
 				raf(() => {
 					getInitialFocus({
-						root: dom.getContentEl(ctx$1),
-						getInitialEl: ctx$1.initialFocusEl,
-						enabled: ctx$1.autoFocus
+						root: dom.getContentEl(ctx),
+						getInitialEl: ctx.initialFocusEl,
+						enabled: ctx.autoFocus
 					})?.focus({ preventScroll: true });
 				});
 			},
-			setFinalFocus(ctx$1, evt) {
+			setFinalFocus(ctx, evt) {
 				const restoreFocus = evt.restoreFocus ?? evt.previousEvent?.restoreFocus;
 				if (restoreFocus != null && !restoreFocus) return;
 				raf(() => {
-					dom.getTriggerEl(ctx$1)?.focus({ preventScroll: true });
+					dom.getTriggerEl(ctx)?.focus({ preventScroll: true });
 				});
 			},
-			invokeOnOpen(ctx$1) {
-				ctx$1.onOpenChange?.({ open: true });
+			invokeOnOpen(ctx) {
+				ctx.onOpenChange?.({ open: true });
 			},
-			invokeOnClose(ctx$1) {
-				ctx$1.onOpenChange?.({ open: false });
+			invokeOnClose(ctx) {
+				ctx.onOpenChange?.({ open: false });
 			},
-			toggleVisibility(ctx$1, evt, { send }) {
+			toggleVisibility(ctx, evt, { send }) {
 				send({
-					type: ctx$1.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					type: ctx.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
 					previousEvent: evt
 				});
 			}
 		}
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -401,6 +415,5 @@ const props = createProps()([
 	"positioning"
 ]);
 const splitProps = createSplitProps(props);
-
 //#endregion
-export { anatomy, connect, machine, props, splitProps };
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/popover",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "displays rich content in a portal, triggered by a button.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,16 +22,16 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.11",
-    "@destyler/dismissable": "0.2.11",
-    "@destyler/focus-trap": "0.2.11",
-    "@destyler/popper": "0.2.11",
-    "@destyler/aria-hidden": "0.2.11",
-    "@destyler/dom": "0.2.11",
-    "@destyler/utils": "0.2.11",
-    "@destyler/xstate": "0.2.11",
-    "@destyler/remove-scroll": "0.2.11",
-    "@destyler/types": "0.2.11"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/aria-hidden": "0.2.12",
+    "@destyler/dismissable": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/focus-trap": "0.2.12",
+    "@destyler/popper": "0.2.12",
+    "@destyler/remove-scroll": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"