@keboola/design 9.0.0 → 9.1.0

package/dist/editors.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { CompletionSource } from '@codemirror/autocomplete';
 import { SQLNamespace } from '@codemirror/lang-sql';
-import { EditorView, EditorState, KeyBinding } from '@uiw/react-codemirror';
+import { EditorView, EditorState } from '@uiw/react-codemirror';
 import { SqlDialectName } from '@keboola/codemirror-lang-sql';
 export { SqlDialectName } from '@keboola/codemirror-lang-sql';
 import { M as MergeConflict, C as ChangeClassification } from './constants-D3gaMY-W.cjs';
@@ -31,12 +31,32 @@ type Props$2 = {
     searchQuery?: string;
     searchMatchIndex?: number;
     readOnly?: boolean;
+    /**
+     * Refuses edits while leaving the editor looking and behaving as it did — for a
+     * transient lock such as an in-flight save, where a keystroke landing mid-request
+     * would be overwritten by the response. `readOnly` is the wrong prop for that:
+     * it turns the editor into a viewer, greying the surface and taking the lint
+     * marks and completions with it.
+     */
+    inputLocked?: boolean;
+    /**
+     * A flat list of completions, offered everywhere in the document. One word per
+     * label: CodeMirror derives the pattern for the word being completed from the
+     * labels' characters, so a space in one widens it across whitespace and the
+     * editor offers nothing past the first word of a line. A phrase belongs in
+     * `completionSource`.
+     *
+     * Compared by identity, like `completionSource` — hand the editor a stable array.
+     */
     autocompletions?: string[];
     /**
      * Completions that depend on where the cursor is — a column list offered only
      * after its table, say. Wins over both `autocompletions` and `completeAny`,
      * which stay the right props for a list that is the same everywhere in the
      * document and for having no list at all. Like them, it opens on typing.
+     *
+     * Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
+     * extension tree on every render.
      */
     completionSource?: CompletionSource;
     /**
@@ -64,7 +84,7 @@ type Props$2 = {
     readOnly?: boolean;
     onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, ariaLabel, searchQuery, searchMatchIndex, readOnly, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className, }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, ariaLabel, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className, }: Props$2) => react_jsx_runtime.JSX.Element;
 
 type HighlightedLines = {
     from: number;
@@ -91,11 +111,15 @@ type Props$1 = {
     placeholder?: string;
     searchQuery?: string;
     searchMatchIndex?: number;
-    extraKeys?: KeyBinding[];
     queryParser?: (sql: string) => Promise<string[]>;
     autoFocus?: boolean;
     lineNumbers?: boolean;
     className?: string;
+    /**
+     * A schema is too large to compare by value, so this one prop keeps the
+     * identity requirement every other prop here is now free of: hand the editor
+     * a stable object, or it rebuilds its whole extension tree on every render.
+     */
     schema?: SQLNamespace;
     variables?: EditorVariable[];
     defaultSchema?: string;
@@ -103,7 +127,7 @@ type Props$1 = {
     highlightLines?: HighlightedLines;
     dialect?: SqlDialectName;
 };
-declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, extraKeys, queryParser, autoFocus, lineNumbers, className, schema, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$1) => react_jsx_runtime.JSX.Element;
 
 type Props = {
     mergeValue: string;

package/dist/editors.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { CompletionSource } from '@codemirror/autocomplete';
 import { SQLNamespace } from '@codemirror/lang-sql';
-import { EditorView, EditorState, KeyBinding } from '@uiw/react-codemirror';
+import { EditorView, EditorState } from '@uiw/react-codemirror';
 import { SqlDialectName } from '@keboola/codemirror-lang-sql';
 export { SqlDialectName } from '@keboola/codemirror-lang-sql';
 import { M as MergeConflict, C as ChangeClassification } from './constants-D3gaMY-W.js';
@@ -31,12 +31,32 @@ type Props$2 = {
     searchQuery?: string;
     searchMatchIndex?: number;
     readOnly?: boolean;
+    /**
+     * Refuses edits while leaving the editor looking and behaving as it did — for a
+     * transient lock such as an in-flight save, where a keystroke landing mid-request
+     * would be overwritten by the response. `readOnly` is the wrong prop for that:
+     * it turns the editor into a viewer, greying the surface and taking the lint
+     * marks and completions with it.
+     */
+    inputLocked?: boolean;
+    /**
+     * A flat list of completions, offered everywhere in the document. One word per
+     * label: CodeMirror derives the pattern for the word being completed from the
+     * labels' characters, so a space in one widens it across whitespace and the
+     * editor offers nothing past the first word of a line. A phrase belongs in
+     * `completionSource`.
+     *
+     * Compared by identity, like `completionSource` — hand the editor a stable array.
+     */
     autocompletions?: string[];
     /**
      * Completions that depend on where the cursor is — a column list offered only
      * after its table, say. Wins over both `autocompletions` and `completeAny`,
      * which stay the right props for a list that is the same everywhere in the
      * document and for having no list at all. Like them, it opens on typing.
+     *
+     * Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
+     * extension tree on every render.
      */
     completionSource?: CompletionSource;
     /**
@@ -64,7 +84,7 @@ type Props$2 = {
     readOnly?: boolean;
     onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, ariaLabel, searchQuery, searchMatchIndex, readOnly, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className, }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, ariaLabel, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className, }: Props$2) => react_jsx_runtime.JSX.Element;
 
 type HighlightedLines = {
     from: number;
@@ -91,11 +111,15 @@ type Props$1 = {
     placeholder?: string;
     searchQuery?: string;
     searchMatchIndex?: number;
-    extraKeys?: KeyBinding[];
     queryParser?: (sql: string) => Promise<string[]>;
     autoFocus?: boolean;
     lineNumbers?: boolean;
     className?: string;
+    /**
+     * A schema is too large to compare by value, so this one prop keeps the
+     * identity requirement every other prop here is now free of: hand the editor
+     * a stable object, or it rebuilds its whole extension tree on every render.
+     */
     schema?: SQLNamespace;
     variables?: EditorVariable[];
     defaultSchema?: string;
@@ -103,7 +127,7 @@ type Props$1 = {
     highlightLines?: HighlightedLines;
     dialect?: SqlDialectName;
 };
-declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, extraKeys, queryParser, autoFocus, lineNumbers, className, schema, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$1) => react_jsx_runtime.JSX.Element;
 
 type Props = {
     mergeValue: string;

package/dist/editors.js

@@ -1,10 +1,10 @@
 import { createContext, useRef, useEffect, useLayoutEffect, useMemo, useCallback, useSyncExternalStore, useState, use, Children, Fragment as Fragment$1 } from 'react';
-import { completeFromList, completeAnyWord, autocompletion } from '@codemirror/autocomplete';
+import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
 import { jsonParseLinter, json } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
 import { unifiedMergeView } from '@codemirror/merge';
-import { EditorView, Decoration, ViewPlugin, gutter, GutterMarker, keymap, placeholder, tooltips, gutterLineClass } from '@codemirror/view';
-import CodeMirror, { EditorState, EditorView as EditorView$1, keymap as keymap$1 } from '@uiw/react-codemirror';
+import { EditorView, Decoration, ViewPlugin, gutter, GutterMarker, keymap as keymap$1, placeholder, tooltips, gutterLineClass } from '@codemirror/view';
+import CodeMirror, { keymap, EditorState, EditorView as EditorView$1 } from '@uiw/react-codemirror';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Root as Root$1, Trigger, Portal, Content } from '@radix-ui/react-tooltip';
@@ -21,12 +21,11 @@ import { r } from '@codemirror/legacy-modes/mode/r';
 import { shell } from '@codemirror/legacy-modes/mode/shell';
 import { toml } from '@codemirror/legacy-modes/mode/toml';
 import { githubLightInit } from '@uiw/codemirror-theme-github';
-import { modeSpec, sfsql } from '@keboola/codemirror-lang-sfsql';
+import { installExtensions, getSqlDialect } from '@keboola/codemirror-lang-sql';
 import colors from '@keboola/tailwind-config/colors';
 import { simpleMode } from '@codemirror/legacy-modes/mode/simple-mode';
 import { StateEffect, StateField, RangeSet, Compartment, RangeSetBuilder } from '@codemirror/state';
 import { defaultKeymap } from '@codemirror/commands';
-import { installExtensions } from '@keboola/codemirror-lang-sql';
 
 // src/components/CodeEditor/CodeEditor.tsx
 
@@ -1030,6 +1029,7 @@ var LANGUAGE_MODES = [
   "text/x-mysql",
   "text/x-pgsql",
   "text/x-mssql",
+  // Snowflake, under a historical name — these strings are a published prop contract.
   "text/x-sfsql",
   "text/x-plsql",
   "text/x-rsrc",
@@ -1091,8 +1091,6 @@ var ALWAYS_OFF = {
 var buildBasicSetup = (readOnly) => ({
   ...ALWAYS_OFF,
   ...readOnly ? {
-    history: false,
-    historyKeymap: false,
     closeBrackets: false,
     closeBracketsKeymap: false,
     lintKeymap: false,
@@ -1114,20 +1112,6 @@ var buildCustomTheme = () => githubLightInit({
     selection: resolveToken("primary", "31 143 255")
   }
 });
-var sfsqlWithLanguageData = {
-  ...sfsql,
-  languageData: {
-    ...sfsql.languageData,
-    // `toggleComment` is a no-op without these, so Mod-/ silently does nothing.
-    commentTokens: { line: "--", block: { open: "/*", close: "*/" } },
-    autocomplete: completeFromList(
-      Object.keys(modeSpec.keywords).map((label) => ({
-        label: label.toUpperCase(),
-        type: "keyword"
-      }))
-    )
-  }
-};
 var getLanguageMode = (mode) => {
   switch (mode) {
     case void 0:
@@ -1144,7 +1128,7 @@ var getLanguageMode = (mode) => {
     case "text/x-mssql":
       return sql({ upperCaseKeywords: true, dialect: MSSQL });
     case "text/x-sfsql":
-      return StreamLanguage.define(sfsqlWithLanguageData);
+      return sql({ upperCaseKeywords: true, dialect: getSqlDialect("snowflake") });
     case "text/x-plsql":
       return sql({ upperCaseKeywords: true, dialect: PLSQL });
     case "text/x-rsrc":
@@ -1406,7 +1390,7 @@ var completeVariables = (variables = []) => {
     return { from: match.to - name.length, options };
   };
 };
-var emptyArray = [];
+var useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
 var emptyObject = {};
 var CodeEditor = ({
   value,
@@ -1418,7 +1402,8 @@ var CodeEditor = ({
   searchQuery,
   searchMatchIndex,
   readOnly = false,
-  autocompletions = emptyArray,
+  inputLocked = false,
+  autocompletions,
   completionSource,
   variables,
   extraKeys = emptyObject,
@@ -1454,22 +1439,24 @@ var CodeEditor = ({
     [boundKeysSignature]
   );
   const tooltipLayer = useTooltipsExtension();
-  const variableCompletion = useMemo(() => completeVariables(variables), [variables]);
+  const variableCompletion = useVariableCompletion(variables);
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const baseTheme = useThemedExtension(
     "code-editor:chrome",
     () => EditorView.theme(buildBaseThemeStyles())
   );
   const commonExtensions = useMemo(() => {
+    const callerCompletions = completionSource ?? (completeAny ? completeAnyWord : autocompletions?.length ? autocompletions : null);
+    const completionEntries = [
+      ...callerCompletions ? [{ autocomplete: callerCompletions }] : [],
+      { autocomplete: variableCompletion }
+    ];
     return [
       getLanguageMode(mode),
       shouldLintJson(mode, readOnly) ? linter(jsonParseLinter()) : [],
       withLineWrapping ? EditorView.lineWrapping : [],
-      EditorState.languageData.of(() => [
-        { autocomplete: completionSource ?? (completeAny ? completeAnyWord : autocompletions) }
-      ]),
-      EditorState.languageData.of(() => [{ autocomplete: variableCompletion }]),
-      keymap.of(
+      EditorState.languageData.of(() => completionEntries),
+      keymap$1.of(
         boundKeys.map((key) => ({
           key,
           run: () => {
@@ -1509,7 +1496,10 @@ var CodeEditor = ({
       ...commonExtensions,
       placeholder(placeholder$1),
       EditorView.editable.of(!readOnly),
-      EditorState.readOnly.of(readOnly),
+      // The lock is this facet and nothing else. `contenteditable` is what the
+      // read-only wash keys off, and `basicSetup` is what holds the undo history,
+      // so leaving both alone is what makes the lock invisible.
+      EditorState.readOnly.of(readOnly || inputLocked),
       previousValue ? unifiedMergeView({
         original: previousValue,
         mergeControls: false,
@@ -1517,7 +1507,7 @@ var CodeEditor = ({
         collapseUnchanged: withCollapseUnchanged ? {} : void 0
       }) : []
     ];
-  }, [commonExtensions, placeholder$1, readOnly, previousValue, withCollapseUnchanged]);
+  }, [commonExtensions, placeholder$1, readOnly, inputLocked, previousValue, withCollapseUnchanged]);
   const config = useMemo(() => {
     return {
       ...buildBasicSetup(readOnly),
@@ -1743,8 +1733,6 @@ var activeQueryHighlight = (splitQueries) => {
     })
   ];
 };
-
-// src/components/CodeEditor/highlighting.ts
 var HighlightMarker = class extends GutterMarker {
   toDOM() {
     const marker = document.createElement("div");
@@ -1860,14 +1848,13 @@ var highlightedLinesTheme = EditorView.baseTheme({
     backgroundColor: `${colors.blue[100]} !important`
   }
 });
-function highlightingExtension(queryParser) {
+function highlightingExtension() {
   return [
     highlightedLinesField,
     highlightGutter,
     errorLineDecorations,
     processingLineDecorations,
-    highlightedLinesTheme,
-    ...queryParser ? activeQueryHighlight(queryParser) : []
+    highlightedLinesTheme
   ];
 }
 function updateHighlighting(view, lines) {
@@ -1888,6 +1875,7 @@ var CUSTOM_KEYMAP = [
     }
   }
 ];
+var OWN_KEYMAP_EXTENSION = keymap.of([...defaultKeymap, ...CUSTOM_KEYMAP]);
 var buildTheme = () => ({
   ...buildBaseThemeStyles(),
   "&.cm-editor": {
@@ -1925,7 +1913,6 @@ var SqlEditor = ({
   searchQuery = "",
   searchMatchIndex,
   readOnly = false,
-  extraKeys,
   queryParser,
   autoFocus = false,
   lineNumbers = true,
@@ -1938,6 +1925,18 @@ var SqlEditor = ({
   dialect
 }) => {
   const editorRef = useRef(null);
+  const handleChange = useStableCallback((next) => onChange?.(next));
+  const parseQueries = useStableCallback(async (sql2) => await queryParser?.(sql2) ?? []);
+  const handleBlur = useStableCallback((view) => onBlurEditor?.(view));
+  const handleFocus = useStableCallback((view) => onFocusEditor?.(view));
+  const handleUpdate = useStableCallback((update) => {
+    if (update.selectionSet) {
+      const { main } = update.state.selection;
+      onSelectionChange?.(update.state.sliceDoc(main.from, main.to));
+    }
+  });
+  const variableCompletion = useVariableCompletion(variables);
+  const withQueryParser = queryParser !== void 0;
   const tooltipLayer = useTooltipsExtension();
   const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
   const themeExtension = useThemedExtension(
@@ -1945,34 +1944,36 @@ var SqlEditor = ({
     () => EditorView$1.theme(buildTheme())
   );
   const extensions = useMemo(() => {
-    const baseKeymap = [...defaultKeymap, ...CUSTOM_KEYMAP];
     return [
       EditorView$1.lineWrapping,
-      keymap$1.of(extraKeys ? [...extraKeys, ...baseKeymap] : baseKeymap),
+      OWN_KEYMAP_EXTENSION,
       ...installExtensions({
         schema,
         defaultDatabase,
         defaultSchema,
-        variableCompletion: completeVariables(variables),
+        variableCompletion,
         dialect
       }),
       searchExtension(),
-      highlightingExtension(queryParser),
+      highlightingExtension(),
+      withQueryParser ? activeQueryHighlight(parseQueries) : [],
       tooltipLayer,
       themeExtension,
-      onBlurEditor ? EditorView$1.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
-      onFocusEditor ? EditorView$1.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : []
+      EditorView$1.domEventHandlers({
+        blur: (_, view) => handleBlur(view),
+        focus: (_, view) => handleFocus(view)
+      })
     ];
   }, [
-    extraKeys,
-    queryParser,
+    withQueryParser,
+    parseQueries,
     schema,
     defaultDatabase,
     defaultSchema,
-    variables,
+    variableCompletion,
     dialect,
-    onBlurEditor,
-    onFocusEditor,
+    handleBlur,
+    handleFocus,
     themeExtension,
     tooltipLayer
   ]);
@@ -1989,34 +1990,17 @@ var SqlEditor = ({
       updateSearch(editorRef.current.view, searchQuery, searchMatchIndex);
     }
   }, [searchQuery, searchMatchIndex]);
-  useEffect(() => {
-    if (!onDestroyEditor) return;
-    return () => {
-      onDestroyEditor();
-    };
-  }, [onDestroyEditor]);
-  const handleOnCreate = useCallback(
-    (view, state) => {
-      onCreateEditor?.(view, state);
-      if (highlightLines) {
-        updateHighlighting(view, highlightLines);
-      }
-      if (searchQuery) {
-        updateSearch(view, searchQuery, searchMatchIndex);
-      }
-    },
-    [onCreateEditor, highlightLines, searchQuery, searchMatchIndex]
-  );
-  const handleOnUpdate = useCallback(
-    (update) => {
-      if (update.selectionSet) {
-        const { main } = update.state.selection;
-        const text = update.state.sliceDoc(main.from, main.to);
-        onSelectionChange?.(text);
-      }
-    },
-    [onSelectionChange]
-  );
+  const handleDestroy = useStableCallback(() => onDestroyEditor?.());
+  useEffect(() => handleDestroy, [handleDestroy]);
+  const handleCreate = useStableCallback((view, state) => {
+    onCreateEditor?.(view, state);
+    if (highlightLines) {
+      updateHighlighting(view, highlightLines);
+    }
+    if (searchQuery) {
+      updateSearch(view, searchQuery, searchMatchIndex);
+    }
+  });
   return /* @__PURE__ */ jsx(
     CodeMirror,
     {
@@ -2024,9 +2008,9 @@ var SqlEditor = ({
       theme: customTheme,
       extensions,
       value,
-      onChange,
-      onUpdate: handleOnUpdate,
-      onCreateEditor: handleOnCreate,
+      onChange: handleChange,
+      onUpdate: handleUpdate,
+      onCreateEditor: handleCreate,
       autoFocus,
       placeholder,
       className,