@keboola/design 11.0.0 → 11.2.0

package/dist/editors.d.ts

@@ -1,189 +1,258 @@
-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 } 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';
-
-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-bqsql", "text/x-plsql", "text/x-rsrc", "text/x-sh", "text/x-toml", "text/jsonnet", "text/x-dbt", "text/javascript", "text/typescript"];
+import { ChangeClassification, FieldItemProps, MergeConflict } from "./FieldItem-CAPj9lj3.js";
+import { ComponentProps, ReactNode } from "react";
+import { CompletionSource } from "@codemirror/autocomplete";
+import { EditorView } from "@codemirror/view";
+import { EditorState, EditorView as EditorView$1 } from "@uiw/react-codemirror";
+import { SQLNamespace } from "@codemirror/lang-sql";
+import { StreamLanguage } from "@codemirror/language";
+import "@codemirror/lint";
+import { SqlDialectName, SqlDialectName as SqlDialectName$1 } from "@keboola/codemirror-lang-sql";
+import "@codemirror/state";
+//#region src/components/CodeEditor/helpers.d.ts
+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-bqsql', '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;
-
+//#endregion
+//#region src/components/CodeEditor/variableCompletion.d.ts
 type EditorVariable = {
-    name: string;
-    value?: string;
+  name: string;
+  value?: string;
 };
