@tensor_1/react 2.26.2 → 2.26.3

package/dist/overlay-position.js

@@ -21,10 +21,15 @@ 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 } = options;
+  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true, stickySide } = options;
   const { side: preferred, align } = parsePlacement(placement);
   let side = preferred;
-  if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
+  const sticky = stickySide === preferred || stickySide === OPPOSITE[preferred] ? stickySide : void 0;
+  if (flip && sticky) {
+    side = sticky;
+    const opp = OPPOSITE[side];
+    if (!fitsOn(side, anchor, floating, viewport, offset, padding) && fitsOn(opp, anchor, floating, viewport, offset, padding)) side = opp;
+  } else if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
     const opp = OPPOSITE[side];
     if (fitsOn(opp, anchor, floating, viewport, offset, padding) || spaceOn(opp, anchor, viewport, offset) > spaceOn(side, anchor, viewport, offset)) {
       side = opp;

package/dist/rich-text.cjs

@@ -79,10 +79,15 @@ 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 } = options;
+  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true, stickySide } = options;
   const { side: preferred, align } = parsePlacement(placement);
   let side = preferred;
-  if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
+  const sticky = stickySide === preferred || stickySide === OPPOSITE[preferred] ? stickySide : void 0;
+  if (flip && sticky) {
+    side = sticky;
+    const opp = OPPOSITE[side];
+    if (!fitsOn(side, anchor, floating, viewport, offset, padding) && fitsOn(opp, anchor, floating, viewport, offset, padding)) side = opp;
+  } else if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
     const opp = OPPOSITE[side];
     if (fitsOn(opp, anchor, floating, viewport, offset, padding) || spaceOn(opp, anchor, viewport, offset) > spaceOn(side, anchor, viewport, offset)) {
       side = opp;
@@ -762,57 +767,206 @@ var import_react4 = require("react");
 // src/hooks/useAnchoredPosition.ts
 var import_react3 = require("react");
 var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react3.useLayoutEffect : import_react3.useEffect;
-var resolve = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+var resolveAnchor = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+var anchoringSupported;
+function supportsAnchoring() {
+  if (anchoringSupported === void 0) {
+    try {
+      const css = typeof CSS !== "undefined" ? CSS : void 0;
+      anchoringSupported = !!css && typeof css.supports === "function" && css.supports("anchor-name", "--uix-a") && css.supports("position-anchor", "--uix-a") && css.supports("top", "round(anchor(bottom) + 1px, 1px)");
+    } catch {
+      anchoringSupported = false;
+    }
+  }
+  return anchoringSupported;
+}
+var anchorCount = 0;
+var namesOf = (value) => value.split(",").map((n) => n.trim()).filter((n) => n.startsWith("--"));
+function addAnchorName(el, name) {
+  const names = namesOf(getComputedStyle(el).getPropertyValue("anchor-name"));
+  if (!names.includes(name)) names.push(name);
+  el.style.setProperty("anchor-name", names.join(", "));
+}
+function removeAnchorName(el, name) {
+  const names = namesOf(el.style.getPropertyValue("anchor-name")).filter((n) => n !== name);
+  if (names.length) el.style.setProperty("anchor-name", names.join(", "));
+  else el.style.removeProperty("anchor-name");
+}
+function translationOf(el) {
+  const t = getComputedStyle(el).transform;
+  if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
+  try {
+    const m = new DOMMatrixReadOnly(t);
+    return { x: m.m41, y: m.m42 };
+  } catch {
+    return { x: 0, y: 0 };
+  }
+}
+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_react3.useRef)({ placement, offset, padding });
   opts.current = { placement, offset, padding };
+  const session = (0, import_react3.useRef)(false);
+  const side = (0, import_react3.useRef)(null);
+  const written = (0, import_react3.useRef)("");
+  const anchoring = (0, import_react3.useRef)(null);
+  const anchoringFailed = (0, import_react3.useRef)(false);
+  const anchorName = (0, import_react3.useRef)("");
+  const release = (0, import_react3.useCallback)((keepPlace) => {
+    const current = anchoring.current;
+    if (!current) return;
+    anchoring.current = null;
+    written.current = "";
+    const floating = floatingRef.current;
+    if (floating) {
+      const s = floating.style;
+      if (keepPlace && current.anchor.isConnected) {
+        const a = current.anchor.getBoundingClientRect();
+        s.top = `${Math.round((current.yEdge === "bottom" ? a.bottom : a.top) + current.dy)}px`;
+        s.left = `${Math.round((current.xEdge === "right" ? a.right : a.left) + current.dx)}px`;
+      }
+      s.removeProperty("position-anchor");
+    }
+    removeAnchorName(current.anchor, current.name);
+  }, [floatingRef]);
   const reposition = (0, import_react3.useCallback)(() => {
-    const anchorEl = resolve(anchor);
+    const anchorEl = resolveAnchor(anchor);
     const floating = floatingRef.current;
     if (!anchorEl || !floating) return;
     const s = floating.style;
-    s.position = "fixed";
-    s.inset = "auto";
-    s.margin = "0";
+    if (!prepared.has(floating)) {
+      s.position = "fixed";
+      s.inset = "auto";
+      s.margin = "0";
+      prepared.add(floating);
+      written.current = "";
+    }
     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 },
-      { width: floating.offsetWidth, height: floating.offsetHeight },
+      size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad }
+      { placement: p, offset: o, padding: pad, stickySide: side.current ?? void 0 }
     );
