@tensor_1/react 2.31.0 → 2.32.0

package/dist/emoji.cjs

@@ -83,7 +83,7 @@ function fitsOn(side, a, f, vp, offset, padding) {
   return spaceOn(side, a, vp, offset) >= need + padding;
 }
 function computePosition(anchor, floating, viewport, options = {}) {
-  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true, stickySide } = options;
+  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true, shiftMainAxis = true, stickySide } = options;
   const { side: preferred, align } = parsePlacement(placement);
   let side = preferred;
   const sticky = stickySide === preferred || stickySide === OPPOSITE[preferred] ? stickySide : void 0;
@@ -116,12 +116,27 @@ function computePosition(anchor, floating, viewport, options = {}) {
     y = align === "start" ? start : align === "end" ? end : center;
     if (shift) y = clamp(y, padding, Math.max(padding, viewport.height - floating.height - padding));
   }
+  const mainAxisNatural = horizontal ? y : x;
+  const anchorInView = horizontal ? anchor.y + anchor.height > 0 && anchor.y < viewport.height : anchor.x + anchor.width > 0 && anchor.x < viewport.width;
+  let mainAxisRange = null;
+  if (shiftMainAxis && anchorInView) {
+    const extent = horizontal ? viewport.height - floating.height : viewport.width - floating.width;
+    mainAxisRange = [padding, Math.max(padding, extent - padding)];
+    if (horizontal) y = clamp(y, mainAxisRange[0], mainAxisRange[1]);
+    else x = clamp(x, mainAxisRange[0], mainAxisRange[1]);
+  }
   return {
     x,
     y,
     placement: align === "center" ? side : `${side}-${align}`,
     side,
-    align
+    align,
+    mainAxisNatural,
+    mainAxisRange,
+    available: {
+      width: Math.max(0, viewport.width - 2 * padding),
+      height: Math.max(0, viewport.height - 2 * padding)
+    }
   };
 }
 
@@ -140,6 +155,7 @@ function supportsAnchoring() {
   }
   return anchoringSupported;
 }
+var ANCHOR_BAND = 64;
 var anchorCount = 0;
 var namesOf = (value) => value.split(",").map((n) => n.trim()).filter((n) => n.startsWith("--"));
 function addAnchorName(el, name) {
@@ -164,9 +180,12 @@ function translationOf(el) {
 }
 var signed = (n) => `${n < 0 ? "-" : "+"} ${Math.round(Math.abs(n) * 100) / 100}px`;
 var prepared = /* @__PURE__ */ new WeakSet();
-function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
-  const opts = (0, import_react.useRef)({ placement, offset, padding });
-  opts.current = { placement, offset, padding };
+function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8, shiftMainAxis = true, capHeight = false, onAnchorHidden }) {
+  const opts = (0, import_react.useRef)({ placement, offset, padding, shiftMainAxis, capHeight });
+  opts.current = { placement, offset, padding, shiftMainAxis, capHeight };
+  const onAnchorHiddenRef = (0, import_react.useRef)(onAnchorHidden);
+  onAnchorHiddenRef.current = onAnchorHidden;
+  const heightCap = (0, import_react.useRef)(null);
   const session = (0, import_react.useRef)(false);
   const side = (0, import_react.useRef)(null);
   const written = (0, import_react.useRef)("");
@@ -190,6 +209,15 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
     }
     removeAnchorName(current.anchor, current.name);
   }, [floatingRef]);
