ropav 0.13.0 → 0.15.0

package/dist/composables/drag-modality.js

@@ -1,4 +1,5 @@
-import { getInteractionModality, useInteractionModality } from "./use-interaction-states.js";
+import { getInteractionModality } from "./interaction-modality.js";
+import { useInteractionModality } from "./use-interaction-states.js";
 import { computed } from "vue";
 //#region src/composables/drag-modality.ts
 var mapModality = (modality) => {

package/dist/composables/focus-scope-registry.d.ts

@@ -0,0 +1,27 @@
+export interface RegisteredScope {
+    root: () => HTMLElement | null;
+    contain: () => boolean;
+    /** The part of the page the scope belongs to, `null` for the whole document. */
+    region: () => Element | null;
+}
+/**
+ * The innermost scope holding focus in a region, among the scopes whose region overlaps it.
+ *
+ * Without a region every scope overlaps every other, which is the page-wide question. With one, a
+ * modal in one app's window is not shadowed by a modal another app opened later in its own.
+ */
+export declare const innermostContainingScope: (region?: Element | null) => RegisteredScope | null;
+/**
+ * Whether the element sits inside any registered scope.
+ *
+ * Any scope rather than only the descendants of one, because an overlay opened from inside
+ * another is a **sibling** in the DOM rather than a descendant — a submenu renders into its root
+ * popover's container, and a dropdown opened from a popover makes a container of its own. There
+ * is no tree to walk here, so a scope boundary is the thing that answers "focus is still in an
+ * overlay". React Aria walks its scope tree and asks the narrower question; the difference shows
+ * only when two unrelated overlays are open at once and focus moves between them, where this
+ * errs towards leaving them open.
+ */
+export declare const isElementInAnyFocusScope: (element: Element) => boolean;
+/** Add a scope as the innermost, returning its removal. */
+export declare const registerFocusScope: (scope: RegisteredScope) => (() => void);

package/dist/composables/focus-scope-registry.js

@@ -0,0 +1,45 @@
+import { regionsOverlap } from "../utils/region.js";
+//#region src/composables/focus-scope-registry.ts
+/**
+* Registered scopes, outermost first.
+*
+* Module-level because containment is a question about the whole page, not about one overlay:
+* only the innermost containing scope may hold focus, and focus moving into a scope nested
+* inside it has to be allowed through rather than pulled back.
+*/
+var scopes = [];
+/**
+* The innermost scope holding focus in a region, among the scopes whose region overlaps it.
+*
+* Without a region every scope overlaps every other, which is the page-wide question. With one, a
+* modal in one app's window is not shadowed by a modal another app opened later in its own.
+*/
+var innermostContainingScope = (region = null) => {
+	for (let index = scopes.length - 1; index >= 0; index--) {
+		const scope = scopes[index];
+		if (scope.contain() && regionsOverlap(scope.region(), region)) return scope;
+	}
+	return null;
+};
+/**
+* Whether the element sits inside any registered scope.
+*
+* Any scope rather than only the descendants of one, because an overlay opened from inside
+* another is a **sibling** in the DOM rather than a descendant — a submenu renders into its root
+* popover's container, and a dropdown opened from a popover makes a container of its own. There
+* is no tree to walk here, so a scope boundary is the thing that answers "focus is still in an
+* overlay". React Aria walks its scope tree and asks the narrower question; the difference shows
+* only when two unrelated overlays are open at once and focus moves between them, where this
+* errs towards leaving them open.
+*/
+var isElementInAnyFocusScope = (element) => scopes.some((scope) => scope.root()?.contains(element));
+/** Add a scope as the innermost, returning its removal. */
+var registerFocusScope = (scope) => {
+	scopes.push(scope);
+	return () => {
+		const index = scopes.indexOf(scope);
+		if (index >= 0) scopes.splice(index, 1);
+	};
+};
+//#endregion
+export { innermostContainingScope, isElementInAnyFocusScope, registerFocusScope };

package/dist/composables/form-context.d.ts

@@ -0,0 +1,25 @@
+import type { FormValidationErrors, ValidationBehavior } from "./use-form-validation-state.js";
+import type { ComputedRef, Ref } from "vue";
+export interface FormContext {
+    /** Errors keyed by field `name`, shown until the user edits the value. */
+    validationErrors: ComputedRef<FormValidationErrors>;
+    /** Default for every field inside, unless the field names its own. */
+    validationBehavior: ComputedRef<ValidationBehavior>;
+    /**
+     * Bumped by every submit attempt.
+     *
+     * Under `"native"` a field learns of a failed submit from the browser, which fires `invalid` at
+     * it. Under `"aria"` the browser is not involved, so this is the only thing that tells a field
+     * holding an unrevealed error that it is now being asked for.
+     */
+    submitCount?: Readonly<Ref<number>>;
+}
+/**
+ * React splits this in two — `FormValidationContext` in react-stately for the errors,
+ * `FormContext` in react-aria-components for the behaviour — only because the two live in
+ * different packages. Here one provider hands out both, so a field injects once and the two
+ * halves cannot drift apart.
+ *
+ * Loose: a field outside a form is the normal case, not an error.
+ */
+export declare const useFormContext: () => FormContext | null, provideFormContext: (value: FormContext | null) => FormContext | null;

package/dist/composables/form-context.js

@@ -0,0 +1,17 @@
+import { createContext } from "../utils/create-context.js";
+//#region src/composables/form-context.ts
+/**
+* React splits this in two — `FormValidationContext` in react-stately for the errors,
+* `FormContext` in react-aria-components for the behaviour — only because the two live in
+* different packages. Here one provider hands out both, so a field injects once and the two
+* halves cannot drift apart.
+*
+* Loose: a field outside a form is the normal case, not an error.
+*/
+var [useFormContext, provideFormContext] = createContext({
+	defaultValue: null,
+	name: "FormContext",
+	strict: false
+});
+//#endregion
+export { provideFormContext, useFormContext };

package/dist/composables/index.d.ts

@@ -1,23 +1,10 @@
 export * from "./focus-responder.js";
 export * from "./press-responder.js";
-export * from "./use-calendar-state.js";
-export * from "./use-checkbox-group-state.js";
 export * from "./use-collator.js";
 export * from "./use-collection.js";
-export * from "./use-color-area-state.js";
-export * from "./use-color-channel-field-state.js";
-export * from "./use-color-field-state.js";
-export * from "./use-color-picker-state.js";
-export * from "./use-color-slider-state.js";
-export * from "./use-combo-box-state.js";
 export * from "./use-controllable-state.js";
-export * from "./use-css-variable.js";
-export * from "./use-date-field-state.js";
 export * from "./use-date-formatter.js";
-export * from "./use-date-picker-state.js";
-export * from "./use-date-range-picker-state.js";
 export * from "./use-description.js";
-export * from "./use-disclosure-group.js";
 export * from "./use-dismissable.js";
 export * from "./use-drag-and-drop.js";
 export * from "./use-drop.js";
@@ -29,7 +16,6 @@ export * from "./use-form-reset.js";
 export * from "./use-form-validation-state.js";
 export * from "./use-id.js";
 export * from "./use-interaction-states.js";
-export * from "./use-labels.js";
 export * from "./use-list-data.js";
 export * from "./use-list-keyboard.js";
 export * from "./use-locale.js";
@@ -37,22 +23,13 @@ export * from "./use-localized-string-formatter.js";
 export * from "./use-long-press.js";
 export * from "./use-media-query.js";
 export * from "./use-move.js";
-export * from "./use-number-field-state.js";
 export * from "./use-number-formatter.js";
 export * from "./use-overlay-position.js";
 export * from "./use-overlay-trigger-state.js";
+export * from "./use-portal.js";
 export * from "./use-press.js";
 export * from "./use-prevent-scroll.js";
-export * from "./use-radio-group-state.js";
-export * from "./use-range-calendar-state.js";
-export * from "./use-select-state.js";
 export * from "./use-selection-manager.js";
-export * from "./use-single-select-list-state.js";
-export * from "./use-slider-state.js";
-export * from "./use-tab-list-state.js";
-export * from "./use-time-field-state.js";
 export * from "./use-toast.js";
-export * from "./use-toggle-group-state.js";
-export * from "./use-tooltip-trigger-state.js";
 export * from "./use-typeahead.js";
 export * from "./use-viewport-size.js";

package/dist/composables/interaction-modality.d.ts

@@ -0,0 +1,42 @@
+import type { InteractionModality } from "./use-interaction-states.js";
+/**
+ * Keep the shared modality listeners attached, returning the release.
+ *
+ * For a component that has to ask how the user is driving the page without otherwise taking part
+ * in the interaction lifecycle — a tooltip trigger, which opens on hover only for a real pointer.
+ * Without this the answer would be whatever it was when the last interactive component unmounted.
+ */
+export declare const retainInteractionModality: () => (() => void);
+/**
+ * How the user is driving the page right now.
+ *
+ * Ported from React Aria's `getInteractionModality`. Not reactive on purpose — read it inside an
+ * event handler, where the answer is the one that matters.
+ */
+export declare const getInteractionModality: () => InteractionModality;
+/**
+ * Whether focus arriving right now is the kind that came from a keyboard.
+ *
+ * Ported from React Aria's `isFocusVisible`, and reads the same answer React Aria reads — the one
+ * that follows the pointer as it moves. Read it inside a handler: a tooltip asks it on focus to
+ * tell tabbing to a button apart from clicking it, and only the pointer-following answer knows the
+ * user had already reached for the mouse.
+ *
+ * Not the answer that decides whether a ring is painted. That one lives on `useInteractionStates`
+ * and deliberately ignores a bare mouse move, so moving the pointer cannot erase a ring that is
+ * already there. The two can disagree, and that is the point.
+ */
+export declare const isFocusVisible: () => boolean;
+/**
+ * Declare how the last interaction reached the page.
+ *
+ * Ported from React Aria's `setInteractionModality`. A component that moves focus itself —
+ * a slider label handing focus to its first thumb — has to say that the move came from the
+ * keyboard, or the ring it just earned would not be painted.
+ */
+export declare const setInteractionModality: (next: InteractionModality) => void;
+/**
+ * The answer that decides whether a ring is painted: moved by a keystroke or a press, never by a
+ * bare mouse move. Reactive when read inside a computed.
+ */
+export declare const getFocusRingModality: () => InteractionModality;

package/dist/composables/interaction-modality.js

@@ -0,0 +1,91 @@
+import { shallowRef } from "vue";
+//#region src/composables/interaction-modality.ts
+var modality = shallowRef("keyboard");
+/**
+* The same answer, kept out of the reactive graph.
+*
+* These are two different questions and they need two different answers. "Should a focus ring be
+* painted" may only change when something is pressed or a key is struck — a bare mouse move must
+* not erase a ring that is already there. "How is the user driving the page right now" has to
+* follow the pointer as it moves, because a tooltip decides whether to open on hover by asking it.
+* Answering the second reactively would make every mouse move re-render every focusable thing on
+* the page and drop the ring while doing it, which is why React Aria keeps the same split.
+*/
+var latestModality = "keyboard";
+/** Number of live consumers, so the document listeners are attached exactly once. */
+var consumerCount = 0;
+var onGlobalKeydown = (event) => {
+	if (event.metaKey || event.altKey || event.ctrlKey) return;
+	latestModality = "keyboard";
+	modality.value = "keyboard";
+};
+var onGlobalPointerdown = () => {
+	latestModality = "pointer";
+	modality.value = "pointer";
+};
+/** Tracked without touching the reactive ref, for the reason above. */
+var onGlobalPointerMoved = () => {
+	latestModality = "pointer";
+};
+/**
+* Keep the shared modality listeners attached, returning the release.
+*
+* For a component that has to ask how the user is driving the page without otherwise taking part
+* in the interaction lifecycle — a tooltip trigger, which opens on hover only for a real pointer.
+* Without this the answer would be whatever it was when the last interactive component unmounted.
+*/
+var retainInteractionModality = () => {
+	if (typeof document === "undefined") return () => {};
+	if (++consumerCount === 1) {
+		document.addEventListener("keydown", onGlobalKeydown, true);
+		document.addEventListener("pointerdown", onGlobalPointerdown, true);
+		document.addEventListener("pointermove", onGlobalPointerMoved, true);
+		document.addEventListener("pointerup", onGlobalPointerMoved, true);
+	}
+	return () => {
+		if (--consumerCount === 0) {
+			document.removeEventListener("keydown", onGlobalKeydown, true);
+			document.removeEventListener("pointerdown", onGlobalPointerdown, true);
+			document.removeEventListener("pointermove", onGlobalPointerMoved, true);
+			document.removeEventListener("pointerup", onGlobalPointerMoved, true);
+		}
+	};
+};
+/**
+* How the user is driving the page right now.
+*
+* Ported from React Aria's `getInteractionModality`. Not reactive on purpose — read it inside an
+* event handler, where the answer is the one that matters.
+*/
+var getInteractionModality = () => latestModality;
+/**
+* Whether focus arriving right now is the kind that came from a keyboard.
+*
+* Ported from React Aria's `isFocusVisible`, and reads the same answer React Aria reads — the one
+* that follows the pointer as it moves. Read it inside a handler: a tooltip asks it on focus to
+* tell tabbing to a button apart from clicking it, and only the pointer-following answer knows the
+* user had already reached for the mouse.
+*
+* Not the answer that decides whether a ring is painted. That one lives on `useInteractionStates`
+* and deliberately ignores a bare mouse move, so moving the pointer cannot erase a ring that is
+* already there. The two can disagree, and that is the point.
+*/
+var isFocusVisible = () => latestModality === "keyboard";
+/**
+* Declare how the last interaction reached the page.
+*
+* Ported from React Aria's `setInteractionModality`. A component that moves focus itself —
+* a slider label handing focus to its first thumb — has to say that the move came from the
+* keyboard, or the ring it just earned would not be painted.
+*/
+var setInteractionModality = (next) => {
+	latestModality = next;
+	modality.value = next;
+};
+/**
+* The answer that decides whether a ring is painted: moved by a keystroke or a press, never by a
+* bare mouse move. Reactive when read inside a computed.
+*/
+var getFocusRingModality = () => modality.value;
+//#endregion
+export { getFocusRingModality, getInteractionModality, isFocusVisible, retainInteractionModality, setInteractionModality };

package/dist/composables/use-calendar-cell.js

@@ -1,4 +1,4 @@
-import { getInteractionModality } from "./use-interaction-states.js";
+import { getInteractionModality } from "./interaction-modality.js";
 import { getScrollParent } from "../utils/focus.js";
 import { usePress } from "./use-press.js";
 import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";

package/dist/composables/use-checkbox-group-state.js

@@ -1,5 +1,6 @@
 import { useControllableState } from "./use-controllable-state.js";
-import { DEFAULT_VALIDATION_RESULT, getNativeValidation, useFormValidationState } from "./use-form-validation-state.js";
+import { DEFAULT_VALIDATION_RESULT, getNativeValidation } from "./validation-result.js";
+import { useFormValidationState } from "./use-form-validation-state.js";
 import { computed, nextTick, toValue } from "vue";
 //#region src/composables/use-checkbox-group-state.ts
 /**

package/dist/composables/use-combo-box-state.d.ts

@@ -1,6 +1,7 @@
 import type { CollectionKey, UseCollectionReturn } from "./use-collection.js";
 import type { FormValidationState, ValidationBehavior, ValidationFunction } from "./use-form-validation-state.js";
-import type { FocusStrategy, MenuTriggerState } from "./use-overlay-trigger-state.js";
+import type { MenuTriggerState } from "./use-menu-trigger-state.js";
+import type { FocusStrategy } from "./use-overlay-trigger-state.js";
 import type { SelectSelectionMode, SelectedItem, SelectedValue } from "./use-select-state.js";
 import type { DisabledBehavior, UseSelectionManagerReturn } from "./use-selection-manager.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";

package/dist/composables/use-combo-box-state.js

@@ -1,8 +1,9 @@
 import { useControllableState } from "./use-controllable-state.js";
-import { useMenuTriggerState } from "./use-overlay-trigger-state.js";
 import { useCollection } from "./use-collection.js";
 import { createListCollection } from "../utils/virtualizer-collection.js";
-import { isValueMissing, useFormValidationState } from "./use-form-validation-state.js";
+import { isValueMissing } from "./validation-result.js";
+import { useFormValidationState } from "./use-form-validation-state.js";
+import { useMenuTriggerState } from "./use-menu-trigger-state.js";
 import { useSelectionManager } from "./use-selection-manager.js";
 import { defaultItemTextValue } from "./use-select-state.js";
 import { useFilter } from "./use-filter.js";

package/dist/composables/use-combo-box.js

@@ -1,5 +1,6 @@
 import { useId as useId$1 } from "./use-id.js";
 import { ariaHideOutside } from "../utils/aria-hide-outside.js";
+import { usePortal } from "./use-portal.js";
 import { isAppleDevice } from "../utils/platform.js";
 import { useOverlayTrigger } from "./use-overlay-trigger.js";
 import { usePress } from "./use-press.js";
@@ -221,6 +222,7 @@ var useComboBox = (options, state) => {
 		flush: "post",
 		immediate: true
 	});
+	const portal = usePortal();
 	/**
 	* Everything but the field and its options is taken out of the accessibility tree while the
 	* popover is open.
@@ -232,10 +234,11 @@ var useComboBox = (options, state) => {
 	watch([
 		() => state.isOpen.value,
 		inputElement,
-		() => toValue(options.popoverElement)
-	], ([isOpen, input, popover], _previous, onCleanup) => {
+		() => toValue(options.popoverElement),
+		() => portal.root.value
+	], ([isOpen, input, popover, root], _previous, onCleanup) => {
 		if (!isOpen || !popover) return;
-		onCleanup(ariaHideOutside([input, popover].filter((element) => element != null)));
+		onCleanup(ariaHideOutside([input, popover].filter((element) => element != null), { root: root ?? void 0 }));
 	}, {
 		flush: "post",
 		immediate: true

package/dist/composables/use-css-variable.js

@@ -32,9 +32,5 @@ var useCssVariable = (name, options = {}) => {
 		return value;
 	});
 };
-/** Forget everything read so far. For a test that changes a property between cases. */
-var clearCssVariableCache = () => {
-	cache.clear();
-};
 //#endregion
-export { clearCssVariableCache, useCssVariable };
+export { useCssVariable };

package/dist/composables/use-default-locale.d.ts

@@ -0,0 +1,9 @@
+import type { Locale } from "../utils/locale.js";
+import type { ComputedRef } from "vue";
+/**
+ * The locale the browser is set to, following the user changing it.
+ *
+ * Ported from React Aria's `packages/react-aria/src/i18n/useDefaultLocale.ts` (react-aria 3.51.0),
+ * minus its server branch — this package does not render on the server yet.
+ */
+export declare const useDefaultLocale: () => ComputedRef<Locale>;

package/dist/composables/use-default-locale.js

@@ -0,0 +1,39 @@
+import { getDefaultLocale } from "../utils/locale.js";
+import { computed, onScopeDispose, shallowRef } from "vue";
+//#region src/composables/use-default-locale.ts
+/**
+* The browser's locale, shared by every consumer and updated when the user changes it.
+*
+* Module-level rather than per-component: `languagechange` is a window event and the answer is the
+* same for the whole page, so one listener serves all of them. Held behind a reference count so a
+* page with no locale-aware component on it carries no listener.
+*/
+var browserLocale = shallowRef(getDefaultLocale());
+var consumerCount = 0;
+var onLanguageChange = () => {
+	browserLocale.value = getDefaultLocale();
+};
+/** Attach the shared `languagechange` listener, returning the release for this consumer. */
+var retainBrowserLocale = () => {
+	/* c8 ignore next */
+	if (typeof window === "undefined") return () => {};
+	if (++consumerCount === 1) {
+		onLanguageChange();
+		window.addEventListener("languagechange", onLanguageChange);
+	}
+	return () => {
+		if (--consumerCount === 0) window.removeEventListener("languagechange", onLanguageChange);
+	};
+};
+/**
+* The locale the browser is set to, following the user changing it.
+*
+* Ported from React Aria's `packages/react-aria/src/i18n/useDefaultLocale.ts` (react-aria 3.51.0),
+* minus its server branch — this package does not render on the server yet.
+*/
+var useDefaultLocale = () => {
+	onScopeDispose(retainBrowserLocale());
+	return computed(() => browserLocale.value);
+};
+//#endregion
+export { useDefaultLocale };

package/dist/composables/use-dismissable.d.ts

@@ -23,6 +23,12 @@ export interface UseDismissableOptions {
      * should be left alone — the trigger of an already-open submenu, for one.
      */
     shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    /**
+     * The part of the page the overlay belongs to. A press outside it — in another app's window
+     * beside this one — is neither an outside interaction nor swallowed, and the overlay is only
+     * stacked with overlays whose region overlaps its own. `null` or absent: the whole document.
+     */
+    region?: MaybeRefOrGetter<Element | null | undefined>;
 }
 export interface UseDismissableReturn {
     /** Bind to the overlay so Escape dismisses it. */

package/dist/composables/use-dismissable.js

@@ -1,14 +1,8 @@
+import { regionsOverlap } from "../utils/region.js";
 import { isInTopLayer } from "../utils/top-layer.js";
-import { isElementInAnyFocusScope } from "./use-focus-scope.js";
+import { isElementInAnyFocusScope } from "./focus-scope-registry.js";
 import { computed, onScopeDispose, toValue, watch } from "vue";
 //#region src/composables/use-dismissable.ts
-/**
-* Open overlays, innermost last.
-*
-* Module-level on purpose: a click outside must dismiss exactly one overlay — the innermost —
-* and no single overlay can know whether another is nested inside it. React Aria keeps the same
-* list for the same reason.
-*/
 var visibleOverlays = [];
 /**
 * Dismiss an overlay on Escape or on an interaction outside it, ported from React Aria's
@@ -37,11 +31,13 @@ var visibleOverlays = [];
 * ```
 */
 var useDismissable = (options) => {
-	const layer = {};
+	const layer = { region: () => toValue(options.region) ?? null };
 	const isOpen = computed(() => Boolean(toValue(options.isOpen)));
 	const isDismissable = computed(() => Boolean(toValue(options.isDismissable)));
 	const getOverlay = () => toValue(options.overlayRef) ?? null;
-	const isTopMost = () => visibleOverlays.at(-1) === layer;
+	/** The innermost open overlay this one is stacked with — possibly itself. */
+	const innermost = () => visibleOverlays.findLast((other) => regionsOverlap(other.region(), layer.region()));
+	const isTopMost = () => innermost() === layer;
 	const close = () => {
 		if (isTopMost()) options.onClose?.();
 	};
@@ -61,6 +57,8 @@ var useDismissable = (options) => {
 		const target = event.target;
 		if (!(target instanceof Element) || !target.ownerDocument.documentElement.contains(target)) return false;
 		if (isInTopLayer(target)) return false;
+		const region = layer.region();
+		if (region && !region.contains(target)) return false;
 		return !event.composedPath().includes(overlay);
 	};
 	/** Whether the pointerdown that began this interaction was outside. */
@@ -72,7 +70,7 @@ var useDismissable = (options) => {
 		if (!isDismissable.value || !isOpen.value || typeof document === "undefined") return;
 		const onPointerdown = (event) => {
 			if (!isOutside(event)) return;
-			layerAtPointerDown = visibleOverlays.at(-1);
+			layerAtPointerDown = innermost();
 			if (options.shouldCloseOnInteractOutside && !options.shouldCloseOnInteractOutside(event.target)) return;
 			pointerDownWasOutside = true;
 			if (isTopMost()) event.stopPropagation();

package/dist/composables/use-display-names.js

@@ -1,5 +1,5 @@
 import { useLocale } from "./use-locale.js";
-import { useLocalizedStringDictionary } from "./use-localized-string-formatter.js";
+import { useLocalizedStringDictionary } from "./use-localized-string-dictionary.js";
 import { datepickerStrings } from "../i18n/datepicker.js";
 import { computed } from "vue";
 //#region src/composables/use-display-names.ts

package/dist/composables/use-drag.js

@@ -1,5 +1,5 @@
 import { isIOS, isWebKit } from "../utils/platform.js";
-import { isVirtualClick, isVirtualPointerEvent } from "./use-press.js";
+import { isVirtualClick, isVirtualPointerEvent } from "./virtual-event.js";
 import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";
 import { useDescription } from "./use-description.js";
 import { dndStrings } from "../i18n/dnd.js";

package/dist/composables/use-droppable-collection.js

@@ -1,4 +1,4 @@
-import { setInteractionModality } from "./use-interaction-states.js";
+import { setInteractionModality } from "./interaction-modality.js";
 import { useLocale } from "./use-locale.js";
 import { DIRECTORY_DRAG_TYPE } from "../utils/dnd-constants.js";
 import { dragTypesFromSet, getTypes } from "../utils/dnd-data-transfer.js";

package/dist/composables/use-focus-scope.d.ts

@@ -1,16 +1,4 @@
 import type { MaybeRefOrGetter } from "vue";
-/**
- * Whether the element sits inside any registered scope.
- *
- * Any scope rather than only the descendants of one, because an overlay opened from inside
- * another is a **sibling** in the DOM rather than a descendant — a submenu renders into its root
- * popover's container, and a dropdown opened from a popover makes a container of its own. There
- * is no tree to walk here, so a scope boundary is the thing that answers "focus is still in an
- * overlay". React Aria walks its scope tree and asks the narrower question; the difference shows
- * only when two unrelated overlays are open at once and focus moves between them, where this
- * errs towards leaving them open.
- */
-export declare const isElementInAnyFocusScope: (element: Element) => boolean;
 export interface UseFocusScopeOptions {
     /** The element the scope covers. */
     scopeRef: MaybeRefOrGetter<HTMLElement | null | undefined>;
@@ -35,6 +23,12 @@ export interface UseFocusScopeOptions {
      * @default false
      */
     autoFocus?: MaybeRefOrGetter<boolean | "first" | "last" | undefined>;
+    /**
+     * The part of the page containment holds focus within. Focus moving to something outside it —
+     * another app's window beside this one — is left alone rather than pulled back, and Tab pressed
+     * out there is not taken over. `null` or absent: the whole document.
+     */
+    region?: MaybeRefOrGetter<Element | null | undefined>;
 }
 /**
  * Keep focus inside an overlay and give it back when the overlay closes, ported from React