@destyler/dismissable 0.0.7-beta.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-PRESENT Elone Hoo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, InteractOutsideHandlers as InteractOutsideHandlers$1, PointerDownOutsideEvent } from "@destyler/interact-outside";
+import { MaybeFunction } from "@destyler/utils";
+
+//#region src/dismissable-layer.d.ts
+type MaybeElement = HTMLElement | null;
+type Container = MaybeElement | Array<MaybeElement>;
+type NodeOrFn = MaybeFunction<MaybeElement>;
+interface DismissableElementHandlers extends InteractOutsideHandlers$1 {
+  /**
+   * Function called when the escape key is pressed
+   */
+  onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+}
+interface PersistentElementOptions {
+  /**
+   * Returns the persistent elements that:
+   * - should not have pointer-events disabled
+   * - should not trigger the dismiss event
+   */
+  persistentElements?: Array<() => Element | null> | undefined;
+}
+interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
+  /**
+   * Whether to log debug information
+   */
+  debug?: boolean | undefined;
+  /**
+   * Whether to block pointer events outside the dismissable element
+   */
+  pointerBlocking?: boolean | undefined;
+  /**
+   * Function called when the dismissable element is dismissed
+   */
+  onDismiss: VoidFunction;
+  /**
+   * Exclude containers from the interact outside event
+   */
+  exclude?: MaybeFunction<Container> | undefined;
+  /**
+   * Defer the interact outside event to the next frame
+   */
+  defer?: boolean | undefined;
+}
+declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
+declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
+  defer?: boolean;
+}): () => void;
+//#endregion
+export { DismissableElementHandlers, DismissableElementOptions, type FocusOutsideEvent, type InteractOutsideEvent, type InteractOutsideHandlers, PersistentElementOptions, type PointerDownOutsideEvent, trackDismissableBranch, trackDismissableElement };

package/dist/index.js

