@keboola/design 8.0.0 → 9.1.0

package/dist/editors.d.cts

@@ -1,7 +1,8 @@
 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';
@@ -10,6 +11,11 @@ declare const LANGUAGE_MODES: readonly ["application/json", "text/plain", "text/
 type LANGUAGE_MODE = (typeof LANGUAGE_MODES)[number];
 declare const isLanguageMode: (mode: string) => mode is LANGUAGE_MODE;
 
+type EditorVariable = {
+    name: string;
+    value?: string;
+};
+
 type Props$2 = {
     value: string;
     previousValue?: string;
@@ -17,8 +23,48 @@ type Props$2 = {
     placeholder?: string;
     /** Names the editable region for screen readers — the editor has no visible label of its own. */
     ariaLabel?: string;
+    /**
+     * Highlights every occurrence and scrolls the selected one into view. The find
+     * UI is the caller's — pass the query it holds, and omit both props entirely to
+     * leave the search extension uninstalled.
+     */
+    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;
+    /**
+     * Configuration variables, completed into `{{name}}`. Independent of
+     * `completionSource`: both are offered, so a caller keeps its own completions and
+     * gets variables spelled the way the rest of the platform writes them.
+     */
+    variables?: EditorVariable[];
     extraKeys?: Record<string, () => void>;
     withToggleCommentHint?: boolean;
     withAutofocus?: boolean;
@@ -38,7 +84,7 @@ type Props$2 = {
     readOnly?: boolean;
     onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, ariaLabel, readOnly, autocompletions, 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;
@@ -65,19 +111,23 @@ 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?: string[];
+    variables?: EditorVariable[];
     defaultSchema?: string;
     defaultDatabase?: string;
     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;
@@ -112,4 +162,4 @@ type Props = {
 };
 declare const MergeEditor: ({ mergeValue, handleMergeChange, leftText, rightText, leftConflicts, rightConflicts, leftHighlightedLines, rightHighlightedLines, leftClassification, rightClassification, mergeHighlightedLines, mergeClassification, acceptLeft, acceptRight, dismissLeft, dismissRight, leftHeader, middleHeader, middleHeaderClassName, middleClassName, rightHeader, className, leftDeleted, rightDeleted, }: Props) => react_jsx_runtime.JSX.Element;
 
-export { CodeEditor, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };
+export { CodeEditor, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };

package/dist/editors.d.ts

@@ -1,7 +1,8 @@
 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';
@@ -10,6 +11,11 @@ declare const LANGUAGE_MODES: readonly ["application/json", "text/plain", "text/
 type LANGUAGE_MODE = (typeof LANGUAGE_MODES)[number];
 declare const isLanguageMode: (mode: string) => mode is LANGUAGE_MODE;
 
+type EditorVariable = {
+    name: string;
+    value?: string;
+};
+
 type Props$2 = {
     value: string;
     previousValue?: string;
@@ -17,8 +23,48 @@ type Props$2 = {
     placeholder?: string;
     /** Names the editable region for screen readers — the editor has no visible label of its own. */
     ariaLabel?: string;
+    /**
+     * Highlights every occurrence and scrolls the selected one into view. The find
+     * UI is the caller's — pass the query it holds, and omit both props entirely to
+     * leave the search extension uninstalled.
+     */
+    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;
+    /**
+     * Configuration variables, completed into `{{name}}`. Independent of
+     * `completionSource`: both are offered, so a caller keeps its own completions and
+     * gets variables spelled the way the rest of the platform writes them.
+     */
+    variables?: EditorVariable[];
     extraKeys?: Record<string, () => void>;
     withToggleCommentHint?: boolean;
     withAutofocus?: boolean;
@@ -38,7 +84,7 @@ type Props$2 = {
     readOnly?: boolean;
     onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, ariaLabel, readOnly, autocompletions, 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;
@@ -65,19 +111,23 @@ 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?: string[];
+    variables?: EditorVariable[];
     defaultSchema?: string;
     defaultDatabase?: string;
     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;
@@ -112,4 +162,4 @@ type Props = {
 };
 declare const MergeEditor: ({ mergeValue, handleMergeChange, leftText, rightText, leftConflicts, rightConflicts, leftHighlightedLines, rightHighlightedLines, leftClassification, rightClassification, mergeHighlightedLines, mergeClassification, acceptLeft, acceptRight, dismissLeft, dismissRight, leftHeader, middleHeader, middleHeaderClassName, middleClassName, rightHeader, className, leftDeleted, rightDeleted, }: Props) => react_jsx_runtime.JSX.Element;
 
-export { CodeEditor, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };
+export { CodeEditor, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };