@keboola/design 6.5.0 → 9.0.0

package/dist/editors.d.cts

@@ -1,20 +1,50 @@
 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';
 export { SqlDialectName } from '@keboola/codemirror-lang-sql';
 import { M as MergeConflict, C as ChangeClassification } from './constants-D3gaMY-W.cjs';
 
-type LANGUAGE_MODE = 'application/json' | 'text/x-python' | 'text/x-sql' | 'text/x-sfsql' | 'text/x-plsql' | 'text/x-rsrc' | 'text/x-sh' | 'text/javascript' | 'text/typescript';
+declare const LANGUAGE_MODES: readonly ["application/json", "text/plain", "text/x-python", "text/x-sql", "text/x-mysql", "text/x-pgsql", "text/x-mssql", "text/x-sfsql", "text/x-plsql", "text/x-rsrc", "text/x-sh", "text/x-toml", "text/jsonnet", "text/x-dbt", "text/javascript", "text/typescript"];
+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;
     mode?: LANGUAGE_MODE;
     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;
@@ -31,10 +61,10 @@ type Props$2 = {
     readOnly: true;
     onChange?: never;
 } | {
-    readOnly?: false;
+    readOnly?: boolean;
     onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, 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;
@@ -67,7 +97,7 @@ type Props$1 = {
     lineNumbers?: boolean;
     className?: string;
     schema?: SQLNamespace;
-    variables?: string[];
+    variables?: EditorVariable[];
     defaultSchema?: string;
     defaultDatabase?: string;
     highlightLines?: HighlightedLines;
@@ -108,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, MergeEditor, SqlEditor };
+export { CodeEditor, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };

package/dist/editors.d.ts

@@ -1,20 +1,50 @@
 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';
 export { SqlDialectName } from '@keboola/codemirror-lang-sql';
 import { M as MergeConflict, C as ChangeClassification } from './constants-D3gaMY-W.js';
 
-type LANGUAGE_MODE = 'application/json' | 'text/x-python' | 'text/x-sql' | 'text/x-sfsql' | 'text/x-plsql' | 'text/x-rsrc' | 'text/x-sh' | 'text/javascript' | 'text/typescript';
+declare const LANGUAGE_MODES: readonly ["application/json", "text/plain", "text/x-python", "text/x-sql", "text/x-mysql", "text/x-pgsql", "text/x-mssql", "text/x-sfsql", "text/x-plsql", "text/x-rsrc", "text/x-sh", "text/x-toml", "text/jsonnet", "text/x-dbt", "text/javascript", "text/typescript"];
+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;
     mode?: LANGUAGE_MODE;
     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;
@@ -31,10 +61,10 @@ type Props$2 = {
     readOnly: true;
     onChange?: never;
 } | {
-    readOnly?: false;
+    readOnly?: boolean;
     onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, 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;
@@ -67,7 +97,7 @@ type Props$1 = {
     lineNumbers?: boolean;
     className?: string;
     schema?: SQLNamespace;
-    variables?: string[];
+    variables?: EditorVariable[];
     defaultSchema?: string;
     defaultDatabase?: string;
     highlightLines?: HighlightedLines;
@@ -108,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, MergeEditor, SqlEditor };
+export { CodeEditor, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };