feat: prioritizePosition props for popper

docs/content/meta/ComboboxContent.md

@@ -86,6 +86,12 @@
     'type': '\'inline\' | \'popper\'',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'side',
     'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',

docs/content/meta/ContextMenuContent.md

@@ -61,6 +61,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'sticky',
     'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',

docs/content/meta/ContextMenuSubContent.md

@@ -62,6 +62,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'sideOffset',
     'description': '<p>The distance in pixels from the trigger.</p>\n',

docs/content/meta/DropdownMenuContent.md

@@ -68,6 +68,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'side',
     'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',

docs/content/meta/DropdownMenuSubContent.md

@@ -62,6 +62,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'sideOffset',
     'description': '<p>The distance in pixels from the trigger.</p>\n',

docs/content/meta/HoverCardContent.md

@@ -62,6 +62,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'side',
     'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',

docs/content/meta/MenubarContent.md

@@ -69,6 +69,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'side',
     'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',

docs/content/meta/MenubarSubContent.md

@@ -62,6 +62,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'sideOffset',
     'description': '<p>The distance in pixels from the trigger.</p>\n',

docs/content/meta/PopoverContent.md

@@ -68,6 +68,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'side',
     'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',

docs/content/meta/SelectContent.md

@@ -68,6 +68,12 @@
     'type': '\'popper\' | \'item-aligned\'',
     'required': false
   },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'side',
     'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',

packages/radix-vue/src/Menu/MenuContentImpl.vue

@@ -304,6 +304,7 @@ provideMenuContentContext({
           :collision-boundary="collisionBoundary"
           :collision-padding="collisionPadding"
           :arrow-padding="arrowPadding"
+          :prioritize-position="prioritizePosition"
           :sticky="sticky"
           :hide-when-detached="hideWhenDetached"
           @keydown="handleKeyDown"

packages/radix-vue/src/Popper/PopperContent.vue

@@ -23,6 +23,7 @@ export const PopperContentPropsDefaultValue = {
   sticky: 'partial' as 'partial' | 'always',
   hideWhenDetached: false,
   updatePositionStrategy: 'optimized' as 'optimized' | 'always',
+  prioritizePosition: false,
 }
 
 export interface PopperContentProps extends PrimitiveProps {
@@ -115,6 +116,15 @@ export interface PopperContentProps extends PrimitiveProps {
    * @defaultValue 'optimized'
    */
   updatePositionStrategy?: 'optimized' | 'always'
+
+  /**
+   * Force content to be position within the viewport.
+   *
+   * Might overlap the reference element, which may not be desired.
+   *
+   * @defaultValue false
+   */
+  prioritizePosition?: boolean
 }
 
 export interface PopperContentContext {
@@ -205,11 +215,12 @@ const computedMiddleware = computedEager(() => {
     props.avoidCollisions
       && shift({
         mainAxis: true,
-        crossAxis: true,
+        crossAxis: !!props.prioritizePosition,
         limiter: props.sticky === 'partial' ? limitShift() : undefined,
         ...detectOverflowOptions.value,
       }),
-    props.avoidCollisions
+    !props.prioritizePosition
+      && props.avoidCollisions
       && flip({
         ...detectOverflowOptions.value,
       }),