@svgrid/grid 2.2.0 → 2.2.2

package/src/createPopoverSelect.svelte.ts

@@ -1,206 +1,206 @@
-/**
- * createPopoverSelect - the shared HEADLESS engine behind the kit's dropdown
- * selects (SvMultiSelect, SvTreeSelect, SvGridSelect and any future one). It
- * owns the parts every anchored-panel select repeats: open/close state, the
- * `anchoredRect` positioning (reposition on scroll/resize), outside/Escape
- * dismissal via the shared layer stack, a roving `active` index over the visible
- * items, the WAI-ARIA combobox wiring (`aria-expanded` / `aria-controls` /
- * `aria-activedescendant` + stable option ids), and focus management (focus
- * moves into the panel on open, back to the trigger on close).
- *
- * The component owns its own `bind:this` refs and item rendering; it passes the
- * refs in as getters and spreads the returned prop-getters onto its trigger,
- * panel and items. Runes-based, like `createListbox`.
- */
-import { anchoredRect, type AnchoredRect } from './popover'
-import { createDismissableLayer } from './a11y/dismissable'
-import { enabledIndices as enabledIndicesOf, wrapMove } from './list-nav'
-
-let uidSeq = 0
-
-export type PopoverSelectConfig = {
-  /** Number of currently-visible/navigable items (post-filter). */
-  itemCount: () => number
-  /** Whether item `i` is disabled (skipped by roving, not selectable). */
-  disabled?: (index: number) => boolean
-  /** Commit the item at `index` (Enter or a click the component forwards). */
-  onSelect: (index: number) => void
-  /** Notified whenever the open state changes. */
-  onOpenChange?: (open: boolean) => void
-  /** The trigger element (component owns `bind:this`, passes a getter). */
-  getTrigger: () => HTMLElement | null
-  /** The panel element. */
-  getPanel: () => HTMLElement | null
-  /** Element focused when the panel opens (e.g. a search input). Defaults to the
-   *  panel itself. Its id-holder also carries `aria-activedescendant`. */
-  getInitialFocus?: () => HTMLElement | null
-  /** Estimated panel height, for the flip-up decision. Default 280. */
-  estimatedHeight?: () => number
-  /** Minimum panel width. Default 200. */
-  minWidth?: () => number
-  /** Close after a selection (single-select). Default true. */
-  closeOnSelect?: () => boolean
-  /** Active index to start on when opening (e.g. the selected row). Default 0. */
-  initialActive?: () => number
-  /** Handle a key the core doesn't (e.g. tree ArrowLeft/Right). Return true if
-   *  handled to stop the core's default handling. */
-  onExtraKey?: (event: KeyboardEvent, active: number) => boolean
-  idPrefix?: string
-}
-
-export function createPopoverSelect(config: PopoverSelectConfig) {
-  const id = `${config.idPrefix ?? 'sv-pop'}-${uidSeq++}`
-  const panelId = `${id}-panel`
-  const optionId = (i: number) => `${id}-opt-${i}`
-
-  let open = $state(false)
-  let active = $state(0)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
-
-  const count = () => config.itemCount()
-  const isDisabled = (i: number) => config.disabled?.(i) ?? false
-
-  function enabledIndices(): number[] {
-    return enabledIndicesOf(count(), isDisabled)
-  }
-  function clampActive(i: number): number {
-    const n = count()
-    return n <= 0 ? 0 : Math.max(0, Math.min(i, n - 1))
-  }
-
-  function setOpen(v: boolean) {
-    if (v === open) return
-    open = v
-    config.onOpenChange?.(v)
-  }
-  function openPanel() {
-    active = clampActive(config.initialActive?.() ?? 0)
-    setOpen(true)
-  }
-  function closePanel() {
-    setOpen(false)
-    config.getTrigger()?.focus()
-  }
-  function toggle() {
-    open ? setOpen(false) : openPanel()
-  }
-
-  function move(delta: number) {
-    const next = wrapMove(enabledIndices(), active, delta)
-    if (next >= 0) active = next
-  }
-  function first() { active = enabledIndices()[0] ?? 0 }
-  function last() { active = enabledIndices().at(-1) ?? 0 }
-  function selectActive() {
-    if (count() === 0 || isDisabled(active)) return
-    config.onSelect(active)
-    if (config.closeOnSelect?.() ?? true) closePanel()
-  }
-
-  function updatePos() {
-    const t = config.getTrigger()
-    if (!t) return
-    rect = anchoredRect(t.getBoundingClientRect(), {
-      estimatedHeight: config.estimatedHeight?.() ?? 280,
-      minWidth: config.minWidth?.() ?? 200,
-    })
-  }
-
-  // While open: position, focus into the panel, reposition on scroll/resize, and
-  // register a dismissable layer (Escape / outside-click, top-of-stack first).
-  $effect(() => {
-    if (!open) return
-    updatePos()
-    const initial = config.getInitialFocus?.() ?? config.getPanel()
-    queueMicrotask(() => initial?.focus())
-    const rp = () => updatePos()
-    window.addEventListener('scroll', rp, true)
-    window.addEventListener('resize', rp)
-    const layer = createDismissableLayer({
-      element: () => [config.getTrigger(), config.getPanel()],
-      onDismiss: () => setOpen(false),
-    })
-    layer.activate()
-    return () => {
-      window.removeEventListener('scroll', rp, true)
-      window.removeEventListener('resize', rp)
-      layer.release()
-    }
-  })
-
-  function onTriggerKeydown(e: KeyboardEvent) {
-    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault()
-      openPanel()
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      openPanel()
-      last()
-    } else if (e.key === 'Escape') {
-      setOpen(false)
-    }
-  }
-  function onPanelKeydown(e: KeyboardEvent) {
-    if (config.onExtraKey?.(e, active)) return
-    switch (e.key) {
-      case 'ArrowDown': e.preventDefault(); move(1); break
-      case 'ArrowUp': e.preventDefault(); move(-1); break
-      case 'Home': e.preventDefault(); first(); break
-      case 'End': e.preventDefault(); last(); break
-      case 'Enter': e.preventDefault(); selectActive(); break
-      case 'Escape': e.preventDefault(); closePanel(); break
-      case 'Tab': setOpen(false); break
-    }
-  }
-
-  /** The current active-descendant id (for the focused element), or undefined. */
-  const activeDescendant = () => (open && count() > 0 ? optionId(active) : undefined)
-
-  return {
-    get open() { return open },
-    set open(v: boolean) { setOpen(v) },
-    get active() { return active },
-    set active(i: number) { active = clampActive(i) },
-    get rect() { return rect },
-    /** Stable id of the panel element (for aria-controls / labelling). */
-    panelId,
-    /** Stable id of the option at `i` (for aria-activedescendant + item id). */
-    optionId,
-    activeDescendant,
-    openPanel,
-    closePanel,
-    toggle,
-    move,
-    first,
-    last,
-    selectActive,
-    updatePos,
-    onPanelKeydown,
-    /** True when item `i` is the roving-active one. */
-    isActive: (i: number) => i === active,
-    /** Spread onto the trigger button. Pass the ARIA popup type the panel
-     *  exposes (mirrors `focusOwnerProps(role)`); defaults to 'listbox' for
-     *  the classic select panels. */
-    triggerProps: (haspopup: 'listbox' | 'tree' | 'grid' = 'listbox') => ({
-      'aria-haspopup': haspopup,
-      'aria-expanded': open,
-      'aria-controls': open ? panelId : undefined,
-      onkeydown: onTriggerKeydown,
-    }),
-    /** Attributes for the element that OWNS focus + activedescendant (the panel,
-     *  or a search input). Pass the ARIA role the panel should expose. */
-    focusOwnerProps: (role: 'listbox' | 'tree' | 'grid' = 'listbox') => ({
-      role,
-      'aria-activedescendant': activeDescendant(),
-      onkeydown: onPanelKeydown,
-    }),
-    /** Spread onto the item element at `i`. */
-    itemProps: (i: number) => ({
-      id: optionId(i),
-      'data-active': i === active ? '' : undefined,
-      onpointermove: () => { if (!isDisabled(i)) active = i },
-    }),
-  }
-}
-
-export type PopoverSelect = ReturnType<typeof createPopoverSelect>
+/**
+ * createPopoverSelect - the shared HEADLESS engine behind the kit's dropdown
+ * selects (SvMultiSelect, SvTreeSelect, SvGridSelect and any future one). It
+ * owns the parts every anchored-panel select repeats: open/close state, the
+ * `anchoredRect` positioning (reposition on scroll/resize), outside/Escape
+ * dismissal via the shared layer stack, a roving `active` index over the visible
+ * items, the WAI-ARIA combobox wiring (`aria-expanded` / `aria-controls` /
+ * `aria-activedescendant` + stable option ids), and focus management (focus
+ * moves into the panel on open, back to the trigger on close).
+ *
+ * The component owns its own `bind:this` refs and item rendering; it passes the
+ * refs in as getters and spreads the returned prop-getters onto its trigger,
+ * panel and items. Runes-based, like `createListbox`.
+ */
+import { anchoredRect, type AnchoredRect } from './popover'
+import { createDismissableLayer } from './a11y/dismissable'
+import { enabledIndices as enabledIndicesOf, wrapMove } from './list-nav'
+
+let uidSeq = 0
+
+export type PopoverSelectConfig = {
+  /** Number of currently-visible/navigable items (post-filter). */
+  itemCount: () => number
+  /** Whether item `i` is disabled (skipped by roving, not selectable). */
+  disabled?: (index: number) => boolean
+  /** Commit the item at `index` (Enter or a click the component forwards). */
+  onSelect: (index: number) => void
+  /** Notified whenever the open state changes. */
+  onOpenChange?: (open: boolean) => void
+  /** The trigger element (component owns `bind:this`, passes a getter). */
+  getTrigger: () => HTMLElement | null
+  /** The panel element. */
+  getPanel: () => HTMLElement | null
+  /** Element focused when the panel opens (e.g. a search input). Defaults to the
+   *  panel itself. Its id-holder also carries `aria-activedescendant`. */
+  getInitialFocus?: () => HTMLElement | null
+  /** Estimated panel height, for the flip-up decision. Default 280. */
+  estimatedHeight?: () => number
+  /** Minimum panel width. Default 200. */
+  minWidth?: () => number
+  /** Close after a selection (single-select). Default true. */
+  closeOnSelect?: () => boolean
+  /** Active index to start on when opening (e.g. the selected row). Default 0. */
+  initialActive?: () => number
+  /** Handle a key the core doesn't (e.g. tree ArrowLeft/Right). Return true if
+   *  handled to stop the core's default handling. */
+  onExtraKey?: (event: KeyboardEvent, active: number) => boolean
+  idPrefix?: string
+}
+
+export function createPopoverSelect(config: PopoverSelectConfig) {
+  const id = `${config.idPrefix ?? 'sv-pop'}-${uidSeq++}`
+  const panelId = `${id}-panel`
+  const optionId = (i: number) => `${id}-opt-${i}`
+
+  let open = $state(false)
+  let active = $state(0)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+
+  const count = () => config.itemCount()
+  const isDisabled = (i: number) => config.disabled?.(i) ?? false
+
+  function enabledIndices(): number[] {
+    return enabledIndicesOf(count(), isDisabled)
+  }
+  function clampActive(i: number): number {
+    const n = count()
+    return n <= 0 ? 0 : Math.max(0, Math.min(i, n - 1))
+  }
+
+  function setOpen(v: boolean) {
+    if (v === open) return
+    open = v
+    config.onOpenChange?.(v)
+  }
+  function openPanel() {
+    active = clampActive(config.initialActive?.() ?? 0)
+    setOpen(true)
+  }
+  function closePanel() {
+    setOpen(false)
+    config.getTrigger()?.focus()
+  }
+  function toggle() {
+    open ? setOpen(false) : openPanel()
+  }
+
+  function move(delta: number) {
+    const next = wrapMove(enabledIndices(), active, delta)
+    if (next >= 0) active = next
+  }
+  function first() { active = enabledIndices()[0] ?? 0 }
+  function last() { active = enabledIndices().at(-1) ?? 0 }
+  function selectActive() {
+    if (count() === 0 || isDisabled(active)) return
+    config.onSelect(active)
+    if (config.closeOnSelect?.() ?? true) closePanel()
+  }
+
+  function updatePos() {
+    const t = config.getTrigger()
+    if (!t) return
+    rect = anchoredRect(t.getBoundingClientRect(), {
+      estimatedHeight: config.estimatedHeight?.() ?? 280,
+      minWidth: config.minWidth?.() ?? 200,
+    })
+  }
+
+  // While open: position, focus into the panel, reposition on scroll/resize, and
+  // register a dismissable layer (Escape / outside-click, top-of-stack first).
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    const initial = config.getInitialFocus?.() ?? config.getPanel()
+    queueMicrotask(() => initial?.focus())
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    const layer = createDismissableLayer({
+      element: () => [config.getTrigger(), config.getPanel()],
+      onDismiss: () => setOpen(false),
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+    }
+  })
+
+  function onTriggerKeydown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      openPanel()
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      openPanel()
+      last()
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+    }
+  }
+  function onPanelKeydown(e: KeyboardEvent) {
+    if (config.onExtraKey?.(e, active)) return
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); move(1); break
+      case 'ArrowUp': e.preventDefault(); move(-1); break
+      case 'Home': e.preventDefault(); first(); break
+      case 'End': e.preventDefault(); last(); break
+      case 'Enter': e.preventDefault(); selectActive(); break
+      case 'Escape': e.preventDefault(); closePanel(); break
+      case 'Tab': setOpen(false); break
+    }
+  }
+
+  /** The current active-descendant id (for the focused element), or undefined. */
+  const activeDescendant = () => (open && count() > 0 ? optionId(active) : undefined)
+
+  return {
+    get open() { return open },
+    set open(v: boolean) { setOpen(v) },
+    get active() { return active },
+    set active(i: number) { active = clampActive(i) },
+    get rect() { return rect },
+    /** Stable id of the panel element (for aria-controls / labelling). */
+    panelId,
+    /** Stable id of the option at `i` (for aria-activedescendant + item id). */
+    optionId,
+    activeDescendant,
+    openPanel,
+    closePanel,
+    toggle,
+    move,
+    first,
+    last,
+    selectActive,
+    updatePos,
+    onPanelKeydown,
+    /** True when item `i` is the roving-active one. */
+    isActive: (i: number) => i === active,
+    /** Spread onto the trigger button. Pass the ARIA popup type the panel
+     *  exposes (mirrors `focusOwnerProps(role)`); defaults to 'listbox' for
+     *  the classic select panels. */
+    triggerProps: (haspopup: 'listbox' | 'tree' | 'grid' = 'listbox') => ({
+      'aria-haspopup': haspopup,
+      'aria-expanded': open,
+      'aria-controls': open ? panelId : undefined,
+      onkeydown: onTriggerKeydown,
+    }),
+    /** Attributes for the element that OWNS focus + activedescendant (the panel,
+     *  or a search input). Pass the ARIA role the panel should expose. */
+    focusOwnerProps: (role: 'listbox' | 'tree' | 'grid' = 'listbox') => ({
+      role,
+      'aria-activedescendant': activeDescendant(),
+      onkeydown: onPanelKeydown,
+    }),
+    /** Spread onto the item element at `i`. */
+    itemProps: (i: number) => ({
+      id: optionId(i),
+      'data-active': i === active ? '' : undefined,
+      onpointermove: () => { if (!isDisabled(i)) active = i },
+    }),
+  }
+}
+
+export type PopoverSelect = ReturnType<typeof createPopoverSelect>