-    s.left = `${Math.round(pos.x)}px`;
-    s.top = `${Math.round(pos.y)}px`;
-    floating.dataset.placement = pos.placement;
-  }, [anchor, floatingRef]);
+    const measured = size.width > 0 || size.height > 0;
+    if (measured && session.current) side.current = pos.side;
+    if (floating.dataset.placement !== pos.placement) floating.dataset.placement = pos.placement;
+    const writeFixed = (at) => {
+      const left2 = `${Math.round(at.x)}px`;
+      const top2 = `${Math.round(at.y)}px`;
+      const key2 = `fixed ${left2} ${top2}`;
+      if (key2 === written.current) return;
+      s.left = left2;
+      s.top = top2;
+      written.current = key2;
+    };
+    if (anchoringFailed.current || !supportsAnchoring()) {
+      writeFixed(pos);
+      return;
+    }
+    if (anchoring.current && anchoring.current.anchor !== anchorEl) release(false);
+    if (!anchoring.current) {
+      anchorName.current || (anchorName.current = `--uix-anchor-${++anchorCount}`);
+      addAnchorName(anchorEl, anchorName.current);
+      s.setProperty("position-anchor", anchorName.current);
+      anchoring.current = { anchor: anchorEl, name: anchorName.current, yEdge: "bottom", xEdge: "left", dy: 0, dx: 0, verified: false };
+      written.current = "";
+    }
+    const current = anchoring.current;
+    current.yEdge = pos.side === "bottom" ? "bottom" : "top";
+    current.xEdge = pos.side === "right" ? "right" : "left";
+    current.dy = pos.y - (current.yEdge === "bottom" ? a.bottom : a.top);
+    current.dx = pos.x - (current.xEdge === "right" ? a.right : a.left);
+    const top = `round(anchor(${current.yEdge}) ${signed(current.dy)}, 1px)`;
+    const left = `round(anchor(${current.xEdge}) ${signed(current.dx)}, 1px)`;
+    const key = `anchored ${top} ${left}`;
+    if (key !== written.current) {
+      s.top = top;
+      s.left = left;
+      written.current = key;
+    }
+    if (!current.verified && measured) {
+      current.verified = true;
+      const box = floating.getBoundingClientRect();
+      const t = translationOf(floating);
+      const dxc = box.left + box.width / 2 - t.x - (pos.x + size.width / 2);
+      const dyc = box.top + box.height / 2 - t.y - (pos.y + size.height / 2);
+      if (Math.abs(dxc) > 2 || Math.abs(dyc) > 2) {
+        anchoringFailed.current = true;
+        release(false);
+        writeFixed(pos);
+      }
+    }
+  }, [anchor, floatingRef, release]);
   useIsomorphicLayoutEffect(() => {
     if (!open) return;
+    session.current = true;
     reposition();
-    const onScroll = () => reposition();
+    const anchorEl = resolveAnchor(anchor);
+    const floating = floatingRef.current;
+    const onScroll = (event) => {
+      const target = event.target;
+      if (target && typeof target.contains === "function") {
+        if (floating?.contains(target)) return;
+        if (anchorEl && !target.contains(anchorEl)) return;
+      }
+      reposition();
+    };
+    const onResize = () => reposition();
     window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    window.addEventListener("resize", onScroll);
+    window.addEventListener("resize", onResize);
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(() => reposition()) : null;
+    if (floating) observer?.observe(floating);
+    if (anchorEl) observer?.observe(anchorEl);
     return () => {
       window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("resize", onResize);
+      observer?.disconnect();
+      session.current = false;
+      side.current = null;
+      anchoringFailed.current = false;
+      release(true);
     };
-  }, [open, reposition]);
+  }, [open, reposition, anchor, floatingRef, release]);
+  (0, import_react3.useEffect)(() => () => release(false), [release]);
   return reposition;
 }
 
 // src/components/Popover.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var useIsomorphicLayoutEffect2 = typeof document !== "undefined" ? import_react4.useLayoutEffect : import_react4.useEffect;
