@leavepulse/ui 0.94.0 → 0.95.0

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/dist/assets/LpTabs-D7EyG21l.css

@@ -1,18 +0,0 @@
-
-.lp-tab-badge-enter-active[data-v-43a45129],
-.lp-tab-badge-leave-active[data-v-43a45129] {
-  transition:
-    opacity var(--duration-fast) var(--ease-emphasized),
-    transform var(--duration-fast) var(--ease-emphasized);
-}
-.lp-tab-badge-enter-from[data-v-43a45129],
-.lp-tab-badge-leave-to[data-v-43a45129] {
-  opacity: 0;
-  transform: scale(0.6);
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-tab-badge-enter-active[data-v-43a45129],
-  .lp-tab-badge-leave-active[data-v-43a45129] {
-    transition: none;
-}
-}

package/dist/chunks/LpTooltip-BKde8Xjv.js

@@ -1,230 +0,0 @@
-import { defineComponent, ref, watch, onBeforeUnmount, useAttrs, computed, mergeProps, openBlock, createBlock, resolveDynamicComponent, unref, normalizeProps, guardReactiveProps, withCtx, createVNode, renderSlot, normalizeStyle, normalizeClass, createElementVNode, createTextVNode, toDisplayString } from "vue";
-import { clamp } from "../composables/clamp.js";
-import { injectTooltipProviderContext, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent } from "reka-ui";
-import { springStep, springSettled } from "../composables/usePillTransition.js";
-import { PANEL_SURFACE, TOOLTIP_ANIM } from "../components/dropdown.js";
-import { useTouchHold } from "../composables/useTouchHold.js";
-import { prefersReducedMotion } from "../composables/easing.js";
-import { useView, viewWindow, usePortalTarget, useOutsideGuard } from "../composables/useView.js";
-import '../assets/LpTooltip-B61SYd4K.css';const HOLD_MS = 450;
-const EDGE = 8;
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ inheritAttrs: false },
-  __name: "LpTooltip",
-  props: {
-    content: {},
-    sideOffset: {},
-    side: { default: "top" },
-    label: { type: Boolean },
-    delay: {},
-    showOnPointerFocus: { type: Boolean },
-    followCursor: { type: Boolean },
-    disabled: { type: Boolean },
-    touch: { default: "hold" }
-  },
-  setup(__props) {
-    const props = __props;
-    const shared = injectTooltipProviderContext(null);
-    const PassThrough = (_, { slots }) => slots.default?.();
-    const target = { x: 0, y: 0 };
-    const offset = ref({ x: 0, y: 0 });
-    const tipBody = ref(null);
-    function inView(x, y) {
-      const panel = tipBody.value?.parentElement;
-      if (!panel) return { x, y };
-      const rect = panel.getBoundingClientRect();
-      const win = panel.ownerDocument.defaultView ?? window;
-      return {
-        x: withinRoom(x, rect.left - offset.value.x, rect.width, win.innerWidth),
-        y: withinRoom(y, rect.top - offset.value.y, rect.height, win.innerHeight)
-      };
-    }
-    function withinRoom(value, placed, size, room) {
-      const min = EDGE - placed;
-      const max = room - EDGE - size - placed;
-      return max < min ? value : clamp(value, min, max);
-    }
-    let sx = { value: 0, velocity: 0 };
-    let sy = { value: 0, velocity: 0 };
-    let frame = 0;
-    let lastFrame = 0;
-    let pointer = null;
-    function stopSpring() {
-      if (frame) cancelAnimationFrame(frame);
-      frame = 0;
-      lastFrame = 0;
-    }
-    function jumpToTarget() {
-      stopSpring();
-      offset.value = { x: target.x, y: target.y };
-      sx = { value: target.x, velocity: 0 };
-      sy = { value: target.y, velocity: 0 };
-    }
-    const settle = (now) => {
-      const dt = lastFrame ? (now - lastFrame) / 1e3 : 1 / 60;
-      lastFrame = now;
-      frame = 0;
-      sx = springStep(sx, target.x, "float", dt);
-      sy = springStep(sy, target.y, "float", dt);
-      if (springSettled(sx, target.x) && springSettled(sy, target.y)) {
-        sx = { value: target.x, velocity: 0 };
-        sy = { value: target.y, velocity: 0 };
-        offset.value = { x: target.x, y: target.y };
-        lastFrame = 0;
-        return;
-      }
-      offset.value = { x: sx.value, y: sy.value };
-      frame = requestAnimationFrame(settle);
-    };
-    const onPointerMove = (e) => {
-      if (!props.followCursor) return;
-      const el = e.currentTarget;
-      if (!el) return;
-      pointer = { el, x: e.clientX, y: e.clientY };
-      follow();
-    };
-    function follow() {
-      if (!pointer) return;
-      const { el, x: clientX, y: clientY } = pointer;
-      const rect = el.getBoundingClientRect();
-      const halfX = props.side === "left" || props.side === "right" ? rect.width / 2 : 0;
-      const dirX = props.side === "right" ? -1 : 1;
-      target.x = clientX - (rect.left + rect.width / 2) + halfX * dirX;
-      const half = props.side === "top" || props.side === "bottom" ? rect.height / 2 : 0;
-      const dir = props.side === "bottom" ? -1 : 1;
-      target.y = clientY - (rect.top + rect.height / 2) + half * dir;
-      Object.assign(target, inView(target.x, target.y));
-      if (prefersReducedMotion()) {
-        jumpToTarget();
-        return;
-      }
-      if (!frame) frame = requestAnimationFrame(settle);
-    }
-    const open = ref(false);
-    const wanted = ref(false);
-    const heldOpen = ref(false);
-    const hold = useTouchHold({
-      enabled: () => props.touch === "hold" && !props.followCursor && !props.disabled,
-      delay: () => HOLD_MS,
-      onHold: () => {
-        heldOpen.value = true;
-        wanted.value = true;
-        open.value = true;
-      }
-    });
-    function release() {
-      heldOpen.value = false;
-      wanted.value = false;
-      open.value = false;
-    }
-    const onOpenChange = (next) => {
-      if (!next && heldOpen.value) return;
-      wanted.value = next;
-      open.value = next && !props.disabled;
-      if (!open.value || !props.followCursor) return;
-      jumpToTarget();
-    };
-    watch(
-      () => props.disabled,
-      (off) => {
-        if (off) {
-          hold.cancel();
-          heldOpen.value = false;
-          open.value = false;
-        } else if (wanted.value) open.value = true;
-      }
-    );
-    const view = useView();
-    watch(
-      () => open.value && props.followCursor,
-      (following, _, onCleanup) => {
-        if (!following) {
-          stopSpring();
-          return;
-        }
-        const win = viewWindow(view.value);
-        win.addEventListener("resize", follow);
-        onCleanup(() => win.removeEventListener("resize", follow));
-      }
-    );
-    watch(heldOpen, (held, _, onCleanup) => {
-      if (!held) return;
-      const win = viewWindow(view.value);
-      const onKey = (event) => event.key === "Escape" && release();
-      win.addEventListener("pointerdown", release, true);
-      win.addEventListener("keydown", onKey, true);
-      onCleanup(() => {
-        win.removeEventListener("pointerdown", release, true);
-        win.removeEventListener("keydown", onKey, true);
-      });
-    });
-    onBeforeUnmount(stopSpring);
-    const portalTo = usePortalTarget();
-    const guardOutside = useOutsideGuard();
-    const attrs = useAttrs();
-    const triggerAttrs = computed(() => mergeProps(attrs, hold.handlers));
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(unref(shared) ? PassThrough : unref(TooltipProvider)), normalizeProps(guardReactiveProps(unref(shared) ? {} : { delayDuration: __props.delay ?? 200 })), {
-        default: withCtx(() => [
-          createVNode(unref(TooltipRoot), {
-            open: open.value,
-            "delay-duration": __props.delay,
-            "ignore-non-keyboard-focus": !__props.showOnPointerFocus,
-            "disable-hoverable-content": __props.followCursor,
-            "disable-closing-trigger": __props.followCursor,
-            "onUpdate:open": onOpenChange
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(TooltipTrigger), mergeProps({ "as-child": "" }, triggerAttrs.value, {
-                "aria-label": __props.label ? __props.content : void 0,
-                class: __props.touch === "hold" && !__props.followCursor ? "[-webkit-touch-callout:none]" : void 0,
-                onPointermove: onPointerMove
-              }), {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "default")
-                ]),
-                _: 3
-              }, 16, ["aria-label", "class"]),
-              createVNode(unref(TooltipPortal), { to: unref(portalTo) }, {
-                default: withCtx(() => [
-                  createVNode(unref(TooltipContent), {
-                    onInteractOutside: unref(guardOutside),
-                    onEscapeKeyDown: unref(guardOutside),
-                    side: __props.side,
-                    "side-offset": __props.sideOffset ?? 6,
-                    "collision-padding": 8,
-                    "data-lp-follow": __props.followCursor ? "" : void 0,
-                    class: normalizeClass([
-                      unref(PANEL_SURFACE),
-                      unref(TOOLTIP_ANIM),
-                      "z-(--z-tooltip) max-w-[min(20rem,90vw)] px-2.5 py-1.5 text-xs text-ink"
-                    ]),
-                    style: normalizeStyle(__props.followCursor ? { translate: `${offset.value.x}px ${offset.value.y}px` } : void 0)
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("div", {
-                        ref_key: "tipBody",
-                        ref: tipBody
-                      }, [
-                        renderSlot(_ctx.$slots, "content", {}, () => [
-                          createTextVNode(toDisplayString(__props.content), 1)
-                        ])
-                      ], 512)
-                    ]),
-                    _: 3
-                  }, 8, ["onInteractOutside", "onEscapeKeyDown", "side", "side-offset", "data-lp-follow", "class", "style"])
-                ]),
-                _: 3
-              }, 8, ["to"])
-            ]),
-            _: 3
-          }, 8, ["open", "delay-duration", "ignore-non-keyboard-focus", "disable-hoverable-content", "disable-closing-trigger"])
-        ]),
-        _: 3
-      }, 16);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};