@@ -0,0 +1,213 @@
+import { addDomEvent, contains, getDocument, getEventTarget, isHTMLElement, raf, setStyle, waitForElements } from "@destyler/dom";
+import { trackInteractOutside } from "@destyler/interact-outside";
+import { isFunction } from "@destyler/utils";
+
+//#region src/escape-keydown.ts
+function trackEscapeKeydown(node, fn) {
+	const handleKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		if (event.isComposing) return;
+		fn?.(event);
+	};
+	return addDomEvent(getDocument(node), "keydown", handleKeyDown, { capture: true });
+}
+
+//#endregion
+//#region src/layer-stack.ts
+const layerStack = {
+	layers: [],
+	branches: [],
+	count() {
+		return this.layers.length;
+	},
+	pointerBlockingLayers() {
+		return this.layers.filter((layer) => layer.pointerBlocking);
+	},
+	topMostPointerBlockingLayer() {
+		return [...this.pointerBlockingLayers()].slice(-1)[0];
+	},
+	hasPointerBlockingLayer() {
+		return this.pointerBlockingLayers().length > 0;
+	},
+	isBelowPointerBlockingLayer(node) {
+		const index = this.indexOf(node);
+		const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
+		return index < highestBlockingIndex;
+	},
+	isTopMost(node) {
+		const layer = this.layers[this.count() - 1];
+		return layer?.node === node;
+	},
+	getNestedLayers(node) {
+		return Array.from(this.layers).slice(this.indexOf(node) + 1);
+	},
+	isInNestedLayer(node, target) {
+		return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
+	},
+	isInBranch(target) {
+		return Array.from(this.branches).some((branch) => contains(branch, target));
+	},
+	add(layer) {
+		const num = this.layers.push(layer);
+		layer.node.style.setProperty("--layer-index", `${num}`);
+	},
+	addBranch(node) {
+		this.branches.push(node);
+	},
+	remove(node) {
+		const index = this.indexOf(node);
+		if (index < 0) return;
+		if (index < this.count() - 1) {
+			const _layers = this.getNestedLayers(node);
+			_layers.forEach((layer) => layer.dismiss());
+		}
+		this.layers.splice(index, 1);
+		node.style.removeProperty("--layer-index");
+	},
+	removeBranch(node) {
+		const index = this.branches.indexOf(node);
+		if (index >= 0) this.branches.splice(index, 1);
+	},
+	indexOf(node) {
+		return this.layers.findIndex((layer) => layer.node === node);
+	},
+	dismiss(node) {
+		this.layers[this.indexOf(node)]?.dismiss();
+	},
+	clear() {
+		this.remove(this.layers[0].node);
+	}
+};
+
+//#endregion
+//#region src/pointer-event-outside.ts
+let originalBodyPointerEvents;
+function assignPointerEventToLayers() {
+	layerStack.layers.forEach(({ node }) => {
+		node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+	});
+}
+function clearPointerEvent(node) {
+	node.style.pointerEvents = "";
+}
+function disablePointerEventsOutside(node, persistentElements) {
+	const doc = getDocument(node);
+	const cleanups = [];
+	if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
+		originalBodyPointerEvents = document.body.style.pointerEvents;
+		queueMicrotask(() => {
+			doc.body.style.pointerEvents = "none";
+			doc.body.setAttribute("data-inert", "");
+		});
+	}
+	if (persistentElements) {
+		const persistedCleanup = waitForElements(persistentElements, (el) => {
+			cleanups.push(setStyle(el, { pointerEvents: "auto" }));
+		});
+		cleanups.push(persistedCleanup);
+	}
+	return () => {
+		if (layerStack.hasPointerBlockingLayer()) return;
+		queueMicrotask(() => {
+			doc.body.style.pointerEvents = originalBodyPointerEvents;
+			doc.body.removeAttribute("data-inert");
+			if (doc.body.style.length === 0) doc.body.removeAttribute("style");
+		});
+		cleanups.forEach((fn) => fn());
+	};
+}
+
+//#endregion
+//#region src/dismissable-layer.ts
+function trackDismissableElementImpl(node, options) {
+	if (!node) throw new Error("[@destyler/dismissable] node is `null` or `undefined`");
+	const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
+	const layer = {
+		dismiss: onDismiss,
+		node,
+		pointerBlocking
+	};
+	layerStack.add(layer);
+	assignPointerEventToLayers();
+	function onPointerDownOutside(event) {
+		const target = getEventTarget(event.detail.originalEvent);
+		if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target)) return;
+		options.onPointerDownOutside?.(event);
+		options.onInteractOutside?.(event);
+		if (event.defaultPrevented) return;
+		if (debug) console.log("onPointerDownOutside:", event.detail.originalEvent);
+		onDismiss?.();
+	}
+	function onFocusOutside(event) {
+		const target = getEventTarget(event.detail.originalEvent);
+		if (layerStack.isInBranch(target)) return;
+		options.onFocusOutside?.(event);
+		options.onInteractOutside?.(event);
+		if (event.defaultPrevented) return;
+		if (debug) console.log("onFocusOutside:", event.detail.originalEvent);
+		onDismiss?.();
+	}
+	function onEscapeKeyDown(event) {
+		if (!layerStack.isTopMost(node)) return;
+		options.onEscapeKeyDown?.(event);
+		if (!event.defaultPrevented && onDismiss) {
+			event.preventDefault();
+			onDismiss();
+		}
+	}
+	function exclude(target) {
+		if (!node) return false;
+		const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
+		const _containers = Array.isArray(containers) ? containers : [containers];
+		const persistentElements = options.persistentElements?.map((fn) => fn()).filter(isHTMLElement);
+		if (persistentElements) _containers.push(...persistentElements);
+		return _containers.some((node$1) => contains(node$1, target)) || layerStack.isInNestedLayer(node, target);
+	}
+	const cleanups = [
+		pointerBlocking ? disablePointerEventsOutside(node, options.persistentElements) : void 0,
+		trackEscapeKeydown(node, onEscapeKeyDown),
+		trackInteractOutside(node, {
+			exclude,
+			onFocusOutside,
+			onPointerDownOutside,
+			defer: options.defer
+		})
+	];
+	return () => {
+		layerStack.remove(node);
+		assignPointerEventToLayers();
+		clearPointerEvent(node);
+		cleanups.forEach((fn) => fn?.());
+	};
+}
+function trackDismissableElement(nodeOrFn, options) {
+	const { defer } = options;
+	const func = defer ? raf : (v) => v();
+	const cleanups = [];
+	cleanups.push(func(() => {
+		const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
+		cleanups.push(trackDismissableElementImpl(node, options));
+	}));
+	return () => {
+		cleanups.forEach((fn) => fn?.());
+	};
+}
+function trackDismissableBranch(nodeOrFn, options = {}) {
+	const { defer } = options;
+	const func = defer ? raf : (v) => v();
+	const cleanups = [];
+	cleanups.push(func(() => {
+		const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
+		if (!node) throw new Error("[@destyler/dismissable] branch node is `null` or `undefined`");
+		layerStack.addBranch(node);
+		cleanups.push(() => {
+			layerStack.removeBranch(node);
+		});
+	}));
+	return () => {
+		cleanups.forEach((fn) => fn?.());
+	};
+}
+
+//#endregion
+export { trackDismissableBranch, trackDismissableElement };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@destyler/dismissable",
+  "type": "module",
+  "version": "0.0.7-beta.9",
+  "description": "Dismissable layer utilities for the dom",
+  "author": "Elone Hoo <elonehoo@gmail.com>",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*.d.ts",
+    "dist"
+  ],
+  "dependencies": {
+    "@destyler/utils": "0.0.7-beta.9",
+    "@destyler/dom": "0.0.7-beta.9",
+    "@destyler/interact-outside": "0.0.7-beta.9"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist",
+    "clear:node_modules": "rimraf ./node_modules",
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
+  }
+}