@tensor_1/react 2.26.1 → 2.26.3

package/dist/components/EmojiPicker.d.ts

@@ -54,6 +54,9 @@ declare const EMOJI_GRID_COLUMNS = 8;
  * Emoji picker in a native popover: search, quick picks, recently used and the
  * Unicode categories, with names in English or German. The emoji dataset loads on
  * first open. The grid is one tab stop; arrow keys, Home and End move within it.
+ * The picker is one size in every state (loading, searching, failed), so it keeps the
+ * side it opened on; it stays attached to its trigger while the page scrolls and
+ * closes once the trigger is scrolled out of view.
  */
 declare function EmojiPicker({ onSelect, trigger, labels: labelOverrides, locale, quickPicks, loadData, recentStorageKey, placement, onOpenChange, className, emojiImageBaseUrl, }: EmojiPickerProps): react.JSX.Element;
 

package/dist/components/EmojiPicker.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { Popover } from "./Popover.js";
 import {
@@ -23,6 +23,14 @@ const DEFAULT_EMOJI_PICKER_LABELS = {
   loadFailed: "Emoji could not be loaded."
 };
 const EMOJI_GRID_COLUMNS = 8;
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+function revealInGrid(grid, cell) {
+  const g = grid.getBoundingClientRect();
+  const c = cell.getBoundingClientRect();
+  const top = g.top + (parseFloat(getComputedStyle(grid).scrollPaddingTop) || 0);
+  if (c.top < top) grid.scrollTop -= top - c.top;
+  else if (c.bottom > g.bottom) grid.scrollTop += c.bottom - g.bottom;
+}
 function EmojiPicker({
   onSelect,
   trigger,
@@ -44,6 +52,8 @@ function EmojiPicker({
   const searchRef = useRef(null);
   const gridRef = useRef(null);
   const pointerWasOpen = useRef(null);
+  const closedByAnchor = useRef(false);
+  const pendingJump = useRef(null);
   const [open, setOpen] = useState(false);
   const [data, setData] = useState(null);
   const [failed, setFailed] = useState(false);
@@ -67,10 +77,14 @@ function EmojiPicker({
       setOpen(nowOpen);
       onOpenChange?.(nowOpen);
       if (nowOpen) {
+        closedByAnchor.current = false;
+        pendingJump.current = null;
         setRecent(readRecentEmoji(recentStorageKey));
         setQuery("");
         setActive(0);
-        requestAnimationFrame(() => searchRef.current?.focus());
+        requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
+      } else if (closedByAnchor.current) {
+        closedByAnchor.current = false;
       } else if (el.contains(document.activeElement) || document.activeElement === document.body) {
         focusTrigger();
       }
@@ -102,10 +116,7 @@ function EmojiPicker({
     const el = popoverEl();
     if (el && isOpen(el)) el.hidePopover();
   };
-  const sections = useMemo(() => {
-    if (query.trim()) {
-      return data ? [{ key: "results", title: labels.search, emojis: searchEmoji(data, query).map((e) => e.emoji) }] : [];
-    }
+  const browseSections = useMemo(() => {
     const list = [];
     if (quickPicks?.length) list.push({ key: "quick", title: labels.quickPicks, emojis: [...new Set(quickPicks)] });
     if (recent.length) list.push({ key: "recent", title: labels.recent, emojis: recent });
@@ -115,7 +126,11 @@ function EmojiPicker({
       });
     }
     return list;
-  }, [query, data, quickPicks, recent, labels.search, labels.quickPicks, labels.recent]);
+  }, [data, quickPicks, recent, labels.quickPicks, labels.recent]);
+  const sections = useMemo(() => {
+    if (!query.trim()) return browseSections;
+    return data ? [{ key: "results", title: labels.search, emojis: searchEmoji(data, query).map((e) => e.emoji) }] : [];
+  }, [query, data, browseSections, labels.search]);
   const flat = useMemo(() => sections.flatMap((s) => s.emojis), [sections]);
   const sectionStart = useMemo(() => {
     const starts = /* @__PURE__ */ new Map();
@@ -132,13 +147,43 @@ function EmojiPicker({
     onSelect(emoji);
     hide();
   };
-  const focusCell = useCallback((index) => {
+  const focusCell = useCallback((index, reveal = true) => {
     setActive(index);
     const find = () => gridRef.current?.querySelector(`[data-emoji-index="${index}"]`);
+    const move = (cell2) => {
+      cell2.focus({ preventScroll: true });
+      if (reveal && gridRef.current) revealInGrid(gridRef.current, cell2);
+    };
     const cell = find();
-    if (cell) cell.focus();
-    else requestAnimationFrame(() => find()?.focus());
+    if (cell) move(cell);
+    else requestAnimationFrame(() => {
+      const later = find();
+      if (later) move(later);
+    });
   }, []);
+  const showSection = (key) => {
+    const grid = gridRef.current;
+    const section = grid?.querySelector(`[data-section="${key}"]`);
+    if (!grid || !section) return;
+    grid.scrollTop += section.getBoundingClientRect().top - grid.getBoundingClientRect().top;
+    const start = sectionStart.get(key);
+    if (start !== void 0) focusCell(start, false);
+  };
+  const onCategory = (key) => {
+    if (!query.trim()) {
+      showSection(key);
+      return;
+    }
+    pendingJump.current = key;
+    setQuery("");
+    setActive(0);
+  };
+  useIsomorphicLayoutEffect(() => {
+    const key = pendingJump.current;
+    if (key === null || query.trim()) return;
+    pendingJump.current = null;
+    showSection(key);
+  }, [query, sections]);
   const onGridKeyDown = (event) => {
     const target = event.target;
     const index = Number(target.dataset.emojiIndex ?? -1);
@@ -146,7 +191,7 @@ function EmojiPicker({
     const next = emojiGridMove(index, event.key, flat.length, EMOJI_GRID_COLUMNS);
     if (event.key === "ArrowUp" && next === null) {
       event.preventDefault();
-      searchRef.current?.focus();
+      searchRef.current?.focus({ preventScroll: true });
       return;
     }
     if (next === null) return;
@@ -202,6 +247,10 @@ function EmojiPicker({
         className: "uix-emoji-picker-popover",
         role: "dialog",
         "aria-label": labels.dialog,
+        closeWhenAnchorHidden: true,
+        onAnchorHidden: () => {
+          closedByAnchor.current = true;
+        },
         children: open ? /* @__PURE__ */ jsxs("div", { className: "uix-emoji-picker uix-emoji-picker--full", lang: locale, children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -221,50 +270,56 @@ function EmojiPicker({
               spellCheck: false
             }
           ),
-          data && !query.trim() ? /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__nav", role: "group", "aria-label": labels.categories, children: sections.map((section) => /* @__PURE__ */ jsx(
-            "button",
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              type: "button",
-              className: "uix-emoji-picker__nav-btn",
-              "aria-label": section.title,
-              title: section.title,
-              onClick: () => {
-                const start = section.emojis.length ? sectionStart.get(section.key) ?? -1 : -1;
-                gridRef.current?.querySelector(`[data-section="${section.key}"]`)?.scrollIntoView({ block: "start" });
-                if (start >= 0) focusCell(start);
-              },
-              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: section.emojis[0] ? renderEmoji(section.emojis[0]) : null })
-            },
-            section.key
-          )) }) : null,
-          /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: sections.map((section) => {
-            const start = offset;
-            offset += section.emojis.length;
-            if (!section.emojis.length) return null;
-            const headingId = `${id}-${section.key}`;
-            return /* @__PURE__ */ jsxs("section", { className: "uix-emoji-picker__section", "data-section": section.key, "aria-labelledby": headingId, children: [
-              /* @__PURE__ */ jsx("h3", { id: headingId, className: "uix-emoji-picker__heading", children: section.title }),
-              /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__cells", role: "group", "aria-labelledby": headingId, children: section.emojis.map((emoji, i) => {
-                const index = start + i;
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "uix-emoji-picker__btn",
-                    "data-emoji-index": index,
-                    tabIndex: index === activeIndex ? 0 : -1,
-                    "aria-label": names?.get(emoji) ?? emoji,
-                    title: names?.get(emoji),
-                    onClick: () => choose(emoji),
-                    onFocus: () => setActive(index),
-                    children: renderEmoji(emoji)
-                  },
-                  `${section.key}-${emoji}`
-                );
-              }) })
-            ] }, section.key);
-          }) }),
-          /* @__PURE__ */ jsx("p", { className: "uix-emoji-picker__status", role: "status", children: status })
+              className: "uix-emoji-picker__nav",
+              role: data ? "group" : void 0,
+              "aria-label": data ? labels.categories : void 0,
+              children: data ? browseSections.map((section) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "uix-emoji-picker__nav-btn",
+                  "aria-label": section.title,
+                  title: section.title,
+                  onClick: () => onCategory(section.key),
+                  children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: section.emojis[0] ? renderEmoji(section.emojis[0]) : null })
+                },
+                section.key
+              )) : null
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "uix-emoji-picker__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: [
+            sections.map((section) => {
+              const start = offset;
+              offset += section.emojis.length;
+              if (!section.emojis.length) return null;
+              const headingId = `${id}-${section.key}`;
+              return /* @__PURE__ */ jsxs("section", { className: "uix-emoji-picker__section", "data-section": section.key, "aria-labelledby": headingId, children: [
+                /* @__PURE__ */ jsx("h3", { id: headingId, className: "uix-emoji-picker__heading", children: section.title }),
+                /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__cells", role: "group", "aria-labelledby": headingId, children: section.emojis.map((emoji, i) => {
+                  const index = start + i;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uix-emoji-picker__btn",
+                      "data-emoji-index": index,
+                      tabIndex: index === activeIndex ? 0 : -1,
+                      "aria-label": names?.get(emoji) ?? emoji,
+                      title: names?.get(emoji),
+                      onClick: () => choose(emoji),
+                      onFocus: () => setActive(index),
+                      children: renderEmoji(emoji)
+                    },
+                    `${section.key}-${emoji}`
+                  );
+                }) })
+              ] }, section.key);
+            }),
+            /* @__PURE__ */ jsx("p", { className: "uix-emoji-picker__status", role: "status", children: status })
+          ] })
         ] }) : null
       }
     )

