wx-svelte-grid 2.6.1 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "2.6.1",
+	"version": "2.7.0",
 	"description": "A fast, feature-rich Svelte DataGrid component",
 	"productTag": "grid",
 	"productTrial": false,
@@ -33,19 +33,19 @@
 	},
 	"homepage": "https://svar.dev/svelte/datagrid/",
 	"dependencies": {
-		"@svar-ui/lib-dom": "0.12.1",
-		"@svar-ui/lib-state": "1.9.6",
+		"@svar-ui/lib-dom": "0.13.1",
+		"@svar-ui/lib-state": "1.9.7",
 		"@svar-ui/lib-svelte": "0.5.2",
-		"@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"
+		"@svar-ui/svelte-menu": "2.6.0",
+		"@svar-ui/svelte-core": "2.6.0",
+		"@svar-ui/svelte-toolbar": "2.6.0",
+		"@svar-ui/grid-data-provider": "2.7.0",
+		"@svar-ui/grid-locales": "2.7.0",
+		"@svar-ui/grid-store": "2.7.0"
 	},
 	"devDependencies": {
-		"@svar-ui/svelte-editor": "2.5.1",
-		"@svar-ui/svelte-filter": "2.5.0"
+		"@svar-ui/svelte-editor": "2.6.0",
+		"@svar-ui/svelte-filter": "2.6.0"
 	},
 	"files": [
 		"src",

package/src/components/Cell.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onDestroy, getContext, untrack } from "svelte";
+	import { getContext, untrack } from "svelte";
 	import { getStyle } from "../helpers/columnWidth";
 	import { getRenderValue } from "@svar-ui/grid-store";
 	import { setID } from "@svar-ui/lib-dom";
@@ -72,13 +72,6 @@
 		}
 	}
 
