@vanduo-oss/framework 1.4.1 → 1.4.2

package/js/components/datepicker.js

@@ -128,6 +128,32 @@
     return x;
   }
 
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+
+    popup.style.minWidth = Math.max(rect.width, 0) + 'px';
+
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + 'px';
+    popup.style.left = left + 'px';
+
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + 'px';
+    }
+
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + 'px';
+  }
+
   const Datepicker = {
     instances: new Map(),
 
@@ -221,7 +247,7 @@
       wrapper.style.display = 'inline-block';
       input.parentNode.insertBefore(wrapper, input);
       wrapper.appendChild(input);
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
 
       const isSameDay = (a, b) => a && b &&
         a.getFullYear() === b.getFullYear() &&
@@ -442,6 +468,10 @@
           }
           popup.appendChild(grid);
         }
+
+        if (popup.classList.contains('is-open')) {
+          requestAnimationFrame(positionPopup);
+        }
       };
 
       const handleGridKeydown = (e) => {
@@ -523,6 +553,15 @@
         requestAnimationFrame(focusFocusedDay);
       };
 
+      const positionPopup = () => {
+        if (!popup.classList.contains('is-open')) return;
+        positionAnchoredPopup(input, popup);
+      };
+
+      const repositionHandler = () => {
+        positionPopup();
+      };
+
       const open = () => {
         viewMode = 'days';
         if (selectedDate) {
@@ -542,7 +581,10 @@
         render();
         popup.classList.add('is-open');
         input.setAttribute('aria-expanded', 'true');
-        requestAnimationFrame(focusFocusedDay);
+        requestAnimationFrame(() => {
+          positionPopup();
+          focusFocusedDay();
+        });
       };
 
       const close = () => {
@@ -559,7 +601,7 @@
         open();
       };
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (!input.contains(e.target) && !popup.contains(e.target)) close();
       };
       const escHandler = (e) => {
         if (e.key === 'Escape' && popup.classList.contains('is-open')) {
@@ -573,6 +615,8 @@
       document.addEventListener('click', outsideHandler, true);
       document.addEventListener('keydown', escHandler);
       popup.addEventListener('keydown', handleGridKeydown);
+      window.addEventListener('resize', repositionHandler);
+      window.addEventListener('scroll', repositionHandler, true);
 
       input.setAttribute('aria-haspopup', 'dialog');
       input.setAttribute('aria-expanded', 'false');
@@ -582,7 +626,10 @@
         () => input.removeEventListener('focus', focusHandler),
         () => document.removeEventListener('click', outsideHandler, true),
         () => document.removeEventListener('keydown', escHandler),
-        () => popup.removeEventListener('keydown', handleGridKeydown)
+        () => popup.removeEventListener('keydown', handleGridKeydown),
+        () => window.removeEventListener('resize', repositionHandler),
+        () => window.removeEventListener('scroll', repositionHandler, true),
+        () => popup.remove()
       );
 
       this.instances.set(input, { cleanup: cleanup, open: open, close: close, popup: popup });

package/js/components/timepicker.js

@@ -6,6 +6,32 @@
 (function () {
   'use strict';
 
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+
+    popup.style.minWidth = Math.max(rect.width, 0) + 'px';
+
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + 'px';
+    popup.style.left = left + 'px';
+
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + 'px';
+    }
+
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + 'px';
+  }
+
   const Timepicker = {
     instances: new Map(),
 
@@ -36,7 +62,7 @@
       const popup = document.createElement('div');
       popup.className = 'vd-timepicker-popup';
       popup.setAttribute('role', 'listbox');
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
 
       // Generate time slots
       const times = [];
@@ -84,13 +110,24 @@
         });
       };
 
+      const positionPopup = () => {
+        if (!popup.classList.contains('is-open')) return;
+        positionAnchoredPopup(input, popup);
+      };
+
+      const repositionHandler = () => {
+        positionPopup();
+      };
+
       const open = () => {
         render();
         popup.classList.add('is-open');
         input.setAttribute('aria-expanded', 'true');
-        // Scroll to selected
-        const selected = popup.querySelector('.is-selected');
-        if (selected) selected.scrollIntoView({ block: 'center' });
+        requestAnimationFrame(() => {
+          positionPopup();
+          const selected = popup.querySelector('.is-selected');
+          if (selected) selected.scrollIntoView({ block: 'center' });
+        });
       };
 
       const close = () => {
@@ -100,13 +137,15 @@
 
       const focusHandler = () => open();
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (!input.contains(e.target) && !popup.contains(e.target)) close();
       };
       const escHandler = (e) => { if (e.key === 'Escape') close(); };
 
       input.addEventListener('focus', focusHandler);
       document.addEventListener('click', outsideHandler, true);
       document.addEventListener('keydown', escHandler);
+      window.addEventListener('resize', repositionHandler);
+      window.addEventListener('scroll', repositionHandler, true);
       input.setAttribute('aria-haspopup', 'listbox');
       input.setAttribute('aria-expanded', 'false');
       input.setAttribute('autocomplete', 'off');
@@ -115,7 +154,10 @@
       cleanup.push(
         () => input.removeEventListener('focus', focusHandler),
         () => document.removeEventListener('click', outsideHandler, true),
-        () => document.removeEventListener('keydown', escHandler)
+        () => document.removeEventListener('keydown', escHandler),
+        () => window.removeEventListener('resize', repositionHandler),
+        () => window.removeEventListener('scroll', repositionHandler, true),
+        () => popup.remove()
       );
 
       this.instances.set(input, { cleanup, open, close });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",