@keboola/design 8.0.0 → 9.0.0

package/dist/rjsf.cjs

@@ -28,6 +28,7 @@ var codemirrorThemeGithub = require('@uiw/codemirror-theme-github');
 var codemirrorLangSfsql = require('@keboola/codemirror-lang-sfsql');
 var colors = require('@keboola/tailwind-config/colors');
 var simpleMode = require('@codemirror/legacy-modes/mode/simple-mode');
+var state = require('@codemirror/state');
 var DOMPurify = require('dompurify');
 var reactCollapsible = require('@radix-ui/react-collapsible');
 var RadixTabs = require('@radix-ui/react-tabs');
@@ -386,6 +387,9 @@ Tooltip.Trigger = TooltipTrigger;
 // src/utils/createPrefixedString.ts
 var createPrefixedString = (prefix2) => (literals) => literals.reduce((acc, literal) => acc + literal, `${prefix2}-`);
 
+// src/utils/escapeStringRegexp.ts
+var escapeStringRegexp = (string) => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
+
 // src/utils/mergeRefs.ts
 function setRef(ref, value) {
   if (typeof ref === "function") {
@@ -397,6 +401,21 @@ function setRef(ref, value) {
 var mergeRefs = (...refs) => {
   return (node) => refs.forEach((ref) => setRef(ref, node));
 };
+
+// src/utils/isMac.ts
+var getIsMac = () => {
+  if (typeof navigator !== "undefined" && "userAgentData" in navigator) {
+    const platform = navigator.userAgentData.platform;
+    if (typeof platform === "string") {
+      return platform.toLowerCase() === "macos";
+    }
+  }
+  if (typeof navigator !== "undefined" && typeof navigator.platform === "string") {
+    return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  }
+  return false;
+};
+var isMac = getIsMac();
 var helpVariants = classVarianceAuthority.cva(["tw:m-0", "tw:text-xs"], {
   defaultVariants: {
     state: "default"
@@ -847,8 +866,6 @@ var ButtonToolbar = ({ value, children }) => {
 };
 var COMMANDS = [
   "run-operation",
-  "source freshness",
-  "docs generate",
   "run",
   "test",
   "seed",
@@ -857,9 +874,13 @@ var COMMANDS = [
   "ls",
   "compile",
   "build",
-  "deps"
+  "deps",
+  "docs",
+  "source"
 ];
+var SUBCOMMANDS = { docs: ["generate"], source: ["freshness"] };
 var ARGUMENTS = ["--select", "--exclude", "--selector", "--defer", "--resource-type", "-s"];
+var SELECTORS = ["--select", "--exclude", "-s"];
 var METHODS = [
   "path:",
   "source:",
@@ -886,13 +907,59 @@ var FLAGS = [
   "--profile",
   "--full-refresh"
 ];
-var word = (list) => new RegExp(`^\\s+(?:${list.join("|")})\\b`, "i");
-var prefix = (list) => new RegExp(`^\\s+(?:${list.join("|")})`, "i");
+var COMMAND_PHRASES = COMMANDS.flatMap((command) => {
+  const subcommands = SUBCOMMANDS[command];
+  return subcommands ? subcommands.map((subcommand) => `${command} ${subcommand}`) : [command];
+});
+var alternation = (list) => [...list].sort((a, b) => b.length - a.length).join("|");
+var word = (list) => new RegExp(`^\\s+(?:${alternation(list)})\\b`, "i");
+var prefix = (list) => new RegExp(`^\\s+(?:${alternation(list)})`, "i");
+var WORD = /[\w:-]*$/;
+var asOptions = (list, type) => list.map((label) => ({ label, type }));
+var DBT = [{ label: "dbt", type: "keyword" }];
+var COMMAND_OPTIONS = asOptions(COMMANDS, "keyword");
+var SUBCOMMAND_OPTIONS = Object.fromEntries(
+  Object.entries(SUBCOMMANDS).map(([command, subcommands]) => [
+    command,
+    asOptions(subcommands, "keyword")
+  ])
+);
+var ARGUMENT_OPTIONS = asOptions(ARGUMENTS, "variable");
+var FLAG_OPTIONS = asOptions(FLAGS, "constant");
+var METHOD_OPTIONS = asOptions(METHODS, "property");
+var optionsAfter = (words) => {
+  const [step, command, ...rest] = words;
+  if (step === void 0) return DBT;
+  if (step.toLowerCase() !== "dbt") return [];
+  if (command === void 0) return COMMAND_OPTIONS;
+  const subcommands = SUBCOMMAND_OPTIONS[command.toLowerCase()];
+  if (subcommands && rest.length === 0) return subcommands;
+  const lastArgument = rest.filter((it) => it.startsWith("-")).at(-1);
+  const selecting = lastArgument !== void 0 && SELECTORS.includes(lastArgument.toLowerCase());
+  return selecting ? [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS, ...METHOD_OPTIONS] : [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS];
+};
+var complete = (context) => {
+  const typed = context.matchBefore(WORD);
+  if (!typed?.text && !context.explicit) return null;
+  const from = typed?.from ?? context.pos;
+  const line = context.state.doc.lineAt(from);
+  const options = optionsAfter(
+    line.text.slice(0, from - line.from).split(/\s+/).filter(Boolean)
+  );
+  return options.length > 0 ? { from, options, validFor: WORD } : null;
+};
 var dbt = simpleMode.simpleMode({
+  languageData: {
+    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
+    autocomplete: complete
+  },
   start: [
     { regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string" },
-    { regex: /dbt/, token: "keyword", sol: true },
-    { regex: word(COMMANDS), token: "keyword" },
+    // Word-bounded, so `dbtX` is not a dbt step whose first word happens to
+    // colour — the same thing the completion source asks of it.
+    { regex: /dbt\b/, token: "keyword", sol: true },
+    { regex: word(COMMAND_PHRASES), token: "keyword" },
     { regex: word(ARGUMENTS), token: "variableName" },
     { regex: prefix(METHODS), token: "propertyName" },
     { regex: prefix(FLAGS), token: "attributeName" },
@@ -940,6 +1007,8 @@ var KEYWORDS = {
 };
 var jsonnet = {
   name: "jsonnet",
+  // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+  languageData: { commentTokens: { line: "//", block: { open: "/*", close: "*/" } } },
   startState: () => ({
     cComment: false,
     textBlock: false,
@@ -1156,6 +1225,20 @@ var buildCustomTheme = () => codemirrorThemeGithub.githubLightInit({
     selection: resolveToken("primary", "31 143 255")
   }
 });
+var sfsqlWithLanguageData = {
+  ...codemirrorLangSfsql.sfsql,
+  languageData: {
+    ...codemirrorLangSfsql.sfsql.languageData,
+    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
+    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
+    autocomplete: autocomplete.completeFromList(
+      Object.keys(codemirrorLangSfsql.modeSpec.keywords).map((label) => ({
+        label: label.toUpperCase(),
+        type: "keyword"
+      }))
+    )
+  }
+};
 var getLanguageMode = (mode) => {
   switch (mode) {
     case void 0:
@@ -1172,7 +1255,7 @@ var getLanguageMode = (mode) => {
     case "text/x-mssql":
       return langSql.sql({ upperCaseKeywords: true, dialect: langSql.MSSQL });
     case "text/x-sfsql":
-      return language.StreamLanguage.define(codemirrorLangSfsql.sfsql);
+      return language.StreamLanguage.define(sfsqlWithLanguageData);
     case "text/x-plsql":
       return langSql.sql({ upperCaseKeywords: true, dialect: langSql.PLSQL });
     case "text/x-rsrc":
@@ -1197,6 +1280,112 @@ var getLanguageMode = (mode) => {
   }
 };
 var shouldLintJson = (mode, readOnly) => mode === "application/json" && !readOnly;
+var setSearchEffect = state.StateEffect.define();
+function findMatches(doc, query) {
+  if (!query) return [];
+  const text = doc.toString();
+  try {
+    const regex = new RegExp(escapeStringRegexp(query), "gi");
+    return Array.from(text.matchAll(regex)).map((match2, index) => {
+      const from = match2.index;
+      const to = from + match2[0].length;
+      return { from, to, text: match2[0], localIndex: index };
+    });
+  } catch (e) {
+    console.warn("Invalid search regex:", e);
+    return [];
+  }
+}
+function createDecorations(matches, selectedLocalIndex) {
+  const decorations = matches.map((match2) => {
+    const isSelected = match2.localIndex === selectedLocalIndex;
+    const decoration = view.Decoration.mark({
+      class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch"
+    });
+    return decoration.range(match2.from, match2.to);
+  });
+  return view.Decoration.set(decorations, true);
+}
+var searchField = state.StateField.define({
+  create() {
+    return {
+      query: "",
+      selectedMatchIndex: void 0,
+      matches: [],
+      decorations: view.Decoration.none
+    };
+  },
+  update(state, tr) {
+    let newState = state;
+    for (const effect of tr.effects) {
+      if (!effect.is(setSearchEffect)) {
+        continue;
+      }
+      const { query, selectedMatchIndex } = effect.value;
+      const matches = findMatches(tr.state.doc, query);
+      const decorations = createDecorations(matches, selectedMatchIndex);
+      newState = {
+        query,
+        selectedMatchIndex,
+        matches,
+        decorations
+      };
+    }
+    if (tr.docChanged && newState.query) {
+      const matches = findMatches(tr.state.doc, newState.query);
+      const decorations = createDecorations(matches, newState.selectedMatchIndex);
+      newState = {
+        ...newState,
+        matches,
+        decorations
+      };
+    }
+    return newState;
+  },
+  provide: (field) => view.EditorView.decorations.from(field, (state) => state.decorations)
+});
+var searchViewPlugin = view.ViewPlugin.fromClass(
+  class {
+    lastSelectedIndex;
+    update(update) {
+      const state = update.state.field(searchField);
+      if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
+        const match2 = state.matches[state.selectedMatchIndex];
+        if (match2) {
+          requestAnimationFrame(() => {
+            update.view.dispatch({
+              effects: view.EditorView.scrollIntoView(match2.from, { y: "center" })
+            });
+          });
+        }
+        this.lastSelectedIndex = state.selectedMatchIndex;
+      }
+      if (state.selectedMatchIndex === void 0) {
+        this.lastSelectedIndex = void 0;
+      }
+    }
+  }
+);
+var searchTheme = view.EditorView.baseTheme({
+  ".cm-searchMatch": {
+    backgroundColor: colors__default.default.blue[100]
+  },
+  ".cm-searchMatch > span": {
+    color: `${colors__default.default.blue[600]} !important`
+  },
+  ".cm-searchMatch-selected": {
+    backgroundColor: colors__default.default.blue[600]
+  },
+  ".cm-searchMatch-selected > span": {
+    color: `${colors__default.default.white} !important`
+  }
+});
+function searchExtension() {
+  return [searchField, searchViewPlugin, searchTheme];
+}
+function updateSearch(view, query, selectedMatchIndex) {
+  view.dispatch({ effects: setSearchEffect.of({ query, selectedMatchIndex }) });
+}
 var KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: cn("tw:text-xs tw:text-muted-foreground", className) });
 var KbdGroup = ({ ref, className, children, separator, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1256,11 +1445,78 @@ Kbd.Group = KbdGroup;
 Kbd.Separator = KbdSeparator;
 var ToggleComponentHelp = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
   "Use ",
-  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Ctrl+/" }),
-  " or ",
-  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Command+/" }),
+  /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: isMac ? "Command+/" : "Ctrl+/" }),
   " to toggle comments."
 ] });
+var establishesFixedContainingBlock = (style) => style.transform !== "none" || style.translate !== "none" || style.rotate !== "none" || style.scale !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || /\b(paint|layout|strict|content)\b/.test(style.contain) || /\b(transform|perspective|filter|contain)\b/.test(style.willChange);
+var crops = (style) => style.overflowX !== "visible" || style.overflowY !== "visible" || style.maskImage !== "none" || style.contentVisibility !== "visible" || /\b(paint|strict|content)\b/.test(style.contain);
+var findTooltipHost = (from) => {
+  let outermostCropper = null;
+  for (let node = from.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    if (crops(style)) {
+      outermostCropper = node;
+    } else if (establishesFixedContainingBlock(style)) {
+      return outermostCropper?.parentElement ?? node;
+    }
+  }
+  return outermostCropper?.parentElement ?? null;
+};
+var tooltipsExtension = () => {
+  const layer = new state.Compartment();
+  return [
+    layer.of(view.tooltips()),
+    view.ViewPlugin.define((view$1) => {
+      const scheduled = setTimeout(() => {
+        if (!view$1.dom.isConnected) return;
+        const parent = findTooltipHost(view$1.dom);
+        if (parent) view$1.dispatch({ effects: layer.reconfigure(view.tooltips({ parent })) });
+      });
+      return { destroy: () => clearTimeout(scheduled) };
+    })
+  ];
+};
+var useTooltipsExtension = () => React26.useMemo(tooltipsExtension, []);
+
+// src/components/CodeEditor/variableCompletion.ts
+var BOOST = 2e3;
+var NAME = String.raw`[\w-]*`;
+var AT_CARET = new RegExp(String.raw`(?:\{{1,2} ?)?${NAME}$`);
+var NAME_AT_END = new RegExp(`${NAME}$`);
+var OPENING = /\{{1,2} ?$/;
+var CLOSING = /^ ?\}{1,2}/;
+var completeVariables = (variables = []) => {
+  if (variables.length === 0) return () => null;
+  const options = variables.map(({ name, value }) => ({
+    // The bare name: `SqlEditor` filters prefix-only while `CodeEditor` filters
+    // fuzzily, and this is the only spelling both accept whether or not the caret
+    // has typed the braces. The braces are `displayLabel`, which is what renders.
+    label: name,
+    displayLabel: `{{${name}}}`,
+    detail: value,
+    type: "variable",
+    boost: BOOST,
+    apply: (view, completion, from, to) => {
+      const { doc } = view.state;
+      const line = doc.lineAt(from);
+      const insert = `{{${completion.label}}}`;
+      const opening = OPENING.exec(doc.sliceString(line.from, from));
+      const closing = CLOSING.exec(doc.sliceString(to, line.to));
+      const start = opening ? from - opening[0].length : from;
+      const end = closing ? to + closing[0].length : to;
+      view.dispatch({
+        changes: { from: start, to: end, insert },
+        selection: { anchor: start + insert.length }
+      });
+    }
+  }));
+  return (context) => {
+    const match2 = context.matchBefore(AT_CARET);
+    if (!match2?.text) return null;
+    const [name = ""] = NAME_AT_END.exec(match2.text) ?? [];
+    return { from: match2.to - name.length, options };
+  };
+};
 var emptyArray = [];
 var emptyObject = {};
 var CodeEditor = ({
@@ -1270,8 +1526,12 @@ var CodeEditor = ({
   mode = "application/json",
   placeholder = "",
   ariaLabel,
+  searchQuery,
+  searchMatchIndex,
   readOnly = false,
   autocompletions = emptyArray,
+  completionSource,
+  variables,
   extraKeys = emptyObject,
   withToggleCommentHint = false,
   withAutofocus = false,
@@ -1286,6 +1546,26 @@ var CodeEditor = ({
   className
 }) => {
   const handleChange = useStableCallback((next) => onChange?.(next));
+  const withSearch = searchQuery !== void 0;
+  const editorRef = React26.useRef(null);
+  React26.useEffect(() => {
+    const view = editorRef.current?.view;
+    if (view && withSearch) updateSearch(view, searchQuery, searchMatchIndex);
+  }, [withSearch, searchQuery, searchMatchIndex]);
+  const handleCreateEditor = useStableCallback((view) => {
+    if (searchQuery) updateSearch(view, searchQuery, searchMatchIndex);
+  });
+  const extraKeysRef = React26.useRef(extraKeys);
+  React26.useLayoutEffect(() => {
+    extraKeysRef.current = extraKeys;
+  });
+  const boundKeysSignature = Object.keys(extraKeys).join("\n");
+  const boundKeys = React26.useMemo(
+    () => boundKeysSignature.split("\n").filter(Boolean),
+    [boundKeysSignature]
+  );
+  const tooltipLayer = useTooltipsExtension();
+  const variableCompletion = React26.useMemo(() => completeVariables(variables), [variables]);
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const baseTheme = useThemedExtension(
     "code-editor:chrome",
@@ -1297,31 +1577,43 @@ var CodeEditor = ({
       shouldLintJson(mode, readOnly) ? lint.linter(langJson.jsonParseLinter()) : [],
       withLineWrapping ? view.EditorView.lineWrapping : [],
       CodeMirror.EditorState.languageData.of(() => [
-        { autocomplete: completeAny ? autocomplete.completeAnyWord : autocompletions }
+        { autocomplete: completionSource ?? (completeAny ? autocomplete.completeAnyWord : autocompletions) }
       ]),
+      CodeMirror.EditorState.languageData.of(() => [{ autocomplete: variableCompletion }]),
       view.keymap.of(
-        Object.entries(extraKeys).map(([key, run]) => ({
+        boundKeys.map((key) => ({
           key,
           run: () => {
-            if (typeof run === "string") return run;
-            run();
+            extraKeysRef.current[key]?.();
             return true;
           }
         }))
       ),
-      readOnly ? [] : autocomplete.autocompletion({ activateOnTyping: completeAny }),
+      readOnly ? [] : [
+        // CodeMirror's own default. Gating it on the props hid completions the
+        // *language* supplies — dbt's vocabulary, Snowflake's keywords — behind
+        // a shortcut, and macOS leaves no usable one. With nothing to offer, no
+        // popup opens anyway.
+        autocomplete.autocompletion()
+      ],
       ariaLabel ? view.EditorView.contentAttributes.of({ "aria-label": ariaLabel }) : [],
+      withSearch ? searchExtension() : [],
+      tooltipLayer,
       baseTheme
     ];
   }, [
     autocompletions,
+    completionSource,
+    variableCompletion,
     completeAny,
-    extraKeys,
+    boundKeys,
     mode,
     readOnly,
     withLineWrapping,
     baseTheme,
-    ariaLabel
+    ariaLabel,
+    withSearch,
+    tooltipLayer
   ]);
   const extensions = React26.useMemo(() => {
     return [
@@ -1340,9 +1632,12 @@ var CodeEditor = ({
   const config = React26.useMemo(() => {
     return {
       ...buildBasicSetup(readOnly),
-      lineNumbers: withLineNumbers
+      lineNumbers: withLineNumbers,
+      // Mod-f opens CodeMirror's own panel, which would run a second query and a
+      // second match count over the same document beside the caller's input.
+      ...withSearch ? { searchKeymap: false } : null
     };
-  }, [withLineNumbers, readOnly]);
+  }, [withLineNumbers, readOnly, withSearch]);
   const additionalButtons = renderAdditionalButtons?.(value);
   const hasToolbar = withCopyButton && !!value || !!additionalButtons;
   return (
@@ -1365,6 +1660,8 @@ var CodeEditor = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             CodeMirror__default.default,
             {
+              ref: editorRef,
+              onCreateEditor: handleCreateEditor,
               theme: customTheme,
               value,
               onChange: handleChange,