@k2b/ui 0.17.0 → 0.19.0

package/dist/ssr/inputs/emoji/EmojiPicker.js

@@ -0,0 +1,551 @@
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<button", " type=\"button\" role=\"option\" tabindex=\"-1\" class=\"k2b-emoji-picker__option\"", ">", "</button>"],
+  _tmpl$2 = ["<button type=\"button\" class=\"k2b-emoji-picker__tone-button\"", " aria-haspopup=\"true\"", " title=\"", "\"", "><span aria-hidden=\"true\">", "</span></button>"],
+  _tmpl$3 = ["<div class=\"k2b-emoji-picker__tones\" role=\"radiogroup\"", ">", "</div>"],
+  _tmpl$4 = ["<div role=\"group\"", ">", "</div>"],
+  _tmpl$5 = ["<div id=\"", "\" role=\"listbox\" class=\"k2b-emoji-picker__list\"", ">", "<div class=\"k2b-emoji-picker__all\"", ">", "</div></div>"],
+  _tmpl$6 = ["<div class=\"k2b-emoji-picker__state\" role=\"status\">", "</div>"],
+  _tmpl$7 = ["<div class=\"", "\" role=\"group\"", "><div class=\"k2b-emoji-picker__header\"><div class=\"k2b-emoji-picker__search\"", "><i class=\"ti ti-search\" aria-hidden=\"true\"></i><input type=\"search\" role=\"combobox\"", " aria-expanded=\"true\" aria-controls=\"", "\" aria-autocomplete=\"list\"", " autocomplete=\"off\" spellcheck=\"false\" enterkeyhint=\"done\"", "></div>", "</div><div class=\"k2b-emoji-picker__groups\" role=\"toolbar\"", ">", "</div><div class=\"k2b-emoji-picker__scroll\">", "</div><div class=\"k2b-emoji-picker__preview\" aria-hidden=\"true\">", "</div></div>"],
+  _tmpl$8 = ["<button type=\"button\" role=\"radio\"", "><span aria-hidden=\"true\">", "</span></button>"],
+  _tmpl$9 = ["<button type=\"button\"", "", "><i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$0 = ["<span>", "</span>"],
+  _tmpl$1 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
+  _tmpl$10 = ["<span class=\"k2b-sr-only\">", "</span>"],
+  _tmpl$11 = ["<div class=\"k2b-emoji-picker__grid k2b-emoji-picker__block\" style=\"", "\">", "</div>"],
+  _tmpl$12 = ["<div role=\"group\" class=\"k2b-emoji-picker__section\"", " aria-labelledby=\"", "\" style=\"", "\"><div id=\"", "\" class=\"k2b-emoji-picker__heading\" data-emoji-heading>", "</div><div class=\"k2b-emoji-picker__grid\">", "</div></div>"],
+  _tmpl$13 = ["<span class=\"k2b-emoji-picker__preview-emoji\">", "</span>"],
+  _tmpl$14 = ["<span class=\"k2b-emoji-picker__preview-name\">", "</span>"],
+  _tmpl$15 = ["<span class=\"k2b-emoji-picker__preview-code\">:", ":</span>"],
+  _tmpl$16 = ["<div popover=\"auto\" class=\"k2b-emoji-picker-popover\">", "</div>"];
+import { createEffect, createMemo, createSelector, createSignal, createUniqueId, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { Button } from "../../actions/Button";
+import { returnFocus, ringOnReturn } from "../../internal/focus-return";
+import { useLocale } from "../../intl/locale";
+import { useUiMessages } from "../../intl/messages";
+import { EMOJI_GROUPS, EMOJI_SKIN_TONES, emojiInTone, emojiName, findEmoji, loadEmojiIndex, RECENT_EMOJI_LIMIT, searchEmoji } from "./emoji-index";
+import { useEmojiMessages } from "./emoji-messages";
+
+/** Emoji per row. Keyboard navigation moves by rows of this length. */
+const COLUMNS = 8;
+/** Search results render in blocks of this many rows, so the browser lays out only the blocks in view. */
+const RESULT_BLOCK = 8 * COLUMNS;
+const TONE_SAMPLE = "✋";
+const TONE_SAMPLE_LIGHT = "✋\u{1F3FB}";
+const groupTitle = (messages, key) => {
+  switch (key) {
+    case "recent":
+      return messages.emojiRecent;
+    case "smileys":
+      return messages.emojiSmileys;
+    case "people":
+      return messages.emojiPeople;
+    case "animals":
+      return messages.emojiAnimals;
+    case "food":
+      return messages.emojiFood;
+    case "travel":
+      return messages.emojiTravel;
+    case "activities":
+      return messages.emojiActivities;
+    case "objects":
+      return messages.emojiObjects;
+    case "symbols":
+      return messages.emojiSymbols;
+    case "flags":
+      return messages.emojiFlags;
+  }
+};
+const toneLabel = (messages, tone) => [messages.emojiToneDefault, messages.emojiToneLight, messages.emojiToneMediumLight, messages.emojiToneMedium, messages.emojiToneMediumDark, messages.emojiToneDark][tone];
+const toneSample = tone => tone === 0 ? TONE_SAMPLE : TONE_SAMPLE_LIGHT.replace("\u{1F3FB}", String.fromCodePoint(0x1f3fb + tone - 1));
+
+/** Where `index` moves for an arrow key in rows of `COLUMNS`, where every section starts a new row. */
+export const nextEmojiIndex = (sizes, index, key) => {
+  const total = sizes.reduce((sum, size) => sum + size, 0);
+  if (total === 0) return -1;
+  if (index < 0) return 0;
+  if (key === "ArrowLeft") return Math.max(0, index - 1);
+  if (key === "ArrowRight") return Math.min(total - 1, index + 1);
+  const starts = [];
+  sizes.reduce((start, size) => (starts.push(start), start + size), 0);
+  const section = starts.findLastIndex((start, position) => start <= index && sizes[position] > 0);
+  const offset = index - starts[section];
+  const column = offset % COLUMNS;
+  const size = sizes[section];
+  if (key === "ArrowUp") {
+    if (offset >= COLUMNS) return index - COLUMNS;
+    for (let previous = section - 1; previous >= 0; previous--) {
+      if (!sizes[previous]) continue;
+      const lastRow = Math.floor((sizes[previous] - 1) / COLUMNS) * COLUMNS;
+      return starts[previous] + Math.min(lastRow + column, sizes[previous] - 1);
+    }
+    return index;
+  }
+  if (offset + COLUMNS < size) return index + COLUMNS;
+  // A shorter last row: the last emoji of the section is below.
+  if (Math.floor(offset / COLUMNS) < Math.floor((size - 1) / COLUMNS)) return starts[section] + size - 1;
+  for (let next = section + 1; next < sizes.length; next++) {
+    if (sizes[next]) return starts[next] + Math.min(column, sizes[next] - 1);
+  }
+  return index;
+};
+
+/**
+ * A search field, the groups, and a grid of emoji. Search finds English and German names, keywords and GitHub
+ * shortcodes. The focus stays in the search field: arrow keys move through the grid, Enter picks.
+ */
+function EmojiPickerPanel(props) {
+  const messages = useUiMessages();
+  const text = useEmojiMessages();
+  const locale = useLocale();
+  const id = `k2b-emoji-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
+  const [index, setIndex] = createSignal();
+  const [failed, setFailed] = createSignal(false);
+  const [query, setQuery] = createSignal("");
+  const [active, setActive] = createSignal(0);
+  const isActive = createSelector(active);
+  const [tonesOpen, setTonesOpen] = createSignal(false);
+  const [currentGroup, setCurrentGroup] = createSignal();
+  /** Up or down moved into the grid; from then on, left and right move there too, until the search changes. */
+  const [gridEntered, setGridEntered] = createSignal(false);
+  let searchRef;
+  let scrollRef;
+  let toneButtonRef;
+  let tonesRef;
+  let groupsRef;
+  /** Keyboard moves scroll the active emoji into view; the pointer does not. */
+  let revealActive = false;
+  const load = () => {
+    setFailed(false);
+    loadEmojiIndex().then(setIndex, () => setFailed(true));
+  };
+  onMount(load);
+  const tone = () => props.skinTone ?? 0;
+  const searching = () => query().trim().length > 0;
+  // The groups render once and stay while a search shows its results above them, so clearing a search is instant.
+  const groups = createMemo(() => {
+    const data = index();
+    if (!data) return [];
+    const recent = {
+      key: "recent",
+      items: (props.recent ?? []).slice(0, RECENT_EMOJI_LIMIT).map(emoji => ({
+        emoji,
+        entry: findEmoji(data, emoji)
+      }))
+    };
+    const all = EMOJI_GROUPS.map(group => ({
+      key: group.key,
+      items: data.entries.filter(entry => entry.group === group.id).map(entry => ({
+        emoji: emojiInTone(entry, tone()),
+        entry
+      }))
+    }));
+    return recent.items.length ? [recent, ...all] : all;
+  });
+  const groupStarts = createMemo(() => {
+    const starts = [];
+    groups().reduce((start, section) => (starts.push(start), start + section.items.length), 0);
+    return starts;
+  });
+  const results = createMemo(() => {
+    const data = index();
+    if (!data || !searching()) return [];
+    return searchEmoji(data, query()).map(entry => ({
+      emoji: emojiInTone(entry, tone()),
+      entry
+    }));
+  });
+  const resultBlocks = createMemo(() => Array.from({
+    length: Math.ceil(results().length / RESULT_BLOCK)
+  }, (_, block) => results().slice(block * RESULT_BLOCK, (block + 1) * RESULT_BLOCK)));
+  /** The sizes of the visible sections, for the arrow keys. */
+  const sizes = () => searching() ? [results().length] : groups().map(section => section.items.length);
+  const items = createMemo(() => searching() ? results() : groups().flatMap(section => section.items));
+  const activeItem = () => items()[active()];
+  const optionId = (position, list = searching() ? "r" : "g") => `${id}-${list}${position}`;
+  const nameOf = item => item.entry ? emojiName(item.entry, locale()) : item.emoji;
+  /** Where an element sits in the list, from its top. */
+  const offsetOf = element => element.getBoundingClientRect().top - scrollRef.getBoundingClientRect().top + scrollRef.scrollTop;
+
+  // A new search starts at its best match; the groups at their top.
+  createEffect(on([query, index], () => {
+    setActive(0);
+    if (scrollRef) scrollRef.scrollTop = 0;
+  }));
+  createEffect(() => {
+    const position = active();
+    if (!revealActive) return;
+    revealActive = false;
+    const option = document.getElementById(optionId(position));
+    if (!option || !scrollRef) return;
+    // Sticky group titles cover the top of the list; an emoji in a first row scrolls with its title.
+    const covered = option.closest("[role='group']")?.querySelector("[data-emoji-heading]")?.offsetHeight ?? 0;
+    const top = offsetOf(option) - covered;
+    const bottom = offsetOf(option) + option.offsetHeight;
+    if (top < scrollRef.scrollTop) scrollRef.scrollTop = top;else if (bottom > scrollRef.scrollTop + scrollRef.clientHeight) scrollRef.scrollTop = bottom - scrollRef.clientHeight;
+  });
+
+  /** The group whose title sits at the top of the list, for the group bar. */
+  const syncGroup = () => {
+    if (!scrollRef || searching()) return;
+    const top = scrollRef.scrollTop + 1;
+    let current;
+    for (const group of scrollRef.querySelectorAll("[data-emoji-group]")) {
+      if (offsetOf(group) <= top) current = group.dataset.emojiGroup;
+    }
+    setCurrentGroup(current ?? groups()[0]?.key);
+  };
+  createEffect(on([groups, searching], () => queueMicrotask(syncGroup)));
+  onMount(() => {
+    if (props.autofocus) queueMicrotask(() => searchRef?.focus({
+      preventScroll: true
+    }));
+  });
+  const pick = item => {
+    if (item) props.onPick(item.emoji);
+  };
+  const showGroup = key => {
+    setQuery("");
+    queueMicrotask(() => {
+      const group = scrollRef?.querySelector(`[data-emoji-group="${key}"]`);
+      if (!group || !scrollRef) return;
+      scrollRef.scrollTop = offsetOf(group);
+      const position = groups().findIndex(section => section.key === key);
+      if (position >= 0) setActive(groupStarts()[position]);
+      syncGroup();
+    });
+  };
+  const onSearchKeyDown = event => {
+    // WebKit ends the composition before the keydown of the Enter that confirms it; that keydown keeps keyCode 229.
+    if (event.isComposing || event.keyCode === 229) return;
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+      // Left and right edit a search until up or down enters the grid.
+      if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && query() && !gridEntered()) return;
+      event.preventDefault();
+      revealActive = true;
+      setGridEntered(true);
+      setActive(nextEmojiIndex(sizes(), active(), event.key));
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      pick(activeItem());
+      return;
+    }
+    if (event.key === "Escape") {
+      if (query()) {
+        event.preventDefault();
+        event.stopPropagation();
+        setQuery("");
+        return;
+      }
+      if (props.onClose) {
+        event.preventDefault();
+        event.stopPropagation();
+        props.onClose();
+      }
+    }
+  };
+  const openTones = () => {
+    setTonesOpen(true);
+    queueMicrotask(() => tonesRef?.querySelector("[aria-checked='true']")?.focus());
+  };
+  const closeTones = focusButton => {
+    setTonesOpen(false);
+    if (focusButton) queueMicrotask(() => toneButtonRef?.focus());
+  };
+  /** As in any radio group, the arrow keys choose; Enter, Space, a click or Escape close the choice. */
+  const onTonesKeyDown = event => {
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const step = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+      const next = EMOJI_SKIN_TONES[(tone() + step + EMOJI_SKIN_TONES.length) % EMOJI_SKIN_TONES.length];
+      props.onSkinToneChange?.(next);
+      queueMicrotask(() => tonesRef?.querySelector(`[data-tone="${next}"]`)?.focus());
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      closeTones(true);
+    }
+  };
+
+  /** The group bar is one tab stop; arrow keys move along it. */
+  const onGroupsKeyDown = event => {
+    const buttons = [...(groupsRef?.querySelectorAll("button") ?? [])];
+    const current = buttons.indexOf(document.activeElement);
+    const target = event.key === "ArrowLeft" ? current - 1 : event.key === "ArrowRight" ? current + 1 : event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : undefined;
+    if (target === undefined) return;
+    event.preventDefault();
+    buttons[(target + buttons.length) % buttons.length]?.focus();
+  };
+  const groupKeys = createMemo(() => [...(props.recent?.length ? ["recent"] : []), ...EMOJI_GROUPS.map(group => group.key)]);
+  const groupIcon = key => key === "recent" ? "ti ti-clock" : EMOJI_GROUPS.find(group => group.key === key)?.icon ?? "ti ti-mood-smile";
+  const tabStop = () => currentGroup() ?? groupKeys()[0];
+
+  /** The grid shares its pointer listeners; the target's position says which emoji it is. */
+  const itemAt = event => {
+    const option = event.target?.closest("[data-emoji-index]");
+    return option ? Number(option.dataset.emojiIndex) : undefined;
+  };
+
+  // A button, so that a tap is a click on every engine; the focus stays in the search field.
+  const option = (item, list, position) => _$ssr(_tmpl$, _$ssrAttribute("id", _$escape(optionId(position(), list), true), false), _$ssrAttribute("aria-selected", _$escape(isActive(position()), true), false) + _$ssrAttribute("aria-label", _$escape(nameOf(item), true), false) + _$ssrAttribute("data-emoji-index", _$escape(position(), true), false) + _$ssrAttribute("data-active", isActive(position()) ? "true" : _$escape(undefined, true), false), _$escape(item.emoji));
+  return _$ssr(_tmpl$7, `k2b-emoji-picker ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label ?? text().emojiPicker, true), false), _$ssrAttribute("inert", tonesOpen(), true), _$ssrAttribute("aria-label", _$escape(text().emojiSearch, true), false), `${_$escape(id, true)}-list`, _$ssrAttribute("aria-activedescendant", activeItem() ? _$escape(optionId(active()), true) : _$escape(undefined, true), false) + _$ssrAttribute("placeholder", _$escape(text().emojiSearch, true), false), _$ssrAttribute("value", _$escape(query(), true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.onSkinToneChange;
+    },
+    get children() {
+      return [_$ssr(_tmpl$2, _$ssrAttribute("aria-label", _$escape(text().emojiSkinTone, true), false), _$ssrAttribute("aria-expanded", _$escape(tonesOpen(), true), false), `${_$escape(text().emojiSkinTone, true)}: ${_$escape(toneLabel(text(), tone()), true)}`, _$ssrAttribute("inert", tonesOpen(), true), _$escape(toneSample(tone()))), _$createComponent(Show, {
+        get when() {
+          return tonesOpen();
+        },
+        get children() {
+          return _$ssr(_tmpl$3, _$ssrAttribute("aria-label", _$escape(text().emojiSkinTone, true), false), _$escape(_$createComponent(For, {
+            each: EMOJI_SKIN_TONES,
+            children: value => _$ssr(_tmpl$8, _$ssrAttribute("aria-checked", _$escape(value, true) === _$escape(tone(), true), false) + _$ssrAttribute("aria-label", _$escape(toneLabel(text(), value), true), false) + _$ssrAttribute("title", _$escape(toneLabel(text(), value), true), false) + _$ssrAttribute("tabindex", value === tone() ? 0 : -1, false) + _$ssrAttribute("data-tone", _$escape(value, true), false), _$escape(toneSample(value)))
+          })));
+        }
+      })];
+    }
+  })), _$ssrAttribute("aria-label", _$escape(text().emojiGroups, true), false), _$escape(_$createComponent(For, {
+    get each() {
+      return groupKeys();
+    },
+    children: key => _$ssr(_tmpl$9, _$ssrAttribute("aria-label", _$escape(groupTitle(text(), key), true), false) + _$ssrAttribute("title", _$escape(groupTitle(text(), key), true), false) + _$ssrAttribute("aria-current", !searching() && currentGroup() === key ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", key === tabStop() ? 0 : -1, false), _$ssrAttribute("disabled", !index(), true), _$ssrAttribute("class", _$escape(groupIcon(key), true), false))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return index();
+    },
+    get fallback() {
+      return _$ssr(_tmpl$6, _$escape(_$createComponent(Show, {
+        get when() {
+          return failed();
+        },
+        get fallback() {
+          return [_$ssr(_tmpl$1), _$ssr(_tmpl$10, _$escape(messages().loading))];
+        },
+        get children() {
+          return [_$ssr(_tmpl$0, _$escape(text().emojiLoadFailed)), _$createComponent(Button, {
+            size: "sm",
+            variant: "subtle",
+            onClick: load,
+            get children() {
+              return messages().retry;
+            }
+          })];
+        }
+      })));
+    },
+    get children() {
+      return [_$ssr(_tmpl$5, `${_$escape(id, true)}-list`, _$ssrAttribute("aria-label", _$escape(props.label ?? text().emojiPicker, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return searching();
+        },
+        get children() {
+          return _$ssr(_tmpl$4, _$ssrAttribute("aria-label", _$escape(messages().searchResults, true), false), _$escape(_$createComponent(For, {
+            get each() {
+              return resultBlocks();
+            },
+            children: (block, blockIndex) => _$ssr(_tmpl$11, _$ssrStyleProperty("--k2b-emoji-rows:", _$escape(String(Math.ceil(block.length / COLUMNS)), true)), _$escape(_$createComponent(For, {
+              each: block,
+              children: (item, itemIndex) => option(item, "r", () => blockIndex() * RESULT_BLOCK + itemIndex())
+            })))
+          })));
+        }
+      })), _$ssrAttribute("hidden", searching(), true), _$escape(_$createComponent(For, {
+        get each() {
+          return groups();
+        },
+        children: (section, sectionIndex) => _$ssr(_tmpl$12, _$ssrAttribute("data-emoji-group", _$escape(section.key, true), false), `${_$escape(id, true)}-${_$escape(section.key, true)}`, _$ssrStyleProperty("--k2b-emoji-rows:", _$escape(String(Math.ceil(section.items.length / COLUMNS)), true)), `${_$escape(id, true)}-${_$escape(section.key, true)}`, _$escape(groupTitle(text(), section.key)), _$escape(_$createComponent(For, {
+          get each() {
+            return section.items;
+          },
+          children: (item, itemIndex) => option(item, "g", () => groupStarts()[sectionIndex()] + itemIndex())
+        })))
+      }))), _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!searching())() && results().length === 0;
+        },
+        get children() {
+          return _$ssr(_tmpl$6, _$escape(text().emojiNoResults));
+        }
+      })];
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return activeItem();
+    },
+    children: item => [_$ssr(_tmpl$13, _$escape(item().emoji)), _$ssr(_tmpl$14, _$escape(nameOf(item()))), _$createComponent(Show, {
+      get when() {
+        return item().entry?.shortcodes[0];
+      },
+      children: code => _$ssr(_tmpl$15, _$escape(code()))
+    })]
+  })));
+}
+const touchOnlyQuery = "(any-pointer: coarse) and (not (any-pointer: fine))";
+const GAP = 6;
+const MARGIN = 8;
+
+/**
+ * The picker next to a control, such as the composer's emoji button or a message's "Add reaction". It opens above the
+ * control where there is room and below it otherwise, closes after a pick, and returns the focus to where it was.
+ */
+function EmojiPickerPopover(props) {
+  let surface;
+  /** Where the focus was when the picker opened, and whether a keyboard opened it. */
+  let previous = null;
+  let ring = false;
+  /** An anchor pressed while the picker was open closes it; the same click must not open it again. */
+  let pressedAnchor;
+  const [shown, setShown] = createSignal();
+  const place = () => {
+    const anchor = shown();
+    if (!surface || !anchor) return;
+    // An anchor that left the page, such as a row a virtual list recycled, takes the picker with it.
+    if (!anchor.isConnected) {
+      hide();
+      props.onClose();
+      return;
+    }
+    // The visible part of the page: a phone's keyboard shrinks only the visual viewport.
+    const viewport = window.visualViewport;
+    const view = {
+      top: (viewport?.offsetTop ?? 0) + MARGIN,
+      bottom: (viewport ? viewport.offsetTop + viewport.height : window.innerHeight) - MARGIN,
+      left: (viewport?.offsetLeft ?? 0) + MARGIN,
+      right: (viewport ? viewport.offsetLeft + viewport.width : window.innerWidth) - MARGIN
+    };
+    surface.style.setProperty("--k2b-emoji-popover-height", `${Math.round(view.bottom - view.top)}px`);
+    const box = anchor.getBoundingClientRect();
+    const size = surface.getBoundingClientRect();
+    const above = box.top - GAP - size.height;
+    const below = box.bottom + GAP;
+    const top = above >= view.top || below + size.height > view.bottom ? above : below;
+    // Aligned with the anchor's end, like a menu at the end of a composer.
+    const left = box.right - size.width;
+    surface.style.left = `${Math.round(Math.max(view.left, Math.min(left, view.right - size.width)))}px`;
+    surface.style.top = `${Math.round(Math.max(view.top, Math.min(top, view.bottom - size.height)))}px`;
+  };
+  const restoreFocus = () => {
+    // A pick that moved the focus on purpose, such as into a composer, keeps it there.
+    const focused = document.activeElement;
+    if (focused && focused !== document.body && !surface?.contains(focused)) return;
+    if (previous?.isConnected) returnFocus(previous, ring);
+  };
+  const hide = () => {
+    restoreFocus();
+    if (surface?.matches(":popover-open")) surface.hidePopover();
+    setShown(undefined);
+  };
+  const pressed = event => {
+    const anchor = shown();
+    pressedAnchor = anchor && event.target instanceof Node && anchor.contains(event.target) ? anchor : undefined;
+  };
+
+  /** A key press on the anchor dismisses nothing on its way, unlike a pointer: its click closes the open picker. */
+  const clicked = event => {
+    const anchor = shown();
+    if (!anchor || !(event.target instanceof Node) || !anchor.contains(event.target)) return;
+    pressedAnchor = anchor;
+    hide();
+    props.onClose();
+  };
+  createEffect(() => {
+    const anchor = props.anchor ?? undefined;
+    untrack(() => {
+      if (!anchor) {
+        if (shown()) hide();
+        return;
+      }
+      if (anchor === pressedAnchor) {
+        // The press that closed the picker also asked to open it: it stays closed.
+        pressedAnchor = undefined;
+        props.onClose();
+        return;
+      }
+      if (shown() === anchor || !surface) return;
+      // Moving to another anchor keeps the picker open and the focus to return to.
+      if (!shown()) {
+        previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        ring = ringOnReturn(previous ?? anchor);
+      }
+      setShown(anchor);
+      if (!surface.matches(":popover-open")) surface.showPopover();
+      place();
+    });
+  });
+
+  /** The page scrolled under the anchor; the picker's own list scrolling moves nothing. */
+  const scrolled = event => {
+    if (!(event.target instanceof Node && surface?.contains(event.target))) place();
+  };
+  onMount(() => {
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", scrolled, true);
+    window.visualViewport?.addEventListener("resize", place);
+    window.visualViewport?.addEventListener("scroll", place);
+    document.addEventListener("pointerdown", pressed, true);
+    document.addEventListener("click", clicked, true);
+    // The picker renders into the open surface after it is shown; its size places it.
+    const observer = typeof ResizeObserver === "function" && surface ? new ResizeObserver(place) : undefined;
+    if (surface) observer?.observe(surface);
+    onCleanup(() => {
+      observer?.disconnect();
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", scrolled, true);
+      window.visualViewport?.removeEventListener("resize", place);
+      window.visualViewport?.removeEventListener("scroll", place);
+      document.removeEventListener("pointerdown", pressed, true);
+      document.removeEventListener("click", clicked, true);
+      if (surface?.matches(":popover-open")) hide();
+    });
+  });
+  const touchOnly = () => typeof matchMedia === "function" && matchMedia(touchOnlyQuery).matches;
+  return _$ssr(_tmpl$16, _$escape(_$createComponent(Show, {
+    get when() {
+      return shown();
+    },
+    get children() {
+      return _$createComponent(EmojiPickerPanel, {
+        onPick: emoji => {
+          props.onPick(emoji);
+          hide();
+          props.onClose();
+        },
+        get recent() {
+          return props.recent;
+        },
+        get skinTone() {
+          return props.skinTone;
+        },
+        get onSkinToneChange() {
+          return props.onSkinToneChange;
+        },
+        get label() {
+          return props.label;
+        },
+        get ["class"]() {
+          return props.class;
+        },
+        get autofocus() {
+          return !touchOnly();
+        },
+        onClose: () => {
+          hide();
+          props.onClose();
+        }
+      });
+    }
+  })));
+}
+
+/** The emoji picker. `EmojiPicker.Popover` opens it next to a control. */
+export const EmojiPicker = Object.assign(EmojiPickerPanel, {
+  Popover: EmojiPickerPopover
+});
+//# sourceMappingURL=EmojiPicker.js.map