@oscarpalmer/tabela 0.10.0 → 0.11.0

package/dist/components/body.component.js

@@ -12,6 +12,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() {

package/dist/components/row.component.js

@@ -9,27 +9,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);

package/dist/managers/column.manager.js

@@ -1,18 +1,19 @@
 import { ColumnComponent } from "../components/column.component.js";
 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;
@@ -28,8 +29,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);

package/dist/managers/data.manager.js

@@ -20,15 +20,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() {
@@ -41,48 +39,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);
@@ -97,18 +101,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);
 			}
 		}
 	}

package/dist/managers/event.manager.js

@@ -1,34 +1,50 @@
 import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 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.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.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.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.get(table);
+	if (manager == null) return;
+	switch (target?.getAttribute("data-event")) {
+		case "body":
+			manager.state.managers.navigation.handle(event);
+			break;
+		default: break;
+	}
+}
+var mapped = /* @__PURE__ */ new WeakMap();
+on(document, "click", onClick);
+on(document, "keydown", onKeydown, { passive: false });
 export { EventManager };

package/dist/managers/filter.manager.js

@@ -10,8 +10,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] = [];
@@ -27,16 +27,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];
@@ -49,9 +50,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") {

package/dist/managers/navigation.manager.js

@@ -0,0 +1,73 @@
+import { getKey } from "../helpers/misc.helpers.js";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+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;
+	}
+}
+var absoluteKeys = new Set(["End", "Home"]);
+var arrowKeys = new Set(["ArrowDown", "ArrowUp"]);
+var negativeDefaultKeys = new Set(["ArrowUp", "End"]);
+var pageKeys = new Set(["PageDown", "PageUp"]);
+var allKeys = new Set([
+	...absoluteKeys,
+	...arrowKeys,
+	...pageKeys
+]);
+export { NavigationManager };

package/dist/managers/render.manager.js

@@ -1,12 +1,12 @@
 import { removeRow, renderRow } from "../components/row.component.js";
 import { on } from "@oscarpalmer/toretto/event";
 function getRange(down) {
-	const { components, managers } = this;
+	const { components, managers, options } = this.state;
 	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 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),
@@ -14,14 +14,15 @@ function getRange(down) {
 	};
 }
 function onScroll() {
-	if (!this.state.active) {
+	const { state } = this;
+	if (!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;
+			const top = state.components.body.elements.group.scrollTop;
+			this.update(top > state.top);
+			state.active = false;
+			state.top = top;
 		});
-		this.state.active = true;
+		state.active = true;
 	}
 }
 var RenderManager = class {
@@ -31,15 +32,15 @@ var RenderManager = class {
 		cells: {},
 		rows: []
 	};
-	state = {
-		active: false,
-		top: 0
-	};
+	state;
 	visible = /* @__PURE__ */ new Map();
-	constructor(managers, components) {
-		this.managers = managers;
-		this.components = components;
-		this.listener = on(components.body.elements.group, "scroll", onScroll.bind(this));
+	constructor(state) {
+		this.listener = on(state.components.body.elements.group, "scroll", onScroll.bind(this));
+		this.state = {
+			...state,
+			active: false,
+			top: 0
+		};
 	}
 	destroy() {
 		const { listener, pool, visible } = this;
@@ -47,15 +48,18 @@ var RenderManager = class {
 		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;
 	}
 	removeCells(fields) {
-		const { managers, pool, visible } = this;
+		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 = managers.row.get(key);
+			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 = "";
@@ -70,8 +74,9 @@ var RenderManager = class {
 		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 { 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);
@@ -92,10 +97,10 @@ var RenderManager = class {
 			const row = managers.row.get(key);
 			if (row == null) continue;
 			count += 1;
-			renderRow(managers, row);
+			renderRow(state, row);
 			visible.set(index, key);
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
+				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
 				fragment.append(row.element);
 			}
 		}

package/dist/managers/row.manager.js

@@ -1,16 +1,16 @@
 import { RowComponent, removeRow, renderRow } from "../components/row.component.js";
 var RowManager = class {
 	components = /* @__PURE__ */ new Map();
-	height;
-	constructor(managers, rowHeight) {
-		this.managers = managers;
-		this.height = rowHeight;
+	constructor(state) {
+		this.state = state;
 	}
 	destroy() {
 		const components = [...this.components.values()];
 		const { length } = components;
-		for (let index = 0; index < length; index += 1) removeRow(this.managers.render.pool, components[index]);
+		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);
@@ -26,13 +26,13 @@ var RowManager = class {
 	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);
 	}
 };
 export { RowManager };

package/dist/managers/selection.manager.js

@@ -14,10 +14,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;
@@ -35,48 +34,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;
@@ -99,8 +97,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);
 	}
@@ -115,7 +113,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");