@pythia-software/query-table-ui 0.5.0 → 0.6.0

package/dist/FormulaEditor-FZPLQRWN.js

@@ -0,0 +1,739 @@
+// src/FormulaEditor.tsx
+import {
+  useEffect as useEffect2,
+  useId as useId2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { FormulaError } from "@pythia-software/query-table-core";
+
+// src/formulaEditorHelpers.ts
+import {
+  FORMULA_FUNCTIONS
+} from "@pythia-software/query-table-core";
+var FORMULA_EDITOR_HELP = "Use [field] references. Ctrl+Space opens suggestions.";
+function formulaContext(text, end = text.length) {
+  let quoted = false;
+  let fieldStart = -1;
+  let escaped = false;
+  for (let i = 0; i < end; i++) {
+    const c = text[i];
+    if (quoted) {
+      if (c === "\\") {
+        escaped = i + 1 >= end;
+        i++;
+      } else if (c === '"') quoted = false;
+    } else if (fieldStart >= 0) {
+      if (c === "]") {
+        if (text[i + 1] === "]") i++;
+        else fieldStart = -1;
+      }
+    } else if (c === '"') quoted = true;
+    else if (c === "[") fieldStart = i;
+  }
+  return { quoted, fieldStart, escaped };
+}
+function formulaCompletions(text, start, end, fields, explicit = false) {
+  const before = text.slice(0, start);
+  const { quoted, fieldStart } = formulaContext(text, start);
+  if (quoted || !explicit && start !== end) return null;
+  const word = before.match(/\b[A-Za-z_][A-Za-z_0-9]*$/)?.[0] ?? "";
+  if (!explicit && fieldStart < 0 && !word) return null;
+  const from = start !== end ? start : fieldStart >= 0 ? fieldStart : start - word.length;
+  let to = end;
+  if (start === end && fieldStart >= 0) {
+    for (let i = fieldStart + 1; i < text.length; i++) {
+      if (text[i] === "]") {
+        if (text[i + 1] === "]") {
+          i++;
+          continue;
+        }
+        to = i + 1;
+        break;
+      }
+      if (text[i] === "\n" || text[i] === "[") break;
+    }
+  } else if (start === end) {
+    to += text.slice(end).match(/^[A-Za-z_0-9]*/)?.[0].length ?? 0;
+  }
+  const prefix = start !== end ? "" : before.slice(from).toLowerCase();
+  const options = fields.map((f) => ({
+    label: `[${f.name.replace(/\]/g, "]]")}]`,
+    detail: `${f.label} \xB7 ${f.type}`,
+    description: f.name,
+    insert: `[${f.name.replace(/\]/g, "]]")}]`
+  }));
+  if (fieldStart < 0) {
+    options.push(
+      ...FORMULA_FUNCTIONS.map((f) => ({
+        label: f.name,
+        detail: f.signature,
+        description: f.description,
+        insert: text[to] === "(" ? f.name : `${f.name}()`,
+        caretOffset: f.name.length + 1
+      })),
+      ...["TRUE", "FALSE", "NULL", "AND", "OR", "NOT", "IN", "BETWEEN"].map(
+        (label) => ({
+          label,
+          detail: "Keyword",
+          description: "",
+          insert: label
+        })
+      )
+    );
+  }
+  return {
+    from,
+    to,
+    options: options.filter(
+      (option) => option.label.toLowerCase().startsWith(prefix) || fieldStart >= 0 && option.detail.toLowerCase().includes(prefix.slice(1))
+    )
+  };
+}
+function signatureAt(text) {
+  const stack = [];
+  let quoted = false, field = false;
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (quoted) {
+      if (c === "\\") i++;
+      else if (c === '"') quoted = false;
+      continue;
+    }
+    if (field) {
+      if (c === "]") {
+        if (text[i + 1] === "]") i++;
+        else field = false;
+      }
+      continue;
+    }
+    if (c === '"') {
+      quoted = true;
+      continue;
+    }
+    if (c === "[") {
+      field = true;
+      continue;
+    }
+    if (c === "(")
+      stack.push({
+        name: text.slice(0, i).match(/([A-Za-z_]+)\s*$/)?.[1]?.toUpperCase() ?? "",
+        argument: 1
+      });
+    else if (c === ")") stack.pop();
+    else if (c === "," && stack.length) stack[stack.length - 1].argument++;
+  }
+  const call = stack[stack.length - 1], spec = FORMULA_FUNCTIONS.find((f) => f.name === call?.name);
+  return spec && call ? `${spec.signature} \xB7 Argument ${call.argument} \u2014 ${spec.description}` : FORMULA_EDITOR_HELP;
+}
+
+// src/FormulaFunctionBrowser.tsx
+import { useEffect, useId, useRef, useState } from "react";
+
+// src/formulaFunctionCatalogue.ts
+import {
+  FORMULA_FUNCTIONS as FORMULA_FUNCTIONS2
+} from "@pythia-software/query-table-core";
+var FUNCTION_CATEGORIES = [
+  {
+    id: "strings",
+    label: "String functions",
+    description: "Slice, combine, format, and clean text.",
+    keywords: "string text characters whitespace case concatenate"
+  },
+  {
+    id: "matching",
+    label: "Matching & regex",
+    description: "Find text, test patterns, and extract matches.",
+    keywords: "search matching regex regular expression pattern capture"
+  },
+  {
+    id: "numbers",
+    label: "Numbers & statistics",
+    description: "Round, transform, and compare numbers within a row.",
+    keywords: "math numeric arithmetic statistics statistical rounding"
+  },
+  {
+    id: "logic",
+    label: "Conditions & missing values",
+    description: "Choose results, handle errors, and work with empty values.",
+    keywords: "logic boolean conditional null missing empty fallback error"
+  },
+  {
+    id: "conversion",
+    label: "Type conversion",
+    description: "Convert values to text, numbers, booleans, or dates.",
+    keywords: "convert conversion cast type parse"
+  },
+  {
+    id: "arrays",
+    label: "Array functions",
+    description: "Split, join, count, and organize lists of text.",
+    keywords: "array list collection elements unique deduplicate"
+  },
+  {
+    id: "dates",
+    label: "Dates & times",
+    description: "Extract date parts, format timestamps, and calculate durations.",
+    keywords: "date datetime time timestamp calendar duration UTC"
+  }
+];
+var FUNCTION_RESULT_TYPES = [
+  { value: "text", label: "Text" },
+  { value: "number", label: "Number" },
+  { value: "bool", label: "Boolean" },
+  { value: "datetime", label: "Date/time" },
+  { value: "textarray", label: "Text array" },
+  { value: "branch", label: "Depends on arguments" }
+];
+function functionResultLabel(result) {
+  return FUNCTION_RESULT_TYPES.find((type) => type.value === result)?.label ?? result;
+}
+function functionCategory(fn) {
+  if (fn.name.startsWith("TO_")) return "conversion";
+  if (fn.name.startsWith("REGEX_") || ["CONTAINS", "STARTS_WITH", "ENDS_WITH"].includes(fn.name))
+    return "matching";
+  if (fn.name.startsWith("ARRAY_") || ["SPLIT", "JOIN"].includes(fn.name))
+    return "arrays";
+  if (fn.name.includes("DATE") || fn.args !== "any" && fn.args.includes("datetime"))
+    return "dates";
+  if (fn.result === "branch" || fn.args === "any") return "logic";
+  if (fn.args.includes("text")) return "strings";
+  return "numbers";
+}
+var SEARCH_ALIASES = {
+  LEFT: "prefix beginning first characters",
+  RIGHT: "suffix ending last characters",
+  SUBSTRING: "slice middle characters",
+  LENGTH: "size count characters",
+  LOWER: "lowercase",
+  UPPER: "uppercase",
+  CONCAT: "concatenate combine append",
+  CONCAT_WS: "concatenate separator combine append",
+  LEAST: "minimum smallest min",
+  GREATEST: "maximum largest max",
+  ABS: "absolute magnitude",
+  SQRT: "square root",
+  CEIL: "ceiling round up",
+  FLOOR: "round down",
+  IF: "if else decision",
+  COALESCE: "default first non-null missing fallback",
+  NULLIF: "equal missing null",
+  IFERROR: "recover error default fallback",
+  ARRAY_LENGTH: "size count elements",
+  DATE_DIFF: "difference elapsed duration"
+};
+var normalize = (text) => text.toLowerCase().replace(/[_-]/g, " ").trim();
+function findFormulaFunctions(search, category = "all", result = "all") {
+  const query = normalize(search);
+  const terms = query.split(/\s+/).filter(Boolean);
+  const functions = FORMULA_FUNCTIONS2.filter((fn) => {
+    const concept = functionCategory(fn);
+    if (category !== "all" && concept !== category || result !== "all" && fn.result !== result)
+      return false;
+    const metadata = FUNCTION_CATEGORIES.find((item) => item.id === concept);
+    const haystack = normalize(
+      `${fn.name} ${fn.signature} ${fn.description} ${metadata.label} ${metadata.keywords} ${SEARCH_ALIASES[fn.name] ?? ""} ${functionResultLabel(fn.result)}`
+    );
+    return terms.every((term) => haystack.includes(term));
+  });
+  const rank = (fn) => !query ? 2 : normalize(fn.name) === query ? 0 : normalize(fn.name).startsWith(query) ? 1 : 2;
+  return functions.sort(
+    (a, b) => rank(a) - rank(b) || a.name.localeCompare(b.name)
+  );
+}
+
+// src/FormulaFunctionBrowser.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormulaFunctionBrowser({
+  onInsert
+}) {
+  const id = useId();
+  const list = useRef(null);
+  const [search, setSearch] = useState("");
+  const [category, setCategory] = useState("all");
+  const [result, setResult] = useState(
+    "all"
+  );
+  const [active, setActive] = useState(0);
+  const matches = findFormulaFunctions(search, category, result);
+  const concept = FUNCTION_CATEGORIES.find((item) => item.id === category);
+  useEffect(() => {
+    const option = list.current?.children[active];
+    const viewport = list.current;
+    if (!option || !viewport) return;
+    const top = option.offsetTop;
+    if (top < viewport.scrollTop) viewport.scrollTop = top;
+    else if (top + option.offsetHeight > viewport.scrollTop + viewport.clientHeight)
+      viewport.scrollTop = top + option.offsetHeight - viewport.clientHeight;
+  }, [active, search, category, result]);
+  return /* @__PURE__ */ jsxs("aside", { className: "qt-function-library", "aria-labelledby": `${id}-title`, children: [
+    /* @__PURE__ */ jsx("h4", { id: `${id}-title`, children: "Function library" }),
+    /* @__PURE__ */ jsx("p", { className: "qt-muted", children: "Find a function by name or what it does." }),
+    /* @__PURE__ */ jsxs("label", { className: "qt-function-search", children: [
+      "Search functions",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "qt-input",
+          type: "search",
+          role: "combobox",
+          "aria-autocomplete": "list",
+          "aria-expanded": matches.length > 0,
+          "aria-controls": `${id}-results`,
+          "aria-activedescendant": matches[active] ? `${id}-${matches[active].name}` : void 0,
+          placeholder: "e.g. trim, minimum, date\u2026",
+          value: search,
+          onChange: (event) => {
+            setSearch(event.target.value);
+            setActive(0);
+          },
+          onKeyDown: (event) => {
+            if (event.nativeEvent.isComposing || event.ctrlKey || event.metaKey || event.altKey || !matches.length)
+              return;
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+              event.preventDefault();
+              setActive(
+                (index) => (index + (event.key === "ArrowDown" ? 1 : matches.length - 1)) % matches.length
+              );
+            } else if (event.key === "Enter") {
+              event.preventDefault();
+              const fn = matches[active];
+              if (fn) onInsert(fn.name);
+            }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "qt-function-filters", children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Browse by concept",
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: category,
+            onChange: (event) => {
+              setCategory(event.target.value);
+              setActive(0);
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "all", children: "All functions" }),
+              FUNCTION_CATEGORIES.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Return type",
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: result,
+            onChange: (event) => {
+              setResult(
+                event.target.value
+              );
+              setActive(0);
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "all", children: "Any type" }),
+              FUNCTION_RESULT_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type.value, children: type.label }, type.value))
+            ]
+          }
+        )
+      ] })
+    ] }),
+    concept && /* @__PURE__ */ jsx("p", { className: "qt-function-concept", children: concept.description }),
+    /* @__PURE__ */ jsxs("p", { className: "qt-function-count", "aria-live": "polite", children: [
+      matches.length,
+      " ",
+      matches.length === 1 ? "function" : "functions"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: list,
+        className: "qt-function-list",
+        id: `${id}-results`,
+        role: "listbox",
+        "aria-label": "Function library results",
+        children: matches.map((fn, index) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            id: `${id}-${fn.name}`,
+            "aria-selected": index === active,
+            "aria-label": `Insert ${fn.name}`,
+            onMouseDown: (event) => event.preventDefault(),
+            onFocus: () => setActive(index),
+            onClick: () => onInsert(fn.name),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "qt-function-card-title", children: [
+                /* @__PURE__ */ jsx("strong", { children: fn.name }),
+                /* @__PURE__ */ jsx("span", { children: functionResultLabel(fn.result) })
+              ] }),
+              /* @__PURE__ */ jsx("code", { children: fn.signature }),
+              /* @__PURE__ */ jsx("small", { children: fn.description }),
+              /* @__PURE__ */ jsx("span", { className: "qt-function-card-concept", children: FUNCTION_CATEGORIES.find(
+                (item) => item.id === functionCategory(fn)
+              ).label })
+            ]
+          },
+          fn.name
+        ))
+      }
+    ),
+    !matches.length && /* @__PURE__ */ jsx("p", { className: "qt-function-empty", children: "No functions match. Try a shorter search or a different concept or return type." }),
+    /* @__PURE__ */ jsx("p", { className: "qt-function-insert-hint", children: "Click a function or use \u2191\u2193 and Enter in search to insert it at the cursor. Select formula text first to wrap it." })
+  ] });
+}
+
+// src/FormulaEditor.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FormulaEditor({
+  value,
+  onChange,
+  fields,
+  compile,
+  suggestions = true,
+  showLibrary = true,
+  ariaLabel = "Computed column formula",
+  inputRef,
+  onFocus,
+  onReady,
+  rows = 6
+}) {
+  const id = useId2();
+  const editor = useRef2(null);
+  const applyingEdit = useRef2(false);
+  const composing = useRef2(false);
+  const paired = useRef2({ value, ranges: [] });
+  const trackEdit = (next) => {
+    const previous = paired.current.value;
+    if (previous === next) return;
+    let from = 0;
+    while (from < previous.length && from < next.length && previous[from] === next[from])
+      from++;
+    let oldEnd = previous.length, newEnd = next.length;
+    while (oldEnd > from && newEnd > from && previous[oldEnd - 1] === next[newEnd - 1]) {
+      oldEnd--;
+      newEnd--;
+    }
+    const shift = newEnd - oldEnd;
+    paired.current.ranges = paired.current.ranges.filter(
+      ({ open, close }) => !(open >= from && open < oldEnd) && !(close >= from && close < oldEnd)
+    ).map(({ open, close }) => ({
+      open: open >= oldEnd ? open + shift : open,
+      close: close >= oldEnd ? close + shift : close
+    }));
+    paired.current.value = next;
+  };
+  const selection = useRef2({ start: 0, end: 0 });
+  const latestCompile = useRef2(compile);
+  latestCompile.current = compile;
+  const [caret, setCaret] = useState2(0);
+  const [completions, setCompletions] = useState2(
+    null
+  );
+  const [active, setActive] = useState2(0);
+  const [diagnostic, setDiagnostic] = useState2(null);
+  const options = suggestions ? completions?.options.slice(0, 50) ?? [] : [];
+  const hint = suggestions ? signatureAt(value.slice(0, caret)) : "";
+  useEffect2(() => {
+    const input = editor.current;
+    if (input && input.value !== value) {
+      input.value = value;
+      paired.current = { value, ranges: [] };
+      setCaret(input.selectionStart);
+      setCompletions(null);
+    }
+    setDiagnostic(null);
+    const timer = setTimeout(() => {
+      try {
+        latestCompile.current(value);
+        setDiagnostic(null);
+      } catch (error) {
+        const from = error instanceof FormulaError ? error.from : 0;
+        const to = error instanceof FormulaError ? error.to : value.length;
+        setDiagnostic({
+          message: error instanceof Error ? error.message : String(error),
+          from: Math.max(0, Math.min(from, value.length)),
+          to: Math.max(0, Math.min(to, value.length))
+        });
+      }
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [value]);
+  useEffect2(() => {
+    if (editor.current) onReady?.(editor.current);
+  }, [onReady]);
+  useEffect2(() => {
+    document.getElementById(`${id}-option-${active}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [active, id]);
+  const suggest = (explicit = false) => {
+    const input = editor.current;
+    if (!suggestions || !input || composing.current) return;
+    selection.current = {
+      start: input.selectionStart,
+      end: input.selectionEnd
+    };
+    setCaret(input.selectionStart);
+    setActive(0);
+    setCompletions(
+      formulaCompletions(
+        input.value,
+        input.selectionStart,
+        input.selectionEnd,
+        fields,
+        explicit
+      )
+    );
+  };
+  const insert = (from, to, text, caretOffset = text.length, pair) => {
+    const input = editor.current;
+    if (!input) return;
+    input.focus();
+    input.setSelectionRange(from, to);
+    applyingEdit.current = true;
+    try {
+      const before = input.value;
+      try {
+        document.execCommand?.("insertText", false, text);
+      } catch {
+      }
+      if (input.value === before) input.setRangeText(text, from, to, "end");
+    } finally {
+      applyingEdit.current = false;
+    }
+    trackEdit(input.value);
+    if (pair)
+      paired.current.ranges.push({
+        open: from + pair.open,
+        close: from + pair.close
+      });
+    input.setSelectionRange(from + caretOffset, from + caretOffset);
+    setCaret(input.selectionStart);
+    setCompletions(null);
+    onChange(input.value);
+  };
+  const accept = (option) => {
+    if (completions)
+      insert(
+        completions.from,
+        completions.to,
+        option.insert,
+        option.caretOffset,
+        option.insert.endsWith("()") ? { open: option.insert.length - 2, close: option.insert.length - 1 } : void 0
+      );
+  };
+  const onKeyDown = (event) => {
+    const input = event.currentTarget;
+    if (composing.current || event.nativeEvent.isComposing) return;
+    if (suggestions && event.ctrlKey && event.code === "Space") {
+      event.preventDefault();
+      suggest(true);
+      return;
+    }
+    if (options.length) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setCompletions(null);
+        return;
+      }
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        setActive(
+          (index) => (index + (event.key === "ArrowDown" ? 1 : options.length - 1)) % options.length
+        );
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const option = options[active];
+        if (option) accept(option);
+        return;
+      }
+    }
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    const start = input.selectionStart, end = input.selectionEnd;
+    const context = formulaContext(input.value, start);
+    const close = event.key === "(" ? ")" : event.key === '"' ? '"' : void 0;
+    if (close && !context.quoted && context.fieldStart < 0 && (start !== end || end === input.value.length || /[\s)\]}]/.test(input.value[end]))) {
+      event.preventDefault();
+      const selection2 = input.value.slice(start, end);
+      insert(start, end, event.key + selection2 + close, selection2.length + 1, {
+        open: 0,
+        close: selection2.length + 1
+      });
+    } else if (start === end && input.value[start] === event.key && paired.current.ranges.some((pair) => pair.close === start) && (event.key === ")" && !context.quoted && context.fieldStart < 0 || event.key === '"' && context.quoted && !context.escaped)) {
+      event.preventDefault();
+      paired.current.ranges = paired.current.ranges.filter(
+        (pair) => pair.close !== start
+      );
+      input.setSelectionRange(start + 1, start + 1);
+      setCaret(start + 1);
+      setCompletions(null);
+    } else if (event.key === "Backspace" && start === end && start > 0 && ["()", "[]", '""'].includes(input.value.slice(start - 1, start + 1)) && (!context.quoted || input.value.slice(start - 1, start + 1) === '""' && !context.escaped)) {
+      event.preventDefault();
+      insert(start - 1, start + 1, "");
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "qt-formula-layout", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "qt-formula-editor", children: [
+      /* @__PURE__ */ jsx2(
+        "textarea",
+        {
+          ref: (input) => {
+            editor.current = input;
+            if (inputRef) inputRef.current = input;
+          },
+          className: "qt-formula-input",
+          "aria-label": ariaLabel,
+          "aria-describedby": `${id}-hint${diagnostic ? ` ${id}-error` : ""}`,
+          "aria-invalid": diagnostic ? true : void 0,
+          "aria-autocomplete": suggestions ? "list" : "none",
+          "aria-controls": options.length ? `${id}-suggestions` : void 0,
+          "aria-activedescendant": options.length ? `${id}-option-${active}` : void 0,
+          defaultValue: value,
+          rows,
+          spellCheck: false,
+          autoCapitalize: "off",
+          autoCorrect: "off",
+          onChange: (event) => {
+            if (applyingEdit.current) return;
+            trackEdit(event.currentTarget.value);
+            onChange(event.currentTarget.value);
+            if (!composing.current) suggest();
+          },
+          onSelect: (event) => {
+            setCaret(event.currentTarget.selectionStart);
+            const input = event.currentTarget;
+            if (!applyingEdit.current && (input.selectionStart !== selection.current.start || input.selectionEnd !== selection.current.end))
+              setCompletions(null);
+          },
+          onKeyDown,
+          onCompositionStart: () => {
+            composing.current = true;
+            setCompletions(null);
+          },
+          onCompositionEnd: () => {
+            composing.current = false;
+            suggest();
+          },
+          onBlur: () => setCompletions(null),
+          onFocus
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "qt-formula-tools", children: [
+        suggestions && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "qt-link-btn",
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => {
+              editor.current?.focus();
+              suggest(true);
+            },
+            children: "Suggestions"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { children: [
+          "Line ",
+          value.slice(0, caret).split("\n").length,
+          ", column",
+          " ",
+          caret - value.slice(0, caret).lastIndexOf("\n")
+        ] })
+      ] }),
+      options.length > 0 && /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "qt-formula-completions",
+          "data-qt-formula-suggestions": "",
+          children: [
+            /* @__PURE__ */ jsx2(
+              "ul",
+              {
+                id: `${id}-suggestions`,
+                role: "listbox",
+                "aria-label": "Formula suggestions",
+                onMouseDown: (event) => event.preventDefault(),
+                children: options.map((option, index) => /* @__PURE__ */ jsxs2(
+                  "li",
+                  {
+                    id: `${id}-option-${index}`,
+                    role: "option",
+                    "aria-selected": index === active,
+                    title: option.description,
+                    onClick: () => accept(option),
+                    children: [
+                      /* @__PURE__ */ jsx2("strong", { children: option.label }),
+                      /* @__PURE__ */ jsx2("small", { children: option.detail })
+                    ]
+                  },
+                  option.label
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxs2("p", { children: [
+              options[active]?.description,
+              " \xB7 \u2191\u2193 choose, Enter inserts, Esc closes"
+            ] }),
+            completions && completions.options.length > options.length && /* @__PURE__ */ jsxs2("p", { children: [
+              "Type to narrow the first ",
+              options.length,
+              " suggestions."
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2("p", { id: `${id}-hint`, className: "qt-formula-hint", "aria-live": "polite", children: hint }),
+      diagnostic && /* @__PURE__ */ jsxs2("div", { id: `${id}-error`, className: "qt-formula-error", role: "status", children: [
+        diagnostic.message,
+        " ",
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "qt-link-btn",
+            onClick: () => {
+              editor.current?.focus();
+              editor.current?.setSelectionRange(
+                diagnostic.from,
+                diagnostic.to
+              );
+              setCaret(diagnostic.from);
+            },
+            children: "Select error location"
+          }
+        )
+      ] })
+    ] }),
+    showLibrary && /* @__PURE__ */ jsx2(
+      FormulaFunctionBrowser,
+      {
+        onInsert: (name) => {
+          const input = editor.current;
+          if (!input) return;
+          const from = input.selectionStart;
+          const to = input.selectionEnd;
+          const selected = input.value.slice(from, to);
+          insert(
+            from,
+            to,
+            `${name}(${selected})`,
+            name.length + selected.length + 1,
+            { open: name.length, close: name.length + selected.length + 1 }
+          );
+        }
+      }
+    )
+  ] });
+}
+export {
+  FormulaEditor as default
+};
+//# sourceMappingURL=FormulaEditor-FZPLQRWN.js.map