@fiscozen/composables 0.1.36 → 0.1.38-beta.0

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.36",
+  "version": "0.1.38-beta.0",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Riccardo Agnoletto",
+  "dependencies": {
+    "@fiscozen/style": "^0.1.8-next.0"
+  },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13"
@@ -25,9 +28,9 @@
     "vite": "^5.0.10",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
+    "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/FzFloating.vue

@@ -2,6 +2,8 @@
 import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, toRefs, defineExpose } from 'vue'
 import { useFloating } from './composables'
 import { FzFloatingProps, FzUseFloatingArgs } from './types'
+import { useMediaQuery } from './composables'
+import { breakpoints } from '@fiscozen/style'
 
 const props = withDefaults(defineProps<FzFloatingProps>(), {
   position: 'auto',
@@ -16,6 +18,8 @@ const opener = ref<HTMLElement | null>(null)
 
 const slots = useSlots()
 
+const xs = useMediaQuery(`(max-width: ${breakpoints.xs})`)
+
 let scheduledAnimationFrame = false
 
 const useFloatingOpts: FzUseFloatingArgs = {
@@ -71,9 +75,13 @@ watch(
       return
     }
     window.addEventListener('scroll', setPositionWhenOpen)
+    const openerRect = opener.value?.getBoundingClientRect()
+    // CRITICAL: Set position fixed immediately to prevent layout shift
+    content.value.style.position = 'fixed'
     content.value.style.top = '0px'
     content.value.style.left = '0px'
     content.value.style.transform = 'none'
+    content.value.style.width = xs.value ? openerRect?.width + 'px' : 'auto'
     floating.setPosition()
   }
 )
@@ -110,7 +118,7 @@ defineExpose({
 <template>
   <div>
     <slot name="opener-start"></slot>
-    <div ref="opener" class="inline-flex">
+    <div ref="opener" class="inline-flex w-full sm:w-auto">
       <slot name="opener" :isOpen :floating></slot>
     </div>
     <slot name="opener-end"></slot>
@@ -118,7 +126,7 @@ defineExpose({
       v-if="!teleport"
       ref="content"
       v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
-      class="fz__floating__content"
+      class="fz__floating__content w-full sm:w-auto"
       :class="contentClass"
     >
       <slot :isOpen :floating></slot>

package/src/__tests__/FzFloating.spec.ts

@@ -26,6 +26,21 @@ beforeEach(() => {
     disconnect: () => null
   })
   window.IntersectionObserver = mockIntersectionObserver
+
+  // Mock matchMedia for useMediaQuery composable
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn()
+    }))
+  })
 })
 describe('FzFloating', () => {
   positions.forEach((pos) => {

package/src/__tests__/__snapshots__/FzFloating.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`FzFloating > should match snapshot 1`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -12,8 +12,8 @@ exports[`FzFloating > should match snapshot 1`] = `
 
 exports[`FzFloating > should match snapshot 2`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -22,8 +22,8 @@ exports[`FzFloating > should match snapshot 2`] = `
 
 exports[`FzFloating > should match snapshot 3`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -32,8 +32,8 @@ exports[`FzFloating > should match snapshot 3`] = `
 
 exports[`FzFloating > should match snapshot 4`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -42,8 +42,8 @@ exports[`FzFloating > should match snapshot 4`] = `
 
 exports[`FzFloating > should match snapshot 5`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -52,8 +52,8 @@ exports[`FzFloating > should match snapshot 5`] = `
 
 exports[`FzFloating > should match snapshot 6`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -62,8 +62,8 @@ exports[`FzFloating > should match snapshot 6`] = `
 
 exports[`FzFloating > should match snapshot 7`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -72,8 +72,8 @@ exports[`FzFloating > should match snapshot 7`] = `
 
 exports[`FzFloating > should match snapshot 8`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -82,8 +82,8 @@ exports[`FzFloating > should match snapshot 8`] = `
 
 exports[`FzFloating > should match snapshot 9`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -92,8 +92,8 @@ exports[`FzFloating > should match snapshot 9`] = `
 
 exports[`FzFloating > should match snapshot 10`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -102,8 +102,8 @@ exports[`FzFloating > should match snapshot 10`] = `
 
 exports[`FzFloating > should match snapshot 11`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -112,8 +112,8 @@ exports[`FzFloating > should match snapshot 11`] = `
 
 exports[`FzFloating > should match snapshot 12`] = `
 "<div>
-  <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
+  <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
     <div>content</div>
   </div>
   <!--v-if-->

package/src/__tests__/useFloating.spec.ts

@@ -0,0 +1,339 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
+import { ref, toRefs, nextTick } from 'vue'
+import { useFloating } from '../composables/useFloating'
+import { FzFloatingPosition } from '../types'
+
+describe('useFloating', () => {
+  let mockElement: HTMLElement
+  let mockOpener: HTMLElement
+  let mockContainer: HTMLElement
+  let mockIntersectionObserver: any
+
+  beforeEach(() => {
+    // Mock IntersectionObserver
+    mockIntersectionObserver = vi.fn()
+    mockIntersectionObserver.mockReturnValue({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn()
+    })
+    window.IntersectionObserver = mockIntersectionObserver
+
+    // Mock DOM elements
+    mockElement = document.createElement('div')
+    mockElement.style.width = '200px'
+    mockElement.style.height = '100px'
+    document.body.appendChild(mockElement)
+
+    mockOpener = document.createElement('button')
+    mockOpener.style.width = '100px'
+    mockOpener.style.height = '40px'
+    document.body.appendChild(mockOpener)
+
+    mockContainer = document.body
+
+    // Mock getBoundingClientRect
+    mockElement.getBoundingClientRect = vi.fn(() => ({
+      width: 200,
+      height: 100,
+      top: 0,
+      left: 0,
+      right: 200,
+      bottom: 100,
+      x: 0,
+      y: 0,
+      toJSON: () => {}
+    })) as any
+
+    mockOpener.getBoundingClientRect = vi.fn(() => ({
+      width: 100,
+      height: 40,
+      top: 100,
+      left: 100,
+      right: 200,
+      bottom: 140,
+      x: 100,
+      y: 100,
+      toJSON: () => {}
+    })) as any
+
+    mockContainer.getBoundingClientRect = vi.fn(() => ({
+      width: 1024,
+      height: 768,
+      top: 0,
+      left: 0,
+      right: 1024,
+      bottom: 768,
+      x: 0,
+      y: 0,
+      toJSON: () => {}
+    })) as any
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    vi.clearAllMocks()
+  })
+
+  describe('initialization', () => {
+    it('should initialize with correct default values', () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('auto'),
+        opener: { domRef: ref(mockOpener) },
+        element: { domRef: ref(mockElement) }
+      })
+
+      const floating = useFloating(args)
+
+      expect(floating.float).toBeDefined()
+      expect(floating.rect).toBeDefined()
+      expect(floating.setPosition).toBeDefined()
+      expect(floating.position).toBeDefined()
+      expect(floating.actualPosition).toBeDefined()
+    })
+
+    it('should set up intersection observer', async () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom'),
+        opener: { domRef: ref(mockOpener) },
+        element: { domRef: ref(mockElement) }
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      expect(mockIntersectionObserver).toHaveBeenCalled()
+    })
+  })
+
+  describe('position calculation', () => {
+    const positions: FzFloatingPosition[] = [
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+      'top',
+      'top-start',
+      'top-end',
+      'left',
+      'left-start',
+      'left-end',
+      'right',
+      'right-start',
+      'right-end'
+    ]
+
+    positions.forEach((position) => {
+      it(`should calculate ${position} position correctly`, async () => {
+        const args = toRefs({
+          position: ref(position),
+          element: { domRef: ref(mockElement) },
+          opener: { domRef: ref(mockOpener) }
+        })
+
+        const floating = useFloating(args)
+        await floating.setPosition()
+        await nextTick()
+
+        expect(floating.float.position).toBeDefined()
+        expect(typeof floating.float.position.x).toBe('number')
+        expect(typeof floating.float.position.y).toBe('number')
+      })
+    })
+  })
+
+  describe('auto positioning', () => {
+    it('should resolve auto position based on available space', async () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('auto'),
+        element: { domRef: ref(mockElement) },
+        opener: { domRef: ref(mockOpener) }
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      expect(floating.actualPosition?.value).toBeDefined()
+      expect(floating.actualPosition?.value).not.toBe('auto')
+    })
+
+    it('should resolve auto-start position', async () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('auto-start'),
+        element: { domRef: ref(mockElement) },
+        opener: { domRef: ref(mockOpener) }
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      expect(floating.actualPosition?.value).toBeDefined()
+      expect(floating.actualPosition?.value).not.toBe('auto-start')
+    })
+
+    it('should resolve auto-end position', async () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('auto-end'),
+        element: { domRef: ref(mockElement) },
+        opener: { domRef: ref(mockOpener) }
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      expect(floating.actualPosition?.value).toBeDefined()
+      expect(floating.actualPosition?.value).not.toBe('auto-end')
+    })
+  })
+
+  describe('boundary corrections', () => {
+    it('should keep element within container bounds', async () => {
+      // Position opener at edge of container
+      mockOpener.getBoundingClientRect = vi.fn(() => ({
+        width: 100,
+        height: 40,
+        top: 10,
+        left: 950,
+        right: 1050,
+        bottom: 50,
+        x: 950,
+        y: 10,
+        toJSON: () => {}
+      })) as any
+
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom-end'),
+        element: { domRef: ref(mockElement) },
+        opener: { domRef: ref(mockOpener) }
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      // Element should be adjusted to fit within container
+      expect(floating.float.position.x).toBeLessThanOrEqual(1024)
+      expect(floating.float.position.y).toBeLessThanOrEqual(768)
+    })
+  })
+
+  describe('element styling', () => {
+    it('should apply position fixed immediately', async () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom'),
+        element: { domRef: ref(mockElement) },
+        opener: { domRef: ref(mockOpener) }
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      expect(mockElement.style.position).toBe('fixed')
+      expect(mockElement.style.display).toBe('flex')
+    })
+
+    it('should update position styles', async () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom'),
+        element: { domRef: ref(mockElement) },
+        opener: { domRef: ref(mockOpener) }
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      expect(mockElement.style.top).toBeTruthy()
+      expect(mockElement.style.left).toBeTruthy()
+    })
+  })
+
+  describe('callback handling', () => {
+    it('should call callback when provided', async () => {
+      const callback = vi.fn()
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom'),
+        element: { domRef: ref(mockElement) },
+        opener: { domRef: ref(mockOpener) },
+        callback: ref(callback)
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      expect(callback).toHaveBeenCalled()
+    })
+
+    it('should not call callback when ignoreCallback is true', async () => {
+      const callback = vi.fn()
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom'),
+        element: { domRef: ref(mockElement) },
+        opener: { domRef: ref(mockOpener) },
+        callback: ref(callback)
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition(true)
+      await nextTick()
+
+      expect(callback).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('without opener', () => {
+    it('should position element relative to container when no opener', async () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom'),
+        opener: undefined,
+        element: { domRef: ref(mockElement) }
+      })
+
+      const floating = useFloating(args)
+      await floating.setPosition()
+      await nextTick()
+
+      expect(floating.float.position).toBeDefined()
+      expect(typeof floating.float.position.x).toBe('number')
+      expect(typeof floating.float.position.y).toBe('number')
+    })
+  })
+
+  describe('error handling', () => {
+    it('should throw error when element ref is missing', async () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom'),
+        opener: { domRef: ref(mockOpener) },
+        element: { domRef: ref(null) }
+      })
+
+      const floating = useFloating(args)
+
+      await expect(async () => {
+        await floating.setPosition()
+        await nextTick()
+      }).rejects.toThrow('missing reference element for floating behavior')
+    })
+  })
+
+  describe('cleanup', () => {
+    it('should disconnect intersection observer on unmount', () => {
+      const args = toRefs({
+        position: ref<FzFloatingPosition>('bottom'),
+        opener: { domRef: ref(mockOpener) },
+        element: { domRef: ref(mockElement) }
+      })
+
+      useFloating(args)
+
+      // Simulate component unmount
+      // Note: In a real scenario, this would be handled by Vue's lifecycle
+      expect(mockIntersectionObserver).toHaveBeenCalled()
+    })
+  })
+})