+  const uncap = (0, import_react.useCallback)(() => {
+    const cap = heightCap.current;
+    if (!cap) return;
+    heightCap.current = null;
+    const floating = floatingRef.current;
+    if (!floating) return;
+    floating.style.maxHeight = cap.inlineMaxHeight;
+    if (cap.setOverflow) floating.style.overflowY = cap.inlineOverflowY;
+  }, [floatingRef]);
   const reposition = (0, import_react.useCallback)(() => {
     const anchorEl = resolveAnchor(anchor);
     const floating = floatingRef.current;
@@ -202,14 +230,36 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       prepared.add(floating);
       written.current = "";
     }
+    const { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, capHeight: cap } = opts.current;
+    if (cap) {
+      if (!heightCap.current) {
+        const own = getComputedStyle(floating);
+        const setOverflow = !own.overflowY || own.overflowY === "visible";
+        heightCap.current = {
+          inlineMaxHeight: s.maxHeight,
+          inlineOverflowY: s.overflowY,
+          ownMaxHeight: own.maxHeight && own.maxHeight !== "none" ? own.maxHeight : "",
+          setOverflow,
+          written: ""
+        };
+        if (setOverflow) s.overflowY = "auto";
+      }
+      const room = `${Math.max(0, window.innerHeight - 2 * pad)}px`;
+      const max = heightCap.current.ownMaxHeight ? `min(${room}, ${heightCap.current.ownMaxHeight})` : room;
+      if (max !== heightCap.current.written) {
+        s.maxHeight = max;
+        heightCap.current.written = max;
+      }
+    } else if (heightCap.current) {
+      uncap();
+    }
     const a = anchorEl.getBoundingClientRect();
     const size = { width: floating.offsetWidth, height: floating.offsetHeight };
-    const { placement: p, offset: o, padding: pad } = opts.current;
     const pos = computePosition(
       { x: a.x, y: a.y, width: a.width, height: a.height },
       size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad, stickySide: side.current ?? void 0 }
+      { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, stickySide: side.current ?? void 0 }
     );
     const measured = size.width > 0 || size.height > 0;
     if (measured && session.current) side.current = pos.side;
@@ -223,7 +273,10 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       s.top = top2;
       written.current = key2;
     };
-    if (anchoringFailed.current || !supportsAnchoring()) {
+    const limit = pos.mainAxisRange;
+    const nearLimit = limit !== null && (pos.mainAxisNatural < limit[0] + ANCHOR_BAND || pos.mainAxisNatural > limit[1] - ANCHOR_BAND);
+    if (anchoringFailed.current || nearLimit || !supportsAnchoring()) {
+      if (anchoring.current) release(false);
       writeFixed(pos);
       return;
     }
@@ -260,7 +313,7 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
         writeFixed(pos);
       }
     }
-  }, [anchor, floatingRef, release]);
+  }, [anchor, floatingRef, release, uncap]);
   useIsomorphicLayoutEffect(() => {
     if (!open) return;
     session.current = true;
@@ -289,8 +342,20 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       side.current = null;
       anchoringFailed.current = false;
       release(true);
+      uncap();
     };
-  }, [open, reposition, anchor, floatingRef, release]);
+  }, [open, reposition, anchor, floatingRef, release, uncap]);
+  const watchAnchor = open && !!onAnchorHidden;
+  (0, import_react.useEffect)(() => {
+    const anchorEl = resolveAnchor(anchor);
+    if (!watchAnchor || !anchorEl || typeof IntersectionObserver !== "function") return;
+    const observer = new IntersectionObserver((entries) => {
+      const latest = entries[entries.length - 1];
+      if (latest && !latest.isIntersecting) onAnchorHiddenRef.current?.();
+    });
+    observer.observe(anchorEl);
+    return () => observer.disconnect();
+  }, [watchAnchor, anchor]);
   (0, import_react.useEffect)(() => () => release(false), [release]);
   return reposition;
 }
