@adecore/editor-react 0.31.12 → 0.33.0

package/dist/CompletionPopup.js

@@ -1,37 +1,80 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useId, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { formatShortcut } from '@adecore/ui';
 import { kindLetterOf, kindToneOf, rowWindow } from './completion-model.js';
-import { SourceLine, SymbolSections } from './HoverSections.js';
-import { PathText } from './PathText.js';
+import { SourceLine, SymbolSections } from "./HoverSections.js";
+import { PathText } from "./PathText.js";
 import { keepFocusOutOfList } from './popup-focus.js';
 import { placeBeside, placePopup } from './popup-placement.js';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TONES = {
-    callable: 'bg-accent-soft text-accent',
-    value: 'bg-status-running/15 text-status-running',
-    type: 'bg-status-idle/15 text-status-idle',
-    other: 'bg-surface-hover text-text-muted'
+  callable: 'bg-accent-soft text-accent',
+  value: 'bg-status-running/15 text-status-running',
+  type: 'bg-status-idle/15 text-status-idle',
+  other: 'bg-surface-hover text-text-muted'
 };
 /* The label with the characters that match what was typed set apart. */
-function MarkedLabel({ label, matches }) {
-    if (matches.length === 0) {
-        return _jsx(_Fragment, { children: label });
+function MarkedLabel(t0) {
+  const $ = _c(7);
+  const {
+    label,
+    matches
+  } = t0;
+  if (matches.length === 0) {
+    let t1;
+    if ($[0] !== label) {
+      t1 = /*#__PURE__*/_jsx(_Fragment, {
+        children: label
+      });
+      $[0] = label;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
     }
-    const marked = new Set(matches);
+    return t1;
+  }
+  let t1;
+  if ($[2] !== matches) {
+    t1 = new Set(matches);
+    $[2] = matches;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const marked = t1;
+  let t2;
+  if ($[4] !== label || $[5] !== marked) {
     const runs = [];
     for (let at = 0; at < label.length; at++) {
-        const isMarked = marked.has(at);
-        const last = runs[runs.length - 1];
-        if (last !== undefined && last.marked === isMarked) {
-            last.text += label[at];
-        }
-        else {
-            runs.push({ text: label[at], marked: isMarked });
-        }
+      const isMarked = marked.has(at);
+      const last = runs[runs.length - 1];
+      if (last !== undefined && last.marked === isMarked) {
+        last.text = last.text + label[at];
+      } else {
+        runs.push({
+          text: label[at],
+          marked: isMarked
+        });
+      }
     }
-    return (_jsx(_Fragment, { children: runs.map((run, index) => run.marked ? (_jsx("span", { className: "font-semibold text-accent", children: run.text }, index)) : (run.text)) }));
+    t2 = /*#__PURE__*/_jsx(_Fragment, {
+      children: runs.map(_temp)
+    });
+    $[4] = label;
+    $[5] = marked;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+function _temp(run, index) {
+  return run.marked ? /*#__PURE__*/_jsx("span", {
+    className: "font-semibold text-accent",
+    children: run.text
+  }, index) : run.text;
 }
 const CARD = 'fixed top-0 left-0 z-(--z-popup) overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)';
 const ROW_HEIGHT = 24;
@@ -47,69 +90,433 @@ const ROW_CHROME = 72;
  * documentation of the active one beside it, or under it when the window has no room at its side. A
  * press on a row never takes the focus from the editor, so typing goes on while the list is open.
  */
-export function CompletionPopup({ language, view, rect }) {
-    const { t } = useTranslation('editor');
-    const toggle = language.shortcuts.triggerCompletion;
-    const detailsKey = toggle === null ? null : formatShortcut(toggle, toggle.apple);
-    const listId = useId();
-    const list = useRef(null);
-    const docs = useRef(null);
-    const activeRow = useRef(null);
-    // The widest row so far in characters, which only grows, so the list never narrows or jumps while it is typed into.
-    const [widest, setWidest] = useState(0);
-    // Only the rows near the visible ones are drawn: a list of 150 is mostly out of sight, and every keystroke makes it again.
-    const [listTop, setListTop] = useState(0);
-    const need = Math.max(0, ...view.rows.slice(0, VISIBLE_ROWS * 2).map((row) => row.label.length + 2 + row.description.length));
-    if (need > widest) {
-        setWidest(need);
-    }
-    // Every render: the word moves when the editor scrolls, and the list and the documentation change size with what they hold.
-    useLayoutEffect(() => {
-        const card = list.current;
-        if (card === null) {
-            return;
-        }
-        const viewport = {
-            width: window.innerWidth,
-            height: window.innerHeight
+export function CompletionPopup(t0) {
+  const $ = _c(78);
+  const {
+    language,
+    view,
+    rect
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  const toggle = language.shortcuts.triggerCompletion;
+  let t1;
+  if ($[0] !== toggle) {
+    t1 = toggle === null ? null : formatShortcut(toggle, toggle.apple);
+    $[0] = toggle;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const detailsKey = t1;
+  const listId = useId();
+  const list = useRef(null);
+  const docs = useRef(null);
+  const activeRow = useRef(null);
+  const [widest, setWidest] = useState(0);
+  const [listTop, setListTop] = useState(0);
+  let t2;
+  if ($[2] !== view.rows) {
+    t2 = Math.max(0, ...view.rows.slice(0, VISIBLE_ROWS * 2).map(_temp2));
+    $[2] = view.rows;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const need = t2;
+  if (need > widest) {
+    setWidest(need);
+  }
+  let t3;
+  if ($[4] !== rect) {
+    t3 = () => {
+      const card = list.current;
+      if (card === null) {
+        return;
+      }
+      const viewport = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+      const side = docs.current;
+      const size = {
+        width: card.offsetWidth,
+        height: card.offsetHeight
+      };
+      const sideSize = side === null ? null : {
+        width: side.offsetWidth,
+        height: side.offsetHeight
+      };
+      const placed = placePopup(rect, size, viewport, {
+        gap: 2
+      });
+      card.style.left = `${Math.round(placed.left)}px`;
+      card.style.top = `${Math.round(placed.top)}px`;
+      card.style.visibility = "visible";
+      if (side !== null && sideSize !== null) {
+        const box = {
+          left: Math.round(placed.left),
+          top: Math.round(placed.top),
+          ...size
         };
-        const side = docs.current;
-        // Every size is read before the first write, so the page is laid out once and not after each of them.
-        const size = { width: card.offsetWidth, height: card.offsetHeight };
-        const sideSize = side === null ? null : { width: side.offsetWidth, height: side.offsetHeight };
-        const placed = placePopup(rect, size, viewport, { gap: 2 });
-        card.style.left = `${Math.round(placed.left)}px`;
-        card.style.top = `${Math.round(placed.top)}px`;
-        card.style.visibility = 'visible';
-        if (side !== null && sideSize !== null) {
-            const box = {
-                left: Math.round(placed.left),
-                top: Math.round(placed.top),
-                ...size
-            };
-            const beside = placeBeside(box, sideSize, viewport);
-            side.style.left = `${Math.round(beside.left)}px`;
-            side.style.top = `${Math.round(beside.top)}px`;
-            side.style.maxHeight = `${Math.floor(beside.maxHeight)}px`;
-            side.style.visibility = 'visible';
-        }
+        const beside = placeBeside(box, sideSize, viewport);
+        side.style.left = `${Math.round(beside.left)}px`;
+        side.style.top = `${Math.round(beside.top)}px`;
+        side.style.maxHeight = `${Math.floor(beside.maxHeight)}px`;
+        side.style.visibility = "visible";
+      }
+    };
+    $[4] = rect;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  useLayoutEffect(t3);
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => {
+      activeRow.current?.scrollIntoView({
+        block: "nearest"
+      });
+    };
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== view.active || $[8] !== view.rows) {
+    t5 = [view.active, view.rows];
+    $[7] = view.active;
+    $[8] = view.rows;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  useLayoutEffect(t4, t5);
+  const total = view.rows.length;
+  let t6;
+  if ($[10] !== listTop || $[11] !== total || $[12] !== view.active) {
+    t6 = rowWindow(listTop, view.active, total, ROW_HEIGHT, VISIBLE_ROWS, OVERSCAN_ROWS, LIST_PADDING);
+    $[10] = listTop;
+    $[11] = total;
+    $[12] = view.active;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  const {
+    first,
+    last
+  } = t6;
+  let t7;
+  if ($[14] !== listId) {
+    t7 = index => `${listId}-option-${index}`;
+    $[14] = listId;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  const optionId = t7;
+  const activeId = view.active >= first && view.active < last ? optionId(view.active) : undefined;
+  let t8;
+  if ($[16] !== activeId || $[17] !== language.editor || $[18] !== listId) {
+    t8 = () => {
+      language.editor.setInputPopup({
+        controls: listId,
+        activeDescendant: activeId
+      });
+      return () => language.editor.setInputPopup(null);
+    };
+    $[16] = activeId;
+    $[17] = language.editor;
+    $[18] = listId;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== activeId || $[21] !== language || $[22] !== listId) {
+    t9 = [language, listId, activeId];
+    $[20] = activeId;
+    $[21] = language;
+    $[22] = listId;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  useLayoutEffect(t8, t9);
+  let t10;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      visibility: "hidden"
+    };
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  let t11;
+  if ($[25] !== language.editor) {
+    t11 = keepFocusOutOfList(() => language.editor.focus());
+    $[25] = language.editor;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  const t12 = `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`;
+  let t13;
+  if ($[27] !== t12) {
+    t13 = /*#__PURE__*/_jsx("div", {
+      "aria-hidden": true,
+      className: "h-0 overflow-hidden font-mono text-code",
+      style: {
+        width: t12
+      }
+    });
+    $[27] = t12;
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  let t14;
+  let t15;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      maxHeight: ROW_HEIGHT * VISIBLE_ROWS + 8
+    };
+    t15 = event_0 => setListTop(event_0.currentTarget.scrollTop);
+    $[29] = t14;
+    $[30] = t15;
+  } else {
+    t14 = $[29];
+    t15 = $[30];
+  }
+  const t16 = first * ROW_HEIGHT;
+  let t17;
+  if ($[31] !== t16) {
+    t17 = /*#__PURE__*/_jsx("div", {
+      "aria-hidden": true,
+      style: {
+        height: t16
+      }
+    });
+    $[31] = t16;
+    $[32] = t17;
+  } else {
+    t17 = $[32];
+  }
+  let t18;
+  if ($[33] !== first || $[34] !== language.completion || $[35] !== last || $[36] !== optionId || $[37] !== total || $[38] !== view.active || $[39] !== view.rows) {
+    t18 = view.rows.slice(first, last).map((row_0, offset) => {
+      const index_0 = first + offset;
+      return /*#__PURE__*/_jsxs("button", {
+        id: optionId(index_0),
+        ref: index_0 === view.active ? activeRow : undefined,
+        type: "button",
+        role: "option",
+        tabIndex: -1,
+        "aria-selected": index_0 === view.active,
+        "aria-setsize": total,
+        "aria-posinset": index_0 + 1,
+        "data-active": index_0 === view.active,
+        className: "flex h-6 w-full items-center gap-2 overflow-hidden rounded-md px-1.5 text-left text-xs cursor-row",
+        onClick: () => void language.completion.accept(false, index_0),
+        children: [/*#__PURE__*/_jsx("span", {
+          className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONES[kindToneOf(row_0.kind)]}`,
+          children: kindLetterOf(row_0.kind)
+        }), /*#__PURE__*/_jsx("span", {
+          className: `max-w-full shrink-0 truncate font-mono text-code ${row_0.deprecated ? "line-through" : ""}`,
+          children: /*#__PURE__*/_jsx(MarkedLabel, {
+            label: row_0.label,
+            matches: row_0.matches
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          className: "min-w-0 grow truncate font-mono text-text-faint",
+          children: row_0.detail
+        }), /*#__PURE__*/_jsx(PathText, {
+          path: row_0.description,
+          className: "max-w-[60%] font-mono text-text-faint"
+        })]
+      }, `${index_0}:${row_0.label}`);
+    });
+    $[33] = first;
+    $[34] = language.completion;
+    $[35] = last;
+    $[36] = optionId;
+    $[37] = total;
+    $[38] = view.active;
+    $[39] = view.rows;
+    $[40] = t18;
+  } else {
+    t18 = $[40];
+  }
+  const t19 = (total - last) * ROW_HEIGHT;
+  let t20;
+  if ($[41] !== t19) {
+    t20 = /*#__PURE__*/_jsx("div", {
+      "aria-hidden": true,
+      style: {
+        height: t19
+      }
+    });
+    $[41] = t19;
+    $[42] = t20;
+  } else {
+    t20 = $[42];
+  }
+  let t21;
+  if ($[43] !== listId || $[44] !== t17 || $[45] !== t18 || $[46] !== t20) {
+    t21 = /*#__PURE__*/_jsxs("div", {
+      id: listId,
+      role: "listbox",
+      className: "w-0 min-w-full overflow-y-auto p-1",
+      style: t14,
+      onScroll: t15,
+      children: [t17, t18, t20]
     });
-    useLayoutEffect(() => {
-        activeRow.current?.scrollIntoView({ block: 'nearest' });
-    }, [view.active, view.rows]);
-    const total = view.rows.length;
-    const { first, last } = rowWindow(listTop, view.active, total, ROW_HEIGHT, VISIBLE_ROWS, OVERSCAN_ROWS, LIST_PADDING);
-    const optionId = (index) => `${listId}-option-${index}`;
-    const activeId = view.active >= first && view.active < last ? optionId(view.active) : undefined;
-    // The focus stays in the text, so the input is what names the list and its active option.
-    useLayoutEffect(() => {
-        language.editor.setInputPopup({ controls: listId, activeDescendant: activeId });
-        return () => language.editor.setInputPopup(null);
-    }, [language, listId, activeId]);
-    return createPortal(_jsxs(_Fragment, { children: [_jsxs("div", { ref: list, className: `${CARD} flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[340px] flex-col`, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), ...keepFocusOutOfList(() => language.editor.focus()), children: [_jsx("div", { "aria-hidden": true, className: "h-0 overflow-hidden font-mono text-code", style: {
-                            width: `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`
-                        } }), _jsxs("div", { id: listId, role: "listbox", className: "w-0 min-w-full overflow-y-auto p-1", style: { maxHeight: ROW_HEIGHT * VISIBLE_ROWS + 8 }, onScroll: (event) => setListTop(event.currentTarget.scrollTop), children: [_jsx("div", { "aria-hidden": true, style: { height: first * ROW_HEIGHT } }), view.rows.slice(first, last).map((row, offset) => {
-                                const index = first + offset;
-                                return (_jsxs("button", { id: optionId(index), ref: index === view.active ? activeRow : undefined, type: "button", role: "option", tabIndex: -1, "aria-selected": index === view.active, "aria-setsize": total, "aria-posinset": index + 1, "data-active": index === view.active, className: "flex h-6 w-full items-center gap-2 overflow-hidden rounded-md px-1.5 text-left text-xs cursor-row", onClick: () => void language.completion.accept(false, index), children: [_jsx("span", { className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONES[kindToneOf(row.kind)]}`, children: kindLetterOf(row.kind) }), _jsx("span", { className: `max-w-full shrink-0 truncate font-mono text-code ${row.deprecated ? 'line-through' : ''}`, children: _jsx(MarkedLabel, { label: row.label, matches: row.matches }) }), _jsx("span", { className: "min-w-0 grow truncate font-mono text-text-faint", children: row.detail }), _jsx(PathText, { path: row.description, className: "max-w-[60%] font-mono text-text-faint" })] }, `${index}:${row.label}`));
-                            }), _jsx("div", { "aria-hidden": true, style: { height: (total - last) * ROW_HEIGHT } })] }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint", children: [_jsxs("span", { children: ["\u21B5 ", t('language.completion.insert')] }), _jsxs("span", { children: ["\u21E5 ", t('language.completion.replace')] }), detailsKey !== null && (_jsxs("span", { children: [detailsKey, " ", t('language.completion.details')] })), _jsx("span", { className: "ml-auto", children: view.server })] })] }), view.detailsOpen && view.docs !== null && (_jsxs("div", { ref: docs, className: `${CARD} flex w-[360px] flex-col divide-y divide-border overflow-y-auto select-text`, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), children: [view.docs.source !== '' && (_jsx("div", { className: "px-3 py-2", children: _jsx(SourceLine, { text: view.docs.source, language: view.highlightLanguage }) })), _jsx(SymbolSections, { text: view.docs.text })] }))] }), document.body);
+    $[43] = listId;
+    $[44] = t17;
+    $[45] = t18;
+    $[46] = t20;
+    $[47] = t21;
+  } else {
+    t21 = $[47];
+  }
+  let t22;
+  if ($[48] !== t) {
+    t22 = t("language.completion.insert");
+    $[48] = t;
+    $[49] = t22;
+  } else {
+    t22 = $[49];
+  }
+  let t23;
+  if ($[50] !== t22) {
+    t23 = /*#__PURE__*/_jsxs("span", {
+      children: ["\u21B5 ", t22]
+    });
+    $[50] = t22;
+    $[51] = t23;
+  } else {
+    t23 = $[51];
+  }
+  let t24;
+  if ($[52] !== t) {
+    t24 = t("language.completion.replace");
+    $[52] = t;
+    $[53] = t24;
+  } else {
+    t24 = $[53];
+  }
+  let t25;
+  if ($[54] !== t24) {
+    t25 = /*#__PURE__*/_jsxs("span", {
+      children: ["\u21E5 ", t24]
+    });
+    $[54] = t24;
+    $[55] = t25;
+  } else {
+    t25 = $[55];
+  }
+  let t26;
+  if ($[56] !== detailsKey || $[57] !== t) {
+    t26 = detailsKey !== null && /*#__PURE__*/_jsxs("span", {
+      children: [detailsKey, " ", t("language.completion.details")]
+    });
+    $[56] = detailsKey;
+    $[57] = t;
+    $[58] = t26;
+  } else {
+    t26 = $[58];
+  }
+  let t27;
+  if ($[59] !== view.server) {
+    t27 = /*#__PURE__*/_jsx("span", {
+      className: "ml-auto",
+      children: view.server
+    });
+    $[59] = view.server;
+    $[60] = t27;
+  } else {
+    t27 = $[60];
+  }
+  let t28;
+  if ($[61] !== t23 || $[62] !== t25 || $[63] !== t26 || $[64] !== t27) {
+    t28 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint",
+      children: [t23, t25, t26, t27]
+    });
+    $[61] = t23;
+    $[62] = t25;
+    $[63] = t26;
+    $[64] = t27;
+    $[65] = t28;
+  } else {
+    t28 = $[65];
+  }
+  let t29;
+  if ($[66] !== t11 || $[67] !== t13 || $[68] !== t21 || $[69] !== t28) {
+    t29 = /*#__PURE__*/_jsxs("div", {
+      ref: list,
+      className: `${CARD} flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[340px] flex-col`,
+      style: t10,
+      onPointerDown: _temp3,
+      ...t11,
+      children: [t13, t21, t28]
+    });
+    $[66] = t11;
+    $[67] = t13;
+    $[68] = t21;
+    $[69] = t28;
+    $[70] = t29;
+  } else {
+    t29 = $[70];
+  }
+  let t30;
+  if ($[71] !== view.detailsOpen || $[72] !== view.docs || $[73] !== view.highlightLanguage) {
+    t30 = view.detailsOpen && view.docs !== null && /*#__PURE__*/_jsxs("div", {
+      ref: docs,
+      className: `${CARD} flex w-[360px] flex-col divide-y divide-border overflow-y-auto select-text`,
+      style: {
+        visibility: "hidden"
+      },
+      onPointerDown: _temp4,
+      children: [view.docs.source !== "" && /*#__PURE__*/_jsx("div", {
+        className: "px-3 py-2",
+        children: /*#__PURE__*/_jsx(SourceLine, {
+          text: view.docs.source,
+          language: view.highlightLanguage
+        })
+      }), /*#__PURE__*/_jsx(SymbolSections, {
+        text: view.docs.text
+      })]
+    });
+    $[71] = view.detailsOpen;
+    $[72] = view.docs;
+    $[73] = view.highlightLanguage;
+    $[74] = t30;
+  } else {
+    t30 = $[74];
+  }
+  let t31;
+  if ($[75] !== t29 || $[76] !== t30) {
+    t31 = createPortal(/*#__PURE__*/_jsxs(_Fragment, {
+      children: [t29, t30]
+    }), document.body);
+    $[75] = t29;
+    $[76] = t30;
+    $[77] = t31;
+  } else {
+    t31 = $[77];
+  }
+  return t31;
+}
+function _temp4(event_1) {
+  return event_1.preventDefault();
+}
+function _temp3(event) {
+  return event.preventDefault();
 }
+function _temp2(row) {
+  return row.label.length + 2 + row.description.length;
+}