@oscarpalmer/tabela 0.10.0 → 0.11.0

package/dist/tabela.full.js

@@ -318,10 +318,10 @@ new Set([
 * @param value Value to check
 * @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
 */
-function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE$1.test(getString$1(value));
+function isNullableOrWhitespace$1(value) {
+	return value == null || EXPRESSION_WHITESPACE$2.test(getString$1(value));
 }
-var EXPRESSION_WHITESPACE$1 = /^\s*$/;
+var EXPRESSION_WHITESPACE$2 = /^\s*$/;
 function setElementValue(element, first, second, third, callback) {
 	if (!isHTMLOrSVGElement(element)) return;
 	if (typeof first === "string") setElementValues(element, first, second, third, callback);
@@ -346,7 +346,7 @@ function setElementValues(element, first, second, third, callback) {
 	}
 }
 function updateElementValue(element, key, value, set, remove, isBoolean, json) {
-	if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
+	if (isBoolean ? value == null : isNullableOrWhitespace$1(value)) remove.call(element, key);
 	else set.call(element, key, json ? JSON.stringify(value) : String(value));
 }
 function badAttributeHandler(name, value) {
@@ -378,7 +378,7 @@ function handleAttribute(callback, decode, first, second) {
 		value = second;
 	}
 	if (decode && value != null) value = decodeAttribute(value);
-	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ""));
+	return callback(name, value?.replace(EXPRESSION_WHITESPACE$1, ""));
 }
 function isAttribute(value) {
 	return value instanceof Attr || isPlainObject$1(value) && typeof value.name === "string" && "value" in value;
@@ -415,7 +415,7 @@ var EXPRESSION_SKIP_NAME = /^(aria-[-\w]+|data-[-\w.\u00B7-\uFFFF]+)$/i;
 var EXPRESSION_SOURCE_NAME = /^src$/i;
 var EXPRESSION_SOURCE_VALUE = /^data:/i;
 var EXPRESSION_URI_VALUE = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-var EXPRESSION_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+var EXPRESSION_WHITESPACE$1 = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
 /**
 * List of boolean attributes
 */
@@ -575,6 +575,7 @@ var BodyComponent = class {
 		this.elements.group = group;
 		group.className += " tabela__rowgroup--body";
 		group.tabIndex = 0;
+		group.setAttribute("data-event", "body");
 		group.append(this.elements.faker);
 	}
 	destroy() {
@@ -674,18 +675,19 @@ function createHeading(field, title, width) {
 }
 var ColumnManager = class {
 	items = [];
-	constructor(managers, components, columns) {
-		this.managers = managers;
-		this.components = components;
-		this.set(columns);
+	constructor(state) {
+		this.state = state;
+		this.set(state.options.columns);
 	}
 	destroy() {
 		const { length } = this.items;
 		for (let index = 0; index < length; index += 1) this.items[index].destroy();
-		this.items.length = 0;
+		this.items = void 0;
+		this.state = void 0;
 	}
 	remove(value) {
-		const { components, items, managers } = this;
+		const { items, state } = this;
+		const { components, managers } = state;
 		const fields = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
 		const { length } = fields;
 		if (length === 0) return;
@@ -701,8 +703,8 @@ var ColumnManager = class {
 		managers.render.removeCells(fields);
 	}
 	set(columns) {
-		const { components, items } = this;
-		const { footer, header } = components;
+		const { items, state } = this;
+		const { footer, header } = state.components;
 		items.splice(0, items.length, ...columns.map((column) => new ColumnComponent(column)));
 		header.update(items);
 		footer.update(items);
@@ -1157,6 +1159,15 @@ toMap.arrays = toMapArrays;
 function toMapArrays(array, first, second) {
 	return getMapValues(array, first, second, true);
 }
+/**
+* Is the value `undefined`, `null`, or a whitespace-only string?
+* @param value Value to check
+* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
+*/
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
+}
+var EXPRESSION_WHITESPACE = /^\s*$/;
 var DataManager = class {
 	handlers = Object.freeze({
 		add: (data) => void this.add(data, true),
@@ -1176,15 +1187,13 @@ var DataManager = class {
 	get size() {
 		return this.values.keys.active?.length ?? this.values.keys.original.length;
 	}
-	constructor(managers, components, field) {
-		this.managers = managers;
-		this.components = components;
-		this.field = field;
+	constructor(state) {
+		this.state = state;
 	}
 	async add(data, render) {
-		const { field, values } = this;
+		const { state, values } = this;
 		push(values.objects.array, data);
-		values.objects.mapped = toMap(values.objects.array, field);
+		values.objects.mapped = toMap(values.objects.array, state.key);
 		if (render) this.render();
 	}
 	clear() {
@@ -1197,48 +1206,54 @@ var DataManager = class {
 		values.keys.original.length = 0;
 		values.objects.array.length = 0;
 		this.handlers = void 0;
+		this.state = void 0;
+		this.values = void 0;
 	}
 	get(active) {
 		const { values } = this;
 		return active ?? false ? values.keys.active?.map((key) => values.objects.mapped.get(key)) ?? [] : values.objects.array;
 	}
+	getIndex(key) {
+		const { values } = this;
+		return (values.keys.active ?? values.keys.original).indexOf(key);
+	}
 	async remove(items, render) {
-		const { field, managers, values } = this;
-		const keys = items.map((value) => isPlainObject(value) ? value[field] : value).filter((key) => values.objects.mapped.has(key));
+		const { state, values } = this;
+		const keys = items.map((value) => isPlainObject(value) ? value[state.key] : value).filter((key) => values.objects.mapped.has(key));
 		const { length } = keys;
 		if (length === 0) return;
 		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
 			const key = keys[keyIndex];
 			values.objects.mapped.delete(key);
-			const arrayIndex = values.objects.array.findIndex((object) => object[field] === key);
+			const arrayIndex = values.objects.array.findIndex((object) => object[state.key] === key);
 			if (arrayIndex > -1) values.objects.array.splice(arrayIndex, 1);
 			values.keys.original.splice(values.keys.original.indexOf(key), 1);
-			managers.row.remove(key);
+			state.managers.row.remove(key);
 		}
 		if (render) this.render();
 	}
 	render() {
-		const { field, managers, values } = this;
-		values.keys.original = sort(values.objects.array.map((item) => item[field]));
-		if (Object.keys(managers.filter.items).length > 0) managers.filter.filter();
-		else if (managers.sort.items.length > 0) managers.sort.sort();
-		else managers.render.update(true);
+		const { state, values } = this;
+		values.keys.original = sort(values.objects.array.map((item) => item[state.key]));
+		if (Object.keys(state.managers.filter.items).length > 0) state.managers.filter.filter();
+		else if (state.managers.sort.items.length > 0) state.managers.sort.sort();
+		else state.managers.render.update(true);
 	}
 	set(data) {
-		const { field, values } = this;
-		values.objects.mapped = toMap(data, field);
+		const { state, values } = this;
+		values.objects.mapped = toMap(data, state.key);
 		values.objects.array = data;
 		this.render();
 	}
 	async synchronize(data, remove) {
-		const { field, values } = this;
+		const { state, values } = this;
 		const add = [];
 		const updated = [];
 		const keys = /* @__PURE__ */ new Set([]);
 		const { length } = data;
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[field];
+			const key = object[state.key];
 			if (values.objects.mapped.has(key)) updated.push(object);
 			else add.push(object);
 			keys.add(key);
@@ -1253,18 +1268,18 @@ var DataManager = class {
 		if (add.length > 0 || (remove ?? false)) this.render();
 	}
 	async update(data) {
-		const { field, managers, values } = this;
+		const { state, values } = this;
 		const { length } = data;
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[field];
+			const key = object[state.key];
 			const value = values.objects.mapped.get(key);
 			if (value != null) {
 				values.objects.mapped.set(key, {
 					...value,
 					...object
 				});
-				managers.row.update(key);
+				state.managers.row.update(key);
 			}
 		}
 	}
@@ -1413,203 +1428,53 @@ function getElement(origin) {
 	if (origin instanceof Element) return origin;
 	return origin instanceof Event && origin.target instanceof Element ? origin.target : void 0;
 }
-function isInert(item) {
-	return (item.element.inert ?? false) || EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT)) || item.element.parentElement != null && isInert({
-		element: item.element.parentElement,
-		tabIndex: TABINDEX_DEFAULT
-	});
-}
-var ATTRIBUTE_INERT = "inert";
-var EXPRESSION_TRUEISH = /^(|true)$/i;
-[
-	"[contenteditable]:not([contenteditable=\"false\"])",
-	"[tabindex]:not(slot)",
-	"a[href]",
-	"audio[controls]",
-	"button",
-	"details",
-	"details > summary:first-of-type",
-	"input",
-	"select",
-	"textarea",
-	"video[controls]"
-].map((selector) => `${selector}:not([inert])`).join(",");
-var TABINDEX_DEFAULT = -1;
-function handleElement(element, depth) {
-	if (depth === 0) {
-		const removable = element.querySelectorAll(REMOVE_SELECTOR);
-		for (const item of removable) item.remove();
-	}
-	sanitizeAttributes(element, [...element.attributes]);
-}
-/**
-* Is the element clobbered?
-*
-* Thanks, DOMPurify _(https://github.com/cure53/DOMPurify)_
-*/
-function isClobbered(value) {
-	return value instanceof HTMLFormElement && (typeof value.nodeName !== "string" || typeof value.textContent !== "string" || typeof value.removeChild !== "function" || !(value.attributes instanceof NamedNodeMap) || typeof value.removeAttribute !== "function" || typeof value.setAttribute !== "function" || typeof value.namespaceURI !== "string" || typeof value.insertBefore !== "function" || typeof value.hasChildNodes !== "function");
-}
-function removeNode(node) {
-	if (typeof node.remove === "function") node.remove();
-}
-function sanitizeAttributes(element, attributes) {
-	const { length } = attributes;
-	for (let index = 0; index < length; index += 1) {
-		const { name, value } = attributes[index];
-		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
-		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute(element, name, true);
-	}
-}
-function sanitizeNodes(nodes, depth) {
-	const actual = nodes.filter((node) => node instanceof Node);
-	let { length } = nodes;
-	for (let index = 0; index < length; index += 1) {
-		const node = actual[index];
-		let remove = isClobbered(node);
-		if (!remove) switch (node.nodeType) {
-			case Node.ELEMENT_NODE:
-				handleElement(node, depth);
-				break;
-			case Node.COMMENT_NODE:
-				remove = COMMENT_HARMFUL.test(node.data);
-				break;
-			case Node.DOCUMENT_TYPE_NODE:
-			case Node.PROCESSING_INSTRUCTION_NODE:
-				remove = true;
-				break;
-		}
-		if (remove) {
-			removeNode(node);
-			actual.splice(index, 1);
-			index -= 1;
-			length -= 1;
-			continue;
-		}
-		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes], depth + 1);
-	}
-	return nodes;
-}
-var COMMENT_HARMFUL = /<[/\w]/g;
-var REMOVE_SELECTOR = "script, toretto-temporary";
-function createHtml(value) {
-	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
-	parsed.body.normalize();
-	sanitizeNodes([parsed.body], 0);
-	return parsed.body.innerHTML;
-}
-function createTemplate(value, options) {
-	const template = document.createElement(TEMPLATE_TAG);
-	template.innerHTML = createHtml(value);
-	if (typeof value === "string" && options.cache) templates[value] = template;
-	return template;
-}
-function getHtml(value) {
-	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
-}
-function getNodes(value, options) {
-	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
-	const template = getTemplate(value, options);
-	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
-}
-function getOptions(input) {
-	const options = isPlainObject$1(input) ? input : {};
-	options.cache = typeof options.cache === "boolean" ? options.cache : true;
-	return options;
-}
-function getParser() {
-	parser ??= new DOMParser();
-	return parser;
-}
-function getTemplate(value, options) {
-	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
-	if (value.trim().length === 0) return;
-	let template = templates[value];
-	if (template != null) return template;
-	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
-	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
-}
-var html = ((value, options) => {
-	return getNodes(value, getOptions(options));
-});
-html.clear = () => {
-	templates = {};
-};
-html.remove = (template) => {
-	if (typeof template !== "string" || templates[template] == null) return;
-	const keys = Object.keys(templates);
-	const { length } = keys;
-	const updated = {};
-	for (let index = 0; index < length; index += 1) {
-		const key = keys[index];
-		if (key !== template) updated[key] = templates[key];
-	}
-	templates = updated;
-};
-var EXPRESSION_ID = /^[a-z][\w-]*$/i;
-var PARSE_TYPE_HTML = "text/html";
-var TEMPLATE_TAG = "template";
-var TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
-var parser;
-var templates = {};
-function getSupport() {
-	if (window == null || navigator == null) return false;
-	if ("matchMedia" in window) {
-		const media = matchMedia?.("(pointer: coarse)");
-		if (typeof media?.matches === "boolean" && media.matches) return true;
-	}
-	if ("ontouchstart" in window) return true;
-	if (typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 0) return true;
-	if (typeof navigator.msMaxTouchPoints === "number" && navigator.msMaxTouchPoints > 0) return true;
-	return false;
-}
-(() => {
-	let support = getSupport();
-	const instance = Object.create({
-		get() {
-			return support;
-		},
-		update() {
-			support = getSupport();
-			return support;
-		}
-	});
-	Object.defineProperty(instance, "value", { get() {
-		return support;
-	} });
-	return instance;
-})();
 var EventManager = class {
-	listener;
-	constructor(element, managers) {
-		this.managers = managers;
-		this.listener = on(element, "click", (event) => {
-			this.onClick(event);
-		}, { passive: false });
+	constructor(state) {
+		this.state = state;
+		mapped$1.set(state.element, this);
 	}
 	destroy() {
-		this.listener();
-	}
-	onClick(event) {
-		const target = findAncestor(event, "[data-event]");
-		if (!(target instanceof HTMLElement)) return;
-		switch (target?.getAttribute("data-event")) {
-			case "heading":
-				this.onSort(event, target);
-				break;
-			case "row":
-				this.managers.selection.handle(event, target);
-				break;
-			default: break;
-		}
+		mapped$1.delete(this.state.element);
+		this.state = void 0;
 	}
 	onSort(event, target) {
-		const { managers } = this;
 		const direction = target.getAttribute("data-sort-direction");
 		const field = target.getAttribute("data-field");
-		if (field != null) managers.sort.toggle(event, field, direction);
+		if (field != null) this.state.managers.sort.toggle(event, field, direction);
 	}
 };
+function onClick(event) {
+	const target = findAncestor(event, "[data-event]");
+	const table = findAncestor(event, ".tabela");
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
+	const manager = mapped$1.get(table);
+	if (manager == null) return;
+	switch (target?.getAttribute("data-event")) {
+		case "heading":
+			manager.onSort(event, target);
+			break;
+		case "row":
+			manager.state.managers.selection.handle(event, target);
+			break;
+		default: break;
+	}
+}
+function onKeydown(event) {
+	const target = findAncestor(event, "[data-event]");
+	const table = findAncestor(event, ".tabela");
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
+	const manager = mapped$1.get(table);
+	if (manager == null) return;
+	switch (target?.getAttribute("data-event")) {
+		case "body":
+			manager.state.managers.navigation.handle(event);
+			break;
+		default: break;
+	}
+}
+const mapped$1 = /* @__PURE__ */ new WeakMap();
+on(document, "click", onClick);
+on(document, "keydown", onKeydown, { passive: false });
 /**
 * Clamp a number between a minimum and maximum value
 * @param value Value to clamp
@@ -2014,8 +1879,8 @@ var FilterManager = class {
 		set: (items) => this.set(items)
 	});
 	items = {};
-	constructor(managers) {
-		this.managers = managers;
+	constructor(state) {
+		this.state = state;
 	}
 	add(item) {
 		if (this.items[item.field] == null) this.items[item.field] = [];
@@ -2031,16 +1896,17 @@ var FilterManager = class {
 	}
 	destroy() {
 		this.handlers = void 0;
-		this.items = {};
+		this.items = void 0;
+		this.state = void 0;
 	}
 	filter() {
-		const { managers } = this;
+		const { state } = this;
 		const filtered = [];
 		const filters = Object.entries(this.items);
-		const keysLength = managers.data.values.keys.original.length;
+		const keysLength = state.managers.data.values.keys.original.length;
 		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
-			const key = managers.data.values.keys.original[keyIndex];
-			const row = managers.data.values.objects.mapped.get(key);
+			const key = state.managers.data.values.keys.original[keyIndex];
+			const row = state.managers.data.values.objects.mapped.get(key);
 			if (row == null) continue;
 			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
 				const [field, items] = filters[filterIndex];
@@ -2053,9 +1919,9 @@ var FilterManager = class {
 			}
 			filtered.push(key);
 		}
-		managers.data.values.keys.active = filtered;
-		if (managers.sort.items.length > 0) managers.sort.sort();
-		else managers.render.update(true, true);
+		state.managers.data.values.keys.active = filtered;
+		if (state.managers.sort.items.length > 0) state.managers.sort.sort();
+		else state.managers.render.update(true, true);
 	}
 	remove(value) {
 		if (typeof value === "string") {
@@ -2093,6 +1959,81 @@ const comparators = {
 	"starts-with": (row, filter) => startsWith(getString(row), getString(filter), true)
 };
 const equalizer = equal.initialize({ ignoreCase: true });
+function getKey(value) {
+	if (typeof value === "number") return value;
+	if (typeof value !== "string") return;
+	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
+}
+const integerExpression = /^\d+$/;
+var NavigationManager = class {
+	active;
+	constructor(state) {
+		this.state = state;
+	}
+	destroy() {
+		this.state = void 0;
+	}
+	handle(event) {
+		if (!allKeys.has(event.key)) return;
+		event.preventDefault();
+		const { components, id, managers } = this.state;
+		const activeDescendant = components.body.elements.group.getAttribute("aria-activedescendant");
+		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const { length } = keys;
+		let next;
+		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);
+		else next = getIndex(event, activeDescendant, id, keys);
+		if (next != null) this.setActive(keys.at(next));
+	}
+	setActive(key, scroll) {
+		const { components, managers, options } = this.state;
+		this.active = key;
+		const active = components.body.elements.group.querySelectorAll("[data-active=\"true\"]");
+		for (const item of active) item.setAttribute("data-active", "false");
+		const row = managers.row.get(key);
+		if (row != null) {
+			row.element?.setAttribute("data-active", "true");
+			if (scroll ?? true) if (row.element == null) components.body.elements.group.scrollTo({
+				top: managers.data.getIndex(key) * options.rowHeight,
+				behavior: "smooth"
+			});
+			else row.element.scrollIntoView({ block: "nearest" });
+		}
+		components.body.elements.group.setAttribute("aria-activedescendant", row == null ? "" : `tabela_${this.state.id}_row_${key}`);
+	}
+};
+function getDefaultIndex(key, max) {
+	switch (true) {
+		case negativeDefaultKeys.has(key): return -1;
+		case key === "PageDown": return Math.min(9, max - 1);
+		case key === "PageUp": return max < 10 ? 0 : max - 10;
+		default: return 0;
+	}
+}
+function getIndex(event, active, id, keys) {
+	const key = getKey(active.replace(`tabela_${id}_row_`, ""));
+	if (key == null) return;
+	if (absoluteKeys.has(event.key)) return event.key === "Home" ? 0 : keys.length - 1;
+	return clamp(keys.indexOf(key) + getOffset(event.key), 0, keys.length - 1, true);
+}
+function getOffset(key) {
+	switch (key) {
+		case "ArrowDown": return 1;
+		case "ArrowUp": return -1;
+		case "PageDown": return 10;
+		case "PageUp": return -10;
+		default: return 0;
+	}
+}
+const absoluteKeys = new Set(["End", "Home"]);
+const arrowKeys = new Set(["ArrowDown", "ArrowUp"]);
+const negativeDefaultKeys = new Set(["ArrowUp", "End"]);
+const pageKeys = new Set(["PageDown", "PageUp"]);
+const allKeys = new Set([
+	...absoluteKeys,
+	...arrowKeys,
+	...pageKeys
+]);
 function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
@@ -2102,27 +2043,30 @@ function removeRow(pool, row) {
 	}
 	row.cells = {};
 }
-function renderRow(managers, row) {
-	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow();
+function renderRow(state, row) {
+	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
 	row.element = element;
 	element.innerHTML = "";
-	const selected = managers.selection.items.has(row.key);
+	const selected = state.managers.selection.items.has(row.key);
+	const key = String(row.key);
 	setAttributes(element, {
 		"aria-selected": String(selected),
+		"data-active": String(state.managers.navigation.active === row.key),
 		"data-event": "row",
-		"data-key": String(row.key)
+		"data-key": key,
+		id: `tabela_${state.id}_row_${key}`
 	});
 	element.classList.add("tabela__row--body");
 	if (selected) element.classList.add("tabela__row--selected");
 	else element.classList.remove("tabela__row--selected");
-	const columns = managers.column.items;
+	const columns = state.managers.column.items;
 	const { length } = columns;
-	const data = managers.data.values.objects.mapped.get(row.key);
+	const data = state.managers.data.values.objects.mapped.get(row.key);
 	if (data == null) return;
 	for (let index = 0; index < length; index += 1) {
 		const { options } = columns[index];
-		managers.render.pool.cells[options.field] ??= [];
-		const cell = managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+		state.managers.render.pool.cells[options.field] ??= [];
+		const cell = state.managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
 		cell.textContent = String(data[options.field]);
 		row.cells[options.field] = cell;
 		element.append(cell);
@@ -2135,48 +2079,315 @@ var RowComponent = class {
 		this.key = key;
 	}
 };
-var RowManager = class {
-	components = /* @__PURE__ */ new Map();
-	height;
-	constructor(managers, rowHeight) {
-		this.managers = managers;
-		this.height = rowHeight;
-	}
-	destroy() {
-		const components = [...this.components.values()];
-		const { length } = components;
-		for (let index = 0; index < length; index += 1) removeRow(this.managers.render.pool, components[index]);
-		this.components.clear();
+function getRange(down) {
+	const { components, managers, options } = this.state;
+	const { clientHeight, scrollTop } = components.body.elements.group;
+	const first = Math.floor(scrollTop / options.rowHeight);
+	const last = Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
+	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
+	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
+	const start = Math.max(0, first - before);
+	return {
+		end: Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, last + after),
+		start
+	};
+}
+function onScroll() {
+	const { state } = this;
+	if (!state.active) {
+		requestAnimationFrame(() => {
+			const top = state.components.body.elements.group.scrollTop;
+			this.update(top > state.top);
+			state.active = false;
+			state.top = top;
+		});
+		state.active = true;
 	}
-	get(key) {
-		let row = this.components.get(key);
-		if (row == null) {
-			row = new RowComponent(key);
-			this.components.set(key, row);
-		}
-		return row;
+}
+var RenderManager = class {
+	fragment;
+	listener;
+	pool = {
+		cells: {},
+		rows: []
+	};
+	state;
+	visible = /* @__PURE__ */ new Map();
+	constructor(state) {
+		this.listener = on(state.components.body.elements.group, "scroll", onScroll.bind(this));
+		this.state = {
+			...state,
+			active: false,
+			top: 0
+		};
 	}
-	has(key) {
-		return this.components.has(key);
+	destroy() {
+		const { listener, pool, visible } = this;
+		listener();
+		visible.clear();
+		pool.cells = {};
+		pool.rows = [];
+		this.fragment = void 0;
+		this.listener = void 0;
+		this.pool = void 0;
+		this.state = void 0;
+		this.visible = void 0;
 	}
-	remove(key) {
+	removeCells(fields) {
+		const { pool, state, visible } = this;
+		const { length } = fields;
+		for (let index = 0; index < length; index += 1) delete pool.cells[fields[index]];
+		for (const [, key] of visible) {
+			const row = state.managers.row.get(key);
+			if (row == null || row.element == null) continue;
+			for (let index = 0; index < length; index += 1) {
+				row.cells[fields[index]].innerHTML = "";
+				row.cells[fields[index]].remove();
+				delete row.cells[fields[index]];
+			}
+		}
+	}
+	getFragment() {
+		this.fragment ??= document.createDocumentFragment();
+		this.fragment.replaceChildren();
+		return this.fragment;
+	}
+	update(down, rerender) {
+		const { state, pool, visible } = this;
+		const { components, managers, options } = state;
+		components.body.elements.faker.style.height = `${managers.data.size * options.rowHeight}px`;
+		const indices = /* @__PURE__ */ new Set();
+		const range = getRange.call(this, down);
+		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
+		let remove = rerender ?? false;
+		for (const [index, key] of visible) {
+			const row = managers.row.get(key);
+			if (remove || row == null || !indices.has(index)) {
+				visible.delete(index);
+				if (row != null) removeRow(pool, row);
+			}
+		}
+		const fragment = this.getFragment();
+		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		let count = 0;
+		for (let index = range.start; index <= range.end; index += 1) {
+			if (visible.has(index)) continue;
+			const key = keys[index];
+			const row = managers.row.get(key);
+			if (row == null) continue;
+			count += 1;
+			renderRow(state, row);
+			visible.set(index, key);
+			if (row.element != null) {
+				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
+				fragment.append(row.element);
+			}
+		}
+		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
+	}
+};
+var RowManager = class {
+	components = /* @__PURE__ */ new Map();
+	constructor(state) {
+		this.state = state;
+	}
+	destroy() {
+		const components = [...this.components.values()];
+		const { length } = components;
+		for (let index = 0; index < length; index += 1) removeRow(this.state.managers.render.pool, components[index]);
+		this.components.clear();
+		this.components = void 0;
+		this.state = void 0;
+	}
+	get(key) {
+		let row = this.components.get(key);
+		if (row == null) {
+			row = new RowComponent(key);
+			this.components.set(key, row);
+		}
+		return row;
+	}
+	has(key) {
+		return this.components.has(key);
+	}
+	remove(key) {
 		const row = this.components.get(key);
 		if (row != null) {
-			removeRow(this.managers.render.pool, row);
+			removeRow(this.state.managers.render.pool, row);
 			this.components.delete(key);
 		}
 	}
 	update(key) {
 		const row = this.components.get(key);
-		if (row != null) renderRow(this.managers, row);
+		if (row != null) renderRow(this.state, row);
 	}
 };
-function getKey(value) {
-	if (typeof value === "number") return value;
-	if (typeof value !== "string") return;
-	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
+function isInert(item) {
+	return (item.element.inert ?? false) || EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT)) || item.element.parentElement != null && isInert({
+		element: item.element.parentElement,
+		tabIndex: TABINDEX_DEFAULT
+	});
 }
-const integerExpression = /^\d+$/;
+var ATTRIBUTE_INERT = "inert";
+var EXPRESSION_TRUEISH = /^(|true)$/i;
+[
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not(slot)",
+	"a[href]",
+	"audio[controls]",
+	"button",
+	"details",
+	"details > summary:first-of-type",
+	"input",
+	"select",
+	"textarea",
+	"video[controls]"
+].map((selector) => `${selector}:not([inert])`).join(",");
+var TABINDEX_DEFAULT = -1;
+function handleElement(element, depth) {
+	if (depth === 0) {
+		const removable = element.querySelectorAll(REMOVE_SELECTOR);
+		for (const item of removable) item.remove();
+	}
+	sanitizeAttributes(element, [...element.attributes]);
+}
+/**
+* Is the element clobbered?
+*
+* Thanks, DOMPurify _(https://github.com/cure53/DOMPurify)_
+*/
+function isClobbered(value) {
+	return value instanceof HTMLFormElement && (typeof value.nodeName !== "string" || typeof value.textContent !== "string" || typeof value.removeChild !== "function" || !(value.attributes instanceof NamedNodeMap) || typeof value.removeAttribute !== "function" || typeof value.setAttribute !== "function" || typeof value.namespaceURI !== "string" || typeof value.insertBefore !== "function" || typeof value.hasChildNodes !== "function");
+}
+function removeNode(node) {
+	if (typeof node.remove === "function") node.remove();
+}
+function sanitizeAttributes(element, attributes) {
+	const { length } = attributes;
+	for (let index = 0; index < length; index += 1) {
+		const { name, value } = attributes[index];
+		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
+		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute(element, name, true);
+	}
+}
+function sanitizeNodes(nodes, depth) {
+	const actual = nodes.filter((node) => node instanceof Node);
+	let { length } = nodes;
+	for (let index = 0; index < length; index += 1) {
+		const node = actual[index];
+		let remove = isClobbered(node);
+		if (!remove) switch (node.nodeType) {
+			case Node.ELEMENT_NODE:
+				handleElement(node, depth);
+				break;
+			case Node.COMMENT_NODE:
+				remove = COMMENT_HARMFUL.test(node.data);
+				break;
+			case Node.DOCUMENT_TYPE_NODE:
+			case Node.PROCESSING_INSTRUCTION_NODE:
+				remove = true;
+				break;
+		}
+		if (remove) {
+			removeNode(node);
+			actual.splice(index, 1);
+			index -= 1;
+			length -= 1;
+			continue;
+		}
+		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes], depth + 1);
+	}
+	return nodes;
+}
+var COMMENT_HARMFUL = /<[/\w]/g;
+var REMOVE_SELECTOR = "script, toretto-temporary";
+function createHtml(value) {
+	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
+	parsed.body.normalize();
+	sanitizeNodes([parsed.body], 0);
+	return parsed.body.innerHTML;
+}
+function createTemplate(value, options) {
+	const template = document.createElement(TEMPLATE_TAG);
+	template.innerHTML = createHtml(value);
+	if (typeof value === "string" && options.cache) templates[value] = template;
+	return template;
+}
+function getHtml(value) {
+	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
+}
+function getNodes(value, options) {
+	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
+	const template = getTemplate(value, options);
+	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
+}
+function getOptions(input) {
+	const options = isPlainObject$1(input) ? input : {};
+	options.cache = typeof options.cache === "boolean" ? options.cache : true;
+	return options;
+}
+function getParser() {
+	parser ??= new DOMParser();
+	return parser;
+}
+function getTemplate(value, options) {
+	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
+	if (value.trim().length === 0) return;
+	let template = templates[value];
+	if (template != null) return template;
+	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
+	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
+}
+var html = ((value, options) => {
+	return getNodes(value, getOptions(options));
+});
+html.clear = () => {
+	templates = {};
+};
+html.remove = (template) => {
+	if (typeof template !== "string" || templates[template] == null) return;
+	const keys = Object.keys(templates);
+	const { length } = keys;
+	const updated = {};
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		if (key !== template) updated[key] = templates[key];
+	}
+	templates = updated;
+};
+var EXPRESSION_ID = /^[a-z][\w-]*$/i;
+var PARSE_TYPE_HTML = "text/html";
+var TEMPLATE_TAG = "template";
+var TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
+var parser;
+var templates = {};
+function getSupport() {
+	if (window == null || navigator == null) return false;
+	if ("matchMedia" in window) {
+		const media = matchMedia?.("(pointer: coarse)");
+		if (typeof media?.matches === "boolean" && media.matches) return true;
+	}
+	if ("ontouchstart" in window) return true;
+	if (typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 0) return true;
+	if (typeof navigator.msMaxTouchPoints === "number" && navigator.msMaxTouchPoints > 0) return true;
+	return false;
+}
+(() => {
+	let support = getSupport();
+	const instance = Object.create({
+		get() {
+			return support;
+		},
+		update() {
+			support = getSupport();
+			return support;
+		}
+	});
+	Object.defineProperty(instance, "value", { get() {
+		return support;
+	} });
+	return instance;
+})();
 const dragStyling = toggleStyles(document.body, {
 	userSelect: "none",
 	webkitUserSelect: "none"
@@ -2190,10 +2401,9 @@ var SelectionManager = class {
 	});
 	items = /* @__PURE__ */ new Set();
 	last;
-	constructor(element, managers) {
-		this.element = element;
-		this.managers = managers;
-		mapped.set(element, this);
+	constructor(state) {
+		this.state = state;
+		mapped.set(state.element, this);
 	}
 	clear() {
 		if (this.items.size === 0) return;
@@ -2211,48 +2421,47 @@ var SelectionManager = class {
 		if (removed.length > 0) this.update(removed);
 	}
 	destroy() {
-		mapped.delete(this.element);
+		mapped.delete(this.state.element);
 		this.handlers = void 0;
-		this.element = void 0;
 		this.items = void 0;
+		this.last = void 0;
+		this.state = void 0;
 	}
 	handle(event, target) {
 		const key = getKey(target.getAttribute("data-key"));
 		if (key == null) return;
 		const { items } = this;
 		if (event.shiftKey) {
-			if (this.last == null) {
-				this.last = key;
-				return;
-			}
-			this.range(this.last, key);
-			this.last = key;
+			if (this.last == null) this.state.managers.navigation.setActive(key, false);
+			else this.range(this.last, key);
 			return;
 		}
 		this.last = key;
+		this.state.managers.navigation.setActive(key, false);
 		if (event.ctrlKey || event.metaKey) {
 			if (items.has(key)) this.deselect([key]);
 			else this.select([key]);
 			return;
 		}
-		if (items.has(key)) if (items.size === 1) this.clear();
-		else this.set([key]);
-		else this.set([key]);
+		this.set([key]);
 	}
 	range(from, to) {
+		const { state } = this;
 		const keyed = isKey(from) && isKey(to);
 		const fromKey = keyed ? from : getKey(from.getAttribute("data-key"));
 		const toKey = keyed ? to : getKey(to.getAttribute("data-key"));
 		if (fromKey === toKey) return;
-		const keys = this.managers.data.values.keys.active ?? this.managers.data.values.keys.original;
-		const fromIndex = keys.indexOf(fromKey);
-		const toIndex = keys.indexOf(toKey);
+		const keys = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+		const fromIndex = state.managers.data.getIndex(fromKey);
+		const toIndex = state.managers.data.getIndex(toKey);
 		if (fromIndex === -1 || toIndex === -1) return;
 		const [start, end] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
 		const selected = [];
 		for (let index = start; index <= end; index += 1) selected.push(keys[index]);
 		if (keyed) this.select(selected);
 		else this.set(selected);
+		this.last = toKey;
+		this.state.managers.navigation.setActive(toKey, false);
 	}
 	select(keys) {
 		const { length } = keys;
@@ -2275,8 +2484,8 @@ var SelectionManager = class {
 		this.update(removed);
 	}
 	toggle() {
-		const { items, managers } = this;
-		const all = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const { items, state } = this;
+		const all = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
 		if (items.size === all.length) this.clear();
 		else this.select(all);
 	}
@@ -2291,7 +2500,7 @@ var SelectionManager = class {
 		const { length } = items;
 		for (let index = 0; index < length; index += 1) {
 			const { key, removed } = items[index];
-			const row = this.managers.row.get(key);
+			const row = this.state.managers.row.get(key);
 			if (row == null || row.element == null) continue;
 			setAttribute(row.element, "aria-selected", String(!removed));
 			if (removed) row.element.classList.remove("tabela__row--selected");
@@ -2373,8 +2582,8 @@ var SortManager = class {
 		set: (items) => this.set(items)
 	});
 	items = [];
-	constructor(managers) {
-		this.managers = managers;
+	constructor(state) {
+		this.state = state;
 	}
 	add(field, direction) {
 		if (this.items.findIndex((item) => item.key === field) > -1) return;
@@ -2399,7 +2608,8 @@ var SortManager = class {
 	}
 	destroy() {
 		this.handlers = void 0;
-		this.items.length = 0;
+		this.items = void 0;
+		this.state = void 0;
 	}
 	flip(field) {
 		const item = this.items.find((item) => item.key === field);
@@ -2426,10 +2636,10 @@ var SortManager = class {
 		this.sort();
 	}
 	sort() {
-		const { items, managers } = this;
-		const { length } = managers.column.items;
+		const { items, state } = this;
+		const { length } = state.managers.column.items;
 		for (let index = 0; index < length; index += 1) {
-			const column = managers.column.items[index];
+			const column = state.managers.column.items[index];
 			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
 			const sorterItem = items[sorterIndex];
 			setAttributes(column.elements.wrapper, {
@@ -2438,8 +2648,8 @@ var SortManager = class {
 			});
 			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
 		}
-		managers.data.values.keys.active = items.length === 0 ? void 0 : sort(managers.data.values.keys.active?.map((key) => managers.data.values.objects.mapped.get(key)) ?? managers.data.values.objects.array, items).map((row) => row[managers.data.field]);
-		managers.render.update(true, true);
+		state.managers.data.values.keys.active = items.length === 0 ? void 0 : sort(state.managers.data.values.keys.active?.map((key) => state.managers.data.values.objects.mapped.get(key)) ?? state.managers.data.values.objects.array, items).map((row) => row[state.key]);
+		state.managers.render.update(true, true);
 	}
 	toggle(event, field, direction) {
 		switch (direction) {
@@ -2455,108 +2665,6 @@ var SortManager = class {
 		}
 	}
 };
-function getRange(down) {
-	const { components, managers } = this;
-	const { clientHeight, scrollTop } = components.body.elements.group;
-	const first = Math.floor(scrollTop / managers.row.height);
-	const last = Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, Math.ceil((scrollTop + clientHeight) / managers.row.height) - 1);
-	const before = Math.ceil(clientHeight / managers.row.height) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / managers.row.height) * (down ? 2 : 1);
-	const start = Math.max(0, first - before);
-	return {
-		end: Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, last + after),
-		start
-	};
-}
-function onScroll() {
-	if (!this.state.active) {
-		requestAnimationFrame(() => {
-			const top = this.components.body.elements.group.scrollTop;
-			this.update(top > this.state.top);
-			this.state.active = false;
-			this.state.top = top;
-		});
-		this.state.active = true;
-	}
-}
-var RenderManager = class {
-	fragment;
-	listener;
-	pool = {
-		cells: {},
-		rows: []
-	};
-	state = {
-		active: false,
-		top: 0
-	};
-	visible = /* @__PURE__ */ new Map();
-	constructor(managers, components) {
-		this.managers = managers;
-		this.components = components;
-		this.listener = on(components.body.elements.group, "scroll", onScroll.bind(this));
-	}
-	destroy() {
-		const { listener, pool, visible } = this;
-		listener();
-		visible.clear();
-		pool.cells = {};
-		pool.rows = [];
-		this.listener = void 0;
-		this.visible = void 0;
-	}
-	removeCells(fields) {
-		const { managers, pool, visible } = this;
-		const { length } = fields;
-		for (let index = 0; index < length; index += 1) delete pool.cells[fields[index]];
-		for (const [, key] of visible) {
-			const row = managers.row.get(key);
-			if (row == null || row.element == null) continue;
-			for (let index = 0; index < length; index += 1) {
-				row.cells[fields[index]].innerHTML = "";
-				row.cells[fields[index]].remove();
-				delete row.cells[fields[index]];
-			}
-		}
-	}
-	getFragment() {
-		this.fragment ??= document.createDocumentFragment();
-		this.fragment.replaceChildren();
-		return this.fragment;
-	}
-	update(down, rerender) {
-		const { components, managers, pool, visible } = this;
-		components.body.elements.faker.style.height = `${managers.data.size * managers.row.height}px`;
-		const indices = /* @__PURE__ */ new Set();
-		const range = getRange.call(this, down);
-		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
-		let remove = rerender ?? false;
-		for (const [index, key] of visible) {
-			const row = managers.row.get(key);
-			if (remove || row == null || !indices.has(index)) {
-				visible.delete(index);
-				if (row != null) removeRow(pool, row);
-			}
-		}
-		const fragment = this.getFragment();
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
-		let count = 0;
-		for (let index = range.start; index <= range.end; index += 1) {
-			if (visible.has(index)) continue;
-			const key = keys[index];
-			const row = managers.row.get(key);
-			if (row == null) continue;
-			count += 1;
-			renderRow(managers, row);
-			visible.set(index, key);
-			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
-				fragment.append(row.element);
-			}
-		}
-		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
-	}
-};
 var Tabela = class {
 	#components = {
 		header: void 0,
@@ -2564,12 +2672,14 @@ var Tabela = class {
 		footer: void 0
 	};
 	#element;
+	#id = getId();
 	#key;
 	#managers = {
 		column: void 0,
 		data: void 0,
 		event: void 0,
 		filter: void 0,
+		navigation: void 0,
 		render: void 0,
 		row: void 0,
 		selection: void 0,
@@ -2592,14 +2702,23 @@ var Tabela = class {
 		this.#components.header = new HeaderComponent();
 		this.#components.body = new BodyComponent();
 		this.#components.footer = new FooterComponent();
-		this.#managers.column = new ColumnManager(this.#managers, this.#components, options.columns);
-		this.#managers.data = new DataManager(this.#managers, this.#components, options.key);
-		this.#managers.event = new EventManager(this.#element, this.#managers);
-		this.#managers.filter = new FilterManager(this.#managers);
-		this.#managers.render = new RenderManager(this.#managers, this.#components);
-		this.#managers.row = new RowManager(this.#managers, options.rowHeight);
-		this.#managers.selection = new SelectionManager(this.#element, this.#managers);
-		this.#managers.sort = new SortManager(this.#managers);
+		const state = {
+			element,
+			options,
+			components: this.#components,
+			id: this.#id,
+			key: this.#key,
+			managers: this.#managers
+		};
+		this.#managers.column = new ColumnManager(state);
+		this.#managers.data = new DataManager(state);
+		this.#managers.event = new EventManager(state);
+		this.#managers.filter = new FilterManager(state);
+		this.#managers.navigation = new NavigationManager(state);
+		this.#managers.render = new RenderManager(state);
+		this.#managers.row = new RowManager(state);
+		this.#managers.selection = new SelectionManager(state);
+		this.#managers.sort = new SortManager(state);
 		element.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
 		this.#managers.data.set(options.data);
 		this.data = this.#managers.data.handlers;
@@ -2620,6 +2739,7 @@ var Tabela = class {
 		managers.filter.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
+		managers.selection.destroy();
 		managers.sort.destroy();
 		element.innerHTML = "";
 		element.role = "";
@@ -2629,6 +2749,11 @@ var Tabela = class {
 		this.#element = void 0;
 	}
 };
+function getId() {
+	id += 1;
+	return id;
+}
+let id = 0;
 function tabela(element, options) {
 	return new Tabela(element, options);
 }