package/src/composables/useFloating.ts

@@ -7,7 +7,7 @@ export const useFloating = (
 ): {
   float: FzRect
   rect: Ref<DOMRect | undefined>
-  setPosition: () => Promise<void>
+  setPosition: (ignoreCallback?: boolean) => Promise<void>
   position: Ref<FzFloatingPosition>
   actualPosition?: Ref<FzFloatingPosition | undefined>
   openerRect: Ref<DOMRect | undefined>
@@ -38,272 +38,349 @@ export const useFloating = (
   const floatObserver = ref(new IntersectionObserver(handleIntersect, options))
   const actualPosition = ref<FzFloatingPosition>()
 
-  const setPosition = (ignoreCallback: boolean = false) =>
-    nextTick(() => {
-      actualPosition.value = args.position ? args.position.value : 'auto'
-      safeElementDomRef.value = (
-        typeof args.element.value.domRef.value === 'string'
-          ? document.querySelector(args.element.value.domRef.value)
-          : args.element.value.domRef.value
+  // Helper: Resolve DOM references
+  const resolveDomReferences = () => {
+    safeElementDomRef.value = (
+      typeof args.element.value.domRef.value === 'string'
+        ? document.querySelector(args.element.value.domRef.value)
+        : args.element.value.domRef.value
+    ) as HTMLElement
+
+    if (!args.container?.value) {
+      safeContainerDomRef.value = document.body
+    } else {
+      safeContainerDomRef.value = (
+        typeof args.container.value?.domRef.value === 'string'
+          ? document.querySelector(args.container.value.domRef.value)
+          : args.container.value?.domRef.value
       ) as HTMLElement
-      if (!args.container?.value) {
-        safeContainerDomRef.value = document.body
-      } else {
-        safeContainerDomRef.value = (
-          typeof args.container.value?.domRef.value === 'string'
-            ? document.querySelector(args.container.value.domRef.value)
-            : args.container.value?.domRef.value
-        ) as HTMLElement
-        safeContainerDomRef.value ??= document.body
+      safeContainerDomRef.value ??= document.body
+    }
+
+    if (!safeElementDomRef.value) {
+      throw new Error('missing reference element for floating behavior')
+    }
+
+    if (args.opener?.value) {
+      safeOpenerDomRef.value = (
+        typeof args.opener.value?.domRef.value === 'string'
+          ? document.querySelector(args.opener.value.domRef.value)
+          : args.opener.value?.domRef.value
+      ) as HTMLElement
+    }
+
+    rect.value = safeElementDomRef.value.getBoundingClientRect()
+    openerRect.value = safeOpenerDomRef.value?.getBoundingClientRect()
+    containerRect.value = safeContainerDomRef.value.getBoundingClientRect()
+  }
+
+  // Helper: Resolve auto position to actual position
+  const resolveAutoPositionValue = () => {
+    if (!args.opener?.value || !safeOpenerDomRef.value) return
+
+    switch (actualPosition.value) {
+      case 'auto':
+        actualPosition.value = getHighestAvailableSpacePos(
+          args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
+          safeElementDomRef.value as HTMLElement,
+          safeOpenerDomRef.value as HTMLElement
+        )
+        break
+      case 'auto-vertical':
+        actualPosition.value = getHighestAvailableSpacePos(
+          args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
+          safeElementDomRef.value as HTMLElement,
+          safeOpenerDomRef.value as HTMLElement,
+          undefined,
+          true
+        )
+        break
+      case 'auto-start':
+        actualPosition.value = getHighestAvailableSpacePos(
+          args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
+          safeElementDomRef.value as HTMLElement,
+          safeOpenerDomRef.value as HTMLElement,
+          'start'
+        )
+        break
+      case 'auto-vertical-start':
+        actualPosition.value = getHighestAvailableSpacePos(
+          args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
+          safeElementDomRef.value as HTMLElement,
+          safeOpenerDomRef.value as HTMLElement,
+          'start',
+          true
+        )
+        break
+      case 'auto-end':
+        actualPosition.value = getHighestAvailableSpacePos(
+          args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
+          safeElementDomRef.value as HTMLElement,
+          safeOpenerDomRef.value as HTMLElement,
+          'end'
+        )
+        break
+      case 'auto-vertical-end':
+        actualPosition.value = getHighestAvailableSpacePos(
+          args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
+          safeElementDomRef.value as HTMLElement,
+          safeOpenerDomRef.value as HTMLElement,
+          'end',
+          true
+        )
+        break
+      default:
+        break
+    }
+  }
+
+  // Helper: Calculate position with opener
+  const calculatePositionWithOpener = (
+    elStyle: CSSStyleDeclaration,
+    translateX: { value: number },
+    translateY: { value: number }
+  ) => {
+    if (!openerRect.value) return
+
+    const leftWithoutXMargin =
+      openerRect.value.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
+    const leftWithoutLeftMargin = openerRect.value.left - parseFloat(elStyle.marginLeft)
+    const topWithoutYMargin =
+      openerRect.value.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
+    const topWithoutTopMargin = openerRect.value.top - parseFloat(elStyle.marginTop)
+
+    switch (actualPosition.value) {
+      case 'bottom':
+        float.position.y = openerRect.value.bottom
+        float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
+        translateX.value = -50
+        translateY.value = 0
+        break
+      case 'bottom-start':
+        float.position.y = openerRect.value.bottom
+        float.position.x = leftWithoutXMargin
+        translateX.value = 0
+        translateY.value = 0
+        break
+      case 'bottom-end':
+        float.position.y = openerRect.value.bottom
+        float.position.x = openerRect.value.right
+        translateX.value = -100
+        translateY.value = 0
+        break
+      case 'left-start':
+        float.position.y = topWithoutYMargin
+        float.position.x = leftWithoutXMargin
+        translateX.value = -100
+        translateY.value = 0
+        break
+      case 'left':
+        float.position.y = topWithoutTopMargin + openerRect.value.height / 2
+        float.position.x = leftWithoutXMargin
+        translateY.value = -50
+        translateX.value = -100
+        break
+      case 'left-end':
+        float.position.y = openerRect.value.bottom
+        float.position.x = leftWithoutXMargin
+        translateY.value = -100
+        translateX.value = -100
+        break
+      case 'top-start':
+        float.position.y = topWithoutYMargin
+        float.position.x = leftWithoutXMargin
+        translateY.value = -100
+        translateX.value = 0
+        break
+      case 'top':
+        float.position.y = topWithoutYMargin
+        float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
+        translateX.value = -50
+        translateY.value = -100
+        break
+      case 'top-end':
+        float.position.y = topWithoutYMargin
+        float.position.x = openerRect.value.right
+        translateX.value = -100
+        translateY.value = -100
+        break
+      case 'right-start':
+        float.position.y = topWithoutYMargin
+        float.position.x = openerRect.value.right
+        translateX.value = 0
+        translateY.value = 0
+        break
+      case 'right':
+        float.position.y = topWithoutTopMargin + openerRect.value.height / 2
+        float.position.x = openerRect.value.right
+        translateY.value = -50
+        translateX.value = 0
+        break
+      case 'right-end':
+        float.position.y = openerRect.value.bottom
+        float.position.x = openerRect.value.right
+        translateY.value = -100
+        translateX.value = 0
+        break
+      default:
+        break
+    }
+  }
+
+  // Helper: Calculate position without opener
+  const calculatePositionWithoutOpener = (translateX: { value: number }) => {
+    if (!containerRect.value || !rect.value) return
+
+    switch (actualPosition.value) {
+      case 'bottom':
+        float.position.y = containerRect.value.bottom - rect.value.height
+        float.position.x = containerRect.value.left + containerRect.value.width / 2
+        translateX.value = -50
+        break
+      case 'left-end':
+      case 'bottom-start':
+        float.position.y = containerRect.value.bottom - rect.value.height
+        float.position.x = containerRect.value.left
+        break
+      case 'right-end':
+      case 'bottom-end':
+        float.position.y = containerRect.value.bottom - rect.value.height
+        float.position.x = containerRect.value.right - rect.value.width
+        break
+      case 'left':
+        float.position.y =
+          containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
+        float.position.x = containerRect.value.left
+        break
+      case 'top-start':
+      case 'left-start':
+        float.position.y = containerRect.value.top
+        float.position.x = containerRect.value.left
+        break
+      case 'top':
+        float.position.y = containerRect.value.top
+        float.position.x =
+          containerRect.value.left + (containerRect.value.width - rect.value.width) / 2
+        break
+      case 'top-end':
+      case 'right-start':
+        float.position.y = containerRect.value.top
+        float.position.x = containerRect.value.right - rect.value.width
+        break
+      case 'right':
+        float.position.y =
+          containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
+        float.position.x = containerRect.value.right - rect.value.width
+        break
+      default:
+        break
+    }
+  }
+
+  // Helper: Apply boundary corrections
+  const applyBoundaryCorrections = (
+    realPos: { x: number; y: number },
+    translateX: { value: number },
+    translateY: { value: number }
+  ) => {
+    if (!containerRect.value || !rect.value) return
+
+    if (realPos.x < containerRect.value.left) {
+      float.position.x = containerRect.value.left
+      translateX.value = 0
+    }
+
+    if (realPos.x + rect.value.width > containerRect.value.right) {
+      const fixVal = containerRect.value.right - rect.value.width
+      if (fixVal > 0) {
+        float.position.x = fixVal
       }
+      translateX.value = 0
+    }
+
+    if (realPos.y < containerRect.value.top) {
+      float.position.y = containerRect.value.top
+      translateY.value = 0
+    }
 
-      if (!safeElementDomRef.value) {
-        throw new Error('missing reference element for floating behavior')
+    if (realPos.y + rect.value.height > containerRect.value.bottom) {
+      const fixVal = containerRect.value.bottom - rect.value.height
+      if (fixVal > 0) {
+        float.position.y = fixVal
       }
+      translateY.value = 0
+    }
+  }
+
+  // Helper: Apply element styles
+  const applyElementStyles = () => {
+    if (!safeElementDomRef.value) return
+
+    safeElementDomRef.value.style.top = `${float.position.y}px`
+    safeElementDomRef.value.style.left = `${float.position.x}px`
+    safeElementDomRef.value.style.position = 'fixed'
+    safeElementDomRef.value.style.display = 'flex'
+  }
+
+  const setPosition = (ignoreCallback: boolean = false) =>
+    nextTick(() => {
+      actualPosition.value = args.position ? args.position.value : 'auto'
+
+      // Step 1: Resolve DOM references
+      resolveDomReferences()
 
-      if (args.opener?.value) {
-        safeOpenerDomRef.value = (
-          typeof args.opener.value?.domRef.value === 'string'
-            ? document.querySelector(args.opener.value.domRef.value)
-            : args.opener.value?.domRef.value
-        ) as HTMLElement
+      // Step 1.5: CRITICAL - Remove element from document flow immediately
+      // This prevents the floating element from pushing the opener and causing layout shift
+      if (safeElementDomRef.value) {
+        safeElementDomRef.value.style.position = 'fixed'
+        safeElementDomRef.value.style.top = '0px'
+        safeElementDomRef.value.style.left = '0px'
       }
 
-      rect.value = safeElementDomRef.value.getBoundingClientRect()
+      // Recalculate all rects after content is rendered
+      rect.value = safeElementDomRef.value!.getBoundingClientRect()
       openerRect.value = safeOpenerDomRef.value?.getBoundingClientRect()
-      containerRect.value = safeContainerDomRef.value.getBoundingClientRect()
+      containerRect.value = safeContainerDomRef.value!.getBoundingClientRect()
 
       const elStyle = window.getComputedStyle(safeElementDomRef.value as HTMLElement)
 
-      // multiple observer calls on same target do not cause multiple registrations
+      // Step 2: Setup intersection observer
       floatObserver.value.observe(safeElementDomRef.value as HTMLElement)
       floatObserver.value.observe(safeContainerDomRef.value as HTMLElement)
 
-      let translateY = 0
-      let translateX = 0
+      // Step 3: Resolve auto positions
+      resolveAutoPositionValue()
+
+      // Step 4: Calculate position based on opener presence
+      const translate = { x: { value: 0 }, y: { value: 0 } }
 
       if (args.opener?.value && safeOpenerDomRef.value && openerRect?.value) {
-        const leftWithoutXMargin =
-          openerRect.value.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
-        const leftWithoutLeftMargin = openerRect.value.left - parseFloat(elStyle.marginLeft)
-        const topWithoutYMargin =
-          openerRect.value.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
-        const topWithoutTopMargin = openerRect.value.top - parseFloat(elStyle.marginTop)
-
-        switch (actualPosition.value) {
-          case 'auto':
-            actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement
-            )
-            break
-          case 'auto-vertical':
-            actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
-              undefined,
-              true
-            )
-            break
-          case 'auto-start':
-            actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
-              'start'
-            )
-            break
-          case 'auto-vertical-start':
-            actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
-              'start',
-              true
-            )
-            break
-          case 'auto-end':
-            actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
-              'end'
-            )
-            break
-          case 'auto-vertical-end':
-            actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
-              'end',
-              true
-            )
-            break
-          default:
-            break
-        }
-        switch (actualPosition.value) {
-          case 'bottom':
-            float.position.y = openerRect.value.bottom
-            float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
-            translateX = -50
-            translateY = 0
-            break
-          case 'bottom-start':
-            float.position.y = openerRect.value.bottom
-            float.position.x = leftWithoutXMargin
-            translateX = 0
-            translateY = 0
-            break
-          case 'bottom-end':
-            float.position.y = openerRect.value.bottom
-            float.position.x = openerRect.value.right
-            translateX = -100
-            translateY = 0
-            break
-          case 'left-start':
-            float.position.y = topWithoutYMargin
-            float.position.x = leftWithoutXMargin
-            translateX = -100
-            translateY = 0
-            break
-          case 'left':
-            float.position.y = topWithoutTopMargin + openerRect.value.height / 2
-            float.position.x = leftWithoutXMargin
-            translateY = -50
-            translateX = -100
-            break
-          case 'left-end':
-            float.position.y = openerRect.value.bottom
-            float.position.x = leftWithoutXMargin
-            translateY = -100
-            translateX = -100
-            break
-          case 'top-start':
-            float.position.y = topWithoutYMargin
-            float.position.x = leftWithoutXMargin
-            translateY = -100
-            translateX = 0
-            break
-          case 'top':
-            float.position.y = topWithoutYMargin
-            float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
-            translateX = -50
-            translateY = -100
-            break
-          case 'top-end':
-            float.position.y = topWithoutYMargin
-            float.position.x = openerRect.value.right
-            translateX = -100
-            translateY = -100
-            break
-          case 'right-start':
-            float.position.y = topWithoutYMargin
-            float.position.x = openerRect.value.right
-            translateX = 0
-            translateY = 0
-            break
-          case 'right':
-            float.position.y = topWithoutTopMargin + openerRect.value.height / 2
-            float.position.x = openerRect.value.right
-            translateY = -50
-            translateX = 0
-            break
-          case 'right-end':
-            float.position.y = openerRect.value.bottom
-            float.position.x = openerRect.value.right
-            translateY = -100
-            translateX = 0
-            break
-          default:
-            break
-        }
+        calculatePositionWithOpener(elStyle, translate.x, translate.y)
       } else {
-        switch (actualPosition.value) {
-          case 'bottom':
-            float.position.y = containerRect.value.bottom - rect.value.height
-            float.position.x = containerRect.value.left + containerRect.value.width / 2
-            translateX = -50
-            break
-          case 'left-end':
-          case 'bottom-start':
-            float.position.y = containerRect.value.bottom - rect.value.height
-            float.position.x = containerRect.value.left
-            break
-          case 'right-end':
-          case 'bottom-end':
-            float.position.y = containerRect.value.bottom - rect.value.height
-            float.position.x = containerRect.value.right - rect.value.width
-            break
-          case 'left':
-            float.position.y =
-              containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
-            float.position.x = containerRect.value.left
-            break
-          case 'top-start':
-          case 'left-start':
-            float.position.y = containerRect.value.top
-            float.position.x = containerRect.value.left
-            break
-          case 'top':
-            float.position.y = containerRect.value.top
-            float.position.x =
-              containerRect.value.left + (containerRect.value.width - rect.value.width) / 2
-            break
-          case 'top-end':
-          case 'right-start':
-            float.position.y = containerRect.value.top
-            float.position.x = containerRect.value.right - rect.value.width
-          case 'right':
-            float.position.y =
-              containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
-            float.position.x = containerRect.value.right - rect.value.width
-            break
-          default:
-            break
-        }
-      }
-
-      const realPos = calcRealPos(rect.value, float.position, translateX, translateY)
-
-      float.position.x = realPos.x
-      float.position.y = realPos.y
-
-      if (realPos.x < containerRect.value.left) {
-        float.position.x = containerRect.value.left
-        translateX = 0
-      }
-
-      if (realPos.x + rect.value.width > containerRect.value.right) {
-        const fixVal = containerRect.value.right - rect.value.width
-        if (fixVal > 0) {
-          float.position.x = fixVal
-        }
-        translateX = 0
+        calculatePositionWithoutOpener(translate.x)
       }
 
-      if (realPos.y < containerRect.value.top) {
-        float.position.y = containerRect.value.top
-        translateY = 0
-      }
+      // Step 5: Calculate real position and apply boundary corrections
+      if (rect.value) {
+        const realPos = calcRealPos(
+          rect.value,
+          float.position,
+          translate.x.value,
+          translate.y.value
+        )
+        float.position.x = realPos.x
+        float.position.y = realPos.y
 
-      if (realPos.y + rect.value.height > containerRect.value.bottom) {
-        const fixVal = containerRect.value.bottom - rect.value.height
-        if (fixVal > 0) {
-          float.position.y = fixVal
-        }
-        translateY = 0
+        applyBoundaryCorrections(realPos, translate.x, translate.y)
       }
 
-      safeElementDomRef.value.style.top = `${float.position.y}px`
-      safeElementDomRef.value.style.left = `${float.position.x}px`
-      safeElementDomRef.value.style.position = 'fixed'
-      safeElementDomRef.value.style.display = 'flex'
+      // Step 6: Apply styles to element
+      applyElementStyles()
 
-      rect.value = safeElementDomRef.value.getBoundingClientRect()
+      // Step 7: Update rect after positioning
+      rect.value = safeElementDomRef.value!.getBoundingClientRect()
 
+      // Step 8: Trigger callback if provided
       if (args.callback?.value && !ignoreCallback) {
         args.callback.value(rect, openerRect, containerRect, position, actualPosition)
       }

package/src/composables/useMediaQuery.ts

@@ -1,4 +1,4 @@
-import { Ref, onMounted, onUnmounted, ref } from 'vue'
+import { Ref, onMounted, onUnmounted, ref, computed } from 'vue'
 
 function useMediaQuery(mediaQuery: string): Ref<boolean> {
   const mediaQueryList = window.matchMedia(mediaQuery)
@@ -16,7 +16,7 @@ function useMediaQuery(mediaQuery: string): Ref<boolean> {
     mediaQueryList.removeEventListener('change', handleChange)
   })
 
-  return matches
+  return computed(() => matches.value)
 }
 
 export { useMediaQuery }

package/src/index.ts

@@ -2,4 +2,4 @@ export { default as FzFloating } from './FzFloating.vue'
 
 export * from './composables'
 export * from './types'
-export * from './utils'
+export * from './utils'

package/src/types.ts

@@ -40,7 +40,7 @@ export interface FzFloatElement {
 export interface FzUseFloatingArgs {
   element: FzFloatElement
   container?: FzFloatElement
-  opener: FzFloatElement
+  opener?: FzFloatElement
   position?: FzFloatingPosition
   useViewport?: boolean
   callback?: (