@aloudata/aloudata-design 3.0.22 → 3.0.23

package/dist/_utils/overlayCoordinator.js

@@ -0,0 +1,151 @@
+import { FLOATING_LAYER_BASE_Z_INDEX } from "./floatingLayer.js";
+import { createContext, useContext, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/_utils/overlayCoordinator.tsx
+var ModalLayerContext = createContext(void 0);
+var entries = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var bodyScrollLockOwners = /* @__PURE__ */ new Set();
+var nextId = 0;
+var nextOpenedAt = 0;
+var version = 0;
+var bodyScrollLocked = false;
+var previousBodyOverflow = "";
+function getOrderedEntries() {
+	const orderedByOpen = Array.from(entries.values()).sort((left, right) => left.openedAt - right.openedAt);
+	const ordered = [];
+	const visited = /* @__PURE__ */ new Set();
+	const visit = (entry) => {
+		if (visited.has(entry.id)) return;
+		const parent = entry.parentId ? entries.get(entry.parentId) : void 0;
+		if (parent) visit(parent);
+		visited.add(entry.id);
+		ordered.push(entry);
+	};
+	orderedByOpen.forEach(visit);
+	return ordered;
+}
+function notify() {
+	version += 1;
+	listeners.forEach((listener) => listener());
+}
+function updateLayers() {
+	let nextZIndex = FLOATING_LAYER_BASE_Z_INDEX;
+	getOrderedEntries().forEach((entry) => {
+		entry.maskZIndex = Math.max(entry.requestedZIndex, nextZIndex);
+		entry.contentZIndex = entry.maskZIndex + 1;
+		nextZIndex = entry.maskZIndex + 10;
+	});
+	notify();
+}
+function acquireBodyScrollLock(owner) {
+	if (typeof document === "undefined") return;
+	if (bodyScrollLockOwners.has(owner)) return;
+	if (!bodyScrollLocked) {
+		previousBodyOverflow = document.body.style.overflow;
+		bodyScrollLocked = true;
+	}
+	bodyScrollLockOwners.add(owner);
+	document.body.style.overflow = "hidden";
+}
+function releaseBodyScrollLock(owner) {
+	if (typeof document === "undefined") return;
+	bodyScrollLockOwners.delete(owner);
+	if (bodyScrollLocked && bodyScrollLockOwners.size === 0) {
+		document.body.style.overflow = previousBodyOverflow;
+		bodyScrollLocked = false;
+	}
+}
+function registerModal(id, requestedZIndex, parentId) {
+	entries.set(id, {
+		id,
+		parentId,
+		requestedZIndex,
+		openedAt: ++nextOpenedAt,
+		maskZIndex: requestedZIndex,
+		contentZIndex: requestedZIndex + 1
+	});
+	acquireBodyScrollLock(id);
+	updateLayers();
+}
+function unregisterModal(id) {
+	if (!entries.delete(id)) return;
+	releaseBodyScrollLock(id);
+	updateLayers();
+}
+function updateModal(id, requestedZIndex, parentId) {
+	const entry = entries.get(id);
+	if (!entry || entry.requestedZIndex === requestedZIndex && entry.parentId === parentId) return;
+	entry.requestedZIndex = requestedZIndex;
+	entry.parentId = parentId;
+	updateLayers();
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+function getVersion() {
+	return version;
+}
+function useModalLayer(open, requestedZIndex = FLOATING_LAYER_BASE_Z_INDEX) {
+	const parentId = useContext(ModalLayerContext);
+	const idRef = useRef();
+	const layerOptionsRef = useRef({
+		parentId,
+		requestedZIndex
+	});
+	layerOptionsRef.current = {
+		parentId,
+		requestedZIndex
+	};
+	if (!idRef.current) idRef.current = ++nextId;
+	const id = idRef.current;
+	useSyncExternalStore(subscribe, getVersion, getVersion);
+	useLayoutEffect(() => {
+		if (!open) return;
+		registerModal(id, layerOptionsRef.current.requestedZIndex, layerOptionsRef.current.parentId);
+		return () => unregisterModal(id);
+	}, [id, open]);
+	useLayoutEffect(() => {
+		if (open) updateModal(id, requestedZIndex, parentId);
+	}, [
+		id,
+		open,
+		parentId,
+		requestedZIndex
+	]);
+	const entry = entries.get(id);
+	const ordered = getOrderedEntries();
+	const topEntry = ordered[ordered.length - 1];
+	return {
+		id,
+		maskZIndex: entry?.maskZIndex ?? requestedZIndex,
+		contentZIndex: entry?.contentZIndex ?? requestedZIndex + 1,
+		isTop: entry ? topEntry?.id === id : true
+	};
+}
+function useTopModalContentZIndex() {
+	useSyncExternalStore(subscribe, getVersion, getVersion);
+	const ordered = getOrderedEntries();
+	return ordered[ordered.length - 1]?.contentZIndex;
+}
+function useBodyScrollLock(locked) {
+	const ownerRef = useRef();
+	if (!ownerRef.current) ownerRef.current = Symbol("body-scroll-lock");
+	useLayoutEffect(() => {
+		if (!locked) return;
+		const owner = ownerRef.current;
+		acquireBodyScrollLock(owner);
+		return () => releaseBodyScrollLock(owner);
+	}, [locked]);
+}
+function ModalLayerProvider({ id, children }) {
+	return /* @__PURE__ */ jsx(ModalLayerContext.Provider, {
+		value: id,
+		children
+	});
+}
+//#endregion
+export { ModalLayerProvider, useBodyScrollLock, useModalLayer, useTopModalContentZIndex };
+
+//# sourceMappingURL=overlayCoordinator.js.map

package/dist/_utils/overlayCoordinator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayCoordinator.js","names":[],"sources":["../../src/_utils/overlayCoordinator.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\nimport {\n  FLOATING_LAYER_BASE_Z_INDEX,\n  FLOATING_LAYER_STEP,\n} from './floatingLayer';\n\ninterface ModalLayerEntry {\n  id: number;\n  parentId?: number;\n  requestedZIndex: number;\n  openedAt: number;\n  maskZIndex: number;\n  contentZIndex: number;\n}\n\nexport interface ModalLayer {\n  id: number;\n  maskZIndex: number;\n  contentZIndex: number;\n  isTop: boolean;\n}\n\nconst ModalLayerContext = createContext<number | undefined>(undefined);\nconst entries = new Map<number, ModalLayerEntry>();\nconst listeners = new Set<() => void>();\nconst bodyScrollLockOwners = new Set<unknown>();\nlet nextId = 0;\nlet nextOpenedAt = 0;\nlet version = 0;\nlet bodyScrollLocked = false;\nlet previousBodyOverflow = '';\n\nfunction getOrderedEntries() {\n  const orderedByOpen = Array.from(entries.values()).sort(\n    (left, right) => left.openedAt - right.openedAt,\n  );\n  const ordered: ModalLayerEntry[] = [];\n  const visited = new Set<number>();\n\n  const visit = (entry: ModalLayerEntry) => {\n    if (visited.has(entry.id)) return;\n    const parent = entry.parentId ? entries.get(entry.parentId) : undefined;\n    if (parent) visit(parent);\n    visited.add(entry.id);\n    ordered.push(entry);\n  };\n\n  orderedByOpen.forEach(visit);\n  return ordered;\n}\n\nfunction notify() {\n  version += 1;\n  listeners.forEach((listener) => listener());\n}\n\nfunction updateLayers() {\n  let nextZIndex = FLOATING_LAYER_BASE_Z_INDEX;\n  getOrderedEntries().forEach((entry) => {\n    entry.maskZIndex = Math.max(entry.requestedZIndex, nextZIndex);\n    entry.contentZIndex = entry.maskZIndex + 1;\n    nextZIndex = entry.maskZIndex + FLOATING_LAYER_STEP;\n  });\n  notify();\n}\n\nfunction acquireBodyScrollLock(owner: unknown) {\n  if (typeof document === 'undefined') return;\n  if (bodyScrollLockOwners.has(owner)) return;\n  if (!bodyScrollLocked) {\n    previousBodyOverflow = document.body.style.overflow;\n    bodyScrollLocked = true;\n  }\n  bodyScrollLockOwners.add(owner);\n  document.body.style.overflow = 'hidden';\n}\n\nfunction releaseBodyScrollLock(owner: unknown) {\n  if (typeof document === 'undefined') return;\n  bodyScrollLockOwners.delete(owner);\n  if (bodyScrollLocked && bodyScrollLockOwners.size === 0) {\n    document.body.style.overflow = previousBodyOverflow;\n    bodyScrollLocked = false;\n  }\n}\n\nfunction registerModal(id: number, requestedZIndex: number, parentId?: number) {\n  entries.set(id, {\n    id,\n    parentId,\n    requestedZIndex,\n    openedAt: ++nextOpenedAt,\n    maskZIndex: requestedZIndex,\n    contentZIndex: requestedZIndex + 1,\n  });\n  acquireBodyScrollLock(id);\n  updateLayers();\n}\n\nfunction unregisterModal(id: number) {\n  if (!entries.delete(id)) return;\n  releaseBodyScrollLock(id);\n  updateLayers();\n}\n\nfunction updateModal(id: number, requestedZIndex: number, parentId?: number) {\n  const entry = entries.get(id);\n  if (\n    !entry ||\n    (entry.requestedZIndex === requestedZIndex && entry.parentId === parentId)\n  )\n    return;\n  entry.requestedZIndex = requestedZIndex;\n  entry.parentId = parentId;\n  updateLayers();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n\nfunction getVersion() {\n  return version;\n}\n\nexport function useModalLayer(\n  open: boolean,\n  requestedZIndex = FLOATING_LAYER_BASE_Z_INDEX,\n): ModalLayer {\n  const parentId = useContext(ModalLayerContext);\n  const idRef = useRef<number>();\n  const layerOptionsRef = useRef({ parentId, requestedZIndex });\n  layerOptionsRef.current = { parentId, requestedZIndex };\n  if (!idRef.current) idRef.current = ++nextId;\n  const id = idRef.current;\n\n  useSyncExternalStore(subscribe, getVersion, getVersion);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    registerModal(\n      id,\n      layerOptionsRef.current.requestedZIndex,\n      layerOptionsRef.current.parentId,\n    );\n    return () => unregisterModal(id);\n  }, [id, open]);\n\n  useLayoutEffect(() => {\n    if (open) updateModal(id, requestedZIndex, parentId);\n  }, [id, open, parentId, requestedZIndex]);\n\n  const entry = entries.get(id);\n  const ordered = getOrderedEntries();\n  const topEntry = ordered[ordered.length - 1];\n\n  return {\n    id,\n    maskZIndex: entry?.maskZIndex ?? requestedZIndex,\n    contentZIndex: entry?.contentZIndex ?? requestedZIndex + 1,\n    isTop: entry ? topEntry?.id === id : true,\n  };\n}\n\nexport function useTopModalContentZIndex() {\n  useSyncExternalStore(subscribe, getVersion, getVersion);\n  const ordered = getOrderedEntries();\n  return ordered[ordered.length - 1]?.contentZIndex;\n}\n\nexport function useBodyScrollLock(locked: boolean) {\n  const ownerRef = useRef<symbol>();\n  if (!ownerRef.current) ownerRef.current = Symbol('body-scroll-lock');\n\n  useLayoutEffect(() => {\n    if (!locked) return;\n    const owner = ownerRef.current!;\n    acquireBodyScrollLock(owner);\n    return () => releaseBodyScrollLock(owner);\n  }, [locked]);\n}\n\nexport function ModalLayerProvider({\n  id,\n  children,\n}: {\n  id: number;\n  children: React.ReactNode;\n}) {\n  return (\n    <ModalLayerContext.Provider value={id}>\n      {children}\n    </ModalLayerContext.Provider>\n  );\n}\n"],"mappings":"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"}