@aloudata/aloudata-design 3.1.0 → 3.1.1

package/dist/_utils/dialogAccessibility.js

@@ -0,0 +1,110 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+//#region src/_utils/dialogAccessibility.ts
+var FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])";
+var dialogEscapeEvents = /* @__PURE__ */ new WeakSet();
+function markDialogEscapeEvent(event) {
+	dialogEscapeEvents.add(event);
+}
+function shouldDismissDialogEscape(event) {
+	return !event.cancelBubble && (!event.defaultPrevented || dialogEscapeEvents.has(event));
+}
+function getDialogFocusableElements(container) {
+	return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => {
+		if (element.closest("[inert]")) return false;
+		if (element.getAttribute("aria-hidden") === "true") return false;
+		if (element.getAttribute("aria-disabled") === "true") return false;
+		return element.tabIndex >= 0;
+	});
+}
+function isDialogChildOverlayActive(container) {
+	const activeElement = document.activeElement;
+	if (!(activeElement instanceof HTMLElement)) return false;
+	const activeOverlay = activeElement.closest("[role=\"dialog\"], [role=\"alertdialog\"], [role=\"menu\"], [role=\"listbox\"]");
+	return !!activeOverlay && activeOverlay !== container;
+}
+function focusInitialDialogTarget(container) {
+	const activeElement = document.activeElement;
+	const activeOverlay = activeElement instanceof HTMLElement ? activeElement.closest("[role=\"dialog\"], [role=\"alertdialog\"], [role=\"menu\"], [role=\"listbox\"]") : null;
+	if (activeOverlay && activeOverlay !== container && activeOverlay.getAttribute("role") !== "dialog" && activeOverlay.getAttribute("role") !== "alertdialog") return;
+	(getDialogFocusableElements(container).find((element) => element.dataset.overlayClose !== "true") ?? null ?? container).focus({ preventScroll: true });
+}
+function restoreDialogFocus(target) {
+	queueMicrotask(() => {
+		if (target?.isConnected && target.tabIndex !== -1) {
+			target.focus({ preventScroll: true });
+			return;
+		}
+		Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR)).find((element) => {
+			if (element.closest("[role=\"dialog\"], [role=\"alertdialog\"]")) return false;
+			if (element.closest("[inert]")) return false;
+			if (element.getAttribute("aria-disabled") === "true") return false;
+			return element.tabIndex >= 0;
+		})?.focus({ preventScroll: true });
+	});
+}
+function useDialogAccessibility({ open, isTop, keyboard, containerRef, onEscape }) {
+	const focusRestoreTargetRef = useRef(null);
+	const prevOpenRef = useRef(false);
+	useLayoutEffect(() => {
+		const wasOpen = prevOpenRef.current;
+		if (open && !wasOpen) focusRestoreTargetRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		if (!open && wasOpen) {
+			restoreDialogFocus(focusRestoreTargetRef.current);
+			focusRestoreTargetRef.current = null;
+		}
+		prevOpenRef.current = open;
+	}, [open]);
+	useEffect(() => {
+		if (!open || !isTop || !containerRef.current) return;
+		const container = containerRef.current;
+		const handleKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			if (isDialogChildOverlayActive(container)) return;
+			const focusable = getDialogFocusableElements(container);
+			if (focusable.length === 0) {
+				if (document.activeElement !== container) {
+					event.preventDefault();
+					container.focus({ preventScroll: true });
+				}
+				return;
+			}
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			if (event.shiftKey) {
+				if (document.activeElement === first || !container.contains(document.activeElement)) {
+					event.preventDefault();
+					last.focus({ preventScroll: true });
+				}
+			} else if (document.activeElement === last || !container.contains(document.activeElement)) {
+				event.preventDefault();
+				first.focus({ preventScroll: true });
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [
+		containerRef,
+		isTop,
+		open
+	]);
+	useEffect(() => {
+		if (!open || !isTop || !keyboard) return;
+		const handleEscape = (event) => {
+			if (event.key !== "Escape") return;
+			queueMicrotask(() => {
+				if (shouldDismissDialogEscape(event)) onEscape(event);
+			});
+		};
+		window.addEventListener("keydown", handleEscape, true);
+		return () => window.removeEventListener("keydown", handleEscape, true);
+	}, [
+		isTop,
+		keyboard,
+		onEscape,
+		open
+	]);
+}
+//#endregion
+export { focusInitialDialogTarget, markDialogEscapeEvent, restoreDialogFocus, useDialogAccessibility };
+
+//# sourceMappingURL=dialogAccessibility.js.map

package/dist/_utils/dialogAccessibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogAccessibility.js","names":[],"sources":["../../src/_utils/dialogAccessibility.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react';\n\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n\nconst dialogEscapeEvents = new WeakSet<KeyboardEvent>();\n\nexport function markDialogEscapeEvent(event: KeyboardEvent) {\n  dialogEscapeEvents.add(event);\n}\n\nexport function shouldDismissDialogEscape(event: KeyboardEvent) {\n  return (\n    !event.cancelBubble &&\n    (!event.defaultPrevented || dialogEscapeEvents.has(event))\n  );\n}\n\nexport function getDialogFocusableElements(container: HTMLElement) {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((element) => {\n    if (element.closest('[inert]')) return false;\n    if (element.getAttribute('aria-hidden') === 'true') return false;\n    if (element.getAttribute('aria-disabled') === 'true') return false;\n    return element.tabIndex >= 0;\n  });\n}\n\nexport function isDialogChildOverlayActive(container: HTMLElement) {\n  const activeElement = document.activeElement;\n  if (!(activeElement instanceof HTMLElement)) return false;\n  const activeOverlay = activeElement.closest<HTMLElement>(\n    '[role=\"dialog\"], [role=\"alertdialog\"], [role=\"menu\"], [role=\"listbox\"]',\n  );\n\n  return !!activeOverlay && activeOverlay !== container;\n}\n\nexport function focusInitialDialogTarget(container: HTMLElement) {\n  const activeElement = document.activeElement;\n  const activeOverlay =\n    activeElement instanceof HTMLElement\n      ? activeElement.closest<HTMLElement>(\n          '[role=\"dialog\"], [role=\"alertdialog\"], [role=\"menu\"], [role=\"listbox\"]',\n        )\n      : null;\n\n  if (\n    activeOverlay &&\n    activeOverlay !== container &&\n    activeOverlay.getAttribute('role') !== 'dialog' &&\n    activeOverlay.getAttribute('role') !== 'alertdialog'\n  ) {\n    return;\n  }\n\n  const focusable = getDialogFocusableElements(container);\n  const preferred =\n    focusable.find((element) => element.dataset.overlayClose !== 'true') ??\n    null;\n\n  (preferred ?? container).focus({ preventScroll: true });\n}\n\nexport function restoreDialogFocus(target: HTMLElement | null) {\n  queueMicrotask(() => {\n    if (target?.isConnected && target.tabIndex !== -1) {\n      target.focus({ preventScroll: true });\n      return;\n    }\n\n    const fallback = Array.from(\n      document.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n    ).find((element) => {\n      if (element.closest('[role=\"dialog\"], [role=\"alertdialog\"]')) {\n        return false;\n      }\n      if (element.closest('[inert]')) return false;\n      if (element.getAttribute('aria-disabled') === 'true') return false;\n      return element.tabIndex >= 0;\n    });\n\n    fallback?.focus({ preventScroll: true });\n  });\n}\n\ninterface DialogAccessibilityOptions {\n  open: boolean;\n  isTop: boolean;\n  keyboard: boolean;\n  containerRef: { current: HTMLElement | null };\n  onEscape: (event: KeyboardEvent) => void;\n}\n\nexport function useDialogAccessibility({\n  open,\n  isTop,\n  keyboard,\n  containerRef,\n  onEscape,\n}: DialogAccessibilityOptions) {\n  const focusRestoreTargetRef = useRef<HTMLElement | null>(null);\n  const prevOpenRef = useRef(false);\n\n  useLayoutEffect(() => {\n    const wasOpen = prevOpenRef.current;\n    if (open && !wasOpen) {\n      focusRestoreTargetRef.current =\n        document.activeElement instanceof HTMLElement\n          ? document.activeElement\n          : null;\n    }\n    if (!open && wasOpen) {\n      restoreDialogFocus(focusRestoreTargetRef.current);\n      focusRestoreTargetRef.current = null;\n    }\n    prevOpenRef.current = open;\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !isTop || !containerRef.current) return;\n    const container = containerRef.current;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') return;\n      if (isDialogChildOverlayActive(container)) return;\n\n      const focusable = getDialogFocusableElements(container);\n      if (focusable.length === 0) {\n        if (document.activeElement !== container) {\n          event.preventDefault();\n          container.focus({ preventScroll: true });\n        }\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (event.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          event.preventDefault();\n          last.focus({ preventScroll: true });\n        }\n      } else if (\n        document.activeElement === last ||\n        !container.contains(document.activeElement)\n      ) {\n        event.preventDefault();\n        first.focus({ preventScroll: true });\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [containerRef, isTop, open]);\n\n  useEffect(() => {\n    if (!open || !isTop || !keyboard) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      queueMicrotask(() => {\n        if (shouldDismissDialogEscape(event)) {\n          onEscape(event);\n        }\n      });\n    };\n\n    window.addEventListener('keydown', handleEscape, true);\n    return () => window.removeEventListener('keydown', handleEscape, true);\n  }, [isTop, keyboard, onEscape, open]);\n}\n"],"mappings":"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"}

package/dist/_utils/formControlSemanticOwner.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export type SemanticOwnerAriaProps = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required' | 'aria-busy' | 'aria-disabled' | 'aria-readonly'>;
+export declare function getSemanticOwnerAriaProps(props: SemanticOwnerAriaProps): SemanticOwnerAriaProps;

package/dist/_utils/formControlSemanticOwner.js

@@ -0,0 +1,17 @@
+//#region src/_utils/formControlSemanticOwner.ts
+function getSemanticOwnerAriaProps(props) {
+	return {
+		"aria-label": props["aria-label"] || void 0,
+		"aria-labelledby": props["aria-labelledby"] || void 0,
+		"aria-describedby": props["aria-describedby"] || void 0,
+		"aria-invalid": props["aria-invalid"],
+		"aria-required": props["aria-required"],
+		"aria-busy": props["aria-busy"],
+		"aria-disabled": props["aria-disabled"],
+		"aria-readonly": props["aria-readonly"]
+	};
+}
+//#endregion
+export { getSemanticOwnerAriaProps };
+
+//# sourceMappingURL=formControlSemanticOwner.js.map

package/dist/_utils/formControlSemanticOwner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formControlSemanticOwner.js","names":[],"sources":["../../src/_utils/formControlSemanticOwner.ts"],"sourcesContent":["import React from 'react';\n\nexport type SemanticOwnerAriaProps = Pick<\n  React.AriaAttributes,\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-busy'\n  | 'aria-disabled'\n  | 'aria-readonly'\n>;\n\nexport function getSemanticOwnerAriaProps(\n  props: SemanticOwnerAriaProps,\n): SemanticOwnerAriaProps {\n  return {\n    'aria-label': props['aria-label'] || undefined,\n    'aria-labelledby': props['aria-labelledby'] || undefined,\n    'aria-describedby': props['aria-describedby'] || undefined,\n    'aria-invalid': props['aria-invalid'],\n    'aria-required': props['aria-required'],\n    'aria-busy': props['aria-busy'],\n    'aria-disabled': props['aria-disabled'],\n    'aria-readonly': props['aria-readonly'],\n  };\n}\n"],"mappings":";AAcA,SAAgB,0BACd,OACwB;AACxB,QAAO;EACL,cAAc,MAAM,iBAAiB;EACrC,mBAAmB,MAAM,sBAAsB;EAC/C,oBAAoB,MAAM,uBAAuB;EACjD,gBAAgB,MAAM;EACtB,iBAAiB,MAAM;EACvB,aAAa,MAAM;EACnB,iBAAiB,MAAM;EACvB,iBAAiB,MAAM;EACxB"}

package/dist/_utils/overlayCoordinator.js

@@ -129,16 +129,6 @@ function useTopModalContentZIndex() {
 	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,
@@ -146,6 +136,6 @@ function ModalLayerProvider({ id, children }) {
 	});
 }
 //#endregion
-export { ModalLayerProvider, useBodyScrollLock, useModalLayer, useTopModalContentZIndex };
+export { ModalLayerProvider, useModalLayer, useTopModalContentZIndex };
 
 //# sourceMappingURL=overlayCoordinator.js.map

package/dist/_utils/overlayCoordinator.js.map

@@ -1 +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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"}
+{"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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"}