v2.6.1

marta-ko · marta-ko · commit 1730d0521212 · 2026-03-27T15:16:30.000Z
diff --git a/locales/package.json b/locales/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@svar-ui/grid-locales",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"description": "Locales for SVAR DataGrid widget",
 	"type": "module",
 	"main": "index.js",
diff --git a/provider/package.json b/provider/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@svar-ui/grid-data-provider",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"type": "module",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -17,6 +17,6 @@
 		"dist"
 	],
 	"dependencies": {
-		"@svar-ui/lib-data-provider": "1.7.1"
+		"@svar-ui/lib-data-provider": "1.7.2"
 	}
 }
diff --git a/site/package.json b/site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@svar-ui/site-svelte-grid",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"type": "module",
 	"scripts": {
 		"build": "vite build",
@@ -9,7 +9,7 @@
 	},
 	"license": "MIT",
 	"dependencies": {
-		"@svar-ui/svelte-grid": "2.6.0",
+		"@svar-ui/svelte-grid": "2.6.1",
 		"@svar-ui/svelte-core": "2.5.0"
 	}
 }
diff --git a/site/src/Main.svelte b/site/src/Main.svelte
@@ -70,14 +70,16 @@
 	];
 </script>
 
-<Grid
-	sizes={{ rowHeight: 73 }}
-	{data}
-	{columns}
-	select={false}
-	tree={true}
-	{columnStyle}
-/>
+<div class="demo">
+	<Grid
+		sizes={{ rowHeight: 73 }}
+		{data}
+		{columns}
+		select={false}
+		tree={true}
+		{columnStyle}
+	/>
+</div>
 
 <style>
 	:global(.demo .wx-cell) {
diff --git a/store/package.json b/store/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@svar-ui/grid-store",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"type": "module",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
diff --git a/store/src/DataStore.ts b/store/src/DataStore.ts
@@ -196,8 +196,9 @@ export default class DataStore extends Store<IData> {
 			}
 		);
 		inBus.on("editor", ({ value }: IDataMethodsConfig["editor"]) => {
-			const editor = this.getState().editor;
+			let editor = this.getState().editor;
 			if (editor) {
+				editor = { ...editor };
 				editor.value = value;
 				const col = this.getColumn(editor.column);
 				const row = { ...this.getRow(editor.id) };
diff --git a/svelte/demos/cases/EventHandling.svelte b/svelte/demos/cases/EventHandling.svelte
@@ -14,7 +14,7 @@
 
 	let data = $state([]);
 	const provider = new RestDataProvider(
-		"https://master--svar-grid-go--dev.webix.io/films",
+		"https://grid-backend.svar.dev/films",
 		o => o
 	);
 	provider.getData().then(v => (data = v));
diff --git a/svelte/demos/cases/InlineEditorsCells.svelte b/svelte/demos/cases/InlineEditorsCells.svelte
@@ -20,7 +20,9 @@
 			header: 'Country - "combo"',
 			editor: {
 				type: "combo",
-				config: { cell: EditorSelectCell },
+				config: {
+					cell: EditorSelectCell,
+				},
 			},
 			options: countries,
 			cell: SelectEditorCell,
@@ -32,7 +34,9 @@
 			width: 180,
 			editor: {
 				type: "datepicker",
-				config: { cell: EditorDateCell },
+				config: {
+					cell: EditorDateCell,
+				},
 			},
 			template: v => (v ? v.toLocaleDateString() : ""),
 		},
@@ -42,7 +46,9 @@
 			width: 180,
 			editor: {
 				type: "richselect",
-				config: { cell: EditorSelectCell },
+				config: {
+					cell: EditorSelectCell,
+				},
 			},
 			options: users,
 			cell: SelectEditorCell,
@@ -52,10 +58,13 @@
 			header: 'Destinations - "multiselect"',
 			editor: {
 				type: "multiselect",
-				config: { cell: EditorDestinationsCell },
+				config: {
+					cell: EditorDestinationsCell,
+					dropdown: { width: "auto" },
+				},
 			},
 			options: countries,
-			width: 280,
+			width: 130,
 			cell: DestinationCell,
 		},
 		/*{
@@ -96,7 +105,7 @@
 
 <div style="padding: 20px;">
 	<h4>Editable cells: inline editors with custom cells</h4>
-	<div>
+	<div style="height: 500px;">
 		<Grid {data} {columns} />
 	</div>
 </div>
diff --git a/svelte/demos/cases/RestBackend.svelte b/svelte/demos/cases/RestBackend.svelte
@@ -28,7 +28,7 @@
 	];
 	let data = $state([]);
 	const provider = new RestDataProvider(
-		"https://master--svar-grid-go--dev.webix.io/films",
+		"https://grid-backend.svar.dev/films",
 		obj => {
 			obj.year = obj.year * 1;
 			obj.votes = obj.votes * 1;
diff --git a/svelte/demos/common/Index.svelte b/svelte/demos/common/Index.svelte
@@ -324,18 +324,19 @@
 		background: #ebebeb;
 	}
 
-	.sidebar.active {
+	.sidebar.active,
+	.sidebar-content {
 		width: 300px;
 	}
 
-	.narrow .sidebar.active {
+	.narrow .sidebar.active,
+	.narrow .sidebar-content {
 		width: 100%;
 	}
 
 	.sidebar-content {
 		display: flex;
 		flex-direction: column;
-		width: 100%;
 		gap: 16px;
 		height: 100%;
 		border-right: var(--wx-border);
diff --git a/svelte/demos/custom/ColorEditor.svelte b/svelte/demos/custom/ColorEditor.svelte
@@ -26,7 +26,7 @@
 <div class="value" bind:this={node} tabindex="0" onclick={oncancel}>
 	{value}
 </div>
-<Dropdown width={"auto"}>
+<Dropdown width={"auto"} trackScroll={true} {oncancel}>
 	<div use:clickOutside={() => onsave(true)}>
 		<ColorBoard {value} onchange={updateValue} button={true} />
 	</div>
diff --git a/svelte/demos/routes.js b/svelte/demos/routes.js
@@ -59,7 +59,6 @@ import ExternalToolbar from "./cases/ExternalToolbar.svelte";
 import CustomRowHeight from "./cases/CustomRowHeight.svelte";
 import ExportCSV from "./cases/ExportCSV.svelte";
 
-
 export const links = [
 	["/base/:skin", "Basic DataGrid", BasicInit, "BasicInit"],
 	[
diff --git a/svelte/package.json b/svelte/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@svar-ui/svelte-grid",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"description": "A fast, feature-rich Svelte DataGrid component",
 	"productTag": "grid",
 	"productTrial": false,
@@ -36,15 +36,15 @@
 		"@svar-ui/lib-dom": "0.12.1",
 		"@svar-ui/lib-state": "1.9.6",
 		"@svar-ui/lib-svelte": "0.5.2",
-		"@svar-ui/svelte-menu": "2.5.0",
-		"@svar-ui/svelte-core": "2.5.0",
-		"@svar-ui/svelte-toolbar": "2.5.0",
-		"@svar-ui/grid-data-provider": "2.6.0",
-		"@svar-ui/grid-locales": "2.6.0",
-		"@svar-ui/grid-store": "2.6.0"
+		"@svar-ui/svelte-menu": "2.5.1",
+		"@svar-ui/svelte-core": "2.5.1",
+		"@svar-ui/svelte-toolbar": "2.5.1",
+		"@svar-ui/grid-data-provider": "2.6.1",
+		"@svar-ui/grid-locales": "2.6.1",
+		"@svar-ui/grid-store": "2.6.1"
 	},
 	"devDependencies": {
-		"@svar-ui/svelte-editor": "2.5.0",
+		"@svar-ui/svelte-editor": "2.5.1",
 		"@svar-ui/svelte-filter": "2.5.0"
 	},
 	"files": [
diff --git a/svelte/src/components/Layout.svelte b/svelte/src/components/Layout.svelte
@@ -120,12 +120,11 @@
 				.filter(c => !c.hidden)
 				.map(a => ({ ...a }));
 			columns.forEach(a => {
-				a.fixed = { left: 1 };
+				a.fixed = { left: 1, leftSize: $split.left };
 				a.left = width;
 				width += a.width;
 			});
-			if (columns.length)
-				columns[columns.length - 1].fixed = { left: -1 };
+			if (columns.length) columns[columns.length - 1].fixed.left = -1;
 		}
 
 		return { columns, width };
diff --git a/svelte/src/components/inlineEditors/Combo.svelte b/svelte/src/components/inlineEditors/Combo.svelte
@@ -3,10 +3,13 @@
 	import { SuggestDropdown } from "@svar-ui/svelte-core";
 	import { clickOutside } from "@svar-ui/lib-dom";
 
-	let { editor, onaction, onsave, onapply } = $props();
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let { value, renderedValue: text, options: filterOptions } = $state(editor);
-	let { template, cell } = $state(editor?.config || {});
+
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+
+	const dropdownOptions = $derived({ trackScroll: true, ...dropdown });
 
 	let index = $derived(filterOptions.findIndex(a => a.id === value));
 
@@ -49,7 +52,13 @@
 	onkeydown={e => keydown(e, index)}
 	use:clickOutside={() => onsave(true)}
 />
-<SuggestDropdown items={filterOptions} onready={ready} onselect={updateValue}>
+<SuggestDropdown
+	items={filterOptions}
+	onready={ready}
+	onselect={updateValue}
+	{...dropdownOptions}
+	{oncancel}
+>
 	{#snippet children({ option })}
 		{#if template}
 			{template(option)}
diff --git a/svelte/src/components/inlineEditors/Datepicker.svelte b/svelte/src/components/inlineEditors/Datepicker.svelte
@@ -7,9 +7,12 @@
 	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let value = $state(editor.value || new Date());
-
-	let template = $state(editor.config?.template);
-	let cell = $state(editor.config?.cell);
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+	const dropdownOptions = $derived({
+		trackScroll: true,
+		width: "auto",
+		...dropdown,
+	});
 
 	function updateValue({ value }) {
 		onapply(value);
@@ -42,7 +45,7 @@
 		<SvelteComponent data={editor.value} {onaction} />
 	{:else}<span class="wx-text">{editor.renderedValue}</span>{/if}
 </div>
-<Dropdown width={"auto"}>
+<Dropdown {...dropdownOptions} {oncancel}>
 	<div use:clickOutside={() => onsave(true)}>
 		<Calendar
 			{value}
diff --git a/svelte/src/components/inlineEditors/Editor.svelte b/svelte/src/components/inlineEditors/Editor.svelte
@@ -93,7 +93,7 @@
 		background-color: var(--wx-background);
 		color: var(--wx-color-font);
 		position: relative;
-		z-index: 3;
+		z-index: 2;
 	}
 	.wx-cell :global(.wx-dropdown) {
 		border: var(--wx-table-editor-dropdown-border);
diff --git a/svelte/src/components/inlineEditors/MultiSelect.svelte b/svelte/src/components/inlineEditors/MultiSelect.svelte
@@ -9,11 +9,17 @@
 	const options = $derived(editor?.options ?? []);
 	let value = $derived(editor?.value || []);
 	let renderedValue = $derived(editor?.renderedValue);
+
 	let index = $derived.by(() => {
 		const firstSelected = options.find(opt => value.includes(opt.id));
 		return firstSelected ? options.indexOf(firstSelected) : -1;
 	});
 
+	const dropdownOptions = $derived.by(() => {
+		const dropdown = config?.dropdown || {};
+		return { trackScroll: true, ...dropdown };
+	});
+
 	function updateValue({ id }) {
 		onapply(id);
 		node.focus();
@@ -69,6 +75,8 @@
 	onselect={updateValue}
 	checkboxes={true}
 	multiselect={true}
+	{...dropdownOptions}
+	{oncancel}
 	{value}
 >
 	{#snippet children({ option })}
diff --git a/svelte/src/components/inlineEditors/Richselect.svelte b/svelte/src/components/inlineEditors/Richselect.svelte
@@ -7,7 +7,8 @@
 
 	let data = $state(editor.options.find(opt => opt.id === editor.value));
 	let { value, options } = $state(editor);
-	let { template, cell } = $state(editor?.config || {});
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+	const dropdownOptions = $derived({ trackScroll: true, ...dropdown });
 
 	let index = $derived(options.findIndex(a => a.id === value));
 
@@ -55,7 +56,13 @@
 		<SvelteComponent {data} {onaction} />
 	{:else}<span class="wx-text">{editor.renderedValue}</span>{/if}
 </div>
-<SuggestDropdown items={options} onready={ready} onselect={updateValue}>
+<SuggestDropdown
+	items={options}
+	onready={ready}
+	onselect={updateValue}
+	{...dropdownOptions}
+	{oncancel}
+>
 	{#snippet children({ option })}
 		{#if template}
 			{template(option)}
diff --git a/svelte/src/helpers/columnWidth.js b/svelte/src/helpers/columnWidth.js
@@ -18,7 +18,12 @@ export function getCssName(column, cell, columnStyle) {
 
 	if (column.fixed) {
 		for (const pos in column.fixed) {
-			css += column.fixed[pos] === -1 ? "wx-shadow " : "wx-fixed ";
+			let isShadow = column.fixed[pos] === -1;
+			if (!isShadow && column.fixed.leftSize && cell.colspan) {
+				const spanIndex = cell.colspan + column._colindex - 1;
+				isShadow = spanIndex === column.fixed.leftSize;
+			}
+			css += isShadow ? "wx-shadow " : "wx-fixed ";
 		}
 	}
 	css += cell.rowspan > 1 ? "wx-rowspan " : "";
diff --git a/svelte/whatsnew.md b/svelte/whatsnew.md
@@ -1,3 +1,13 @@
+## 2.6.1
+
+### Fixes
+
+-   Impossible to configure inline editor dropdown
+-   Inline editor dropdown is detached during scroll
+-   Editor state object is mutated instead of being reset
+-   DataProvider adds trailing slash to getData url
+-   Incorrect height of sidebar Editor
+
 ## 2.6.0
 
 ### New features
@@ -13,6 +23,7 @@
 
 -   Dropdown editors are cut off in small tables
 -   DataGrid fails to initialize in SvelteKit with serverside rendering
+-   Error in fetching Typescript definitions from store
 
 ## 2.5.1
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@svar-ui/grid-locales",`
`3`		`- "version": "2.6.0",`
	`3`	`+ "version": "2.6.1",`
`4`	`4`	`"description": "Locales for SVAR DataGrid widget",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "index.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@svar-ui/grid-data-provider",`
`3`		`- "version": "2.6.0",`
	`3`	`+ "version": "2.6.1",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"module": "dist/index.js",`
`@@ -17,6 +17,6 @@`
`17`	`17`	`"dist"`
`18`	`18`	`],`
`19`	`19`	`"dependencies": {`
`20`		`- "@svar-ui/lib-data-provider": "1.7.1"`
	`20`	`+ "@svar-ui/lib-data-provider": "1.7.2"`
`21`	`21`	`}`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@svar-ui/site-svelte-grid",`
`3`		`- "version": "2.6.0",`
	`3`	`+ "version": "2.6.1",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"build": "vite build",`
`@@ -9,7 +9,7 @@`
`9`	`9`	`},`
`10`	`10`	`"license": "MIT",`
`11`	`11`	`"dependencies": {`
`12`		`- "@svar-ui/svelte-grid": "2.6.0",`
	`12`	`+ "@svar-ui/svelte-grid": "2.6.1",`
`13`	`13`	`"@svar-ui/svelte-core": "2.5.0"`
`14`	`14`	`}`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@svar-ui/grid-store",`
`3`		`- "version": "2.6.0",`
	`3`	`+ "version": "2.6.1",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"module": "dist/index.js",`