@adecore/editor-react 0.31.11 → 0.32.0

package/dist/SymbolPicker.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { AtSign, Hash } from 'lucide-react';
@@ -8,101 +8,456 @@ import { formatShortcut, Icon } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { basenameOf } from './paths.js';
 import { filterEntries, groupEntries, letterOfKind, modeOf, toneOfKind } from './symbol-picker-model.js';
+import { 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'
 };
 const SEARCH_DELAY_MS = 200;
 /* The letter badge of a symbol kind, tinted by what the symbol is. */
-export function SymbolBadge({ kind }) {
-    return (_jsx("span", { className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs font-semibold ${TONES[toneOfKind(kind)]}`, children: letterOfKind(kind) }));
+export function SymbolBadge(t0) {
+  const $ = _c(5);
+  const {
+    kind
+  } = t0;
+  const t1 = `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs font-semibold ${TONES[toneOfKind(kind)]}`;
+  let t2;
+  if ($[0] !== kind) {
+    t2 = letterOfKind(kind);
+    $[0] = kind;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== t1 || $[3] !== t2) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: t1,
+      children: t2
+    });
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 }
 /*
  * The picker of go to symbol, over the editor: an input, the symbols of the file in groups by kind, and the
  * keys. The input keeps the focus; Enter goes, Escape and the focus leaving close it.
  */
-export function SymbolPicker({ language, view }) {
-    const { t } = useTranslation('editor');
-    const [input, setInput] = useState('');
-    const [active, setActive] = useState(0);
-    const [found, setFound] = useState({ text: '', entries: [] });
-    const activeRow = useRef(null);
-    const mode = modeOf(input);
-    const filterText = mode.mode === 'symbol' ? mode.text : '';
-    const searchText = mode.mode === 'workspace' ? mode.text : '';
-    const groups = useMemo(() => groupEntries(filterEntries(view.entries, filterText)), [view.entries, filterText]);
-    const flat = groups.flatMap((group) => group.entries);
-    const places = mode.mode === 'workspace' && found.text === mode.text ? found.entries : [];
-    const count = mode.mode === 'workspace' ? places.length : mode.mode === 'line' ? (mode.line === null ? 0 : 1) : flat.length;
-    useEffect(() => {
-        if (searchText === '') {
-            return;
-        }
-        const controller = new AbortController();
-        const text = searchText;
-        const timer = setTimeout(() => {
-            language.symbolPicker
-                .search(text, controller.signal)
-                .then((entries) => !controller.signal.aborted && setFound({ text, entries }))
-                .catch(() => undefined);
-        }, SEARCH_DELAY_MS);
-        return () => {
-            clearTimeout(timer);
-            controller.abort();
-        };
-    }, [language, searchText]);
-    useEffect(() => {
-        activeRow.current?.scrollIntoView({ block: 'nearest' });
-    }, [active, input]);
-    function choose(index) {
-        if (mode.mode === 'line') {
-            if (mode.line !== null) {
-                language.symbolPicker.goToLine(mode.line);
-            }
-        }
-        else if (mode.mode === 'workspace') {
-            const place = places[index];
-            if (place !== undefined) {
-                language.symbolPicker.goToWorkspace(place);
-            }
-        }
-        else if (flat[index] !== undefined) {
-            language.symbolPicker.goTo(flat[index]);
-        }
+export function SymbolPicker(t0) {
+  const $ = _c(56);
+  const {
+    language,
+    view
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  const [input, setInput] = useState("");
+  const [active, setActive] = useState(0);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      text: "",
+      entries: []
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [found, setFound] = useState(t1);
+  const activeRow = useRef(null);
+  const mode = modeOf(input);
+  const filterText = mode.mode === "symbol" ? mode.text : "";
+  const searchText = mode.mode === "workspace" ? mode.text : "";
+  const groups = groupEntries(filterEntries(view.entries, filterText));
+  const flat = groups.flatMap(_temp);
+  const places = mode.mode === "workspace" && found.text === mode.text ? found.entries : [];
+  const count = mode.mode === "workspace" ? places.length : mode.mode === "line" ? mode.line === null ? 0 : 1 : flat.length;
+  useEffect(() => {
+    if (searchText === "") {
+      return;
     }
-    function onKeyDown(event) {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            language.symbolPicker.close();
+    const controller = new AbortController();
+    const text = searchText;
+    const timer = setTimeout(() => {
+      language.symbolPicker.search(text, controller.signal).then(entries => !controller.signal.aborted && setFound({
+        text,
+        entries
+      })).catch(_temp2);
+    }, SEARCH_DELAY_MS);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [language, searchText]);
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      activeRow.current?.scrollIntoView({
+        block: "nearest"
+      });
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== active || $[3] !== input) {
+    t3 = [active, input];
+    $[2] = active;
+    $[3] = input;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  useEffect(t2, t3);
+  const choose = function choose(index) {
+    if (mode.mode === "line") {
+      if (mode.line !== null) {
+        language.symbolPicker.goToLine(mode.line);
+      }
+    } else {
+      if (mode.mode === "workspace") {
+        const place = places[index];
+        if (place !== undefined) {
+          language.symbolPicker.goToWorkspace(place);
         }
-        else if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
-            event.preventDefault();
-            event.stopPropagation();
-            choose(active);
+      } else {
+        if (flat[index] !== undefined) {
+          language.symbolPicker.goTo(flat[index]);
         }
-        else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-            event.preventDefault();
-            setActive(Math.max(0, Math.min(Math.max(0, count - 1), active + (event.key === 'ArrowDown' ? 1 : -1))));
+      }
+    }
+  };
+  const onKeyDown = function onKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      language.symbolPicker.close();
+    } else {
+      if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+        event.preventDefault();
+        event.stopPropagation();
+        choose(active);
+      } else {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          setActive(Math.max(0, Math.min(Math.max(0, count - 1), active + (event.key === "ArrowDown" ? 1 : -1))));
         }
+      }
     }
-    let offset = 0;
-    return createPortal(_jsxs("div", { className: "fixed top-[12vh] left-1/2 z-(--z-popup) flex w-[560px] max-w-[calc(100vw-16px)] -translate-x-1/2 flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)", onPointerDown: (event) => event.target !== event.currentTarget && event.target.tagName !== 'INPUT' && event.preventDefault(), children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [_jsx(Icon, { icon: mode.mode === 'workspace' ? Hash : AtSign, size: 14, className: "shrink-0 text-text-muted" }), _jsx("input", { autoFocus: true, value: input, spellCheck: false, autoComplete: "off", placeholder: t('language.symbols.placeholder', { file: view.file }), className: "min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint", onChange: (event) => {
-                            setInput(event.target.value);
-                            setActive(0);
-                        }, onKeyDown: onKeyDown, onBlur: () => language.symbolPicker.close() }), _jsx("span", { className: "shrink-0 text-xs text-text-faint", children: language.shortcuts.goToSymbol === null ? '' : formatShortcut(language.shortcuts.goToSymbol, language.apple) })] }), _jsxs("div", { role: "listbox", className: "max-h-[320px] overflow-y-auto p-1", children: [mode.mode === 'line' && (_jsx("div", { className: "px-2 py-1.5 text-xs text-text-muted", children: mode.line === null ? t('language.symbols.lineHint') : t('language.symbols.goToLine', { line: formatNumber(mode.line) }) })), mode.mode === 'workspace' &&
-                        places.map((place, index) => {
-                            const path = fileUriToPath(place.uri);
-                            return (_jsxs("button", { ref: index === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": index === active, "data-active": index === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(index), children: [_jsx(SymbolBadge, { kind: place.kind }), _jsx("span", { className: "shrink-0", children: place.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: place.container }), _jsxs("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: [path === null ? '' : basenameOf(path), ":", formatNumber(place.line + 1)] })] }, place.id));
-                        }), mode.mode === 'symbol' &&
-                        groups.map((group) => {
-                            const start = offset;
-                            offset += group.entries.length;
-                            return (_jsxs("div", { role: "group", children: [_jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: t(`language.symbols.groups.${group.group}`) }), group.entries.map((entry, index) => {
-                                        const position = start + index;
-                                        return (_jsxs("button", { ref: position === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": position === active, "data-active": position === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(position), children: [_jsx(SymbolBadge, { kind: entry.kind }), _jsx("span", { className: "shrink-0", children: entry.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: entry.detail }), entry.container !== '' && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: entry.container }), _jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: formatNumber(entry.line + 1) })] }, entry.id));
-                                    })] }, group.group));
-                        }), mode.mode === 'symbol' && flat.length === 0 && (_jsx("div", { className: "px-2 py-3 text-center text-xs text-text-muted", children: t('language.symbols.none') })), mode.mode === 'workspace' && places.length === 0 && (_jsx("div", { className: "px-2 py-3 text-center text-xs text-text-muted", children: mode.text === '' ? t('language.symbols.workspaceHint') : t('language.symbols.none') }))] }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border px-3 py-1.5 text-xs whitespace-nowrap text-text-faint", children: [_jsxs("span", { children: ["\u2191\u2193 ", t('language.symbols.navigate')] }), _jsxs("span", { children: ["\u21B5 ", t('language.symbols.open')] }), _jsxs("button", { type: "button", className: "ml-auto hover:text-text", onClick: () => setInput('#'), children: ["# ", t('language.symbols.workspace')] }), _jsxs("button", { type: "button", className: "hover:text-text", onClick: () => setInput(':'), children: [": ", t('language.symbols.line')] })] })] }), document.body);
+  };
+  let offset = 0;
+  const t4 = mode.mode === "workspace" ? Hash : AtSign;
+  let t5;
+  if ($[5] !== t4) {
+    t5 = /*#__PURE__*/_jsx(Icon, {
+      icon: t4,
+      size: 14,
+      className: "shrink-0 text-text-muted"
+    });
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t || $[8] !== view.file) {
+    t6 = t("language.symbols.placeholder", {
+      file: view.file
+    });
+    $[7] = t;
+    $[8] = view.file;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = event_1 => {
+      setInput(event_1.target.value);
+      setActive(0);
+    };
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== language.symbolPicker) {
+    t8 = () => language.symbolPicker.close();
+    $[11] = language.symbolPicker;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== language.apple || $[14] !== language.shortcuts.goToSymbol) {
+    t9 = language.shortcuts.goToSymbol === null ? "" : formatShortcut(language.shortcuts.goToSymbol, language.apple);
+    $[13] = language.apple;
+    $[14] = language.shortcuts.goToSymbol;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== t9) {
+    t10 = /*#__PURE__*/_jsx("span", {
+      className: "shrink-0 text-xs text-text-faint",
+      children: t9
+    });
+    $[16] = t9;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  const t11 = "listbox";
+  const t12 = "max-h-[320px] overflow-y-auto p-1";
+  const t13 = mode.mode === "line" && /*#__PURE__*/_jsx("div", {
+    className: "px-2 py-1.5 text-xs text-text-muted",
+    children: mode.line === null ? t("language.symbols.lineHint") : t("language.symbols.goToLine", {
+      line: formatNumber(mode.line)
+    })
+  });
+  const t14 = mode.mode === "workspace" && places.map((place_0, index_0) => {
+    const path = fileUriToPath(place_0.uri);
+    return /*#__PURE__*/_jsxs("button", {
+      ref: index_0 === active ? activeRow : undefined,
+      type: "button",
+      role: "option",
+      "aria-selected": index_0 === active,
+      "data-active": index_0 === active,
+      className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row",
+      onClick: () => choose(index_0),
+      children: [/*#__PURE__*/_jsx(SymbolBadge, {
+        kind: place_0.kind
+      }), /*#__PURE__*/_jsx("span", {
+        className: "shrink-0",
+        children: place_0.name
+      }), /*#__PURE__*/_jsx("span", {
+        className: "min-w-0 truncate font-mono text-text-faint",
+        children: place_0.container
+      }), /*#__PURE__*/_jsxs("span", {
+        className: "ml-auto shrink-0 font-mono text-text-faint",
+        children: [path === null ? "" : basenameOf(path), ":", formatNumber(place_0.line + 1)]
+      })]
+    }, place_0.id);
+  });
+  const t15 = mode.mode === "symbol" && groups.map(group_0 => {
+    const start = offset;
+    offset = offset + group_0.entries.length;
+    offset;
+    return /*#__PURE__*/_jsxs("div", {
+      role: "group",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint",
+        children: t(`language.symbols.groups.${group_0.group}`)
+      }), group_0.entries.map((entry, index_1) => {
+        const position = start + index_1;
+        return /*#__PURE__*/_jsxs("button", {
+          ref: position === active ? activeRow : undefined,
+          type: "button",
+          role: "option",
+          "aria-selected": position === active,
+          "data-active": position === active,
+          className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row",
+          onClick: () => choose(position),
+          children: [/*#__PURE__*/_jsx(SymbolBadge, {
+            kind: entry.kind
+          }), /*#__PURE__*/_jsx("span", {
+            className: "shrink-0",
+            children: entry.name
+          }), /*#__PURE__*/_jsx("span", {
+            className: "min-w-0 truncate font-mono text-text-faint",
+            children: entry.detail
+          }), entry.container !== "" && /*#__PURE__*/_jsx("span", {
+            className: "min-w-0 truncate text-text-faint",
+            children: entry.container
+          }), /*#__PURE__*/_jsx("span", {
+            className: "ml-auto shrink-0 font-mono text-text-faint",
+            children: formatNumber(entry.line + 1)
+          })]
+        }, entry.id);
+      })]
+    }, group_0.group);
+  });
+  let t16;
+  if ($[18] !== flat || $[19] !== mode.mode || $[20] !== t) {
+    t16 = mode.mode === "symbol" && flat.length === 0 && /*#__PURE__*/_jsx("div", {
+      className: "px-2 py-3 text-center text-xs text-text-muted",
+      children: t("language.symbols.none")
+    });
+    $[18] = flat;
+    $[19] = mode.mode;
+    $[20] = t;
+    $[21] = t16;
+  } else {
+    t16 = $[21];
+  }
+  let t17;
+  if ($[22] !== mode.mode || $[23] !== mode.text || $[24] !== places || $[25] !== t) {
+    t17 = mode.mode === "workspace" && places.length === 0 && /*#__PURE__*/_jsx("div", {
+      className: "px-2 py-3 text-center text-xs text-text-muted",
+      children: mode.text === "" ? t("language.symbols.workspaceHint") : t("language.symbols.none")
+    });
+    $[22] = mode.mode;
+    $[23] = mode.text;
+    $[24] = places;
+    $[25] = t;
+    $[26] = t17;
+  } else {
+    t17 = $[26];
+  }
+  let t18;
+  if ($[27] !== t13 || $[28] !== t14 || $[29] !== t15 || $[30] !== t16 || $[31] !== t17) {
+    t18 = /*#__PURE__*/_jsxs("div", {
+      role: t11,
+      className: t12,
+      children: [t13, t14, t15, t16, t17]
+    });
+    $[27] = t13;
+    $[28] = t14;
+    $[29] = t15;
+    $[30] = t16;
+    $[31] = t17;
+    $[32] = t18;
+  } else {
+    t18 = $[32];
+  }
+  let t19;
+  if ($[33] !== t) {
+    t19 = t("language.symbols.navigate");
+    $[33] = t;
+    $[34] = t19;
+  } else {
+    t19 = $[34];
+  }
+  let t20;
+  if ($[35] !== t19) {
+    t20 = /*#__PURE__*/_jsxs("span", {
+      children: ["\u2191\u2193 ", t19]
+    });
+    $[35] = t19;
+    $[36] = t20;
+  } else {
+    t20 = $[36];
+  }
+  let t21;
+  if ($[37] !== t) {
+    t21 = t("language.symbols.open");
+    $[37] = t;
+    $[38] = t21;
+  } else {
+    t21 = $[38];
+  }
+  let t22;
+  if ($[39] !== t21) {
+    t22 = /*#__PURE__*/_jsxs("span", {
+      children: ["\u21B5 ", t21]
+    });
+    $[39] = t21;
+    $[40] = t22;
+  } else {
+    t22 = $[40];
+  }
+  let t23;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = () => setInput("#");
+    $[41] = t23;
+  } else {
+    t23 = $[41];
+  }
+  let t24;
+  if ($[42] !== t) {
+    t24 = t("language.symbols.workspace");
+    $[42] = t;
+    $[43] = t24;
+  } else {
+    t24 = $[43];
+  }
+  let t25;
+  if ($[44] !== t24) {
+    t25 = /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      className: "ml-auto hover:text-text",
+      onClick: t23,
+      children: ["# ", t24]
+    });
+    $[44] = t24;
+    $[45] = t25;
+  } else {
+    t25 = $[45];
+  }
+  let t26;
+  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+    t26 = () => setInput(":");
+    $[46] = t26;
+  } else {
+    t26 = $[46];
+  }
+  let t27;
+  if ($[47] !== t) {
+    t27 = t("language.symbols.line");
+    $[47] = t;
+    $[48] = t27;
+  } else {
+    t27 = $[48];
+  }
+  let t28;
+  if ($[49] !== t27) {
+    t28 = /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      className: "hover:text-text",
+      onClick: t26,
+      children: [": ", t27]
+    });
+    $[49] = t27;
+    $[50] = t28;
+  } else {
+    t28 = $[50];
+  }
+  let t29;
+  if ($[51] !== t20 || $[52] !== t22 || $[53] !== t25 || $[54] !== t28) {
+    t29 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-3 border-t border-border px-3 py-1.5 text-xs whitespace-nowrap text-text-faint",
+      children: [t20, t22, t25, t28]
+    });
+    $[51] = t20;
+    $[52] = t22;
+    $[53] = t25;
+    $[54] = t28;
+    $[55] = t29;
+  } else {
+    t29 = $[55];
+  }
+  return createPortal(/*#__PURE__*/_jsxs("div", {
+    className: "fixed top-[12vh] left-1/2 z-(--z-popup) flex w-[560px] max-w-[calc(100vw-16px)] -translate-x-1/2 flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)",
+    onPointerDown: _temp3,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-2 border-b border-border px-3 py-2",
+      children: [t5, /*#__PURE__*/_jsx("input", {
+        autoFocus: true,
+        value: input,
+        spellCheck: false,
+        autoComplete: "off",
+        placeholder: t6,
+        className: "min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint",
+        onChange: t7,
+        onKeyDown: onKeyDown,
+        onBlur: t8
+      }), t10]
+    }), t18, t29]
+  }), document.body);
+}
+function _temp3(event_0) {
+  return event_0.target !== event_0.currentTarget && event_0.target.tagName !== "INPUT" && event_0.preventDefault();
 }
+function _temp2() {}
+function _temp(group) {
+  return group.entries;
+}