@wallarm-org/design-system 1.32.0 → 1.33.0

package/dist/components/CodeEditor/CodeEditorRoot.d.ts

@@ -23,7 +23,7 @@ export interface CodeEditorRootProps extends CodeEditorRootNativeProps, Testable
      * document would be seeded with the previous document's text.
      */
     documentId?: string;
-    /** Focusable, selectable, searchable, copyable — but not editable by the user */
+    /** Non-editable and unfocusable content; text remains selectable, searchable and copyable */
     readOnly?: boolean;
     /** Offsets gutter numbers; `lines`, `folds`, `diagnostics` use absolute numbers */
     startingLineNumber?: number;

package/dist/components/CodeEditor/engine/SearchPanel.js

@@ -41,9 +41,20 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
             ]
         });
     };
+    const blurReadOnlyContent = ()=>{
+        if (view.state.readOnly && view.hasFocus) view.contentDOM.blur();
+    };
+    const closeSearch = ()=>{
+        closeSearchPanel(view);
+        blurReadOnlyContent();
+    };
     const handleKeyDown = (event, onEnter)=>{
         if (event.nativeEvent.isComposing || 229 === event.keyCode) return;
-        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) return void event.preventDefault();
+        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) {
+            event.preventDefault();
+            blurReadOnlyContent();
+            return;
+        }
         if ('Enter' === event.key) {
             event.preventDefault();
             onEnter(event.shiftKey);
@@ -53,7 +64,10 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
     const handleReplaceKeyDown = (event)=>handleKeyDown(event, ()=>replaceNext(view));
     const handlePanelKeyDown = (event)=>{
         if (event.target instanceof HTMLInputElement) return;
-        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) event.preventDefault();
+        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) {
+            event.preventDefault();
+            blurReadOnlyContent();
+        }
     };
     const canSearch = query.valid;
     return /*#__PURE__*/ jsxs("div", {
@@ -154,7 +168,7 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
                         className: "ml-auto",
                         "aria-label": "Close search",
                         "data-testid": slot('search-close'),
-                        onClick: ()=>closeSearchPanel(view),
+                        onClick: closeSearch,
                         children: /*#__PURE__*/ jsx(X, {})
                     })
                 ]

package/dist/components/CodeEditor/engine/completion.d.ts

