@fiscozen/composables 0.1.37 → 0.1.38

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Riccardo Agnoletto",
   "dependencies": {
-    "@fiscozen/style": "^0.1.7"
+    "@fiscozen/style": "^0.1.8-next.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -29,8 +29,8 @@
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0"
+    "@fiscozen/eslint-config": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/FzFloating.vue

@@ -76,6 +76,8 @@ watch(
     }
     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'

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()
+    })
+  })
+})