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

package/dist/chunk-TC5KDYUF.js

@@ -0,0 +1,778 @@
+// src/FormulaEditor.tsx
+import {
+  useEffect as useEffect2,
+  useId as useId2,
+  useImperativeHandle,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import {
+  FORMULA_FUNCTIONS as FORMULA_FUNCTIONS4,
+  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, functions = FORMULA_FUNCTIONS) {
+  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(
+      ...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, functions = FORMULA_FUNCTIONS) {
+  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 = 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: "aggregates",
+    label: "Aggregate functions",
+    description: "Combine values from the rows in each group.",
+    keywords: "aggregate summary group median average count sum"
+  },
+  {
+    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 (["COUNT", "COUNT_DISTINCT", "SUM", "AVG", "MIN", "MAX", "MEDIAN"].includes(
+    fn.name
+  ))
+    return "aggregates";
+  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", catalogue = FORMULA_FUNCTIONS2) {
+  const query = normalize(search);
+  const terms = query.split(/\s+/).filter(Boolean);
+  const functions = catalogue.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 {
+  FORMULA_FUNCTIONS as FORMULA_FUNCTIONS3
+} from "@pythia-software/query-table-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FormulaFunctionBrowser({
+  onInsert,
+  functions = FORMULA_FUNCTIONS3,
+  variant = "card"
+}) {
+  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, functions);
+  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 qt-function-library--${variant}`,
+      "aria-label": "Function library",
+      children: [
+        variant === "card" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("h4", { 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.filter(
+                    (item) => functions.some((fn) => functionCategory(fn) === item.id)
+                  ).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": onInsert ? `Insert ${fn.name}` : fn.name,
+                disabled: !onInsert,
+                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: onInsert ? "Click a function or use \u2191\u2193 and Enter in search to insert it at the cursor. Select formula text first to wrap it." : "Select a formula column to insert a function." })
+      ]
+    }
+  );
+}
+
+// src/FormulaEditor.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FormulaEditor({
+  value,
+  actionsRef,
+  functions = FORMULA_FUNCTIONS4,
+  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), functions) : "";
+  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,
+        functions
+      )
+    );
+  };
+  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 insertFunction = (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 }
+    );
+  };
+  useImperativeHandle(actionsRef, () => ({ insertFunction }));
+  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,
+      {
+        functions,
+        onInsert: insertFunction
+      }
+    )
+  ] });
+}
+
+export {
+  FormulaFunctionBrowser,
+  FormulaEditor
+};
+//# sourceMappingURL=chunk-TC5KDYUF.js.map