@a4ui/core 0.37.0 → 0.37.1

package/dist/lib/anchored.d.ts

@@ -0,0 +1,16 @@
+export interface AnchorReflowOptions {
+    /** The trigger the panel is anchored to. */
+    anchor: () => HTMLElement | undefined;
+    /** Re-reads the anchor's rect and repositions the panel. */
+    place: () => void;
+    /** Called only when the anchor is no longer on screen. */
+    close: () => void;
+}
+/**
+ * The scroll/resize handler an anchored popover should register, instead of
+ * `close`.
+ *
+ * Registering it for `scroll` still needs capture (`true`): the scroll may come
+ * from any ancestor container, and scroll events do not bubble to `window`.
+ */
+export declare function createAnchorReflow(options: AnchorReflowOptions): () => void;

package/dist/ui/DateField.d.ts

@@ -15,8 +15,8 @@ interface DateFieldProps {
 }
 /**
  * Compact hand-rolled month-grid date picker (no Kobalte primitive covers this yet).
- * Trigger button opens a portaled popover calendar; closes on outside click, Escape,
- * scroll, or resize. Speaks plain `YYYY-MM-DD` strings, never `Date`/`toISOString`.
+ * Trigger button opens a portaled popover calendar; closes on outside click or Escape,
+ * and follows the trigger when the page scrolls or resizes. Speaks plain `YYYY-MM-DD` strings, never `Date`/`toISOString`.
  *
  * @example
  * ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.37.0",
+  "version": "0.37.1",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.37.0'
+export const A4UI_VERSION = '0.37.1'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/lib/anchored.ts

@@ -0,0 +1,57 @@
+// Keeping a portaled popover glued to the trigger it belongs to.
+//
+// DateField, TimeField, DateRangePicker and MultiSelect all render their panel
+// in a <Portal> so it escapes the stacking context of whatever card it sits in.
+// At <body> it cannot be positioned relative to the trigger, so each one places
+// it with `position: fixed` at the trigger's viewport rect — which is correct
+// until the page scrolls and the rect goes stale.
+//
+// All four handled that by CLOSING on any captured scroll, and that made them
+// unusable on a scrolling page: clicking a trigger below the fold scrolls it
+// into view, the scroll event arrives right after the panel opens, and the
+// panel shuts in the same gesture. Reported as a date picker that simply did
+// not respond to clicks; measured in a browser as open-then-closed within
+// 300 ms, with `mousedown` followed by `scroll:document`.
+//
+// A fixed panel does not need to disappear when the page moves — it needs to
+// move with it. This re-places it, and closes only when the trigger has
+// actually left the viewport, where following it would leave a panel hovering
+// over unrelated content.
+
+/** Vertical slack, in px, before a trigger counts as gone. Half a row: enough
+ * not to close while a sticky header slides over the trigger's top edge. */
+const OFF_SCREEN_SLACK = 16
+
+export interface AnchorReflowOptions {
+  /** The trigger the panel is anchored to. */
+  anchor: () => HTMLElement | undefined
+  /** Re-reads the anchor's rect and repositions the panel. */
+  place: () => void
+  /** Called only when the anchor is no longer on screen. */
+  close: () => void
+}
+
+/**
+ * The scroll/resize handler an anchored popover should register, instead of
+ * `close`.
+ *
+ * Registering it for `scroll` still needs capture (`true`): the scroll may come
+ * from any ancestor container, and scroll events do not bubble to `window`.
+ */
+export function createAnchorReflow(options: AnchorReflowOptions): () => void {
+  return () => {
+    const el = options.anchor()
+    if (!el) {
+      options.close()
+      return
+    }
+    const rect = el.getBoundingClientRect()
+    const gone =
+      rect.bottom < -OFF_SCREEN_SLACK ||
+      rect.top > window.innerHeight + OFF_SCREEN_SLACK ||
+      rect.right < 0 ||
+      rect.left > window.innerWidth
+    if (gone) options.close()
+    else options.place()
+  }
+}