-
-type Props$2 = {
-    value: string;
-    previousValue?: string;
-    /**
-     * `'field'` draws the chrome an `InputGroup` draws — surface, border, radius,
-     * focus ring, read-only wash — for an editor that is one control among others
-     * in a form. It sizes to its content, so don't pin its height.
-     *
-     * `'plain'` (the default) is the full-bleed surface of an editor that *is* the
-     * panel: a modal body, a chat block, a fixed-height viewer already framed by
-     * whatever contains it.
-     */
-    variant?: 'plain' | 'field';
-    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;
-    /**
-     * 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;
-    withLineNumbers?: boolean;
-    withLineWrapping?: boolean;
-    withCollapseUnchanged?: boolean;
-    withCopyButton?: boolean;
-    completeAny?: boolean;
-    help?: ReactNode;
-    helpPostfix?: ReactNode;
-    /**
-     * Extra actions for the toolbar that floats over the editor's top-right corner,
-     * beside the copy button. The toolbar is a 28px chip, so pass `size="icon-xs"`
-     * buttons — a default-sized one grows the chip and de-aligns the copy button.
-     */
-    renderAdditionalButtons?: (value?: string) => ReactNode;
-    className?: string;
+//#endregion
+//#region src/components/CodeEditor/CodeEditor.d.ts
+type Props$3 = {
+  value: string;
+  previousValue?: string;
+  /**
+   * `'field'` draws the chrome an `InputGroup` draws — surface, border, radius,
+   * focus ring, read-only wash — for an editor that is one control among others
+   * in a form. It sizes to its content, so don't pin its height.
+   *
+   * `'plain'` (the default) is the full-bleed surface of an editor that *is* the
+   * panel: a modal body, a chat block, a fixed-height viewer already framed by
+   * whatever contains it.
+   */
+  variant?: 'plain' | 'field';
+  mode?: LANGUAGE_MODE;
+  placeholder?: string;
+  /** Names the editable region for screen readers — the editor has no visible label of its own. */
+  ariaLabel?: string;
+  /**
+   * Names the editable region from an existing element, for when the label is already on screen.
+   * Prefer this over `ariaLabel` inside a form — `CodeEditorField` passes the field's own label id.
+   */
+  ariaLabelledBy?: string;
+  /** Links the editable region to help / error text. Space-delimited idref list. */
+  ariaDescribedBy?: string;
+  /** Marks the editable region invalid. Visual error styling is the caller's (`variant="field"`). */
+  ariaInvalid?: boolean;
+  ariaRequired?: boolean;
+  /**
+   * Treats a blank document as valid instead of a parse error (JSON modes only).
+   *
+   * - Off by default: for a standalone editor "Unexpected end of input" is correct, and at several
+   *   call sites the gutter marker is the only thing explaining a Save button that
+   *   `isValidJsonConfig('') === false` has already disabled.
+   * - `CodeEditorField` turns it on for a field that is not `required`, where an empty document is
+   *   how the value is removed.
+   */
+  allowBlankDocument?: boolean;
+  /**
+   * Fires when focus leaves the editable region — what a form connector needs to mark its field
+   * blurred, which is the gate errors are revealed on.
+   *
+   * - Bound as a CodeMirror DOM handler on the content node, not on the wrapper: the wrapper is not
+   *   what gets focused.
+   * - Installed only when passed, so an editor without it keeps the extension set it had.
+   */
+  onBlur?: () => void;
+  /**
+   * 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;
+  withLineNumbers?: boolean;
+  withLineWrapping?: boolean;
+  withCollapseUnchanged?: boolean;
+  withCopyButton?: boolean;
+  completeAny?: boolean;
+  help?: ReactNode;
+  helpPostfix?: ReactNode;
+  /**
+   * Extra actions for the toolbar that floats over the editor's top-right corner,
+   * beside the copy button. The toolbar is a 28px chip, so pass `size="icon-xs"`
+   * buttons — a default-sized one grows the chip and de-aligns the copy button.
+   */
+  renderAdditionalButtons?: (value?: string) => ReactNode;
+  className?: string;
 } & ({
-    readOnly: true;
-    onChange?: never;
+  readOnly: true;
+  onChange?: never;
 } | {
-    readOnly?: boolean;
-    onChange: (value: string) => void;
+  readOnly?: boolean;
+  onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, variant, 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;
-
+declare const CodeEditor: ({ value, previousValue, onChange, variant, mode, placeholder, ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaInvalid, ariaRequired, allowBlankDocument, onBlur, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className }: Props$3) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/components/CodeEditor/highlighting.d.ts
 type HighlightedLines = {
+  from: number;
+  to: number;
+  error?: {
+    from: number;
+    to: number;
+  };
+  processing?: {
     from: number;
     to: number;
-    error?: {
-        from: number;
-        to: number;
-    };
-    processing?: {
-        from: number;
-        to: number;
-    };
+  };
 } | null;
-
+//#endregion
+//#region src/components/CodeEditor/SqlEditor.d.ts
+type Props$2 = {
+  value: string;
+  onChange?: (value: string) => void;
+  onSelectionChange?: (text: string) => void;
+  onCreateEditor?: (view: EditorView$1, state: EditorState) => void;
+  onDestroyEditor?: () => void;
+  onBlurEditor?: (view: EditorView$1) => void;
+  onFocusEditor?: (view: EditorView$1) => void;
+  readOnly: boolean;
+  placeholder?: string;
+  searchQuery?: string;
+  searchMatchIndex?: number;
+  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;
+  /**
+   * Completions the caller knows and the schema does not — a table the code writes to
+   * before it exists, say. Added to the schema, keyword and variable completions; unlike
+   * `CodeEditor`'s prop of the same name, it replaces nothing.
+   *
+   * Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
+   * extension tree on every render.
+   */
+  completionSource?: CompletionSource;
+  variables?: EditorVariable[];
+  defaultSchema?: string;
+  defaultDatabase?: string;
+  highlightLines?: HighlightedLines;
+  dialect?: SqlDialectName$1;
+};
+declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect }: Props$2) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/components/MergeEditor/MergeEditor.d.ts
 type Props$1 = {
-    value: string;
-    onChange?: (value: string) => void;
-    onSelectionChange?: (text: string) => void;
-    onCreateEditor?: (view: EditorView, state: EditorState) => void;
-    onDestroyEditor?: () => void;
-    onBlurEditor?: (view: EditorView) => void;
-    onFocusEditor?: (view: EditorView) => void;
-    readOnly: boolean;
-    placeholder?: string;
-    searchQuery?: string;
-    searchMatchIndex?: number;
-    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;
-    /**
-     * Completions the caller knows and the schema does not — a table the code writes to
-     * before it exists, say. Added to the schema, keyword and variable completions; unlike
-     * `CodeEditor`'s prop of the same name, it replaces nothing.
-     *
-     * Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
-     * extension tree on every render.
-     */
-    completionSource?: CompletionSource;
-    variables?: EditorVariable[];
-    defaultSchema?: string;
-    defaultDatabase?: string;
-    highlightLines?: HighlightedLines;
-    dialect?: SqlDialectName;
+  mergeValue: string;
+  handleMergeChange: (value: string) => void;
+  leftText: string;
+  rightText: string;
+  leftConflicts: MergeConflict[];
+  rightConflicts: MergeConflict[];
+  leftHighlightedLines: Set<number>;
+  rightHighlightedLines: Set<number>;
+  leftClassification: Map<number, ChangeClassification>;
+  rightClassification: Map<number, ChangeClassification>;
+  mergeHighlightedLines: Set<number>;
+  mergeClassification: Map<number, ChangeClassification>;
+  acceptLeft: (conflict: MergeConflict) => void;
+  acceptRight: (conflict: MergeConflict) => void;
+  dismissLeft: (conflict: MergeConflict) => void;
+  dismissRight: (conflict: MergeConflict) => void;
+  leftHeader?: ReactNode;
+  middleHeader?: ReactNode;
+  middleHeaderClassName?: string;
+  middleClassName?: string;
+  rightHeader?: ReactNode;
+  className?: string;
+  /**
+   * Paint the corresponding read-only pane with the error palette to signal the
+   * side has been deleted upstream. The diff is still rendered so the user can
+   * see what was lost; accept/dismiss controls for that side are suppressed.
+   */
+  leftDeleted?: boolean;
+  rightDeleted?: boolean;
 };
-declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$1) => react_jsx_runtime.JSX.Element;
-
-type Props = {
-    mergeValue: string;
-    handleMergeChange: (value: string) => void;
-    leftText: string;
-    rightText: string;
-    leftConflicts: MergeConflict[];
-    rightConflicts: MergeConflict[];
-    leftHighlightedLines: Set<number>;
-    rightHighlightedLines: Set<number>;
-    leftClassification: Map<number, ChangeClassification>;
-    rightClassification: Map<number, ChangeClassification>;
-    mergeHighlightedLines: Set<number>;
-    mergeClassification: Map<number, ChangeClassification>;
-    acceptLeft: (conflict: MergeConflict) => void;
-    acceptRight: (conflict: MergeConflict) => void;
-    dismissLeft: (conflict: MergeConflict) => void;
-    dismissRight: (conflict: MergeConflict) => void;
-    leftHeader?: ReactNode;
-    middleHeader?: ReactNode;
-    middleHeaderClassName?: string;
-    middleClassName?: string;
-    rightHeader?: ReactNode;
-    className?: string;
-    /**
-     * Paint the corresponding read-only pane with the error palette to signal the
-     * side has been deleted upstream. The diff is still rendered so the user can
-     * see what was lost; accept/dismiss controls for that side are suppressed.
-     */
-    leftDeleted?: boolean;
-    rightDeleted?: boolean;
+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$1) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/components/CodeEditor/CodeEditorField.d.ts
+type Props = FieldItemProps & Omit<ComponentProps<typeof CodeEditor>, 'value' | 'onChange' | 'onBlur' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaDescribedBy' | 'ariaInvalid' | 'ariaRequired' | 'readOnly' | 'className' | 'allowBlankDocument'> & {
+  /** Styles the editor box; `className` styles the field frame. */
+  editorClassName?: string;
 };