@@ -312,16 +377,22 @@ var settle = (el) => {
   el.removeAttribute(PLACING);
 };
 function Popover({
-  popover = "auto",
+  popover: popoverProp,
   anchor,
   placement = "bottom-start",
   offset = 6,
   closeWhenAnchorHidden = false,
   onAnchorHidden,
+  capHeight = false,
+  openOnHover = false,
   className,
   children,
   ...props
 }) {
+  const hover = !!openOnHover && !!anchor;
+  const popover = popoverProp ?? (hover ? "manual" : "auto");
+  const openDelay = typeof openOnHover === "object" ? openOnHover.openDelay ?? 300 : 300;
+  const closeDelay = typeof openOnHover === "object" ? openOnHover.closeDelay ?? 150 : 150;
   const ref = (0, import_react2.useRef)(null);
   const [open, setOpen] = (0, import_react2.useState)(false);
   const openRef = (0, import_react2.useRef)(false);
@@ -331,7 +402,16 @@ function Popover({
   const reposition = useAnchoredPosition(anchor ?? null, ref, {
     open: open && !!anchor,
     placement,
-    offset
+    offset,
+    capHeight,
+    onAnchorHidden: closeWhenAnchorHidden ? () => {
+      const el = ref.current;
+      if (!el || !isPopoverOpen(el)) return;
+      onAnchorHiddenRef.current?.();
+      const active = el.ownerDocument.activeElement;
+      if (active && el.contains(active)) active.blur();
+      el.hidePopover();
+    } : void 0
   });
   (0, import_react2.useEffect)(() => {
     const el = ref.current;
@@ -366,25 +446,87 @@ function Popover({
       el.removeAttribute(PLACING);
     };
   }, [anchor, reposition]);
+  (0, import_react2.useEffect)(() => {
+    const el = ref.current;
+    const anchorEl = resolveAnchor(anchor);
+    if (!hover || !el || !anchorEl) return;
+    let timer;
+    const inside = (node) => !!node && (anchorEl.contains(node) || el.contains(node));
+    const stillWanted = () => {
+      try {
+        return anchorEl.matches(":hover") || el.matches(":hover") || inside(el.ownerDocument.activeElement);
+      } catch {
+        return false;
+      }
+    };
+    const show = (delay) => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (!isPopoverOpen(el)) {
+          try {
+            el.showPopover?.();
+          } catch {
+          }
+        }
+      }, delay);
+    };
+    const hide = (delay) => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (isPopoverOpen(el) && !stillWanted()) {
+          try {
+            el.hidePopover?.();
+          } catch {
+          }
+        }
+      }, delay);
+    };
+    const onEnter = (event) => {
+      if (event.pointerType !== "touch") show(openDelay);
+    };
+    const onLeave = (event) => {
+      if (event.pointerType !== "touch") hide(closeDelay);
+    };
+    const onFocusIn = () => show(0);
+    const onFocusOut = (event) => {
+      if (!inside(event.relatedTarget)) hide(closeDelay);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || !isPopoverOpen(el)) return;
+      window.clearTimeout(timer);
+      const hadFocus = el.contains(el.ownerDocument.activeElement);
+      try {
+        el.hidePopover?.();
+      } catch {
+      }
+      if (hadFocus) {
+        anchorEl.removeEventListener("focusin", onFocusIn);
+        anchorEl.focus();
+        anchorEl.addEventListener("focusin", onFocusIn);
+      }
+    };
+    for (const node of [anchorEl, el]) {
+      node.addEventListener("pointerenter", onEnter);
+      node.addEventListener("pointerleave", onLeave);
+      node.addEventListener("focusout", onFocusOut);
+      node.addEventListener("keydown", onKeyDown);
+    }
+    anchorEl.addEventListener("focusin", onFocusIn);
+    return () => {
+      window.clearTimeout(timer);
+      for (const node of [anchorEl, el]) {
+        node.removeEventListener("pointerenter", onEnter);
+        node.removeEventListener("pointerleave", onLeave);
+        node.removeEventListener("focusout", onFocusOut);
+        node.removeEventListener("keydown", onKeyDown);
+      }
+      anchorEl.removeEventListener("focusin", onFocusIn);
+    };
+  }, [hover, anchor, openDelay, closeDelay]);
   useIsomorphicLayoutEffect2(() => {
     openRef.current = open;
     if (open && ref.current) settle(ref.current);
   }, [open]);