package/dist/components/Popover.d.ts

@@ -10,16 +10,26 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
     popover?: 'auto' | 'manual';
     /**
      * Element (or ref) to anchor against. When set, the popover is placed with
-     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen —
-     * instead of relying on CSS `anchor()`, which is Chromium-only and detaches the
-     * popover from its trigger everywhere else. The native Popover API still provides
-     * the top layer (so it escapes `overflow` clipping) and light-dismiss.
+     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen.
+     * Where the browser supports CSS anchor positioning, the placement is written as an
+     * offset from the anchor, so it stays attached while the page scrolls; elsewhere it
+     * follows scroll from JS. The native Popover API still provides the top layer (so it
+     * escapes `overflow` clipping) and light-dismiss.
      */
     anchor?: RefObject<HTMLElement | null> | HTMLElement | null;
     /** Preferred placement when `anchor` is set. Default `'bottom-start'`. */
     placement?: Placement;
     /** Gap between the trigger and the popover, in px. Default 6. */
     offset?: number;
+    /**
+     * Close the popover once its `anchor` has scrolled completely out of view (outside the
+     * viewport or a clipping ancestor), e.g. a picker opened from an editor that the user
+     * scrolls away from. Focus inside the popover is let go rather than sent back to the
+     * hidden anchor. Needs `anchor`. Default `false`.
+     */
+    closeWhenAnchorHidden?: boolean;
+    /** Called when `closeWhenAnchorHidden` is about to close the popover. */
+    onAnchorHidden?: () => void;
     children?: ReactNode;
 }
 /**
@@ -27,6 +37,6 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
  * things like a filter popover, menu, or rich select by putting controls inside.
  * Pass `anchor` to get collision-aware, cross-browser placement (UIX-FIX-02).
  */