-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 EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };
+/**
+ * Code / JSON editor field. State is the raw editor text (`string`) — never a parsed value.
+ *
+ * ⚠️ Shipped from **`@keboola/design/editors`**, not as a `field.*` connector on `useAppForm`, and
+ * deliberately: CodeMirror plus its language modes is ~170 kB brotlied, and registering this in the root
+ * form hook pulled all of it into `@keboola/design`'s main entry — every consumer paying for an editor
+ * most of them never render. That is the whole reason the `editors` subpath exists.
+ *
+ * It still reads the field from context, so it composes exactly like a connector:
+ *
+ * ```tsx
+ * import { CodeEditorField } from '@keboola/design/editors';
+ *
+ * <form.AppField name="schema">{() => <CodeEditorField label="Schema" />}</form.AppField>
+ * ```
+ *
+ * Text in, text out, deliberately: a JSON field is mid-edit invalid for most of the time the user is
+ * typing in it, and parsing on every keystroke would either throw away their cursor position or throw
+ * away the text. Parse in the schema (or at submit) and keep the editor's own content authoritative.
+ *
+ * `variant="field"` by default so it reads as a form control rather than a code block.
+ *
+ * Labelled with `aria-labelledby`, not `for`: CodeMirror's editable node is a `div[role="textbox"]`,
+ * which is not a labelable element.
+ */
+declare const CodeEditorField: ({ label, action, required, requiredMark, help, tooltip, className, 'aria-describedby': ariaDescribedBy, editorClassName, variant, ...editorProps }: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CodeEditor, CodeEditorField, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, type SqlDialectName, SqlEditor, isLanguageMode };
+//# sourceMappingURL=editors.d.ts.map