-  (0, import_react2.useEffect)(() => {
-    const el = ref.current;
-    const anchorEl = resolveAnchor(anchor);
-    if (!closeWhenAnchorHidden || !open || !el || !anchorEl || typeof IntersectionObserver !== "function") return;
-    const observer = new IntersectionObserver((entries) => {
-      const latest = entries[entries.length - 1];
-      if (!latest || latest.isIntersecting || !isPopoverOpen(el)) return;
-      onAnchorHiddenRef.current?.();
-      const active = el.ownerDocument.activeElement;
-      if (active && el.contains(active)) active.blur();
-      el.hidePopover();
-    });
-    observer.observe(anchorEl);
-    return () => observer.disconnect();
-  }, [closeWhenAnchorHidden, open, anchor]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 

package/dist/emoji.d.cts

@@ -1,6 +1,6 @@
-import { E as EmojiPickerLabels, a as EmojiLocale, b as EmojiDataLoader } from './emoji-image-6mPZ15Zy.cjs';
-export { C as CompactEmoji, D as DEFAULT_EMOJI_PICKER_LABELS, c as EMOJI_GRID_COLUMNS, d as EmojiData, e as EmojiEntry, f as EmojiGroup, g as EmojiMessages, h as EmojiPicker, i as EmojiPickerProps, j as buildEmojiData, k as canRenderEmoji, l as emojiImageFileName, m as loadEmojiData, n as normalizeEmojiImageBaseUrl, s as searchEmoji } from './emoji-image-6mPZ15Zy.cjs';
-export { A as Align, P as Placement, S as Side } from './overlay-position-Cjv5E7mn.cjs';
+import { E as EmojiPickerLabels, a as EmojiLocale, b as EmojiDataLoader } from './emoji-image-DjCKpdwE.cjs';
+export { C as CompactEmoji, D as DEFAULT_EMOJI_PICKER_LABELS, c as EMOJI_GRID_COLUMNS, d as EmojiData, e as EmojiEntry, f as EmojiGroup, g as EmojiMessages, h as EmojiPicker, i as EmojiPickerProps, j as buildEmojiData, k as canRenderEmoji, l as emojiImageFileName, m as loadEmojiData, n as normalizeEmojiImageBaseUrl, s as searchEmoji } from './emoji-image-DjCKpdwE.cjs';
+export { A as Align, P as Placement, S as Side } from './overlay-position-2Afke51l.cjs';
 import * as react from 'react';
 
 interface ReactionSummary {

package/dist/file-model.d.ts

@@ -1,6 +1,25 @@
 /** File helpers shared by `FileUpload` and `Attachment` (HAR-984/985). Pure. */
-/** "1.2 MB", "340 KB", "12 B" in the locale's number format (base 1000, like file managers). */
-declare function formatFileSize(bytes: number, locale?: string): string;
+interface FileSizeOptions {
+    /**
+     * `1000` (default): decimal, as file managers on macOS and most of the web show sizes
+     * (1 MB = 1,000,000 bytes). `1024`: binary, as Windows and many servers count them
+     * (1 MB = 1,048,576 bytes) — use it when the rest of the product does, so one file never
+     * shows two sizes (HAR-1630).
+     */
+    base?: 1000 | 1024;
+    /**
+     * The five unit labels, bytes first. Default `['B', 'KB', 'MB', 'GB', 'TB']` for both bases;
+     * pass `['B', 'KiB', 'MiB', 'GiB', 'TiB']` to mark base 1024 the IEC way, or localised ones.
+     */
+    units?: readonly [string, string, string, string, string];
+}
+/** A product's own size formatter for `FileUpload` and `Attachment` (`formatSize`). */
+type FileSizeFormatter = (bytes: number, locale?: string) => string;
+/**
+ * "1.2 MB", "340 KB", "12 B" in the locale's number format. Base 1000 unless `options.base`
+ * is 1024.
+ */
+declare function formatFileSize(bytes: number, locale?: string, options?: FileSizeOptions): string;
 /** Whether a file matches an `accept` list (".pdf,image/*,application/zip"). An empty list accepts all. */
 declare function fileMatchesAccept(file: {
     name: string;
@@ -34,4 +53,4 @@ declare function fileKind(file: {
     type?: string;
 }): 'image' | 'video' | 'pdf' | 'sheet' | 'archive' | 'text' | 'other';
 
-export { type FileRejection, type FileRejectionReason, fileKind, fileMatchesAccept, formatFileSize, partitionFiles };
+export { type FileRejection, type FileRejectionReason, type FileSizeFormatter, type FileSizeOptions, fileKind, fileMatchesAccept, formatFileSize, partitionFiles };

package/dist/file-model.js

@@ -1,10 +1,12 @@
-function formatFileSize(bytes, locale) {
+const UNITS = ["B", "KB", "MB", "GB", "TB"];
+function formatFileSize(bytes, locale, options = {}) {
   if (!Number.isFinite(bytes) || bytes < 0) return "";
-  const units = ["B", "KB", "MB", "GB", "TB"];
+  const base = options.base === 1024 ? 1024 : 1e3;
+  const units = options.units ?? UNITS;
   let value = bytes;
   let unit = 0;
-  while (value >= 1e3 && unit < units.length - 1) {
-    value /= 1e3;
+  while (value >= base && unit < units.length - 1) {
+    value /= base;
     unit += 1;
   }
   const digits = unit === 0 || value >= 100 ? 0 : 1;

package/dist/filter-model.d.ts

@@ -33,6 +33,16 @@ type FilterValue = {
     values: FilterChoice[];
 };
 type FilterValueKind = FilterValue['kind'];
+/**
+ * A named selection for an `enum` field (HAR-1505), e.g. "Open work" = new, open and pending.
+ * The id, label and values come from the product.
+ */
+interface FilterPreset {
+    id: string;
+    label: string;
+    /** The option values the preset selects. Compared as a set: order and repeats do not matter. */
+    values: readonly string[];
+}
 interface FilterField {
     id: string;
     /** Column name, also the start of the chip summary. */
@@ -49,6 +59,12 @@ interface FilterField {
     /** `boolean`: words for true and false, e.g. Escalated / Not escalated. Default from labels. */
     trueLabel?: string;
     falseLabel?: string;
+    /**
+     * `enum`: named selections shown as toggle chips above the options. Activating one replaces
+     * the selection with its values; the one equal to the selection is pressed, and the chip
+     * summary names it.
+     */
+    presets?: readonly FilterPreset[];
 }
 interface FilterSummaryLabels {
     operators: Record<TextFilterOperator | NumberFilterOperator, string>;
@@ -62,6 +78,8 @@ interface FilterSummaryLabels {
     until: string;
     /** More than `maxListed` values: `{first}`, `{count}`. */
     more: string;
+    /** An `enum` value equal to a preset: `{label}` (the preset), `{field}`. Default `{label}`. */
+    preset?: string;
 }
 declare const DEFAULT_FILTER_SUMMARY_LABELS: FilterSummaryLabels;
 declare const TEXT_FILTER_OPERATORS: readonly TextFilterOperator[];
@@ -70,6 +88,11 @@ declare const NUMBER_FILTER_OPERATORS: readonly NumberFilterOperator[];
 declare function emptyFilterValue(kind: FilterValueKind): FilterValue;
 /** True when the value filters nothing (so the chip goes away). */
 declare function isFilterEmpty(value: FilterValue | undefined): boolean;
+/**
+ * The first of `field.presets` whose values equal the value's as a set, or undefined. Only an
+ * `enum` value can match a preset.
+ */
+declare function matchFilterPreset(field: FilterField, value: FilterValue | undefined): FilterPreset | undefined;
 interface SummarizeFilterOptions {
     labels?: Partial<FilterSummaryLabels>;
     /** Formats a `YYYY-MM-DD` date (a product format such as DD.MM.YYYY). Default: as given. */
@@ -81,8 +104,9 @@ interface SummarizeFilterOptions {
 }
 /**
  * One line for the filter chip, e.g. "State: Open, Pending", "Priority ≥ 2", "Created:
- * 01.10.2026 – 05.10.2026", "Escalated: Yes". Empty values give an empty string.
+ * 01.10.2026 – 05.10.2026", "Escalated: Yes". An enum value equal to one of `field.presets`
+ * gives that preset's label (the `preset` label). Empty values give an empty string.
  */
 declare function summarizeFilter(field: FilterField, value: FilterValue | undefined, options?: SummarizeFilterOptions): string;
 
-export { DEFAULT_FILTER_SUMMARY_LABELS, type FilterChoice, type FilterField, type FilterSummaryLabels, type FilterValue, type FilterValueKind, NUMBER_FILTER_OPERATORS, type NumberFilterOperator, type SummarizeFilterOptions, TEXT_FILTER_OPERATORS, type TextFilterOperator, emptyFilterValue, isFilterEmpty, summarizeFilter };
+export { DEFAULT_FILTER_SUMMARY_LABELS, type FilterChoice, type FilterField, type FilterPreset, type FilterSummaryLabels, type FilterValue, type FilterValueKind, NUMBER_FILTER_OPERATORS, type NumberFilterOperator, type SummarizeFilterOptions, TEXT_FILTER_OPERATORS, type TextFilterOperator, emptyFilterValue, isFilterEmpty, matchFilterPreset, summarizeFilter };

package/dist/filter-model.js

@@ -18,7 +18,8 @@ const DEFAULT_FILTER_SUMMARY_LABELS = {
   range: "{from} \u2013 {to}",
   from: "from {from}",
   until: "until {to}",
-  more: "{first} +{count}"
+  more: "{first} +{count}",
+  preset: "{label}"
 };
 const TEXT_FILTER_OPERATORS = ["contains", "not-contains", "is", "is-not", "starts-with"];
 const NUMBER_FILTER_OPERATORS = ["eq", "neq", "lt", "lte", "gt", "gte", "between"];
@@ -54,6 +55,14 @@ function isFilterEmpty(value) {
       return value.value === void 0;
   }
 }
+function matchFilterPreset(field, value) {
+  if (value?.kind !== "enum" || !field.presets?.length) return void 0;
+  const chosen = new Set(value.values);
+  return field.presets.find((preset) => {
+    const wanted = new Set(preset.values);
+    return wanted.size === chosen.size && [...wanted].every((v) => chosen.has(v));
+  });
+}
 const fill = (template, values) => template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
 function summarizeFilter(field, value, options = {}) {
   if (!value || isFilterEmpty(value)) return "";
@@ -66,6 +75,8 @@ function summarizeFilter(field, value, options = {}) {
   };
   switch (value.kind) {
     case "enum": {
+      const preset = matchFilterPreset(field, value);
+      if (preset) return fill(labels.preset ?? DEFAULT_FILTER_SUMMARY_LABELS.preset, { label: preset.label, field: field.label });
       const byValue = new Map((field.options ?? []).map((o) => [o.value, o.label]));
       return `${field.label}: ${list(value.values.map((v) => byValue.get(v) ?? v))}`;
     }
@@ -87,5 +98,6 @@ export {
   TEXT_FILTER_OPERATORS,
   emptyFilterValue,
   isFilterEmpty,
+  matchFilterPreset,
   summarizeFilter
 };

package/dist/hooks/useAnchoredPosition.d.ts

@@ -7,6 +7,25 @@ interface UseAnchoredPositionOptions {
     placement?: Placement;
     offset?: number;
     padding?: number;
+    /**
+     * Keep the element inside the viewport on the side it hangs off as well: when it fits neither
+     * above nor below (or left nor right) it slides over the anchor instead of leaving the
+     * viewport. Once the anchor itself has left the viewport the element follows it out; pair
+     * that with `onAnchorHidden` to close it. Default true.
+     */
+    shiftMainAxis?: boolean;
+    /**
+     * Cap the element's height to the viewport minus the padding on both edges, and let it scroll
+     * (`overflow-y: auto`, unless its own CSS already sets an overflow). A `max-height` from the
+     * element's own CSS still applies when it is smaller. Default false.
+     */
+    capHeight?: boolean;
+    /**
+     * Called when the anchor has scrolled completely out of view (outside the viewport or a
+     * clipping ancestor) while `open`. Close the overlay here; `Popover closeWhenAnchorHidden`
+     * is built on it.
+     */
+    onAnchorHidden?: () => void;
 }
 type AnchorArg = RefObject<HTMLElement | null> | HTMLElement | null | undefined;
 /** @internal The element behind an anchor ref or element. */
@@ -22,9 +41,13 @@ declare const resolveAnchor: (a: AnchorArg) => HTMLElement | null;
  * `position: fixed` + left/top and follows scroll/resize from JS. While `open`, the side
  * chosen at open is kept until it no longer fits and the other side does, scrolls inside
  * the overlay itself are ignored, and a size change of either element re-places it.
+ * An element that fits on neither side is kept inside the viewport (it covers the anchor).
+ * While it is held there, or within `ANCHOR_BAND` of the limit, it is written as fixed
+ * coordinates even where anchor positioning exists: those cannot drift while the page scrolls,
+ * so it is inside on every frame, not one frame later (HAR-1613).
  * Returns a `reposition` fn for callers that want to nudge it manually (e.g. right when a
  * native popover's `toggle` fires).
  */
-declare function useAnchoredPosition(anchor: RefObject<HTMLElement | null> | HTMLElement | null | undefined, floatingRef: RefObject<HTMLElement | null>, { open, placement, offset, padding }: UseAnchoredPositionOptions): () => void;
+declare function useAnchoredPosition(anchor: RefObject<HTMLElement | null> | HTMLElement | null | undefined, floatingRef: RefObject<HTMLElement | null>, { open, placement, offset, padding, shiftMainAxis, capHeight, onAnchorHidden }: UseAnchoredPositionOptions): () => void;
 
 export { type UseAnchoredPositionOptions, resolveAnchor, useAnchoredPosition };

package/dist/hooks/useAnchoredPosition.js

@@ -15,6 +15,7 @@ function supportsAnchoring() {
   }
   return anchoringSupported;
 }
+const ANCHOR_BAND = 64;
 let anchorCount = 0;
 const namesOf = (value) => value.split(",").map((n) => n.trim()).filter((n) => n.startsWith("--"));
 function addAnchorName(el, name) {
@@ -39,9 +40,12 @@ function translationOf(el) {
 }
 const signed = (n) => `${n < 0 ? "-" : "+"} ${Math.round(Math.abs(n) * 100) / 100}px`;
 const prepared = /* @__PURE__ */ new WeakSet();
-function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
-  const opts = useRef({ placement, offset, padding });
-  opts.current = { placement, offset, padding };
+function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8, shiftMainAxis = true, capHeight = false, onAnchorHidden }) {
+  const opts = useRef({ placement, offset, padding, shiftMainAxis, capHeight });
+  opts.current = { placement, offset, padding, shiftMainAxis, capHeight };
+  const onAnchorHiddenRef = useRef(onAnchorHidden);
+  onAnchorHiddenRef.current = onAnchorHidden;
+  const heightCap = useRef(null);
   const session = useRef(false);
   const side = useRef(null);
   const written = useRef("");
@@ -65,6 +69,15 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
     }
     removeAnchorName(current.anchor, current.name);
   }, [floatingRef]);
+  const uncap = useCallback(() => {
+    const cap = heightCap.current;
+    if (!cap) return;
+    heightCap.current = null;
+    const floating = floatingRef.current;
+    if (!floating) return;
+    floating.style.maxHeight = cap.inlineMaxHeight;
+    if (cap.setOverflow) floating.style.overflowY = cap.inlineOverflowY;
+  }, [floatingRef]);
   const reposition = useCallback(() => {
     const anchorEl = resolveAnchor(anchor);
     const floating = floatingRef.current;
@@ -77,14 +90,36 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       prepared.add(floating);
       written.current = "";
     }
+    const { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, capHeight: cap } = opts.current;
+    if (cap) {
+      if (!heightCap.current) {
+        const own = getComputedStyle(floating);
+        const setOverflow = !own.overflowY || own.overflowY === "visible";
+        heightCap.current = {
+          inlineMaxHeight: s.maxHeight,
+          inlineOverflowY: s.overflowY,
+          ownMaxHeight: own.maxHeight && own.maxHeight !== "none" ? own.maxHeight : "",
+          setOverflow,
+          written: ""
+        };
+        if (setOverflow) s.overflowY = "auto";
+      }
+      const room = `${Math.max(0, window.innerHeight - 2 * pad)}px`;
+      const max = heightCap.current.ownMaxHeight ? `min(${room}, ${heightCap.current.ownMaxHeight})` : room;
+      if (max !== heightCap.current.written) {
+        s.maxHeight = max;
+        heightCap.current.written = max;
+      }
+    } else if (heightCap.current) {
+      uncap();
+    }
     const a = anchorEl.getBoundingClientRect();
     const size = { width: floating.offsetWidth, height: floating.offsetHeight };
-    const { placement: p, offset: o, padding: pad } = opts.current;
     const pos = computePosition(
       { x: a.x, y: a.y, width: a.width, height: a.height },
       size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad, stickySide: side.current ?? void 0 }
+      { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, stickySide: side.current ?? void 0 }
     );
     const measured = size.width > 0 || size.height > 0;
     if (measured && session.current) side.current = pos.side;
@@ -98,7 +133,10 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       s.top = top2;
       written.current = key2;
     };
-    if (anchoringFailed.current || !supportsAnchoring()) {
+    const limit = pos.mainAxisRange;
+    const nearLimit = limit !== null && (pos.mainAxisNatural < limit[0] + ANCHOR_BAND || pos.mainAxisNatural > limit[1] - ANCHOR_BAND);
+    if (anchoringFailed.current || nearLimit || !supportsAnchoring()) {
+      if (anchoring.current) release(false);
       writeFixed(pos);
       return;
     }
@@ -135,7 +173,7 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
         writeFixed(pos);
       }
     }
-  }, [anchor, floatingRef, release]);
+  }, [anchor, floatingRef, release, uncap]);
   useIsomorphicLayoutEffect(() => {
     if (!open) return;
     session.current = true;
@@ -164,8 +202,20 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       side.current = null;
       anchoringFailed.current = false;
       release(true);
+      uncap();
     };
-  }, [open, reposition, anchor, floatingRef, release]);
+  }, [open, reposition, anchor, floatingRef, release, uncap]);
+  const watchAnchor = open && !!onAnchorHidden;
+  useEffect(() => {
+    const anchorEl = resolveAnchor(anchor);
+    if (!watchAnchor || !anchorEl || typeof IntersectionObserver !== "function") return;
+    const observer = new IntersectionObserver((entries) => {
+      const latest = entries[entries.length - 1];
+      if (latest && !latest.isIntersecting) onAnchorHiddenRef.current?.();
+    });
+    observer.observe(anchorEl);
+    return () => observer.disconnect();
+  }, [watchAnchor, anchor]);
   useEffect(() => () => release(false), [release]);
   return reposition;
 }

