minor: adds strategy prop to use when positioning the floating element in popover

Author: ignatvilesov

.changeset/three-toes-love.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': minor
+---
+
+minor: adds strategy prop to use when positioning the floating element in popover

apps/website/src/routes/docs/headless/popover/index.mdx

@@ -362,9 +362,15 @@ To read more about the popover API you can check it out on:
     },
     {
       name: 'floating',
-      type: 'boolean | TPlacement',
+      type: 'boolean | Placement',
       description: 'Enables extra JavaScript behavior for floating elements.',
     },
+    {
+      name: 'strategy',
+      type: 'absolute | fixed',
+      description:
+        'The strategy to use when positioning the floating element. The default value is absolute, which suites most cases, while fixed position might be better in legacy browsers like iOS 15.4.',
+    },
     {
       name: 'anchorRef',
       type: 'Signal',

packages/kit-headless/src/components/popover/floating.tsx

@@ -58,6 +58,7 @@ export const FloatingPopover = component$((props: PropsOf<'div'>) => {
       await computePosition(anchor as ReferenceElement, popover, {
         placement: placement as Placement,
         middleware,
+        strategy: context.strategy,
       }).then(async (resolvedData) => {
         const { x, y } = resolvedData;
 

packages/kit-headless/src/components/popover/floating.type.ts

@@ -0,0 +1,16 @@
+export type Floating = {
+  ancestorScroll?: boolean;
+  ancestorResize?: boolean;
+  elementResize?: boolean;
+  layoutShift?: boolean;
+  animationFrame?: boolean;
+  gutter?: number;
+  shift?: boolean;
+  flip?: boolean;
+  size?: boolean;
+  hide?: 'referenceHidden' | 'escaped';
+  inline?: boolean;
+  transform?: string;
+  arrow?: boolean;
+  strategy?: 'absolute' | 'fixed';
+};

packages/kit-headless/src/components/popover/placement.type.ts

@@ -0,0 +1,13 @@
+export type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';

packages/kit-headless/src/components/popover/popover-context.ts

@@ -1,13 +1,15 @@
 import { Signal, createContextId } from '@builder.io/qwik';
-import { TPlacement } from './popover-root';
+
+import { type Placement } from './placement.type';
+import { type Floating } from './floating.type';
 
 export const popoverContextId = createContextId<PopoverContext>('qui-popover');
 
-export type PopoverContext = {
+export type PopoverContext = Floating & {
   // core state
   compId: string;
   isOpenSig: Signal<boolean>;
-  floating?: boolean | TPlacement;
+  floating?: boolean | Placement;
   localId: string;
   manual?: boolean;
   hover?: boolean;
@@ -17,19 +19,4 @@ export type PopoverContext = {
   panelRef?: Signal<HTMLElement | undefined>;
   triggerRef?: Signal<HTMLElement | undefined>;
   arrowRef?: Signal<HTMLElement | undefined>;
-
-  // floating props
-  ancestorScroll?: boolean;
-  ancestorResize?: boolean;
-  elementResize?: boolean;
-  layoutShift?: boolean;
-  animationFrame?: boolean;
-  gutter?: number;
-  shift?: boolean;
-  flip?: boolean;
-  size?: boolean;
-  arrow?: boolean;
-  hide?: 'referenceHidden' | 'escaped';
-  inline?: boolean;
-  transform?: string;
 };

packages/kit-headless/src/components/popover/popover-panel.tsx

@@ -11,7 +11,7 @@ export const HPopoverPanel = component$((props: PropsOf<'div'>) => {
 
   if (context.floating) {
     return (
-      <FloatingPopover data-floating {...props}>
+      <FloatingPopover data-floating={context.strategy || 'absolute'} {...props}>
         <Slot />
       </FloatingPopover>
     );

packages/kit-headless/src/components/popover/popover-root.tsx

@@ -8,52 +8,24 @@ import {
   useSignal,
 } from '@builder.io/qwik';
 import { popoverContextId, PopoverContext } from './popover-context';
+import { type Placement } from './placement.type';
+import { type Floating } from './floating.type';
 
 export type PopoverRootProps = {
   popover?: 'manual' | 'auto';
   manual?: boolean;
   ref?: Signal<HTMLElement | undefined>;
-  floating?: boolean | TPlacement;
+  floating?: boolean | Placement;
   /** @deprecated Use the tooltip instead, which adheres to the WAI-ARIA design pattern. */
   hover?: boolean;
   id?: string;
   'bind:anchor'?: Signal<HTMLElement | undefined>;
   'bind:panel'?: Signal<HTMLElement | undefined>;
 };
 
-export type FloatingProps = {
-  ancestorScroll?: boolean;
-  ancestorResize?: boolean;
-  elementResize?: boolean;
-  layoutShift?: boolean;
-  animationFrame?: boolean;
-  gutter?: number;
-  shift?: boolean;
-  flip?: boolean;
-  size?: boolean;
-  hide?: 'referenceHidden' | 'escaped';
-  inline?: boolean;
-  transform?: string;
-  arrow?: boolean;
-};
-
-export type TPlacement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end';
-
 export type PopoverProps = PopoverRootProps & {
-  floating?: boolean | TPlacement;
-} & FloatingProps &
+  floating?: boolean | Placement;
+} & Floating &
   PropsOf<'div'>;
 
 export const HPopoverRoot = component$((props: PopoverProps) => {
@@ -74,6 +46,7 @@ export const HPopoverRoot = component$((props: PopoverProps) => {
     elementResize = true,
     animationFrame = false,
     transform,
+    strategy,
     ...rest
   } = props;
 
@@ -109,6 +82,7 @@ export const HPopoverRoot = component$((props: PopoverProps) => {
     flip,
     shift,
     hide,
+    strategy,
     ancestorScroll,
     ancestorResize,
     elementResize,

packages/kit-headless/src/components/popover/popover.css

@@ -19,6 +19,10 @@
     overflow: unset;
     position: absolute;
   }
+
+  [data-floating='fixed'] {
+    position: fixed;
+  }
 }
 
 /** override the polyfill's layer, which gets dynamically imported later on. */
@@ -30,4 +34,8 @@
     overflow: unset;
     position: absolute;
   }
+
+  [data-floating='fixed'] {
+    position: fixed;
+  }
 }

packages/kit-headless/src/components/tooltip/tooltip-root.tsx

@@ -9,7 +9,8 @@ import {
   useSignal,
   $,
 } from '@builder.io/qwik';
-import { FloatingProps, HPopoverRoot } from '../popover/popover-root';
+import { type Floating } from '../popover/floating.type';
+import { HPopoverRoot } from '../popover/popover-root';
 import { TooltipContext, TooltipContextId, TriggerDataState } from './tooltip-context';
 
 /**
@@ -42,7 +43,7 @@ export type TooltipRootProps = {
   placement?: Parameters<typeof HPopoverRoot>['0']['floating'];
 
   id?: string;
-} & Pick<FloatingProps, 'flip' | 'gutter'>;
+} & Pick<Floating, 'flip' | 'gutter'>;
 
 /**
  * TooltipProps combines TooltipRootProps and the properties of a div element.