-declare function Popover({ popover, anchor, placement, offset, className, children, ...props }: PopoverProps): react.JSX.Element;
+declare function Popover({ popover, anchor, placement, offset, closeWhenAnchorHidden, onAnchorHidden, className, children, ...props }: PopoverProps): react.JSX.Element;
 
 export { Popover, type PopoverProps };

package/dist/components/Popover.js

@@ -1,19 +1,38 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
-import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+import { resolveAnchor, useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const PLACING = "data-uix-placing";
+const isPopoverOpen = (el) => {
+  try {
+    return el.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+const settle = (el) => {
+  if (!el.hasAttribute(PLACING)) return;
+  getComputedStyle(el).getPropertyValue("transform");
+  el.removeAttribute(PLACING);
+};
 function Popover({
   popover = "auto",
   anchor,
   placement = "bottom-start",
   offset = 6,
+  closeWhenAnchorHidden = false,
+  onAnchorHidden,
   className,
   children,
   ...props
 }) {
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
+  const openRef = useRef(false);
+  const onAnchorHiddenRef = useRef(onAnchorHidden);
+  onAnchorHiddenRef.current = onAnchorHidden;
   const popoverAttr = { popover };
   const reposition = useAnchoredPosition(anchor ?? null, ref, {
     open: open && !!anchor,
@@ -23,14 +42,55 @@ function Popover({
   useEffect(() => {
     const el = ref.current;
     if (!el || !anchor) return;
+    const hold = (event) => {
+      if (event.newState !== "open") return;
+      el.setAttribute(PLACING, "");
+      window.setTimeout(() => settle(el), 150);
+    };
     const sync = () => {
-      const isOpen = el.matches(":popover-open");
-      if (isOpen) reposition();
-      setOpen(isOpen);
+      if (!isPopoverOpen(el)) {
+        el.removeAttribute(PLACING);
+        setOpen(false);
+        return;
+      }
+      reposition();
+      window.setTimeout(() => {
+        if (!isPopoverOpen(el)) return;
+        if (!openRef.current) {
+          setOpen(true);
+          return;
+        }
+        reposition();
+        settle(el);
+      }, 0);
     };
+    el.addEventListener("beforetoggle", hold);
     el.addEventListener("toggle", sync);
-    return () => el.removeEventListener("toggle", sync);
+    return () => {
+      el.removeEventListener("beforetoggle", hold);
+      el.removeEventListener("toggle", sync);
+      el.removeAttribute(PLACING);
+    };
   }, [anchor, reposition]);
+  useIsomorphicLayoutEffect(() => {
+    openRef.current = open;
+    if (open && ref.current) settle(ref.current);
+  }, [open]);
+  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__ */ jsx("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 export {

package/dist/{emoji-image-WQLh8ZQP.d.cts → emoji-image-6mPZ15Zy.d.cts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactElement } from 'react';
-import { P as Placement } from './overlay-position-CEGSz6Z2.cjs';
+import { P as Placement } from './overlay-position-Cjv5E7mn.cjs';
 
 type EmojiLocale = 'en' | 'de';
 interface EmojiEntry {
@@ -106,6 +106,9 @@ declare const EMOJI_GRID_COLUMNS = 8;
  * Emoji picker in a native popover: search, quick picks, recently used and the
  * Unicode categories, with names in English or German. The emoji dataset loads on
  * first open. The grid is one tab stop; arrow keys, Home and End move within it.
+ * The picker is one size in every state (loading, searching, failed), so it keeps the
+ * side it opened on; it stays attached to its trigger while the page scrolls and
+ * closes once the trigger is scrolled out of view.
  */
 declare function EmojiPicker({ onSelect, trigger, labels: labelOverrides, locale, quickPicks, loadData, recentStorageKey, placement, onOpenChange, className, emojiImageBaseUrl, }: EmojiPickerProps): react.JSX.Element;