@a4ui/core 0.36.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/dist/ui/LocationPicker.d.ts

@@ -18,6 +18,26 @@ export interface LocationPickerProps {
     labelPlaceholder?: string;
     /** Accessible name for the "use my location" button. @default 'Use my location' */
     geolocateLabel?: string;
+    /**
+     * Map zoom. Also acts as a zoom trigger the same way `center` does on
+     * `InteractiveMap` — passing a new value zooms there.
+     *
+     * Exposed because 12 (a whole city) is the wrong scale for confirming a
+     * pin: a consumer that wants to zoom in after a successful geolocation had
+     * no way to do it. @default 12
+     */
+    zoom?: number;
+    /**
+     * Fires ONLY when the "use my location" button succeeds, in addition to
+     * `onChange`.
+     *
+     * `onChange` alone cannot tell a map click from a geolocation, so a
+     * consumer had no way to react to one and not the other. Recentring on a
+     * user already looking at their own city moves the map barely at all and
+     * leaves the pin dead centre, which reads as nothing having happened —
+     * this is the hook for saying otherwise.
+     */
+    onGeolocate?: (v: LocationValue) => void;
     class?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.36.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.36.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/LocationPicker.tsx

@@ -29,10 +29,30 @@ export interface LocationPickerProps {
   labelPlaceholder?: string
   /** Accessible name for the "use my location" button. @default 'Use my location' */
   geolocateLabel?: string
+  /**
+   * Map zoom. Also acts as a zoom trigger the same way `center` does on
+   * `InteractiveMap` — passing a new value zooms there.
+   *
+   * Exposed because 12 (a whole city) is the wrong scale for confirming a
+   * pin: a consumer that wants to zoom in after a successful geolocation had
+   * no way to do it. @default 12
+   */
+  zoom?: number
+  /**
+   * Fires ONLY when the "use my location" button succeeds, in addition to
+   * `onChange`.
+   *
+   * `onChange` alone cannot tell a map click from a geolocation, so a
+   * consumer had no way to react to one and not the other. Recentring on a
+   * user already looking at their own city moves the map barely at all and
+   * leaves the pin dead centre, which reads as nothing having happened —
+   * this is the hook for saying otherwise.
+   */
+  onGeolocate?: (v: LocationValue) => void
   class?: string
 }
 
-const MAP_ZOOM = 12
+const DEFAULT_MAP_ZOOM = 12
 const MAP_HEIGHT = 240
 
 /**
@@ -69,7 +89,15 @@ export function LocationPicker(props: LocationPickerProps): JSX.Element {
   const useMyLocation = (): void => {
     if (typeof navigator === 'undefined' || !navigator.geolocation) return
     navigator.geolocation.getCurrentPosition(
-      (position) => setCoord({ lat: position.coords.latitude, lng: position.coords.longitude }),
+      (position) => {
+        const next: LocationValue = {
+          ...current(),
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+        }
+        emit(next)
+        props.onGeolocate?.(next)
+      },
       (error) => console.error('LocationPicker: geolocation failed', error),
     )
   }
@@ -99,7 +127,7 @@ export function LocationPicker(props: LocationPickerProps): JSX.Element {
       </div>
       <InteractiveMap
         center={{ lat: current().lat, lng: current().lng }}
-        zoom={MAP_ZOOM}
+        zoom={props.zoom ?? DEFAULT_MAP_ZOOM}
         height={MAP_HEIGHT}
         markers={pin()}
         onClick={setCoord}

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.