@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/composables/useFloatingOverlay.cjs

@@ -0,0 +1,268 @@
+const require_types = require("./connectedPosition/types.cjs");
+const require_parseAnchor = require("./connectedPosition/parseAnchor.cjs");
+const require_computeArrowPosition = require("./connectedPosition/computeArrowPosition.cjs");
+const require_getOverflow = require("./connectedPosition/getOverflow.cjs");
+const require_positionCoordinates = require("./connectedPosition/positionCoordinates.cjs");
+const require_computeConnectedPosition = require("./connectedPosition/computeConnectedPosition.cjs");
+const require_getViewportRect = require("./connectedPosition/getViewportRect.cjs");
+const require_getBoundaryRect = require("./connectedPosition/getBoundaryRect.cjs");
+const require_getScrollParents = require("./connectedPosition/getScrollParents.cjs");
+const require_resolveElement = require("./connectedPosition/resolveElement.cjs");
+const require_useEscapeDismiss = require("./useEscapeDismiss.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/composables/useFloatingOverlay.ts
+var parseCssLength = (value) => {
+	const trimmed = value.trim();
+	if (!trimmed) return;
+	const parsed = parseFloat(trimmed);
+	if (Number.isNaN(parsed)) return;
+	return parsed;
+};
+var getArrowMetrics = (surfaceElement) => {
+	const surfaceStyles = getComputedStyle(surfaceElement);
+	return {
+		arrowSize: parseCssLength(surfaceStyles.getPropertyValue("--s-ui-dropdown-arrow-size")) ?? 12,
+		arrowPadding: parseCssLength(surfaceStyles.getPropertyValue("--s-ui-dropdown-arrow-padding")) ?? 8
+	};
+};
+var getNaturalPanelHeight = (panelElement, layoutHeight, fitViewport) => {
+	if (!fitViewport) return layoutHeight;
+	const contentElement = panelElement.firstElementChild;
+	if (!(contentElement instanceof HTMLElement)) return Math.max(panelElement.scrollHeight, layoutHeight);
+	const surfaceChromeHeight = Math.max(0, layoutHeight - contentElement.clientHeight);
+	return contentElement.scrollHeight + surfaceChromeHeight;
+};
+var resolveOption = (value, fallback) => (0, vue.toValue)(value ?? fallback);
+var resolveArrowMetrics = (hasArrow, surfaceElement) => {
+	if (hasArrow && surfaceElement instanceof HTMLElement) return getArrowMetrics(surfaceElement);
+	return {
+		arrowSize: 12,
+		arrowPadding: 8
+	};
+};
+var resolveIsPositionReady = (result, renderedCoordinates, referenceRect, renderedFloatingSize, referenceBoundaryRect, contentBoundaryRect, viewportPadding, shift) => {
+	const paddedReferenceBoundaryRect = require_getOverflow.getPaddedBoundaryRect(referenceBoundaryRect, viewportPadding);
+	const contentOverflow = require_getOverflow.getOverflow(require_positionCoordinates.toContentBox(renderedCoordinates, renderedFloatingSize), contentBoundaryRect, viewportPadding);
+	const isReferenceVisible = require_getOverflow.isRectIntersecting(referenceRect, paddedReferenceBoundaryRect);
+	const anchorSide = require_parseAnchor.parseAnchor(result.resolvedPlacement).side;
+	const isContentWithinBoundary = shift ? !require_getOverflow.hasShiftMainAxisOverflow(contentOverflow, anchorSide) : !require_getOverflow.hasAnyOverflow(contentOverflow);
+	return isReferenceVisible && isContentWithinBoundary;
+};
+var useFloatingOverlay = (options) => {
+	const position = (0, vue.shallowRef)(null);
+	const panelMaxHeight = (0, vue.shallowRef)(void 0);
+	const resolvedPlacement = (0, vue.shallowRef)(require_types.ESDropdownPlacement.BOTTOM_START);
+	const isPositionReady = (0, vue.shallowRef)(false);
+	const referenceWidth = (0, vue.shallowRef)(0);
+	const arrowPosition = (0, vue.shallowRef)(null);
+	const isArrowOverflow = (0, vue.shallowRef)(false);
+	let scrollListenerCleanups = [];
+	const handleScroll = () => {
+		if ((0, vue.toValue)(options.open)) requestPositionUpdate();
+	};
+	const unbindScrollableContainerListeners = () => {
+		for (const cleanup of scrollListenerCleanups) cleanup();
+		scrollListenerCleanups = [];
+	};
+	const bindScrollableContainerListeners = () => {
+		unbindScrollableContainerListeners();
+		const referenceElement = require_resolveElement.resolveElement((0, vue.toValue)(options.reference));
+		for (const scrollParent of require_getScrollParents.getScrollParents(referenceElement)) {
+			scrollParent.addEventListener("scroll", handleScroll, {
+				capture: true,
+				passive: true
+			});
+			scrollListenerCleanups.push(() => {
+				scrollParent.removeEventListener("scroll", handleScroll, { capture: true });
+			});
+		}
+	};
+	(0, _vueuse_core.useEventListener)(window, "scroll", handleScroll, { capture: true });
+	(0, _vueuse_core.useEventListener)(document, "scroll", handleScroll, { capture: true });
+	(0, _vueuse_core.useEventListener)(() => document.documentElement, "scroll", handleScroll, { capture: true });
+	(0, _vueuse_core.useEventListener)(() => window.visualViewport ?? null, "scroll", handleScroll, { passive: true });
+	const resolveOverlayConfig = () => ({
+		matchReferenceWidth: resolveOption(options.matchReferenceWidth, false),
+		fitViewport: resolveOption(options.fitViewport, false),
+		shift: resolveOption(options.shift, false),
+		baseOffset: resolveOption(options.offset, 8),
+		viewportPadding: resolveOption(options.viewportPadding, 8),
+		hasArrow: resolveOption(options.arrow, false),
+		placement: resolveOption(options.placement, require_types.ESDropdownPlacement.BOTTOM_START),
+		flip: resolveOption(options.flip, true),
+		boundary: resolveOption(options.boundary, require_types.ESDropdownBoundary.CLIPPING_ANCESTORS)
+	});
+	const applyArrowPosition = (hasArrow, params) => {
+		if (!hasArrow) {
+			arrowPosition.value = null;
+			isArrowOverflow.value = false;
+			return;
+		}
+		const arrowResult = require_computeArrowPosition.computeArrowPosition({
+			referenceRect: params.referenceRect,
+			floatingCoordinates: {
+				x: params.result.x,
+				y: params.result.y
+			},
+			floatingSize: params.renderedFloatingSize,
+			resolvedPlacement: params.result.resolvedPlacement,
+			arrowSize: params.arrowSize,
+			arrowPadding: params.arrowPadding
+		});
+		arrowPosition.value = arrowResult;
+		isArrowOverflow.value = arrowResult.isOverflow;
+	};
+	const updatePositionImmediate = () => {
+		if (!(0, vue.toValue)(options.open)) return;
+		const referenceElement = require_resolveElement.resolveElement((0, vue.toValue)(options.reference));
+		const panelElement = (0, vue.toValue)(options.panel);
+		if (!referenceElement || !panelElement) return;
+		const config = resolveOverlayConfig();
+		const referenceRect = require_getViewportRect.toRectBox(referenceElement.getBoundingClientRect());
+		const panelRect = require_getViewportRect.toRectBox(panelElement.getBoundingClientRect());
+		referenceWidth.value = Math.round(referenceRect.width);
+		const surfaceElement = panelElement.firstElementChild;
+		const { arrowSize, arrowPadding } = resolveArrowMetrics(config.hasArrow, surfaceElement);
+		const effectiveOffset = config.hasArrow ? config.baseOffset + arrowSize / 2 : config.baseOffset;
+		const floatingSize = {
+			width: config.matchReferenceWidth && referenceRect.width > 0 ? referenceRect.width : panelRect.width,
+			height: getNaturalPanelHeight(panelElement, panelRect.height, config.fitViewport)
+		};
+		const referenceBoundaryRect = require_getBoundaryRect.getBoundaryRect(referenceElement);
+		const contentBoundaryRect = config.boundary === require_types.ESDropdownBoundary.VIEWPORT ? require_getViewportRect.getViewportRect() : referenceBoundaryRect;
+		const result = require_computeConnectedPosition.computeConnectedPosition({
+			referenceRect,
+			floatingSize,
+			placement: config.placement,
+			offset: effectiveOffset,
+			flip: config.flip,
+			shift: config.shift,
+			fitViewport: config.fitViewport,
+			viewportRect: contentBoundaryRect,
+			viewportPadding: config.viewportPadding
+		});
+		position.value = {
+			x: Math.round(result.x),
+			y: Math.round(result.y)
+		};
+		panelMaxHeight.value = result.maxHeight === void 0 ? void 0 : Math.floor(result.maxHeight);
+		resolvedPlacement.value = result.resolvedPlacement;
+		const renderedFloatingSize = {
+			width: floatingSize.width,
+			height: panelMaxHeight.value ?? floatingSize.height
+		};
+		isPositionReady.value = resolveIsPositionReady(result, position.value, referenceRect, renderedFloatingSize, referenceBoundaryRect, contentBoundaryRect, config.viewportPadding, config.shift);
+		applyArrowPosition(config.hasArrow, {
+			referenceRect,
+			result,
+			renderedFloatingSize,
+			arrowSize,
+			arrowPadding
+		});
+	};
+	const requestPositionUpdate = () => {
+		updatePositionImmediate();
+	};
+	const panelStyles = (0, vue.computed)(() => {
+		const matchReferenceWidth = (0, vue.toValue)(options.matchReferenceWidth ?? false);
+		if (!(0, vue.toValue)(options.open) || !position.value) return {
+			position: "fixed",
+			top: "0",
+			left: "0",
+			visibility: "hidden",
+			pointerEvents: "none"
+		};
+		const styles = {
+			position: "fixed",
+			top: "0",
+			left: "0",
+			transform: `translate(${position.value.x}px, ${position.value.y}px)`,
+			visibility: isPositionReady.value ? "visible" : "hidden",
+			pointerEvents: isPositionReady.value ? "auto" : "none"
+		};
+		if (matchReferenceWidth && referenceWidth.value > 0) {
+			const matchedWidth = `${Math.round(referenceWidth.value)}px`;
+			styles.width = matchedWidth;
+			styles.minWidth = matchedWidth;
+			styles.maxWidth = matchedWidth;
+		}
+		return styles;
+	});
+	const arrowStyles = (0, vue.computed)(() => {
+		if (!(0, vue.toValue)(options.open) || !(0, vue.toValue)(options.arrow ?? false) || !arrowPosition.value) return;
+		const resolvedArrowPosition = arrowPosition.value;
+		return { [resolvedArrowPosition.crossAxisProperty]: `${resolvedArrowPosition.crossAxisPosition}px` };
+	});
+	const closeOverlay = () => {
+		options.onOpenChange?.(false);
+	};
+	(0, vue.watch)(() => (0, vue.toValue)(options.open), async (isOpen) => {
+		if (isOpen) {
+			isPositionReady.value = false;
+			await (0, vue.nextTick)();
+			bindScrollableContainerListeners();
+			requestPositionUpdate();
+			return;
+		}
+		isPositionReady.value = false;
+		position.value = null;
+		panelMaxHeight.value = void 0;
+		arrowPosition.value = null;
+		isArrowOverflow.value = false;
+		unbindScrollableContainerListeners();
+	});
+	(0, vue.watch)([
+		() => (0, vue.toValue)(options.placement ?? require_types.ESDropdownPlacement.BOTTOM_START),
+		() => (0, vue.toValue)(options.offset ?? 8),
+		() => (0, vue.toValue)(options.flip ?? true),
+		() => (0, vue.toValue)(options.shift ?? false),
+		() => (0, vue.toValue)(options.matchReferenceWidth ?? false),
+		() => (0, vue.toValue)(options.fitViewport ?? false),
+		() => (0, vue.toValue)(options.viewportPadding ?? 8),
+		() => (0, vue.toValue)(options.arrow ?? false),
+		() => (0, vue.toValue)(options.boundary ?? require_types.ESDropdownBoundary.CLIPPING_ANCESTORS)
+	], async () => {
+		if (!(0, vue.toValue)(options.open)) return;
+		isPositionReady.value = false;
+		await (0, vue.nextTick)();
+		requestPositionUpdate();
+	});
+	(0, _vueuse_core.useResizeObserver)(() => require_resolveElement.resolveElement((0, vue.toValue)(options.reference)), () => {
+		if ((0, vue.toValue)(options.open)) requestPositionUpdate();
+	});
+	(0, _vueuse_core.useResizeObserver)(() => (0, vue.toValue)(options.panel), () => {
+		if ((0, vue.toValue)(options.open)) requestPositionUpdate();
+	});
+	(0, _vueuse_core.useEventListener)(window, "resize", () => {
+		if ((0, vue.toValue)(options.open)) requestPositionUpdate();
+	});
+	(0, _vueuse_core.useEventListener)(() => window.visualViewport ?? null, "resize", () => {
+		if ((0, vue.toValue)(options.open)) requestPositionUpdate();
+	});
+	(0, _vueuse_core.onClickOutside)(() => (0, vue.toValue)(options.panel), () => {
+		if (!(0, vue.toValue)(options.open) || !(0, vue.toValue)(options.dismissOnClickOutside ?? true)) return;
+		closeOverlay();
+	}, { ignore: (0, vue.computed)(() => [require_resolveElement.resolveElement((0, vue.toValue)(options.reference)), ...(0, vue.toValue)(options.clickOutsideIgnore ?? [])]) });
+	require_useEscapeDismiss.useEscapeDismiss({
+		open: () => (0, vue.toValue)(options.open),
+		enabled: () => (0, vue.toValue)(options.dismissOnEscape ?? true),
+		hasOpenDescendant: () => (0, vue.toValue)(options.hasOpenDescendant ?? false),
+		onDismiss: closeOverlay
+	});
+	(0, vue.onScopeDispose)(() => {
+		unbindScrollableContainerListeners();
+	});
+	return {
+		panelStyles,
+		panelMaxHeight,
+		resolvedPlacement,
+		isPositionReady,
+		referenceWidth,
+		arrowStyles,
+		isArrowOverflow,
+		updatePosition: requestPositionUpdate
+	};
+};
+//#endregion
+exports.useFloatingOverlay = useFloatingOverlay;

package/dist/composables/useFloatingOverlay.js

@@ -0,0 +1,268 @@
+import { ESDropdownBoundary, ESDropdownPlacement } from "./connectedPosition/types.js";
+import { parseAnchor } from "./connectedPosition/parseAnchor.js";
+import { computeArrowPosition } from "./connectedPosition/computeArrowPosition.js";
+import { getOverflow, getPaddedBoundaryRect, hasAnyOverflow, hasShiftMainAxisOverflow, isRectIntersecting } from "./connectedPosition/getOverflow.js";
+import { toContentBox } from "./connectedPosition/positionCoordinates.js";
+import { computeConnectedPosition } from "./connectedPosition/computeConnectedPosition.js";
+import { getViewportRect, toRectBox } from "./connectedPosition/getViewportRect.js";
+import { getBoundaryRect } from "./connectedPosition/getBoundaryRect.js";
+import { getScrollParents } from "./connectedPosition/getScrollParents.js";
+import { resolveElement } from "./connectedPosition/resolveElement.js";
+import { useEscapeDismiss } from "./useEscapeDismiss.js";
+import { computed, nextTick, onScopeDispose, shallowRef, toValue, watch } from "vue";
+import { onClickOutside, useEventListener, useResizeObserver } from "@vueuse/core";
+//#region src/composables/useFloatingOverlay.ts
+var parseCssLength = (value) => {
+	const trimmed = value.trim();
+	if (!trimmed) return;
+	const parsed = parseFloat(trimmed);
+	if (Number.isNaN(parsed)) return;
+	return parsed;
+};
+var getArrowMetrics = (surfaceElement) => {
+	const surfaceStyles = getComputedStyle(surfaceElement);
+	return {
+		arrowSize: parseCssLength(surfaceStyles.getPropertyValue("--s-ui-dropdown-arrow-size")) ?? 12,
+		arrowPadding: parseCssLength(surfaceStyles.getPropertyValue("--s-ui-dropdown-arrow-padding")) ?? 8
+	};
+};
+var getNaturalPanelHeight = (panelElement, layoutHeight, fitViewport) => {
+	if (!fitViewport) return layoutHeight;
+	const contentElement = panelElement.firstElementChild;
+	if (!(contentElement instanceof HTMLElement)) return Math.max(panelElement.scrollHeight, layoutHeight);
+	const surfaceChromeHeight = Math.max(0, layoutHeight - contentElement.clientHeight);
+	return contentElement.scrollHeight + surfaceChromeHeight;
+};
+var resolveOption = (value, fallback) => toValue(value ?? fallback);
+var resolveArrowMetrics = (hasArrow, surfaceElement) => {
+	if (hasArrow && surfaceElement instanceof HTMLElement) return getArrowMetrics(surfaceElement);
+	return {
+		arrowSize: 12,
+		arrowPadding: 8
+	};
+};
+var resolveIsPositionReady = (result, renderedCoordinates, referenceRect, renderedFloatingSize, referenceBoundaryRect, contentBoundaryRect, viewportPadding, shift) => {
+	const paddedReferenceBoundaryRect = getPaddedBoundaryRect(referenceBoundaryRect, viewportPadding);
+	const contentOverflow = getOverflow(toContentBox(renderedCoordinates, renderedFloatingSize), contentBoundaryRect, viewportPadding);
+	const isReferenceVisible = isRectIntersecting(referenceRect, paddedReferenceBoundaryRect);
+	const anchorSide = parseAnchor(result.resolvedPlacement).side;
+	const isContentWithinBoundary = shift ? !hasShiftMainAxisOverflow(contentOverflow, anchorSide) : !hasAnyOverflow(contentOverflow);
+	return isReferenceVisible && isContentWithinBoundary;
+};
+var useFloatingOverlay = (options) => {
+	const position = shallowRef(null);
+	const panelMaxHeight = shallowRef(void 0);
+	const resolvedPlacement = shallowRef(ESDropdownPlacement.BOTTOM_START);
+	const isPositionReady = shallowRef(false);
+	const referenceWidth = shallowRef(0);
+	const arrowPosition = shallowRef(null);
+	const isArrowOverflow = shallowRef(false);
+	let scrollListenerCleanups = [];
+	const handleScroll = () => {
+		if (toValue(options.open)) requestPositionUpdate();
+	};
+	const unbindScrollableContainerListeners = () => {
+		for (const cleanup of scrollListenerCleanups) cleanup();
+		scrollListenerCleanups = [];
+	};
+	const bindScrollableContainerListeners = () => {
+		unbindScrollableContainerListeners();
+		const referenceElement = resolveElement(toValue(options.reference));
+		for (const scrollParent of getScrollParents(referenceElement)) {
+			scrollParent.addEventListener("scroll", handleScroll, {
+				capture: true,
+				passive: true
+			});
+			scrollListenerCleanups.push(() => {
+				scrollParent.removeEventListener("scroll", handleScroll, { capture: true });
+			});
+		}
+	};
+	useEventListener(window, "scroll", handleScroll, { capture: true });
+	useEventListener(document, "scroll", handleScroll, { capture: true });
+	useEventListener(() => document.documentElement, "scroll", handleScroll, { capture: true });
+	useEventListener(() => window.visualViewport ?? null, "scroll", handleScroll, { passive: true });
+	const resolveOverlayConfig = () => ({
+		matchReferenceWidth: resolveOption(options.matchReferenceWidth, false),
+		fitViewport: resolveOption(options.fitViewport, false),
+		shift: resolveOption(options.shift, false),
+		baseOffset: resolveOption(options.offset, 8),
+		viewportPadding: resolveOption(options.viewportPadding, 8),
+		hasArrow: resolveOption(options.arrow, false),
+		placement: resolveOption(options.placement, ESDropdownPlacement.BOTTOM_START),
+		flip: resolveOption(options.flip, true),
+		boundary: resolveOption(options.boundary, ESDropdownBoundary.CLIPPING_ANCESTORS)
+	});
+	const applyArrowPosition = (hasArrow, params) => {
+		if (!hasArrow) {
+			arrowPosition.value = null;
+			isArrowOverflow.value = false;
+			return;
+		}
+		const arrowResult = computeArrowPosition({
+			referenceRect: params.referenceRect,
+			floatingCoordinates: {
+				x: params.result.x,
+				y: params.result.y
+			},
+			floatingSize: params.renderedFloatingSize,
+			resolvedPlacement: params.result.resolvedPlacement,
+			arrowSize: params.arrowSize,
+			arrowPadding: params.arrowPadding
+		});
+		arrowPosition.value = arrowResult;
+		isArrowOverflow.value = arrowResult.isOverflow;
+	};
+	const updatePositionImmediate = () => {
+		if (!toValue(options.open)) return;
+		const referenceElement = resolveElement(toValue(options.reference));
+		const panelElement = toValue(options.panel);
+		if (!referenceElement || !panelElement) return;
+		const config = resolveOverlayConfig();
+		const referenceRect = toRectBox(referenceElement.getBoundingClientRect());
+		const panelRect = toRectBox(panelElement.getBoundingClientRect());
+		referenceWidth.value = Math.round(referenceRect.width);
+		const surfaceElement = panelElement.firstElementChild;
+		const { arrowSize, arrowPadding } = resolveArrowMetrics(config.hasArrow, surfaceElement);
+		const effectiveOffset = config.hasArrow ? config.baseOffset + arrowSize / 2 : config.baseOffset;
+		const floatingSize = {
+			width: config.matchReferenceWidth && referenceRect.width > 0 ? referenceRect.width : panelRect.width,
+			height: getNaturalPanelHeight(panelElement, panelRect.height, config.fitViewport)
+		};
+		const referenceBoundaryRect = getBoundaryRect(referenceElement);
+		const contentBoundaryRect = config.boundary === ESDropdownBoundary.VIEWPORT ? getViewportRect() : referenceBoundaryRect;
+		const result = computeConnectedPosition({
+			referenceRect,
+			floatingSize,
+			placement: config.placement,
+			offset: effectiveOffset,
+			flip: config.flip,
+			shift: config.shift,
+			fitViewport: config.fitViewport,
+			viewportRect: contentBoundaryRect,
+			viewportPadding: config.viewportPadding
+		});
+		position.value = {
+			x: Math.round(result.x),
+			y: Math.round(result.y)
+		};
+		panelMaxHeight.value = result.maxHeight === void 0 ? void 0 : Math.floor(result.maxHeight);
+		resolvedPlacement.value = result.resolvedPlacement;
+		const renderedFloatingSize = {
+			width: floatingSize.width,
+			height: panelMaxHeight.value ?? floatingSize.height
+		};
+		isPositionReady.value = resolveIsPositionReady(result, position.value, referenceRect, renderedFloatingSize, referenceBoundaryRect, contentBoundaryRect, config.viewportPadding, config.shift);
+		applyArrowPosition(config.hasArrow, {
+			referenceRect,
+			result,
+			renderedFloatingSize,
+			arrowSize,
+			arrowPadding
+		});
+	};
+	const requestPositionUpdate = () => {
+		updatePositionImmediate();
+	};
+	const panelStyles = computed(() => {
+		const matchReferenceWidth = toValue(options.matchReferenceWidth ?? false);
+		if (!toValue(options.open) || !position.value) return {
+			position: "fixed",
+			top: "0",
+			left: "0",
+			visibility: "hidden",
+			pointerEvents: "none"
+		};
+		const styles = {
+			position: "fixed",
+			top: "0",
+			left: "0",
+			transform: `translate(${position.value.x}px, ${position.value.y}px)`,
+			visibility: isPositionReady.value ? "visible" : "hidden",
+			pointerEvents: isPositionReady.value ? "auto" : "none"
+		};
+		if (matchReferenceWidth && referenceWidth.value > 0) {
+			const matchedWidth = `${Math.round(referenceWidth.value)}px`;
+			styles.width = matchedWidth;
+			styles.minWidth = matchedWidth;
+			styles.maxWidth = matchedWidth;
+		}
+		return styles;
+	});
+	const arrowStyles = computed(() => {
+		if (!toValue(options.open) || !toValue(options.arrow ?? false) || !arrowPosition.value) return;
+		const resolvedArrowPosition = arrowPosition.value;
+		return { [resolvedArrowPosition.crossAxisProperty]: `${resolvedArrowPosition.crossAxisPosition}px` };
+	});
+	const closeOverlay = () => {
+		options.onOpenChange?.(false);
+	};
+	watch(() => toValue(options.open), async (isOpen) => {
+		if (isOpen) {
+			isPositionReady.value = false;
+			await nextTick();
+			bindScrollableContainerListeners();
+			requestPositionUpdate();
+			return;
+		}
+		isPositionReady.value = false;
+		position.value = null;
+		panelMaxHeight.value = void 0;
+		arrowPosition.value = null;
+		isArrowOverflow.value = false;
+		unbindScrollableContainerListeners();
+	});
+	watch([
+		() => toValue(options.placement ?? ESDropdownPlacement.BOTTOM_START),
+		() => toValue(options.offset ?? 8),
+		() => toValue(options.flip ?? true),
+		() => toValue(options.shift ?? false),
+		() => toValue(options.matchReferenceWidth ?? false),
+		() => toValue(options.fitViewport ?? false),
+		() => toValue(options.viewportPadding ?? 8),
+		() => toValue(options.arrow ?? false),
+		() => toValue(options.boundary ?? ESDropdownBoundary.CLIPPING_ANCESTORS)
+	], async () => {
+		if (!toValue(options.open)) return;
+		isPositionReady.value = false;
+		await nextTick();
+		requestPositionUpdate();
+	});
+	useResizeObserver(() => resolveElement(toValue(options.reference)), () => {
+		if (toValue(options.open)) requestPositionUpdate();
+	});
+	useResizeObserver(() => toValue(options.panel), () => {
+		if (toValue(options.open)) requestPositionUpdate();
+	});
+	useEventListener(window, "resize", () => {
+		if (toValue(options.open)) requestPositionUpdate();
+	});
+	useEventListener(() => window.visualViewport ?? null, "resize", () => {
+		if (toValue(options.open)) requestPositionUpdate();
+	});
+	onClickOutside(() => toValue(options.panel), () => {
+		if (!toValue(options.open) || !toValue(options.dismissOnClickOutside ?? true)) return;
+		closeOverlay();
+	}, { ignore: computed(() => [resolveElement(toValue(options.reference)), ...toValue(options.clickOutsideIgnore ?? [])]) });
+	useEscapeDismiss({
+		open: () => toValue(options.open),
+		enabled: () => toValue(options.dismissOnEscape ?? true),
+		hasOpenDescendant: () => toValue(options.hasOpenDescendant ?? false),
+		onDismiss: closeOverlay
+	});
+	onScopeDispose(() => {
+		unbindScrollableContainerListeners();
+	});
+	return {
+		panelStyles,
+		panelMaxHeight,
+		resolvedPlacement,
+		isPositionReady,
+		referenceWidth,
+		arrowStyles,
+		isArrowOverflow,
+		updatePosition: requestPositionUpdate
+	};
+};
+//#endregion
+export { useFloatingOverlay };

package/dist/composables/useHasListener.cjs

@@ -0,0 +1,8 @@
+let vue = require("vue");
+//#region src/composables/useHasListener.ts
+var useHasListener = (listenerPropName) => {
+	const instance = (0, vue.getCurrentInstance)();
+	return () => Boolean(instance?.vnode.props?.[listenerPropName]);
+};
+//#endregion
+exports.useHasListener = useHasListener;

package/dist/composables/useHasListener.js

@@ -0,0 +1,8 @@
+import { getCurrentInstance } from "vue";
+//#region src/composables/useHasListener.ts
+var useHasListener = (listenerPropName) => {
+	const instance = getCurrentInstance();
+	return () => Boolean(instance?.vnode.props?.[listenerPropName]);
+};
+//#endregion
+export { useHasListener };

package/dist/composables/useLink.cjs

@@ -0,0 +1,79 @@
+const require_vueRouterLinkPresentation = require("../utils/vueRouterLinkPresentation.cjs");
+let vue = require("vue");
+//#region src/composables/useLink.ts
+var areRouteQueriesEqual = (leftQuery, rightQuery) => {
+	const leftKeys = Object.keys(leftQuery);
+	const rightKeys = Object.keys(rightQuery);
+	if (leftKeys.length !== rightKeys.length) return false;
+	for (const queryKey of leftKeys) {
+		const leftValue = leftQuery[queryKey];
+		const rightValue = rightQuery[queryKey];
+		if (String(leftValue ?? "") !== String(rightValue ?? "")) return false;
+	}
+	return true;
+};
+var resolveLinkPresentation = (link, hasRouter) => {
+	return (0, vue.computed)(() => {
+		const presentation = require_vueRouterLinkPresentation.resolveVueRouterLinkPresentation((0, vue.toValue)(link));
+		if (presentation.mode === "route" && !hasRouter) return { mode: "none" };
+		return presentation;
+	});
+};
+var useStaticLink = (link) => {
+	const linkPresentation = resolveLinkPresentation(link, false);
+	const isLink = (0, vue.computed)(() => require_vueRouterLinkPresentation.hasLinkProp((0, vue.toValue)(link)));
+	const isRouterLink = (0, vue.computed)(() => false);
+	const isActive = (0, vue.computed)(() => false);
+	const navigate = () => {
+		return Promise.reject(/* @__PURE__ */ new Error("[@shtabapp/ui-kit] useLink.navigate() requires an active vue-router instance. Install and register vue-router in the app, or use an href link."));
+	};
+	return {
+		linkPresentation,
+		isLink,
+		isRouterLink,
+		isActive,
+		navigate
+	};
+};
+var isRouterLinkComponent = (component) => {
+	return typeof component === "object" && component !== null && "useLink" in component;
+};
+var useRouterLink = (router, routerLinkComponent, link, exact, replace) => {
+	const linkPresentation = resolveLinkPresentation(link, true);
+	const isLink = (0, vue.computed)(() => require_vueRouterLinkPresentation.hasLinkProp((0, vue.toValue)(link)));
+	const isRouterLink = (0, vue.computed)(() => linkPresentation.value.mode === "route");
+	const linkTo = (0, vue.computed)(() => {
+		const presentation = linkPresentation.value;
+		if (presentation.mode !== "route") return "";
+		return presentation.linkBindings.to;
+	});
+	const routerLink = routerLinkComponent.useLink({
+		to: (0, vue.toRef)(() => linkTo.value),
+		replace: (0, vue.toRef)(() => (0, vue.toValue)(replace) ?? false)
+	});
+	const isActive = (0, vue.computed)(() => {
+		if (!isRouterLink.value) return false;
+		if (!((0, vue.toValue)(exact) ?? false)) return routerLink.isActive.value;
+		if (!routerLink.isExactActive.value) return false;
+		return areRouteQueriesEqual(routerLink.route.value.query, router.currentRoute.value.query);
+	});
+	const navigate = (event) => {
+		if (!isRouterLink.value) return Promise.resolve();
+		return routerLink.navigate(event);
+	};
+	return {
+		linkPresentation,
+		isLink,
+		isRouterLink,
+		isActive,
+		navigate
+	};
+};
+var useLink = (link, exact, replace) => {
+	const router = (0, vue.getCurrentInstance)()?.proxy?.$router;
+	const routerLinkComponent = router ? (0, vue.resolveDynamicComponent)("RouterLink") : void 0;
+	if (!router || !isRouterLinkComponent(routerLinkComponent)) return useStaticLink(link);
+	return useRouterLink(router, routerLinkComponent, link, exact, replace);
+};
+//#endregion
+exports.useLink = useLink;