package/dist/hooks/useVirtualRows.d.ts

@@ -5,8 +5,21 @@ interface UseVirtualRowsOptions {
     rowHeight: number;
     /** Rows rendered beyond each viewport edge. Default: 6. */
     overscan?: number;
-    /** Render all rows at or below this count. Default: 100. */
+    /**
+     * Render all rows at or below this count: rows are windowed only when
+     * `rows.length > threshold` (so exactly `threshold` rows are still rendered whole).
+     * Default: 100.
+     */
     threshold?: number;
+    /**
+     * Viewport height in pixels to assume until the scroll element has been measured, and
+     * whenever it measures 0 (first render, a hidden tab, a test without layout). With it, a
+     * 5,000-row table mounts with one window of rows; without it every row is rendered until
+     * the first measurement, as before (HAR-1616).
+     */
+    estimatedViewportHeight?: number;
+    /** `false` renders every row with no spacers, whatever the count. Default: `true`. */
+    enabled?: boolean;
 }
 interface UseVirtualRowsResult<T> {
     /** Attach to the scrolling TableWrap. */
@@ -21,7 +34,9 @@ interface UseVirtualRowsResult<T> {
 /**
  * Owns scroll/resize observation and exposes the small visible row window.
  * Consumers render padTop/padBottom spacer rows inside their existing tbody.
+ * When the row count shrinks under a large scroll position the window is clamped to the new
+ * count in the same render, so `padTop` never exceeds the list (HAR-1616).
  */
-declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
+declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold, estimatedViewportHeight, enabled }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
 
 export { type UseVirtualRowsOptions, type UseVirtualRowsResult, useVirtualRows };