+var PLACING = "data-uix-placing";
+var isPopoverOpen = (el) => {
+  try {
+    return el.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+var 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 = (0, import_react4.useRef)(null);
   const [open, setOpen] = (0, import_react4.useState)(false);
+  const openRef = (0, import_react4.useRef)(false);
+  const onAnchorHiddenRef = (0, import_react4.useRef)(onAnchorHidden);
+  onAnchorHiddenRef.current = onAnchorHidden;
   const popoverAttr = { popover };
   const reposition = useAnchoredPosition(anchor ?? null, ref, {
     open: open && !!anchor,
@@ -822,14 +976,55 @@ function Popover({
   (0, import_react4.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]);
+  useIsomorphicLayoutEffect2(() => {
+    openRef.current = open;
+    if (open && ref.current) settle(ref.current);
+  }, [open]);
+  (0, import_react4.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_runtime4.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 
@@ -846,6 +1041,14 @@ var DEFAULT_EMOJI_PICKER_LABELS = {
   loadFailed: "Emoji could not be loaded."
 };
 var EMOJI_GRID_COLUMNS = 8;
+var useIsomorphicLayoutEffect3 = typeof document !== "undefined" ? import_react5.useLayoutEffect : import_react5.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,
@@ -867,6 +1070,8 @@ function EmojiPicker({
   const searchRef = (0, import_react5.useRef)(null);
   const gridRef = (0, import_react5.useRef)(null);
   const pointerWasOpen = (0, import_react5.useRef)(null);
+  const closedByAnchor = (0, import_react5.useRef)(false);
+  const pendingJump = (0, import_react5.useRef)(null);
   const [open, setOpen] = (0, import_react5.useState)(false);
   const [data, setData] = (0, import_react5.useState)(null);
   const [failed, setFailed] = (0, import_react5.useState)(false);
@@ -890,10 +1095,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();
       }
@@ -925,10 +1134,7 @@ function EmojiPicker({
     const el = popoverEl();
     if (el && isOpen(el)) el.hidePopover();
   };
-  const sections = (0, import_react5.useMemo)(() => {
-    if (query.trim()) {
-      return data ? [{ key: "results", title: labels.search, emojis: searchEmoji(data, query).map((e) => e.emoji) }] : [];
-    }
+  const browseSections = (0, import_react5.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 });
@@ -938,7 +1144,11 @@ function EmojiPicker({
       });
     }
     return list;
-  }, [query, data, quickPicks, recent, labels.search, labels.quickPicks, labels.recent]);
+  }, [data, quickPicks, recent, labels.quickPicks, labels.recent]);
+  const sections = (0, import_react5.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 = (0, import_react5.useMemo)(() => sections.flatMap((s) => s.emojis), [sections]);
   const sectionStart = (0, import_react5.useMemo)(() => {
     const starts = /* @__PURE__ */ new Map();
@@ -955,13 +1165,43 @@ function EmojiPicker({
     onSelect(emoji);
     hide();
   };
-  const focusCell = (0, import_react5.useCallback)((index) => {
+  const focusCell = (0, import_react5.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);
+  };
+  useIsomorphicLayoutEffect3(() => {
+    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);
@@ -969,7 +1209,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;
@@ -1025,6 +1265,10 @@ function EmojiPicker({
         className: "uix-emoji-picker-popover",
         role: "dialog",
         "aria-label": labels.dialog,
+        closeWhenAnchorHidden: true,
+        onAnchorHidden: () => {
+          closedByAnchor.current = true;
+        },
         children: open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uix-emoji-picker uix-emoji-picker--full", lang: locale, children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
@@ -1044,50 +1288,56 @@ function EmojiPicker({
               spellCheck: false
             }
           ),
-          data && !query.trim() ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uix-emoji-picker__nav", role: "group", "aria-label": labels.categories, children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "button",
+          /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": "true", children: section.emojis[0] ? renderEmoji(section.emojis[0]) : null })
-            },
-            section.key
-          )) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "uix-emoji-picker__section", "data-section": section.key, "aria-labelledby": headingId, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { id: headingId, className: "uix-emoji-picker__heading", children: section.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uix-emoji-picker__cells", role: "group", "aria-labelledby": headingId, children: section.emojis.map((emoji, i) => {
-                const index = start + i;
-                return /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "uix-emoji-picker__nav-btn",
+                  "aria-label": section.title,
+                  title: section.title,
+                  onClick: () => onCategory(section.key),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": "true", children: section.emojis[0] ? renderEmoji(section.emojis[0]) : null })
+                },
+                section.key
+              )) : null
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "uix-emoji-picker__section", "data-section": section.key, "aria-labelledby": headingId, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { id: headingId, className: "uix-emoji-picker__heading", children: section.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uix-emoji-picker__cells", role: "group", "aria-labelledby": headingId, children: section.emojis.map((emoji, i) => {
+                  const index = start + i;
+                  return /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)("p", { className: "uix-emoji-picker__status", role: "status", children: status })
+          ] })
         ] }) : null
       }
     )

package/dist/rich-text.d.cts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { E as EmojiPickerLabels, a as EmojiLocale } from './emoji-image-WQLh8ZQP.cjs';
-export { l as emojiImageFileName } from './emoji-image-WQLh8ZQP.cjs';
-import './overlay-position-CEGSz6Z2.cjs';
+import { E as EmojiPickerLabels, a as EmojiLocale } from './emoji-image-6mPZ15Zy.cjs';
+export { l as emojiImageFileName } from './emoji-image-6mPZ15Zy.cjs';
+import './overlay-position-Cjv5E7mn.cjs';
 
 type RichTextFeatures = 'full' | 'comment' | 'template';
 type RichTextHeadingLevel = 1 | 2 | 3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.26.2",
+  "version": "2.26.3",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",