@@ -4,9 +4,9 @@ import type { CodeEditorCompletionContext, CodeEditorCompletionSource, CodeEdito
 /** Public, engine-free view of a CodeMirror completion request (spec §4). */
 export declare const buildCompletionContext: (ctx: CompletionContext, language: CodeEditorLanguage, startingLineNumber: number) => CodeEditorCompletionContext;
 /**
- * Autocomplete (spec §7.14): built-in HTTP source for `http`, the JSON Schema source when
- * `schema` is set, then consumer sources, all through `override` (language-data sources are
- * off). `completionKeymap` comes with `defaultKeymap: true` at `Prec.highest`, so Enter,
+ * Autocomplete: HTTP and JSON Schema sources, consumer sources, then language keywords and
+ * document words, all through `override` (language-data sources are off).
+ * `completionKeymap` comes with `defaultKeymap: true` at `Prec.highest`, so Enter,
  * arrows and Escape reach the open list before `indentWithTab` / fullscreen Escape.
  */
 export declare const completionExtension: (config: {

package/dist/components/CodeEditor/engine/completion.js

@@ -1,4 +1,4 @@
-import { autocompletion } from "@codemirror/autocomplete";
+import { autocompletion, completeAnyWord, completeFromList } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
 import { cn } from "../../../utils/cn.js";
 import { dropdownMenuItemVariants } from "../../DropdownMenu/classes.js";
@@ -106,13 +106,153 @@ const adaptSource = (source, language, startingLineNumber)=>(ctx)=>{
         }
     };
 const reopensAfter = (completion)=>'string' == typeof completion.apply && completion.apply.endsWith(': ');
+const LANGUAGE_KEYWORDS = {
+    json: [
+        'true',
+        'false',
+        'null'
+    ],
+    yaml: [
+        'true',
+        'false',
+        'null'
+    ],
+    bash: [
+        'echo',
+        'export',
+        'if',
+        'then',
+        'else',
+        'fi',
+        'for',
+        'in',
+        'do',
+        'done',
+        'function'
+    ],
+    javascript: [
+        'const',
+        'let',
+        'var',
+        'function',
+        'return',
+        'if',
+        'else',
+        'for',
+        'while',
+        'class',
+        'import',
+        'export',
+        'from',
+        'async',
+        'await',
+        'true',
+        'false',
+        'null',
+        'undefined'
+    ],
+    typescript: [
+        'const',
+        'let',
+        'function',
+        'return',
+        'if',
+        'else',
+        'class',
+        'import',
+        'export',
+        'from',
+        'async',
+        'await',
+        'interface',
+        'type',
+        'enum',
+        'extends',
+        'implements',
+        'public',
+        'private',
+        'readonly',
+        'true',
+        'false',
+        'null',
+        'undefined'
+    ],
+    python: [
+        'def',
+        'class',
+        'return',
+        'if',
+        'elif',
+        'else',
+        'for',
+        'while',
+        'in',
+        'import',
+        'from',
+        'as',
+        'async',
+        'await',
+        'try',
+        'except',
+        'with',
+        'True',
+        'False',
+        'None'
+    ],
+    lua: [
+        'function',
+        'local',
+        'return',
+        'if',
+        'then',
+        'elseif',
+        'else',
+        'end',
+        'for',
+        'while',
+        'do',
+        'repeat',
+        'until',
+        'true',
+        'false',
+        'nil'
+    ]
+};
+const isInsideQuotedString = (text)=>{
+    let quoted = false;
+    for(let i = 0; i < text.length; i++)if ('\\' === text[i]) i++;
+    else if ('"' === text[i]) quoted = !quoted;
+    return quoted;
+};
+const builtInSources = (language)=>{
+    const keywords = LANGUAGE_KEYWORDS[language];
+    if (!keywords) return [
+        completeAnyWord
+    ];
+    const completeKeywords = completeFromList(keywords.map((label)=>({
+            label,
+            type: 'keyword'
+        })));
+    if ('json' === language) return [
+        (ctx)=>{
+            const line = ctx.state.doc.lineAt(ctx.pos);
+            const before = line.text.slice(0, ctx.pos - line.from);
+            if (isInsideQuotedString(before)) return completeAnyWord(ctx);
+            return /(?:^|[:,\[])[\s\w]*$/.test(before) ? completeKeywords(ctx) : null;
+        }
+    ];
+    return [
+        completeKeywords,
+        completeAnyWord
+    ];
+};
 const completionExtension = (config)=>{
     const { language, schema, sources, startingLineNumber } = config;
     const override = [];
     if ('http' === language) override.push(adaptSource(httpCompletions, language, startingLineNumber));
     if (void 0 !== schema && isJsonLike(language)) override.push(schemaCompletionSource(()=>schema, (state)=>jsonRegion(state, language)));
     for (const source of sources)override.push(adaptSource(source, language, startingLineNumber));
-    if (0 === override.length) return [];
+    override.push(...builtInSources(language));
     return [
         autocompletion({
             override,

package/dist/components/CodeEditor/engine/index.js

@@ -79,7 +79,8 @@ const SLOT_DEPS = {
     ],
     contentAttributes: [
         'contentAttributes',
-        'testId'
+        'testId',
+        'readOnly'
     ],
     cspNonce: [
         'cspNonce'
@@ -184,6 +185,7 @@ const featureExtensions = (options, callbacks)=>({
     });
 const contentAttributesFor = (options)=>{
     const attrs = sanitizeContentAttributes(options.contentAttributes);
+    if (options.readOnly) delete attrs.tabindex;
     if (options.testId) attrs['data-testid'] = `${options.testId}--editor`;
     return attrs;
 };
@@ -225,7 +227,10 @@ const gutterAria = [
 ];
 const slotExtensions = (options, callbacks)=>({
         language: ()=>languageExtension(options.language),
-        readOnly: ()=>EditorState.readOnly.of(options.readOnly),
+        readOnly: ()=>[
+                EditorState.readOnly.of(options.readOnly),
+                EditorView.editable.of(!options.readOnly)
+            ],
         wrap: ()=>options.wrapLines ? EditorView.lineWrapping : [],
         maxHeight: ()=>maxHeightTheme(options.maxHeight),
         contentAttributes: ()=>EditorView.contentAttributes.of(contentAttributesFor(options)),
@@ -298,6 +303,10 @@ const createEditor = (parent, initialOptions, callbacks)=>{
         state: createState(initialOptions.value, initialOptions),
         parent
     });
+    const preventReadOnlyMouseFocus = (event)=>{
+        if (view.state.readOnly && event.target instanceof Node && view.contentDOM.contains(event.target)) event.stopPropagation();
+    };
+    view.dom.addEventListener('mousedown', preventReadOnlyMouseFocus, true);
     const ensureLazyLanguage = (lang)=>{
         if (!isLazyLanguage(lang)) return;
         loadLanguageExtension(lang).then((extension)=>{
@@ -346,13 +355,20 @@ const createEditor = (parent, initialOptions, callbacks)=>{
     const update = (next)=>{
         const prev = options;
         options = next;
-        if (next.documentId !== prev.documentId) return void swapDocument(prev, next);
+        if (next.documentId !== prev.documentId) {
+            swapDocument(prev, next);
+            if (next.readOnly && view.hasFocus) view.contentDOM.blur();
+            return;
+        }
         reconfigure(prev, next);
+        if (next.readOnly && view.hasFocus) view.contentDOM.blur();
         if (next.language !== prev.language) ensureLazyLanguage(next.language);
         syncValue(next.value);
     };
     const api = {
-        focus: ()=>view.focus(),
+        focus: ()=>{
+            if (!view.state.readOnly) view.focus();
+        },
         getValue: ()=>view.state.doc.toString(),
         insertText: (text)=>{
             if (view.state.readOnly) return;
@@ -380,6 +396,7 @@ const createEditor = (parent, initialOptions, callbacks)=>{
         destroy: ()=>{
             destroyed = true;
             cache.clear();
+            view.dom.removeEventListener('mousedown', preventReadOnlyMouseFocus, true);
             view.destroy();
         }
     };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.31.0",
-  "generatedAt": "2026-10-01T11:56:51.596Z",
+  "version": "1.32.0",
+  "generatedAt": "2026-10-02T12:06:48.075Z",
   "components": [
     {
       "name": "Accordion",
@@ -19208,7 +19208,7 @@
           "name": "readOnly",
           "type": "boolean | undefined",
           "required": false,
-          "description": "Focusable, selectable, searchable, copyable — but not editable by the user"
+          "description": "Non-editable and unfocusable content; text remains selectable, searchable and copyable"
         },
         {
           "name": "startingLineNumber",
@@ -19882,7 +19882,7 @@
               "name": "readOnly",
               "type": "boolean | undefined",
               "required": false,
-              "description": "Focusable, selectable, searchable, copyable — but not editable by the user",
+              "description": "Non-editable and unfocusable content; text remains selectable, searchable and copyable",
               "defaultValue": "false"
             },
             {
@@ -20301,7 +20301,7 @@
         {
           "name": "ReadOnly",
           "code": "() => (\n  <div style={{ width: '600px' }}>\n    <CodeEditorRoot\n      value={httpResponseCode}\n      language='http'\n      readOnly\n      data-testid='code-editor-read-only'\n    >\n      <CodeSnippetHeader>\n        <CodeSnippetTitle>Response</CodeSnippetTitle>\n        <CodeSnippetActions>\n          <CodeSnippetCopyButton />\n        </CodeSnippetActions>\n      </CodeSnippetHeader>\n      <CodeEditorContent lineNumbers aria-label='HTTP response, read only' />\n    </CodeEditorRoot>\n  </div>\n)",
-          "description": "`readOnly` still lets you focus, select, search and copy, but not type. Use it when the value\ncan change elsewhere but not here. If it never changes, use `CodeSnippet`."
+          "description": "`readOnly` lets you select, search and copy without focusing the code or showing a caret. Use it when the value\ncan change elsewhere but not here. If it never changes, use `CodeSnippet`."
         },
         {
           "name": "Tabs",
@@ -20344,9 +20344,9 @@
           "description": "Parity check for the three sizes: the same font size, line height and gutter padding per size."
         },
         {
-          "name": "ParityChrome",
-          "code": "() => (\n  <VStack gap={24}>\n    <ParityPair testId='parity-chrome-header' code={sampleCode} language='text'>\n      {PARITY_HEADER_CHROME}\n    </ParityPair>\n    <ParityPair testId='parity-chrome-floating' code={sampleCode} language='text'>\n      {PARITY_FLOATING_CHROME}\n    </ParityPair>\n  </VStack>\n)",
-          "description": "Parity check for the shared chrome: a header with tabs and actions, and floating actions\nwithout a header, sit in the same place with the same spacing."
+          "name": "ParityFrame",
+          "code": "() => (\n  <VStack gap={24}>\n    <ParityPair testId='parity-frame-header' code={sampleCode} language='text'>\n      {PARITY_HEADER_FRAME}\n    </ParityPair>\n    <ParityPair testId='parity-frame-floating' code={sampleCode} language='text'>\n      {PARITY_FLOATING_FRAME}\n    </ParityPair>\n  </VStack>\n)",
+          "description": "Parity check for the shared frame: a header with tabs and actions, and floating actions\nwithout a header, sit in the same place with the same spacing."
         },
         {
           "name": "ParityShowMore",
@@ -20391,7 +20391,7 @@
         {
           "name": "LongDocument",
           "code": "() => <LongDocumentDemo />",
-          "description": "2 000 read-only lines clamped by `maxLines` — the top of the envelope the colour painter is\nbuilt for, where `readOnly` still lets the text be focused, searched and copied."
+          "description": "2 000 read-only lines clamped by `maxLines` — the top of the envelope the colour painter is\nbuilt for, where `readOnly` still lets the text be selected, searched and copied."
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",