@leavepulse/ui 0.94.1 → 0.95.1

package/src/components/LpTable.vue

@@ -39,6 +39,7 @@ import {
   orderPinned,
   pinOffsets,
   presetHidden,
+  rowChanges,
   rowWindow,
   sortByKeys,
   type ColumnPin,
@@ -48,6 +49,7 @@ import {
 import { devWarn } from "../composables/devWarn"
 import { startPointerDrag } from "../composables/pointerDrag"
 import { isHTMLElement, nodeWindow } from "../composables/useView"
+import { prefersReducedMotion } from "../composables/easing"
 import LpButton from "./LpButton.vue"
 import { downloadFile, fileStem, toCsv, type CsvOptions } from "./exportData"
 import {
@@ -1708,6 +1710,47 @@ const roving = useRovingFocus(rovingItems, {
   },
 })
 
+/*
+ * A change that brings in, takes out or reorders many rows at once — a filter
+ * lifted from ten rows back to sixty, a page of new rows, a sort of a long
+ * list — is not animated row by row. Each row eased on its own reads as noise
+ * at that size, and following them is costly: TransitionGroup measures every
+ * row before and after (a forced layout of all the new rows inside the click),
+ * then sets an enter or move transition on each. The rows land at once and the
+ * body eases in as one instead, a single opacity animation on the compositor.
+ * A few rows leaving, arriving or moving (a filter that hides some, a row
+ * deleted) keep their own motion, which is what lets the eye follow them.
+ *
+ * Counted by rowChanges: the rows that arrive, leave or change their order;
+ * the ones that only slide aside to close a gap do not count.
+ */
+const ROW_MOTION_LIMIT = 12
+const rowsEl = shallowRef<HTMLElement | null>(null)
+function setRowsEl(el: unknown) {
+  const node = (el as { $el?: HTMLElement } | null)?.$el ?? null
+  rowsEl.value = node
+  roving.setContainer(node)
+}
+const motionIds = computed(() => (headerless.value ? allEntries.value : viewEntries.value).map((entry) => entry.id))
+/* The rows on screen, written after each render: what the next change is measured against. */
+let shownIds: readonly string[] = []
+const bigSwap = computed(() => rowChanges(shownIds, motionIds.value) > ROW_MOTION_LIMIT)
+let settleFlip = false
+watch(
+  motionIds,
+  (ids) => {
+    const eased = bigSwap.value && shownIds.length > 0 && ids.length > 0
+    shownIds = ids
+    const body = rowsEl.value
+    if (!eased || !body || props.virtualRowHeight || prefersReducedMotion(nodeWindow(body))) return
+    // Two names for one animation: switching between them restarts it without
+    // the reflow that taking a class off and putting it back would need.
+    settleFlip = !settleFlip
+    body.dataset.lpSettle = settleFlip ? "a" : "b"
+  },
+  { flush: "post", immediate: true },
+)
+
 function onRowKeydown(event: KeyboardEvent) {
   // Space ticks rather than activates when the table is selectable — the
   // standard split for a multi-select list.
@@ -2088,10 +2131,11 @@ usePaletteCommands(() => {
       <TransitionGroup
         tag="tbody"
         name="lp-row"
-        :css="animating && !virtualRowHeight"
+        :css="animating && !virtualRowHeight && !bigSwap"
+        :move-class="bigSwap ? 'lp-row-still' : undefined"
         :class="busy && displayRows.length ? 'opacity-60 transition-opacity' : 'transition-opacity'"
         :aria-busy="busy || undefined"
-        :ref="(el: unknown) => roving.setContainer((el as { $el?: HTMLElement })?.$el ?? null)"
+        :ref="setRowsEl"
       >
         <!-- The first page on its way: rows in the shape of the columns rather
              than a spinner in an empty box, so the table already has its height
@@ -2252,7 +2296,8 @@ usePaletteCommands(() => {
       :key="activeLayout"
       tag="div"
       name="lp-row"
-      :css="animating"
+      :css="animating && !bigSwap"
+      :move-class="bigSwap ? 'lp-row-still' : undefined"
       v-bind="scrollAttrs"
       class="min-h-0 transition-opacity"
       :class="[
@@ -2263,7 +2308,7 @@ usePaletteCommands(() => {
       ]"
       :style="activeLayout === 'cards' ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(${cardWidth}, 100%), 1fr))` } : undefined"
       :aria-busy="busy || undefined"
-      :ref="(el: unknown) => roving.setContainer((el as { $el?: HTMLElement })?.$el ?? null)"
+      :ref="setRowsEl"
     >
       <template v-if="displayRows.length === 0 && busy">
         <div
@@ -2501,6 +2546,30 @@ usePaletteCommands(() => {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
 
+/*
+ * A change too big to animate row by row (see ROW_MOTION_LIMIT): the rows
+ * land at once and the body comes up from half-faded as one. `lp-row-still`
+ * is the move class then, and has no transition on purpose: TransitionGroup
+ * checks the move class for one before it measures the rows, and skips the
+ * measuring when there is none.
+ */
+[data-lp-settle="a"] {
+  animation: lp-rows-settle-a var(--duration-fast) var(--ease-emphasized);
+}
+[data-lp-settle="b"] {
+  animation: lp-rows-settle-b var(--duration-fast) var(--ease-emphasized);
+}
+@keyframes lp-rows-settle-a {
+  from {
+    opacity: 0.4;
+  }
+}
+@keyframes lp-rows-settle-b {
+  from {
+    opacity: 0.4;
+  }
+}
+
 .lp-row-enter-from,
 .lp-row-leave-to {
   opacity: 0;
@@ -2624,5 +2693,8 @@ tr:hover .lp-tick-cue,
   .lp-tick {
     transition: none;
   }
+  [data-lp-settle] {
+    animation: none;
+  }
 }
 </style>

package/src/components/LpTooltip.vue

@@ -23,6 +23,15 @@
  * alone could not guarantee. reka opens the tip on keyboard focus as well as
  * hover and closes it on Escape, satisfying WCAG 1.4.13.
  *
+ * Until it is first wanted only the trigger is rendered: the reka tooltip (its
+ * provider, root, popper and portal) is stood up on the first pointer over the
+ * trigger, the first focus on it or a touch hold, and stays from then on. A
+ * table row carries two or three tips, nearly all of them never hovered, and
+ * fifty rows of full tooltips were most of the cost of showing the rows. The
+ * trigger's element is the same one before and after, so a ref to it, its
+ * focus and its hover survive the switch; the label is on it from the start,
+ * and the description arrives with the tip, as it always did.
+ *
  * Do NOT wrap the `#trigger` of LpDropdownMenu, LpPopover or LpContextMenu:
  * those bind their handlers to the slot's direct child, so a wrapper swallows
  * them and the control stops opening. Put `aria-label` on the trigger instead.
@@ -30,13 +39,28 @@
 import { clamp } from "../composables/clamp"
 import {
   injectTooltipProviderContext,
+  injectTooltipRootContext,
+  Slot,
   TooltipContent,
   TooltipPortal,
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger,
 } from "reka-ui"
-import { computed, mergeProps, onBeforeUnmount, ref, useAttrs, watch, type FunctionalComponent } from "vue"
+import {
+  computed,
+  defineComponent,
+  mergeProps,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  shallowRef,
+  useAttrs,
+  watch,
+  type ComponentPublicInstance,
+  type FunctionalComponent,
+} from "vue"
 import {
   springSettled,
   springStep,
@@ -263,6 +287,7 @@ const hold = useTouchHold({
   enabled: () => props.touch === "hold" && !props.followCursor && !props.disabled,
   delay: () => HOLD_MS,
   onHold: () => {
+    armed.value = true
     heldOpen.value = true
     wanted.value = true
     open.value = true
@@ -354,11 +379,132 @@ const guardOutside = useOutsideGuard()
 defineOptions({ inheritAttrs: false })
 // The caller's own listeners on the trigger run beside the hold's, not instead of them.
 const attrs = useAttrs()
-const triggerAttrs = computed(() => mergeProps(attrs, hold.handlers))
+
+/*
+ * The tip is mounted on demand (see the header). The trigger is drawn by this
+ * component itself rather than by reka's TooltipTrigger, so it is the same
+ * element before and after: TooltipTrigger needs the root around it, and
+ * putting the root in later would have rebuilt the trigger under the pointer
+ * or the focus. What TooltipTrigger does with its events is done here instead,
+ * through the root's own context once it exists; reka's TooltipTrigger is
+ * still mounted with the tip, as the anchor it is placed against.
+ */
+const armed = ref(false)
+type RootContext = ReturnType<typeof injectTooltipRootContext>
+type ProviderContext = ReturnType<typeof injectTooltipProviderContext>
+const root = shallowRef<RootContext | null>(null)
+let provider: ProviderContext | null = null
+
+const triggerRef = ref<ComponentPublicInstance | null>(null)
+const triggerEl = shallowRef<HTMLElement | undefined>()
+function readTrigger() {
+  const el = triggerRef.value?.$el as Node | null | undefined
+  const next = el && el.nodeType === 1 ? (el as HTMLElement) : undefined
+  if (next === triggerEl.value) return
+  triggerEl.value = next
+  root.value?.onTriggerChange(next)
+}
+onMounted(readTrigger)
+onUpdated(readTrigger)
+
+/* What happened before the tip existed, replayed once it does. */
+let hovering = false
+let focusedBy: HTMLElement | null = null
+let pointerDown = false
+let pointerMoveOpened = false
+
+const live = () => (root.value && !root.value.disabled.value ? root.value : null)
+
+function enter() {
+  const tip = live()
+  if (!tip || pointerMoveOpened || provider?.isPointerInTransitRef.value) return
+  tip.onTriggerEnter()
+  pointerMoveOpened = true
+}
+
+function focusOpen(target: HTMLElement) {
+  const tip = live()
+  if (!tip || pointerDown) return
+  if (tip.ignoreNonKeyboardFocus.value && !target.matches?.(":focus-visible")) return
+  tip.onOpen()
+}
+
+const triggerEvents = {
+  onPointerenter(event: PointerEvent) {
+    if (event.pointerType === "touch") return
+    hovering = true
+    armed.value = true
+  },
+  onPointermove(event: PointerEvent) {
+    onPointerMove(event)
+    if (event.pointerType === "touch") return
+    hovering = true
+    armed.value = true
+    enter()
+  },
+  onPointerleave() {
+    hovering = false
+    const tip = live()
+    if (!tip) return
+    tip.onTriggerLeave()
+    pointerMoveOpened = false
+  },
+  onPointerdown(event: PointerEvent) {
+    const tip = live()
+    if (tip?.open.value && !tip.disableClosingTrigger.value) tip.onClose()
+    pointerDown = true
+    const doc = (event.currentTarget as Node | null)?.ownerDocument ?? document
+    doc.addEventListener("pointerup", () => setTimeout(() => (pointerDown = false), 1), { once: true })
+  },
+  onFocus(event: FocusEvent) {
+    focusedBy = event.currentTarget as HTMLElement
+    armed.value = true
+    focusOpen(focusedBy)
+  },
+  onBlur() {
+    focusedBy = null
+    live()?.onClose()
+  },
+  onClick() {
+    const tip = live()
+    if (tip && !tip.disableClosingTrigger.value) tip.onClose()
+  },
+}
+
+/* Hands the root's context out and replays what the tip was armed by. */
+const RootBridge = defineComponent({
+  setup() {
+    root.value = injectTooltipRootContext()
+    provider = injectTooltipProviderContext()
+    onMounted(() => {
+      // After reka's TooltipTrigger, which reports the element it renders (none).
+      root.value?.onTriggerChange(triggerEl.value)
+      if (hovering) enter()
+      if (focusedBy && focusedBy.ownerDocument.activeElement === focusedBy) focusOpen(focusedBy)
+    })
+    onBeforeUnmount(() => {
+      root.value = null
+      provider = null
+    })
+    return () => null
+  },
+})
+
+const triggerProps = computed(() =>
+  mergeProps(attrs, hold.handlers, triggerEvents, {
+    "aria-label": props.label ? props.content : undefined,
+    "aria-describedby": root.value?.open.value ? root.value.contentId : undefined,
+    "data-state": root.value?.stateAttribute.value ?? "closed",
+    "data-grace-area-trigger": "",
+    class: props.touch === "hold" && !props.followCursor ? "[-webkit-touch-callout:none]" : undefined,
+  }),
+)
 </script>
 
 <template>
-  <component :is="shared ? PassThrough : TooltipProvider" v-bind="shared ? {} : { delayDuration: delay ?? 200 }">
+  <!-- The caller's own element, with the trigger's props merged onto it. -->
+  <Slot ref="triggerRef" v-bind="triggerProps"><slot /></Slot>
+  <component v-if="armed" :is="shared ? PassThrough : TooltipProvider" v-bind="shared ? {} : { delayDuration: delay ?? 200 }">
     <!--
       `disable-closing-trigger` in follow mode: reka dismisses a tip when its
       trigger is clicked, which is right for a button (the tip explained the
@@ -373,17 +519,10 @@ const triggerAttrs = computed(() => mergeProps(attrs, hold.handlers))
       :disable-closing-trigger="followCursor"
       @update:open="onOpenChange"
     >
-      <!-- `as-child` merges these onto the caller's own element, so the label
-           lands on the real button rather than on a wrapper. -->
-      <TooltipTrigger
-        as-child
-        v-bind="triggerAttrs"
-        :aria-label="label ? content : undefined"
-        :class="touch === 'hold' && !followCursor ? '[-webkit-touch-callout:none]' : undefined"
-        @pointermove="onPointerMove"
-      >
-        <slot />
-      </TooltipTrigger>
+      <!-- Renders nothing: the anchor the tip is placed against, and the id
+           the trigger's aria-describedby points at. -->
+      <TooltipTrigger as-child :reference="triggerEl" />
+      <RootBridge />
       <TooltipPortal :to="portalTo">
         <TooltipContent
           @interact-outside="guardOutside"

package/src/components/tableFeatures.ts

@@ -157,3 +157,39 @@ export function presetHidden(
  * - `list`: one compact line per row with no header, for narrow places.
  */
 export type TableLayout = "table" | "cards" | "list"
+
+/*
+ * How many rows a change of the shown list moves on screen: the ones that
+ * arrive, the ones that leave, and the ones that change their order among the
+ * rows that stay. Rows that only slide up or down to close a gap or make room
+ * are not counted; they move with the others and say nothing new.
+ *
+ * The order changes are the survivors outside the longest run that kept its
+ * order (a longest increasing subsequence of their old positions), which is the
+ * fewest rows that had to be picked up and put elsewhere.
+ */
+export function rowChanges(before: readonly string[], after: readonly string[]): number {
+  const old = new Map<string, number>()
+  before.forEach((id, i) => old.set(id, i))
+  let entered = 0
+  const kept: number[] = []
+  for (const id of after) {
+    const at = old.get(id)
+    if (at === undefined) entered++
+    else kept.push(at)
+  }
+  const left = before.length - kept.length
+  // Patience sorting: tails[k] is the smallest end of an increasing run of k + 1.
+  const tails: number[] = []
+  for (const at of kept) {
+    let lo = 0
+    let hi = tails.length
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1
+      if (tails[mid]! < at) lo = mid + 1
+      else hi = mid
+    }
+    tails[lo] = at
+  }
+  return entered + left + (kept.length - tails.length)
+}

package/src/composables/useShift.ts

@@ -63,6 +63,33 @@ export interface UseShift {
   retune: () => void
 }
 
+interface FirstRead {
+  read: () => void
+  write: () => void
+}
+const firstReads = new Map<Window, Set<FirstRead>>()
+
+/*
+ * Runs in the next frame, every read of every box mounted meanwhile before any
+ * write: one layout for all of them, however many there are.
+ */
+function firstRead(win: Window, pass: FirstRead): () => void {
+  let queue = firstReads.get(win)
+  if (!queue) {
+    const batch = new Set<FirstRead>()
+    queue = batch
+    firstReads.set(win, batch)
+    win.requestAnimationFrame(() => {
+      firstReads.delete(win)
+      for (const p of batch) p.read()
+      for (const p of batch) p.write()
+    })
+  }
+  queue.add(pass)
+  const batch = queue
+  return () => batch.delete(pass)
+}
+
 /** Kept in step with the `duration-fast` token the transition utilities use. */
 const TWEEN_MS = 160
 
@@ -83,7 +110,7 @@ export function useShift(
 
   let ro: ResizeObserver | undefined
   let mo: MutationObserver | undefined
-  let raf = 0
+  let cancelFirstRead: (() => void) | undefined
   let settleTimer: ReturnType<typeof setTimeout> | undefined
   /** Where the box last settled, so a retune has a size to ease FROM. */
   let lastHeight = 0
@@ -259,7 +286,8 @@ export function useShift(
     mo?.disconnect()
     ro = undefined
     mo = undefined
-    cancelAnimationFrame(raf)
+    cancelFirstRead?.()
+    cancelFirstRead = undefined
     clearTimeout(settleTimer)
     tweening.value = false
     resizing.value = false
@@ -277,21 +305,23 @@ export function useShift(
       teardown()
       if (!enabled || !node) return
 
-      lastHeight = node.offsetHeight
-      lastWidth = node.offsetWidth
-      laidOut = node.getClientRects().length > 0
       scrollHost = node
       node.addEventListener("scroll", rememberScroll, { capture: true, passive: true })
-      if (wantsHeight()) node.style.height = `${lastHeight}px`
-      if (wantsWidth()) node.style.width = `${lastWidth}px`
-      // A box must not animate in from its pre-content size, so the transition
-      // only arms once that first pin has painted. The pin is dropped in the
-      // same frame: it exists to give the first `retune` something to start
-      // from, and holding it would cap the box at its opening size.
-      raf = requestAnimationFrame(() => {
-        tweening.value = true
-        if (wantsHeight()) node.style.height = ""
-        if (wantsWidth()) node.style.width = ""
+      // The size a first `retune` eases from, read in the next frame together
+      // with every other box mounted in this render, and the transition armed
+      // then: a box must not animate in from its pre-content size. Read here,
+      // at mount, each box forced a layout of its own: fifty badges arriving
+      // in a table's rows laid the page out fifty times inside one click.
+      // Until the read, a retune finds no size to ease from and lets the box
+      // take its own, which is what a box that has just appeared should do.
+      cancelFirstRead = firstRead(nodeWindow(node), {
+        read: () => {
+          if (inFlight) return
+          lastHeight = node.offsetHeight
+          lastWidth = node.offsetWidth
+          laidOut = node.getClientRects().length > 0
+        },
+        write: () => (tweening.value = true),
       })
 
       // Two triggers, since either can move the size alone: the resize observer

package/src/index.ts

@@ -272,6 +272,8 @@ export type { SortState, TableColumn, TableListMode, TablePage, TableQuery } fro
 export type { TableLabels } from "./components/LpTable.vue"
 export type { TableCellEdit, TableExportOptions, TableSelectionToken } from "./components/LpTable.vue"
 export type { ColumnPin, ColumnPreset, TableLayout } from "./components/tableFeatures"
+export { rowWindow } from "./components/tableFeatures"
+export type { RowWindow } from "./components/tableFeatures"
 export { compareValues } from "./components/tableSort"
 export { filterRows, showOnly, shownValues } from "./components/tableFilter"
 export type { TableFilters } from "./components/tableFilter"