-	onDestroy(() => {
-		if (focusable && $focusCell) {
-			api.exec("focus-cell", { eventSource: "destroy" });
-			focusable = false;
-		}
-	});
-
 	function highlightText(text) {
 		const regex = new RegExp(`(${$search.value.trim()})`, "gi");
 		const parts = String(text).split(regex);

package/src/components/Grid.svelte

@@ -97,7 +97,6 @@
 		getReactiveState: dataStore.getReactive.bind(dataStore),
 		exec: firstInRoute.exec.bind(firstInRoute),
 		getRow: dataStore.getRow.bind(dataStore),
-		getRowIndex: dataStore.getRowIndex.bind(dataStore),
 	});
 	// auto config columns
 	const finalColumns = $derived.by(() => {

package/src/components/HeaderCell.svelte

@@ -127,7 +127,7 @@
 			? "0"
 			: undefined}
 		role="columnheader"
-		aria-colindex={cell._colindex}
+		aria-colindex={column._colindex}
 		aria-colspan={cell.colspan > 1 ? cell.colspan : undefined}
 		aria-rowspan={cell.rowspan > 1 ? cell.rowspan : undefined}
 		aria-sort={!sortMark?.order || cell.filter

package/src/components/Layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { getContext, tick, onMount } from "svelte";
+	import { getContext, tick, onMount, untrack } from "svelte";
 	import { onresize } from "../helpers/actions/onresize";
 	import { reorder as drag, getOffset } from "../helpers/actions/reorder";
 	import {
@@ -53,6 +53,8 @@
 		select,
 		editor,
 		scroll,
+		scrollLeft,
+		scrollTop,
 		tree,
 		focusCell,
 		_print,
@@ -65,8 +67,7 @@
 	let SCROLLSIZE = $state(0);
 	onMount(() => (SCROLLSIZE = getScrollSize()));
 
-	let scrollLeft = $state(0),
-		scrollTop = $state(0);
+	let bodyClientHeight = $state(0);
 	const hasAny = $derived.by(() => {
 		return $_columns.some(col => !col.hidden && col.flexgrow);
 	});
@@ -168,8 +169,8 @@
 		let data, header, footer;
 
 		// get visible columns
-		const left = scrollLeft;
-		const right = scrollLeft + clientWidth;
+		const left = $scrollLeft;
+		const right = $scrollLeft + clientWidth;
 
 		let start = 0;
 		let end = 0;
@@ -247,25 +248,36 @@
 	});
 	// $inspect(renderColumns, "renderColumns");
 
-	const contentWidth = $derived(
-		hasAny && fullWidth <= clientWidth
-			? clientWidth - (hasVScroll ? SCROLLSIZE : 0)
-			: fullWidth
-	);
-	// $inspect(contentWidth, "contentWidth");
-
 	const headerHeight = $derived(header ? $_sizes.headerHeight : 0);
 	const footerHeight = $derived(footer ? $_sizes.footerHeight : 0);
 
-	const hasVScroll = $derived(
-		clientWidth && clientHeight
-			? fullHeight + headerHeight + footerHeight >=
-					clientHeight - (fullWidth >= clientWidth ? SCROLLSIZE : 0)
-			: false
-	);
 	const hasHScroll = $derived(
 		clientWidth && clientHeight ? fullWidth >= clientWidth : false
 	);
+	let hasVScroll = $state(false);
+
+	function setVScroll() {
+		hasVScroll =
+			clientWidth && clientHeight
+				? fullHeight + headerHeight + footerHeight >=
+					clientHeight - (fullWidth >= clientWidth ? SCROLLSIZE : 0)
+				: false;
+	}
+
+	$effect(() => {
+		bodyClientHeight;
+		untrack(() => requestAnimationFrame(setVScroll));
+	});
+	$effect(() => {
+		clientHeight;
+		untrack(setVScroll);
+	});
+
+	const contentWidth = $derived(
+		hasAny && fullWidth <= clientWidth
+			? clientWidth - (hasVScroll ? SCROLLSIZE : 0)
+			: fullWidth
+	);
 
 	// set global width
 	// if we have flexible columns
@@ -297,14 +309,14 @@
 		let start = 0,
 			deltaTop = 0;
 		if (autoRowHeight) {
-			let st = scrollTop;
+			let st = $scrollTop;
 			while (st > 0) {
 				st -= rowHeights[start] || defaultRowHeight;
 				start++;
 			}
 
 			// space to first rendered row
-			deltaTop = scrollTop - st;
+			deltaTop = $scrollTop - st;
 			for (let i = Math.max(0, start - EXTRAROWS - 1); i < start; i++)
 				deltaTop -= rowHeights[start - i] || defaultRowHeight;
 
@@ -315,7 +327,7 @@
 				let topHeight = 0;
 				for (let i = 0; i < $data.length; i++) {
 					const height = $data[i].rowHeight || defaultRowHeight;
-					if (topHeight + height > scrollTop) {
+					if (topHeight + height > $scrollTop) {
 						startInd = i;
 						break;
 					}
@@ -346,7 +358,7 @@
 				return { d: deltaTop, start, end };
 			}
 
-			start = Math.floor(scrollTop / defaultRowHeight);
+			start = Math.floor($scrollTop / defaultRowHeight);
 			start = Math.max(0, start - EXTRAROWS);
 			deltaTop = start * defaultRowHeight;
 		}
@@ -388,8 +400,10 @@
 	let renderEnd = $state();
 
 	function onScroll(ev) {
-		scrollTop = ev.target.scrollTop;
-		scrollLeft = ev.target.scrollLeft;
+		const top = ev.target.scrollTop;
+		const left = ev.target.scrollLeft;
+		if (top !== $scrollTop || left !== $scrollLeft)
+			api.exec("scroll-to", { top, left });
 	}
 
 	function lockSelection(ev) {
@@ -479,7 +493,7 @@
 			.forEach(element => element.setAttribute("tabindex", "-1"));
 		container.appendChild(dragNode);
 
-		const offsetX = scrollLeft - renderColumns.d;
+		const offsetX = $scrollLeft - renderColumns.d;
 		const vScrollSize = hasVScroll ? SCROLLSIZE : 0;
 
 		container.style.width =
@@ -531,7 +545,7 @@
 					? dragNode?.offsetHeight
 					: $_sizes.rowHeight;
 
-				if (scrollTop === 0 || pos.y > min + rowHeight - 1) {
+				if ($scrollTop === 0 || pos.y > min + rowHeight - 1) {
 					const targetRect = targetRow.getBoundingClientRect();
 					const dragNodeOffset = getOffset(dragNode);
 
@@ -540,8 +554,10 @@
 
 					const dir = dragNodePos > targetNodePos ? -1 : 1;
 					const initialMode = dir === 1 ? "after" : "before";
+					const flat = api.getState().flatData;
 					const diff = Math.abs(
-						api.getRowIndex(from) - api.getRowIndex(to)
+						flat.findIndex(r => r.id === from) -
+							flat.findIndex(r => r.id === to)
 					);
 
 					const mode =
@@ -657,6 +673,20 @@
 
 	$effect(() => dataRows && autoRowHeight && adjustHeight());
 
+	$effect(() => {
+		if ($focusCell) {
+			const rowExists = dataRows.some(row => row.id === $focusCell.row);
+			const cellExists =
+				rowExists &&
+				renderColumns.data.some(
+					col => col.id === $focusCell.column && !col.collapsed
+				);
+			if (!cellExists) {
+				api.exec("focus-cell", { eventSource: "destroy" });
+			}
+		}
+	});
+
 	/* focus is a focusable cell which either belongs to visible selection 
 	   or is the first visible cell in grid, which maybe scrolled up due to EXTRAROWS 
 	   If select is false, focusCell can be outside selection*/
@@ -731,6 +761,8 @@
 			onscroll={onScroll}
 			use:scrollTo={{
 				scroll,
+				scrollLeft,
+				scrollTop,
 				getWidth: () => clientWidth - (hasVScroll ? SCROLLSIZE : 0),
 				getHeight: () => visibleRowsHeight,
 				getScrollMargin: () => leftColumns.width + rightColumns.width,
@@ -756,6 +788,7 @@
 					$focusCell &&
 					api.exec("focus-cell", { eventSource: "click" })}
 				use:delegateClick={bodyClickHandlers}
+				bind:clientHeight={bodyClientHeight}
 			>
 				{#if overlay}
 					<Overlay {overlay} />

package/src/components/MultiSelect.svelte

@@ -0,0 +1,197 @@
+<script>
+	import { onMount } from "svelte";
+	import { SuggestDropdown } from "@svar-ui/svelte-core";
+
+	let {
+		value = $bindable([]),
+		options = [],
+		placeholder = "",
+		clear = false,
+		text = null,
+		template = null,
+		cell = null,
+		dropdown = {},
+		autoOpen = false,
+		onchange,
+		onaction,
+	} = $props();
+
+	const selected = $derived(
+		(value || []).map(id => options.find(o => o.id === id)).filter(Boolean)
+	);
+
+	let node = $state();
+	let navigate;
+	let keydown;
+	function ready(ev) {
+		navigate = ev.navigate;
+		keydown = ev.keydown;
+		if (autoOpen) navigate(index());
+	}
+
+	onMount(() => {
+		if (autoOpen) {
+			node?.focus();
+			if (window?.getSelection) window.getSelection().removeAllRanges();
+		}
+	});
+
+	const index = () => {
+		const v = value || [];
+		if (!v.length) return 0;
+		const firstSelected = options.find(o => v.includes(o.id));
+		return firstSelected ? options.indexOf(firstSelected) : 0;
+	};
+
+	function select({ id }) {
+		value = id;
+		onchange && onchange({ value });
+	}
+
+	function unselect(ev) {
+		ev.stopPropagation();
+		value = [];
+		onchange && onchange({ value });
+	}
+
+	function onclick() {
+		navigate?.(index());
+	}
+
+	function oncancel() {
+		navigate?.(null);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={node}
+	class="wx-multiselect"
+	{onclick}
+	onkeydown={ev => keydown?.(ev, index())}
+	tabindex="0"
+>
+	<div class="wx-label">
+		{#if template}
+			{template(selected)}
+		{:else if cell}
+			{@const CellComponent = cell}
+			<CellComponent data={selected} {onaction} />
+		{:else if text}
+			<span class="wx-text">{text}</span>
+		{:else if selected.length}
+			<span class="wx-text">{selected.map(s => s.label).join(", ")}</span>
+		{:else if placeholder}
+			<span class="wx-placeholder">{placeholder}</span>
+		{:else}&nbsp;{/if}
+	</div>
+
+	{#if clear && value?.length}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<i class="wx-icon wxi-close" onclick={unselect}></i>
+	{:else}<i class="wx-icon wxi-angle-down"></i>{/if}
+
+	<SuggestDropdown
+		items={options}
+		onready={ready}
+		onselect={select}
+		multiselect={true}
+		checkboxes={true}
+		value={value || []}
+		{oncancel}
+		{...dropdown}
+	>
+		{#snippet children({ option })}
+			<div class="wx-option">
+				{#if template}
+					{template(option)}
+				{:else if cell}
+					{@const CellComponent = cell}
+					<CellComponent data={option} {onaction} />
+				{:else}{option.label}{/if}
+			</div>
+		{/snippet}
+	</SuggestDropdown>
+</div>
+
+<style>
+	.wx-multiselect {
+		position: relative;
+		outline: none;
+		width: var(--wx-input-width);
+		min-height: var(--wx-input-height);
+		border: var(--wx-input-border);
+		border-radius: var(--wx-input-border-radius);
+		background: var(--wx-input-background);
+		cursor: pointer;
+	}
+	.wx-multiselect:focus {
+		border: var(--wx-input-border-focus);
+	}
+
+	.wx-label {
+		position: relative;
+		top: 50%;
+		transform: translateY(-50%);
+		display: block;
+		width: 100%;
+		font-family: var(--wx-input-font-family);
+		font-size: var(--wx-input-font-size);
+		line-height: var(--wx-input-line-height);
+		font-weight: var(--wx-input-font-weight);
+		text-align: var(--wx-input-text-align);
+		color: var(--wx-input-font-color);
+		padding: var(--wx-input-padding);
+		padding-right: calc(
+			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
+		);
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.wx-text {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.wx-placeholder {
+		color: var(--wx-input-placeholder-color);
+	}
+
+	.wx-icon {
+		position: absolute;
+		right: var(--wx-input-icon-indent);
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: var(--wx-input-icon-size);
+		line-height: 1;
+		width: var(--wx-input-icon-size);
+		height: var(--wx-input-icon-size);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		pointer-events: none;
+		user-select: none;
+		color: var(--wx-input-icon-color);
+	}
+	.wx-icon:before {
+		display: block;
+	}
+	.wx-icon.wxi-close {
+		pointer-events: all;
+	}
+	.wx-icon.wxi-close:hover {
+		background: var(--wx-background-hover);
+		border-radius: var(--wx-icon-border-radius);
+	}
+
+	.wx-option {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 8px;
+	}
+</style>

package/src/components/Tooltip.svelte

@@ -1,116 +1,40 @@
 <script>
 	import { getRenderValue } from "@svar-ui/grid-store";
+	import { Tooltip } from "@svar-ui/svelte-core";
 	import { getID } from "@svar-ui/lib-dom";
 
-	let { content: Content = null, api, children } = $props();
+	let {
+		api,
+		at = "point",
+		overflow = false,
+		content: Content = null,
+		resolver = defaultResolver,
+		...restProps
+	} = $props();
 
-	let area;
-	let tooltipNode = $state();
-	let areaCoords = $state();
-	let tooltipData = $state();
-	let pos = $state();
+	function defaultResolver(element) {
+		if (!api) return null;
 
-	function findAttribute(node) {
-		while (node) {
-			if (node.getAttribute) {
-				const id = getID(node, "data-row-id");
-				const colId = getID(node, "data-col-id");
-				if (id && api && colId) {
-					const col = api.getColumn(colId);
-					return { id, col, target: node };
-				}
-			}
-			node = node.parentNode;
-		}
-		return { id: null, col: null, target: null };
-	}
+		const rowId = getID(element, "data-row-id");
+		const columnId = getID(element, "data-col-id");
 
-	$effect(() => {
-		if (tooltipNode) {
-			let tooltipCoords = tooltipNode.getBoundingClientRect();
-			if (tooltipCoords.right >= areaCoords.right) {
-				pos.left = areaCoords.width - tooltipCoords.width - 5;
-			}
-			if (tooltipCoords.bottom >= areaCoords.bottom) {
-				pos.top -= tooltipCoords.bottom - areaCoords.bottom + 2;
-			}
-		}
-	});
+		if (!rowId || !columnId) return null;
 
-	let timer;
-	const TIMEOUT = 300;
-	const debounce = code => {
-		clearTimeout(timer);
-		timer = setTimeout(() => {
-			code();
-		}, TIMEOUT);
-	};
-	function move(e) {
-		let { id, target, col } = findAttribute(e.target);
-		pos = null;
-		if (!id) {
-			clearTimeout(timer);
-			return;
-		}
-		debounce(() => {
-			let text = "";
-			if (id) {
-				tooltipData = getTooltipData(id);
-				text = getTooltipText(col);
-			}
-			let targetCoords = target.getBoundingClientRect();
-			areaCoords = area.getBoundingClientRect();
-			const top = targetCoords.top + targetCoords.height - areaCoords.top;
-			const left = e.clientX - areaCoords.left;
-			pos = { top, left, col, text };
-		});
-	}
+		const row = api.getRow(rowId);
+		const column = api.getColumn(columnId);
 
-	function getTooltipData(id) {
-		return api.getRow(id);
-	}
+		if (column.tooltip === false) return null;
+		if (overflow && element.scrollWidth <= element.clientWidth) return null;
 
-	function getTooltipText(col) {
-		if (typeof col.tooltip === "function") return col.tooltip(tooltipData);
-		return getRenderValue(tooltipData, col) || "";
+		if (Content) {
+			return { data: { row, column } };
+		} else {
+			if (typeof column.tooltip === "function") {
+				return column.tooltip(row);
+			}
+			return getRenderValue(row, column);
+		}
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="wx-area" bind:this={area} onmousemove={move}>
-	{#if pos && pos.col.tooltip !== false && (Content || pos.text)}
-		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-		<div
-			class="tooltip"
-			role="alert"
-			tabindex="0"
-			bind:this={tooltipNode}
-			style="top:{pos.top}px;left:{pos.left}px"
-		>
-			{#if Content}
-				<Content data={tooltipData} />
-			{:else}{pos.text}{/if}
-		</div>
-	{/if}
-	{@render children()}
-</div>
-
-<style>
-	.wx-area {
-		position: relative;
-		height: 100%;
-		width: 100%;
-	}
-	:global(.tooltip) {
-		padding: 2px 10px;
-		border-radius: 2px;
-		box-shadow: var(--wx-box-shadow);
-		pointer-events: none;
-		position: absolute;
-		z-index: 10;
-		font-size: var(--wx-font-size-sm);
-		font-family: var(--wx-font-family);
-		color: var(--wx-color-primary-font);
-		background-color: #1a1e21;
-	}
-</style>
+<Tooltip {at} content={Content} {resolver} {...restProps} />

package/src/components/inlineEditors/MultiSelect.svelte

@@ -1,121 +1,59 @@
 <script>
-	import { SuggestDropdown } from "@svar-ui/svelte-core";
 	import { clickOutside } from "@svar-ui/lib-dom";
-	import { onMount } from "svelte";
+	import MultiSelect from "../MultiSelect.svelte";
 
-	let { editor, onaction, onsave, onapply, oncancel } = $props();
-	let { config } = $state(editor);
+	let { editor, onaction, onsave, onapply } = $props();
 
+	const config = $state(editor?.config || {});
 	const options = $derived(editor?.options ?? []);
-	let value = $derived(editor?.value || []);
-	let renderedValue = $derived(editor?.renderedValue);
+	const value = $derived(editor?.value || []);
+	const text = $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({
+		trackScroll: true,
+		...(config.dropdown || {}),
 	});
 
-	const dropdownOptions = $derived.by(() => {
-		const dropdown = config?.dropdown || {};
-		return { trackScroll: true, ...dropdown };
-	});
-
-	function updateValue({ id }) {
-		onapply(id);
-		node.focus();
-	}
-
-	let navigate;
-	let keydown = $state();
-
-	function ready(ev) {
-		navigate = ev.navigate;
-		keydown = ev.keydown;
-		navigate(index);
+	function updateValue({ value }) {
+		onapply(value);
 	}
-
-	let node = $state();
-	onMount(() => {
-		node.focus();
-		if (window && window.getSelection) {
-			window.getSelection().removeAllRanges();
-		}
-	});
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
-	bind:this={node}
 	class="wx-value"
-	tabindex="0"
-	onclick={oncancel}
-	onkeydown={ev => {
-		keydown(ev, index);
-		ev.preventDefault();
-	}}
+	onclick={() => onsave(true)}
 	use:clickOutside={() => onsave(true)}
 >
-	{#if config?.template}
-		{config.template(value?.map(id => options.find(opt => opt.id === id)))}
-	{:else if config?.cell}
-		{@const SvelteComponent = config.cell}
-		<SvelteComponent
-			data={value.map(id => options.find(opt => opt.id === id))}
-		/>
-	{:else}
-		<span class="wx-text">{renderedValue}</span>
-	{/if}
+	<MultiSelect
+		{value}
+		{options}
+		{text}
+		template={config.template}
+		cell={config.cell}
+		clear={config.clear}
+		dropdown={dropdownOptions}
+		autoOpen
+		onchange={updateValue}
+		{onaction}
+	/>
 </div>
 
-<SuggestDropdown
-	items={options}
-	onready={ready}
-	onselect={updateValue}
-	checkboxes={true}
-	multiselect={true}
-	{...dropdownOptions}
-	{oncancel}
-	{value}
->
-	{#snippet children({ option })}
-		<div class="wx-option">
-			{#if config?.template}
-				{config.template(option)}
-			{:else if config?.cell}
-				{@const SvelteComponent = config.cell}
-				<SvelteComponent data={option} {onaction} />
-			{:else}
-				{option.label}
-			{/if}
-		</div>
-	{/snippet}
-</SuggestDropdown>
-
 <style>
-	.wx-option {
-		display: flex;
-		direction: row;
-		align-items: center;
-		justify-content: flex-start;
-		gap: 8px;
-	}
-	.wx-text {
+	.wx-value {
 		width: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		height: 100%;
+		background: var(--wx-background);
 	}
-
-	.wx-value {
+	.wx-value :global(.wx-multiselect) {
 		width: 100%;
 		height: 100%;
-		padding: 8px;
-		overflow: hidden;
-		outline: none;
 		border: 1px solid var(--wx-color-primary);
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		border-radius: 0;
+		background: var(--wx-background);
+	}
+	.wx-value :global(.wx-multiselect:focus) {
+		border: 1px solid var(--wx-color-primary);
 	}
 </style>

package/src/components/inlineEditors/Text.svelte

@@ -5,6 +5,7 @@
 	let { editor, onsave, onapply } = $props();
 
 	let value = $state(editor.value || "");
+	let { type = "text" } = $derived(editor?.config || {});
 
 	let node = $state();
 	onMount(() => node.focus());
@@ -25,7 +26,7 @@
 	oninput={updateValue}
 	onkeydown={closeAndSave}
 	bind:this={node}
-	type="text"
+	{type}
 	{value}
 />
 

package/src/components/inlineFilters/MultiSelect.svelte

@@ -0,0 +1,55 @@
+<script>
+	import { getContext } from "svelte";
+	import { locale } from "@svar-ui/lib-dom";
+	import { en } from "@svar-ui/grid-locales";
+	import MultiSelect from "../MultiSelect.svelte";
+
+	let { filter, column, action, filterValue } = $props();
+
+	const _ =
+		getContext("wx-i18n")?.getGroup("grid") || locale(en).getGroup("grid");
+
+	const config = $derived.by(() => {
+		const obj = filter?.config || {};
+		return { clear: true, ...obj };
+	});
+	let options = $derived(config.options || column.options);
+
+	const text = $derived.by(() => {
+		const len = filterValue?.length;
+		if (!len) return "";
+		if (len < 3)
+			return filterValue.map(v => column.optionsMap.get(v)).join(", ");
+		return len + " " + _("selected");
+	});
+
+	function filterRows({ value }) {
+		action({ value, key: column.id });
+	}
+
+	function handleKeyDown(ev) {
+		if (ev.key !== "Tab") ev.preventDefault();
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div style="width:100%;" onkeydown={handleKeyDown}>
+	<MultiSelect
+		placeholder={""}
+		{...config}
+		{options}
+		value={filterValue || []}
+		{text}
+		onchange={filterRows}
+	/>
+</div>
+
+<style>
+	:global(.wx-cell.wx-filter div.wx-multiselect) {
+		min-height: 28px;
+		height: 28px;
+	}
+	:global(.wx-cell.wx-filter div.wx-multiselect .wx-label) {
+		padding: 4px 8px;
+	}
+</style>

package/src/components/inlineFilters/filters.js

@@ -1,9 +1,11 @@
 import Text from "./Text.svelte";
 import Richselect from "./Richselect.svelte";
 import DatePicker from "./DatePicker.svelte";
+import MultiSelect from "./MultiSelect.svelte";
 
 export const filters = {
 	text: Text,
 	richselect: Richselect,
 	datepicker: DatePicker,
+	multiselect: MultiSelect,
 };

package/types/index.d.ts

@@ -1,6 +1,7 @@
 import type { Component, ComponentProps } from "svelte";
 import { ContextMenu as BaseContextMenu } from "@svar-ui/svelte-menu";
 import { Toolbar as BaseToolbar } from "@svar-ui/svelte-toolbar";
+import { Tooltip as BaseTooltip } from "@svar-ui/svelte-core";
 
 import type {
 	IColumn,
@@ -34,19 +35,28 @@ export type TEditorHandlerConfig = (
 	column?: IColumn
 ) => TEditorType | IColumnEditorConfig | null;
 
+export type IInnerApi = Pick<
+	IApi,
+	"exec" | "getState" | "getReactiveState" | "getRow"
+>;
+
 export interface ICellProps {
-	api: IApi;
+	api: IInnerApi;
 	row: IRow;
 	column: IColumn;
 	onaction: (ev: { action?: any; data?: { [key: string]: any } }) => void;
 }
 
+export interface IHeaderCellProps {
+	api: IInnerApi;
+	row: number;
+	column: IColumn;
+	cell: Omit<IHeaderCell, "cell">;
+	onaction: (ev: { action?: any; data?: { [key: string]: any } }) => void;
+}
+
 export interface IHeaderCellConfig extends IHeaderCell {
-	cell?: Component<
-		ICellProps & {
-			cell: Omit<IHeaderCell, "cell">;
-		}
-	>;
+	cell?: Component<IHeaderCellProps>;
 }
 
 export type TColumnHeaderConfig =
@@ -111,11 +121,17 @@ export declare const Toolbar: Component<
 	}
 >;
 
-export declare const Tooltip: Component<{
-	content?: Component;
-	api?: IApi;
-	children?: () => any;
-}>;
+export declare const Tooltip: Component<
+	Omit<ComponentProps<typeof BaseTooltip>, "content"> & {
+		content?: Component<{
+			data: {
+				row: IRow;
+				column: IColumn;
+			};
+		}>;
+		api?: IApi;
+	}
+>;
 
 export declare const Material: Component<{
 	fonts?: boolean;

package/whatsnew.md

@@ -1,3 +1,32 @@
+## 2.7.0
+
+### New features
+
+-   Multi-select filter for grid columns
+-   Scroll-to action to force and listen to scroll movements
+
+### Updates
+
+-   Extra Tooltip settings: arrow, delay, at, overlow, etc
+-   Ability to set input type for "text" editor
+
+### Fixes
+
+-   Closing an inline editor by clicking on another cell doesn't focus the cell clicked
+-   Incorrect type for header cells
+-   Columns flicker when a new row is added in a Grid with flexgrow
+
+### Breaking changes
+
+-   Parameters of Tooltip content component changed from `{ row, column }` to `{ data: row, column } `
+
+## 2.6.2
+
+### Fixes
+
+-   Incorrect type for `filterValues`
+-   Multiselect editor value is not applied
+
 ## 2.6.1
 
 ### Fixes