ropav 0.0.12 → 0.0.13

package/dist/components/dropdown-menu/types.d.ts

@@ -1,6 +1,6 @@
 import { Component, HTMLAttributes, Ref } from 'vue';
 import { StylesApiProps } from '../../styles-api.js';
-import { FloatingCollisionPadding, FloatingOffset, FloatingOffsetOptions, FloatingPositionProps, FloatingStrategy, FloatingTarget, FloatingVirtualElement, TeleportProps } from '../floating/types.js';
+import { FloatingAutoUpdateOptions, FloatingCollisionPadding, FloatingFlipOptions, FloatingOffset, FloatingOffsetOptions, FloatingPositionProps, FloatingStrategy, FloatingTarget, FloatingVirtualElement, TeleportProps } from '../floating/types.js';
 export declare const dropdownMenuParts: readonly ["root", "trigger", "content", "item", "label", "shortcut", "submenu", "submenuIndicator", "empty"];
 export type DropdownMenuPart = (typeof dropdownMenuParts)[number];
 export type DropdownMenuPlacement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
@@ -177,8 +177,10 @@ export interface DropdownMenuContentPrimitiveProps {
     offset?: DropdownMenuOffset;
     strategy?: FloatingStrategy;
     flip?: boolean;
+    flipOptions?: FloatingFlipOptions;
     shift?: boolean;
     collisionPadding?: FloatingCollisionPadding;
+    autoUpdateOptions?: FloatingAutoUpdateOptions;
     arrow?: boolean;
     /** @deprecated Use `flip` and `shift` instead. */
     avoidCollisions?: boolean;

package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts

@@ -33,8 +33,10 @@ export interface DropdownMenuRenderContext {
     getSubmenuPlacement: () => DropdownMenuPlacement;
     getStrategy: () => NonNullable<DropdownMenuProps['strategy']>;
     getFlip: () => boolean;
+    getFlipOptions: () => DropdownMenuProps['flipOptions'];
     getShift: () => boolean;
     getCollisionPadding: () => NonNullable<DropdownMenuProps['collisionPadding']>;
+    getAutoUpdateOptions: () => DropdownMenuProps['autoUpdateOptions'];
 }
 export declare function useDropdownMenuRenderItems({ props, actualPlacement, items, getItemId, getSubmenuId, getMenuActiveDescendant, getItemElement, isItemFocused, isSubmenuOpen, activateItem, focusHoveredItem, selectItem, openSubmenu, closeSubmenu, close, }: UseDropdownMenuRenderItemsOptions): {
     renderedItems: import('vue').ComputedRef<DropdownMenuRenderedItem[]>;

package/dist/components/floating/index.d.ts

@@ -1,3 +1,3 @@
 export { useHoverDisclosure } from './useHoverDisclosure.js';
 export { useFloatingPosition } from './useFloatingPosition.js';
-export type { FloatingAlignment, FloatingCollisionPadding, FloatingOffset, FloatingOffsetOptions, FloatingPlacement, FloatingPositionProps, FloatingReference, FloatingSide, FloatingStrategy, FloatingTarget, FloatingVirtualElement, HoverDisclosureContentProps, HoverDisclosureContentTarget, HoverDisclosureInteractionTarget, HoverDisclosureOpenChangeDetails, HoverDisclosureOpenChangeReason, HoverDisclosureOption, HoverDisclosureState, HoverDisclosureTouchBehavior, HoverDisclosureTriggerProps, TeleportProps, TeleportTarget, TeleportTargetValue, UseHoverDisclosureOptions, UseHoverDisclosureReturn, UseFloatingPositionOptions, UseFloatingPositionReturn, } from './types.js';
+export type { FloatingAlignment, FloatingAutoUpdateOptions, FloatingCollisionPadding, FloatingFlipFallbackStrategy, FloatingFlipOptions, FloatingOffset, FloatingOffsetOptions, FloatingPlacement, FloatingPositionProps, FloatingReference, FloatingSide, FloatingStrategy, FloatingTarget, FloatingVirtualElement, HoverDisclosureContentProps, HoverDisclosureContentTarget, HoverDisclosureInteractionTarget, HoverDisclosureOpenChangeDetails, HoverDisclosureOpenChangeReason, HoverDisclosureOption, HoverDisclosureState, HoverDisclosureTouchBehavior, HoverDisclosureTriggerProps, TeleportProps, TeleportTarget, TeleportTargetValue, UseHoverDisclosureOptions, UseHoverDisclosureReturn, UseFloatingPositionOptions, UseFloatingPositionReturn, } from './types.js';

package/dist/components/floating/types.d.ts

@@ -10,6 +10,13 @@ export interface FloatingOffsetOptions {
 }
 export type FloatingOffset = number | FloatingOffsetOptions;
 export type FloatingCollisionPadding = number | Partial<Record<FloatingSide, number>>;
+export type FloatingFlipFallbackStrategy = 'bestFit' | 'initialPlacement';
+export interface FloatingFlipOptions {
+    fallbackStrategy?: FloatingFlipFallbackStrategy;
+}
+export interface FloatingAutoUpdateOptions {
+    animationFrame?: boolean;
+}
 export type FloatingReference = Element | VirtualElement;
 export type FloatingTarget = string | FloatingReference | Ref<FloatingReference | null | undefined>;
 export interface FloatingPositionProps<TPlacement extends FloatingPlacement = FloatingPlacement> extends TeleportProps {
@@ -18,8 +25,10 @@ export interface FloatingPositionProps<TPlacement extends FloatingPlacement = Fl
     strategy?: FloatingStrategy;
     offset?: FloatingOffset;
     flip?: boolean;
+    flipOptions?: FloatingFlipOptions;
     shift?: boolean;
     collisionPadding?: FloatingCollisionPadding;
+    autoUpdateOptions?: FloatingAutoUpdateOptions;
     arrow?: boolean;
 }
 export interface UseFloatingPositionOptions {
@@ -31,8 +40,10 @@ export interface UseFloatingPositionOptions {
     strategy?: MaybeRefOrGetter<FloatingStrategy | undefined>;
     offset?: MaybeRefOrGetter<FloatingOffset | undefined>;
     flip?: MaybeRefOrGetter<boolean | undefined>;
+    flipOptions?: MaybeRefOrGetter<FloatingFlipOptions | undefined>;
     shift?: MaybeRefOrGetter<boolean | undefined>;
     collisionPadding?: MaybeRefOrGetter<FloatingCollisionPadding | undefined>;
+    autoUpdateOptions?: MaybeRefOrGetter<FloatingAutoUpdateOptions | undefined>;
     restartKey?: MaybeRefOrGetter<unknown>;
 }
 export interface UseFloatingPositionReturn {

package/dist/dropdown-menu.js

@@ -434,8 +434,10 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 		strategy: () => props.strategy ?? "absolute",
 		offset: () => props.offset,
 		flip: () => props.avoidCollisions !== false && props.flip !== false,
+		flipOptions: () => props.flipOptions,
 		shift: () => props.avoidCollisions !== false && props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
+		autoUpdateOptions: () => props.autoUpdateOptions,
 		restartKey: teleportPositioningKey
 	});
 	watch(floating.actualPlacement, (value) => {
@@ -584,11 +586,13 @@ var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false
@@ -1289,11 +1293,13 @@ var dropdown_menu_sub_content_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		avoidCollisions: {
 			type: Boolean,
 			default: true
@@ -1599,8 +1605,10 @@ var dropdown_menu_item_row_default = /* @__PURE__ */ defineVaporComponent({
 			strategy: props.context.getStrategy,
 			offset: () => 4,
 			flip: props.context.getFlip,
+			flipOptions: props.context.getFlipOptions,
 			shift: props.context.getShift,
-			collisionPadding: props.context.getCollisionPadding
+			collisionPadding: props.context.getCollisionPadding,
+			autoUpdateOptions: props.context.getAutoUpdateOptions
 		});
 		const submenuProps = computed(() => props.context.getSubmenuProps(props.item, path.value, true));
 		const publicSubmenuProps = computed(() => ({
@@ -2193,8 +2201,10 @@ function useDropdownMenuPortalPosition(options) {
 		strategy: () => options.props.strategy ?? "absolute",
 		offset: () => options.props.offset,
 		flip: () => options.props.flip !== false,
+		flipOptions: () => options.props.flipOptions,
 		shift: () => options.props.shift !== false,
 		collisionPadding: () => options.props.collisionPadding ?? 8,
+		autoUpdateOptions: () => options.props.autoUpdateOptions,
 		restartKey: options.restartKey
 	});
 	return {
@@ -2296,8 +2306,10 @@ function useDropdownMenuRenderItems({ props, actualPlacement, items, getItemId,
 			getSubmenuPlacement: () => actualPlacement.value.endsWith("end") ? "left-start" : "right-start",
 			getStrategy: () => props.strategy ?? "absolute",
 			getFlip: () => props.flip !== false,
+			getFlipOptions: () => props.flipOptions,
 			getShift: () => props.shift !== false,
-			getCollisionPadding: () => props.collisionPadding ?? 8
+			getCollisionPadding: () => props.collisionPadding ?? 8,
+			getAutoUpdateOptions: () => props.autoUpdateOptions
 		},
 		getItemProps,
 		getItemSlotProps
@@ -2617,11 +2629,13 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false

package/dist/popover.js

@@ -96,8 +96,10 @@ function usePopover(props, emitOpenChange) {
 		strategy: () => props.strategy ?? "absolute",
 		offset: () => props.offset,
 		flip: () => props.flip !== false,
+		flipOptions: () => props.flipOptions,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
+		autoUpdateOptions: () => props.autoUpdateOptions,
 		restartKey: () => [
 			Boolean(props.teleport),
 			teleportTo.value,
@@ -344,11 +346,13 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false

package/dist/tooltip.js

@@ -111,8 +111,10 @@ function useTooltip(props, emitOpenChange) {
 		strategy: () => props.strategy ?? "absolute",
 		offset: () => props.offset,
 		flip: () => props.flip !== false,
+		flipOptions: () => props.flipOptions,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
+		autoUpdateOptions: () => props.autoUpdateOptions,
 		restartKey: () => [
 			Boolean(props.teleport),
 			teleportTo.value,
@@ -240,11 +242,13 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false

package/dist/useFloatingPosition.js

@@ -1213,12 +1213,18 @@ function useFloatingPosition(options) {
 	function getFlip() {
 		return toValue(options.flip) !== false;
 	}
+	function getFlipFallbackStrategy() {
+		return toValue(options.flipOptions)?.fallbackStrategy;
+	}
 	function getShift() {
 		return toValue(options.shift) !== false;
 	}
 	function getCollisionPadding() {
 		return toValue(options.collisionPadding) ?? DEFAULT_COLLISION_PADDING;
 	}
+	function getAutoUpdateAnimationFrame() {
+		return toValue(options.autoUpdateOptions)?.animationFrame;
+	}
 	function getHiddenStyle() {
 		return {
 			position: getStrategy(),
@@ -1242,7 +1248,11 @@ function useFloatingPosition(options) {
 	function getMiddleware() {
 		const middleware = [offset(getOffset())];
 		const padding = getCollisionPadding();
-		if (getFlip()) middleware.push(flip({ padding }));
+		const fallbackStrategy = getFlipFallbackStrategy();
+		if (getFlip()) middleware.push(flip({
+			padding,
+			...fallbackStrategy == null ? {} : { fallbackStrategy }
+		}));
 		if (getShift()) middleware.push(shift({ padding }));
 		const arrow$2 = getArrow();
 		if (arrow$2) middleware.push(arrow({
@@ -1285,7 +1295,9 @@ function useFloatingPosition(options) {
 			const reference = getReference();
 			const floating = getFloating();
 			if (currentGeneration !== generation || !reference || !floating || !getOpen()) return;
-			cleanup = autoUpdate(reference, floating, () => void update());
+			const updatePosition = () => void update();
+			const animationFrame = getAutoUpdateAnimationFrame();
+			cleanup = animationFrame == null ? autoUpdate(reference, floating, updatePosition) : autoUpdate(reference, floating, updatePosition, { animationFrame });
 		});
 	}
 	watch([
@@ -1297,8 +1309,10 @@ function useFloatingPosition(options) {
 		getStrategy,
 		getOffset,
 		getFlip,
+		getFlipFallbackStrategy,
 		getShift,
 		getCollisionPadding,
+		getAutoUpdateAnimationFrame,
 		() => toValue(options.restartKey)
 	], start, {
 		flush: "post",

package/docs/public-floating-api.md

@@ -49,19 +49,30 @@ const { actualPlacement, arrowStyle, floatingStyle } = useFloatingPosition({
 
 The composable accepts plain values, refs, computed refs or getters for reactive options.
 
-| Option             | Default    | Description                                                    |
-| ------------------ | ---------- | -------------------------------------------------------------- |
-| `reference`        | required   | Element or virtual element used as the anchor.                 |
-| `floating`         | required   | Floating HTML element.                                         |
-| `arrow`            | —          | Optional arrow HTML element.                                   |
-| `open`             | `true`     | Suspends positioning and auto-updates when false.              |
-| `placement`        | `bottom`   | Preferred side and optional alignment.                         |
-| `strategy`         | `absolute` | CSS positioning strategy: `absolute` or `fixed`.               |
-| `offset`           | `8`        | Main/cross-axis distance from the reference.                   |
-| `flip`             | `true`     | Tries the opposite side when space is insufficient.            |
-| `shift`            | `true`     | Keeps the floating element inside the collision boundary.      |
-| `collisionPadding` | `8`        | Padding between the floating element and viewport boundary.    |
-| `restartKey`       | —          | Rebinds auto-update observers when its reactive value changes. |
+| Option                             | Default    | Description                                                            |
+| ---------------------------------- | ---------- | ---------------------------------------------------------------------- |
+| `reference`                        | required   | Element or virtual element used as the anchor.                         |
+| `floating`                         | required   | Floating HTML element.                                                 |
+| `arrow`                            | —          | Optional arrow HTML element.                                           |
+| `open`                             | `true`     | Suspends positioning and auto-updates when false.                      |
+| `placement`                        | `bottom`   | Preferred side and optional alignment.                                 |
+| `strategy`                         | `absolute` | CSS positioning strategy: `absolute` or `fixed`.                       |
+| `offset`                           | `8`        | Main/cross-axis distance from the reference.                           |
+| `flip`                             | `true`     | Tries the opposite side when space is insufficient.                    |
+| `flipOptions.fallbackStrategy`     | `bestFit`  | Chooses the best fit or preserves the initial placement when none fit. |
+| `shift`                            | `true`     | Keeps the floating element inside the collision boundary.              |
+| `collisionPadding`                 | `8`        | Padding between the floating element and viewport boundary.            |
+| `autoUpdateOptions.animationFrame` | `false`    | Tracks transform animations and detached nested floating contexts.     |
+| `restartKey`                       | —          | Rebinds auto-update observers when its reactive value changes.         |
+
+Use `autoUpdateOptions.animationFrame` sparingly. It checks the reference position every animation
+frame and is intended for references moving with CSS transforms or nested floating elements outside
+their ancestor's scrolling context. The animation-frame loop only runs while positioning is open.
+
+`Popover`, `Tooltip`, `DropdownMenu`, `DropdownMenuContent` and `DropdownMenuSubContent` accept the
+same `flipOptions` and `autoUpdateOptions` objects. On the data-driven `DropdownMenu`, the options
+also apply to its open submenus. Each open floating element using `animationFrame: true` runs its own
+animation-frame loop.
 
 The return value contains readonly `actualPlacement`, `floatingStyle`, `arrowStyle` and
 `isPositioned` refs, plus an async `update()` method for content-driven layout changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "packageManager": "pnpm@11.10.0",
   "engines": {