@keboola/design 8.0.0 → 9.0.0

package/dist/editors.d.cts

@@ -1,5 +1,6 @@
 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 { SqlDialectName } from '@keboola/codemirror-lang-sql';
@@ -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,28 @@ 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;
     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.
+     */
+    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 +64,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, 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;
@@ -71,7 +97,7 @@ type Props$1 = {
     lineNumbers?: boolean;
     className?: string;
     schema?: SQLNamespace;
-    variables?: string[];
+    variables?: EditorVariable[];
     defaultSchema?: string;
     defaultDatabase?: string;
     highlightLines?: HighlightedLines;
@@ -112,4 +138,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,5 +1,6 @@
 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 { SqlDialectName } from '@keboola/codemirror-lang-sql';
@@ -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,28 @@ 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;
     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.
+     */
+    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 +64,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, 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;
@@ -71,7 +97,7 @@ type Props$1 = {
     lineNumbers?: boolean;
     className?: string;
     schema?: SQLNamespace;
-    variables?: string[];
+    variables?: EditorVariable[];
     defaultSchema?: string;
     defaultDatabase?: string;
     highlightLines?: HighlightedLines;
@@ -112,4 +138,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 };