package/src/ui/DateField.tsx

@@ -9,6 +9,7 @@ import type { JSX } from 'solid-js'
 import { Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
 import { Portal } from 'solid-js/web'
 
+import { createAnchorReflow } from '../lib/anchored'
 import { cn } from '../lib/cn'
 import { CalendarCore } from './internal/CalendarCore'
 
@@ -67,8 +68,8 @@ interface DateFieldProps {
 
 /**
  * Compact hand-rolled month-grid date picker (no Kobalte primitive covers this yet).
- * Trigger button opens a portaled popover calendar; closes on outside click, Escape,
- * scroll, or resize. Speaks plain `YYYY-MM-DD` strings, never `Date`/`toISOString`.
+ * Trigger button opens a portaled popover calendar; closes on outside click or Escape,
+ * and follows the trigger when the page scrolls or resizes. Speaks plain `YYYY-MM-DD` strings, never `Date`/`toISOString`.
  *
  * @example
  * ```tsx
@@ -115,17 +116,25 @@ export function DateField(props: DateFieldProps): JSX.Element {
 
   // Wire/tear-down the global listeners strictly around the open state. Scroll/
   // resize close the popover (its fixed position would otherwise drift).
+  // Follow the trigger rather than closing. The panel is `fixed` at the
+  // trigger's rect, so a scroll makes that rect stale — it does not make the
+  // panel unwanted. Closing on any captured scroll made this unusable on a
+  // scrolling page: clicking a trigger below the fold scrolls it into view,
+  // and that scroll arrived right after the panel opened and shut it in the
+  // same gesture. See `createAnchorReflow`.
+  const reflow = createAnchorReflow({ anchor: () => btnRef, place, close })
+
   const toggleListeners = (isOpen: boolean) => {
     if (isOpen) {
       document.addEventListener('mousedown', onDocPointer)
       document.addEventListener('keydown', onKey)
-      window.addEventListener('scroll', close, true)
-      window.addEventListener('resize', close)
+      window.addEventListener('scroll', reflow, true)
+      window.addEventListener('resize', reflow)
     } else {
       document.removeEventListener('mousedown', onDocPointer)
       document.removeEventListener('keydown', onKey)
-      window.removeEventListener('scroll', close, true)
-      window.removeEventListener('resize', close)
+      window.removeEventListener('scroll', reflow, true)
+      window.removeEventListener('resize', reflow)
     }
   }
   // Reactively attach when open flips; always clean up on unmount.

package/src/ui/DateRangePicker.tsx

@@ -9,6 +9,7 @@ import type { JSX } from 'solid-js'
 import { createEffect, createMemo, createSignal, onCleanup, Show } from 'solid-js'
 import { Portal } from 'solid-js/web'
 
+import { createAnchorReflow } from '../lib/anchored'
 import { cn } from '../lib/cn'
 import { CalendarCore } from './internal/CalendarCore'
 
@@ -116,17 +117,25 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
 
   // Wire/tear-down the global listeners strictly around the open state. Scroll/
   // resize close the popover (its fixed position would otherwise drift).
+  // Follow the trigger rather than closing. The panel is `fixed` at the
+  // trigger's rect, so a scroll makes that rect stale — it does not make the
+  // panel unwanted. Closing on any captured scroll made this unusable on a
+  // scrolling page: clicking a trigger below the fold scrolls it into view,
+  // and that scroll arrived right after the panel opened and shut it in the
+  // same gesture. See `createAnchorReflow`.
+  const reflow = createAnchorReflow({ anchor: () => btnRef, place, close })
+
   const toggleListeners = (isOpen: boolean) => {
     if (isOpen) {
       document.addEventListener('mousedown', onDocPointer)
       document.addEventListener('keydown', onKey)
-      window.addEventListener('scroll', close, true)
-      window.addEventListener('resize', close)
+      window.addEventListener('scroll', reflow, true)
+      window.addEventListener('resize', reflow)
     } else {
       document.removeEventListener('mousedown', onDocPointer)
       document.removeEventListener('keydown', onKey)
-      window.removeEventListener('scroll', close, true)
-      window.removeEventListener('resize', close)
+      window.removeEventListener('scroll', reflow, true)
+      window.removeEventListener('resize', reflow)
     }
   }
   // Reactively attach when open flips; always clean up on unmount.

package/src/ui/MultiSelect.tsx

@@ -8,6 +8,7 @@ import type { JSX } from 'solid-js'
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
 import { Portal } from 'solid-js/web'
 
+import { createAnchorReflow } from '../lib/anchored'
 import { cn } from '../lib/cn'
 
 /** One selectable option: a stable `value` and its display `label`. */
@@ -89,17 +90,25 @@ export function MultiSelect(props: MultiSelectProps): JSX.Element {
 
   // Wire/tear-down the global listeners strictly around the open state. Scroll/
   // resize close the popover (its fixed position would otherwise drift).
+  // Follow the trigger rather than closing. The panel is `fixed` at the
+  // trigger's rect, so a scroll makes that rect stale — it does not make the
+  // panel unwanted. Closing on any captured scroll made this unusable on a
+  // scrolling page: clicking a trigger below the fold scrolls it into view,
+  // and that scroll arrived right after the panel opened and shut it in the
+  // same gesture. See `createAnchorReflow`.
+  const reflow = createAnchorReflow({ anchor: () => btnRef, place, close })
+
   const toggleListeners = (isOpen: boolean) => {
     if (isOpen) {
       document.addEventListener('mousedown', onDocPointer)
       document.addEventListener('keydown', onKey)
-      window.addEventListener('scroll', close, true)
-      window.addEventListener('resize', close)
+      window.addEventListener('scroll', reflow, true)
+      window.addEventListener('resize', reflow)
     } else {
       document.removeEventListener('mousedown', onDocPointer)
       document.removeEventListener('keydown', onKey)
-      window.removeEventListener('scroll', close, true)
-      window.removeEventListener('resize', close)
+      window.removeEventListener('scroll', reflow, true)
+      window.removeEventListener('resize', reflow)
     }
   }
   // Reactively attach when open flips; always clean up on unmount.

package/src/ui/TimeField.tsx

@@ -8,6 +8,7 @@ import type { JSX } from 'solid-js'
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
 import { Portal } from 'solid-js/web'
 
+import { createAnchorReflow } from '../lib/anchored'
 import { cn } from '../lib/cn'
 
 type AmPm = 'AM' | 'PM'
@@ -146,17 +147,25 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
 
   // Wire/tear-down the global listeners strictly around the open state. Scroll/
   // resize close the popover (its fixed position would otherwise drift).
+  // Follow the trigger rather than closing. The panel is `fixed` at the
+  // trigger's rect, so a scroll makes that rect stale — it does not make the
+  // panel unwanted. Closing on any captured scroll made this unusable on a
+  // scrolling page: clicking a trigger below the fold scrolls it into view,
+  // and that scroll arrived right after the panel opened and shut it in the
+  // same gesture. See `createAnchorReflow`.
+  const reflow = createAnchorReflow({ anchor: () => btnRef, place, close })
+
   const toggleListeners = (isOpen: boolean) => {
     if (isOpen) {
       document.addEventListener('mousedown', onDocPointer)
       document.addEventListener('keydown', onKey)
-      window.addEventListener('scroll', close, true)
-      window.addEventListener('resize', close)
+      window.addEventListener('scroll', reflow, true)
+      window.addEventListener('resize', reflow)
     } else {
       document.removeEventListener('mousedown', onDocPointer)
       document.removeEventListener('keydown', onKey)
-      window.removeEventListener('scroll', close, true)
-      window.removeEventListener('resize', close)
+      window.removeEventListener('scroll', reflow, true)
+      window.removeEventListener('resize', reflow)
     }
   }
   // Reactively attach when open flips; always clean up on unmount.