@oscarpalmer/tabela 0.13.0 → 0.15.0

package/dist/managers/group.manager.mjs

@@ -1,34 +1,44 @@
+import { EVENT_GROUP_ADD, EVENT_GROUP_CLEAR, EVENT_GROUP_REMOVE, EVENT_GROUP_TOGGLE } from "../models/event.model.mjs";
 import { removeGroup } from "../components/group.component.mjs";
+import { getGroup } from "../helpers/misc.helpers.mjs";
 import { sort } from "@oscarpalmer/atoms/array";
+import { toMap } from "@oscarpalmer/atoms/array/to-map";
 import { toRecord } from "@oscarpalmer/atoms/array/to-record";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { getString } from "@oscarpalmer/atoms/string";
+import { compare } from "@oscarpalmer/atoms/value/compare";
 //#region src/managers/group.manager.ts
 var GroupManager = class {
 	collapsed = /* @__PURE__ */ new Set();
 	enabled = false;
-	field;
-	handlers = Object.freeze({ set: (group) => {
-		if (group === this.field) return;
+	key;
+	handlers = { set: (group) => {
+		if (group === this.key) return;
 		this.enabled = !isNullableOrWhitespace(group);
-		this.field = group ?? "";
+		this.key = group ?? "";
 		this.state.managers.data.set(this.state.managers.data.get());
-	} });
+	} };
 	items = [];
+	mapped = /* @__PURE__ */ new Map();
 	order = {};
 	constructor(state) {
 		this.state = state;
 		if (isNullableOrWhitespace(state.options.grouping)) return;
 		this.enabled = true;
-		this.field = state.options.grouping;
+		this.key = state.options.grouping;
 	}
-	add(group) {
+	add(group, emit) {
 		this.set([...this.items, group]);
+		if (emit) this.state.managers.event.emit(EVENT_GROUP_ADD, [getGroup(group)]);
 	}
 	clear() {
+		if (this.items.length === 0) return;
 		const groups = this.items.splice(0);
 		const { length } = groups;
-		for (let index = 0; index < length; index += 1) this.remove(groups[index]);
+		for (let index = 0; index < length; index += 1) this.remove(groups[index], false);
+		this.collapsed.clear();
+		this.set([]);
+		this.state.managers.event.emit(EVENT_GROUP_CLEAR);
 	}
 	destroy() {
 		const groups = this.items.splice(0);
@@ -38,34 +48,44 @@ var GroupManager = class {
 		this.handlers = void 0;
 		this.state = void 0;
 	}
-	get(value) {
+	getForKey(key) {
+		return this.mapped.get(key);
+	}
+	getForValue(value) {
 		const asString = getString(value);
 		return this.items.find((item) => item.value.stringified === asString);
 	}
 	handle(button) {
-		const value = button.dataset.key?.replace(`tabela_${this.state.id}_group:`, "");
-		const group = this.get(value);
+		const key = button.dataset.key?.replace(`${this.state.prefix}_`, "");
+		const group = this.getForKey(key ?? "");
 		if (group == null) return;
 		const { collapsed, items, state } = this;
 		group.expanded = !group.expanded;
 		const index = items.indexOf(group);
-		let first = state.managers.data.state.items.original.indexOf(items[index]) + 1;
-		const last = items[index + 1] == null ? state.managers.data.state.items.original.length - 1 : state.managers.data.state.items.original.indexOf(items[index + 1]) - 1;
+		let first = state.managers.data.state.keys.original.indexOf(group.key) + 1;
+		const last = items[index + 1] == null ? state.managers.data.state.keys.original.length - 1 : state.managers.data.state.keys.original.indexOf(items[index + 1].key) - 1;
 		for (; first <= last; first += 1) {
-			const key = state.managers.data.state.items.original[first];
+			const key = state.managers.data.state.keys.original[first];
 			if (group.expanded) collapsed.delete(key);
 			else collapsed.add(key);
 		}
+		state.managers.event.emit(EVENT_GROUP_TOGGLE, {
+			collapsed: group.expanded ? [] : [getGroup(group)],
+			expanded: group.expanded ? [getGroup(group)] : []
+		});
 		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, true);
 	}
-	remove(group) {
+	remove(group, update) {
 		removeGroup(group);
+		if (!update) return;
 		this.set(this.items.filter((item) => item !== group));
+		this.state.managers.event.emit(EVENT_GROUP_REMOVE, [getGroup(group)]);
 	}
 	set(items) {
-		this.items = sort(items, (item) => item.label);
+		this.items = sort(items, (first, second) => compare(first.label, second.label));
+		this.mapped = toMap(items, (group) => group.key);
 		this.order = toRecord(items, (group) => group.value.stringified, (_, index) => index);
 	}
 };

package/dist/managers/navigation.manager.d.mts

@@ -1,2 +1,15 @@
-import { b as NavigationManager } from "../group.component-Cq1YYbfJ.mjs";
-export { NavigationManager };
+import { State } from "../models/tabela.model.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/navigation.manager.d.ts
+declare class NavigationManager {
+  state: State;
+  active: Key | undefined;
+  constructor(state: State);
+  destroy(): void;
+  handle(event: KeyboardEvent): void;
+  setActive(item: Key | undefined, scroll?: boolean): void;
+}
+declare const attributeDataActiveTrue = "[data-active=\"true\"]";
+//#endregion
+export { NavigationManager, attributeDataActiveTrue };

package/dist/managers/navigation.manager.mjs

@@ -1,5 +1,5 @@
-import { GroupComponent } from "../components/group.component.mjs";
-import { getKey } from "../helpers/misc.helpers.mjs";
+import { ARIA_ACTIVEDESCENDANT, ATTRIBUTE_DATA_ACTIVE } from "../models/dom.model.mjs";
+import { getKey, isGroupKey } from "../helpers/misc.helpers.mjs";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { clamp } from "@oscarpalmer/atoms/number";
 //#region src/managers/navigation.manager.ts
@@ -14,63 +14,67 @@ var NavigationManager = class {
 	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 { items } = managers.data;
-		const { length } = items;
+		const { components, managers } = this.state;
+		const activeDescendant = components.body.elements.group.getAttribute(ARIA_ACTIVEDESCENDANT);
+		const { keys } = managers.data;
+		const { length } = keys;
 		let next;
 		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);
-		else next = getIndex(this.state, event, activeDescendant, id);
-		if (next != null) this.setActive(items.at(next));
+		else next = getIndex(this.state, event, activeDescendant);
+		if (next != null) this.setActive(keys.at(next));
 	}
 	setActive(item, scroll) {
-		const { components, id, managers, options } = this.state;
+		const { components, managers, options, prefix } = this.state;
 		this.active = item;
-		const active = components.body.elements.group.querySelectorAll("[data-active=\"true\"]");
-		for (const item of active) item.setAttribute("data-active", "false");
-		const component = item instanceof GroupComponent ? item : managers.row.get(item, false);
+		const active = components.body.elements.group.querySelectorAll(attributeDataActiveTrue);
+		for (const item of active) item.setAttribute(ATTRIBUTE_DATA_ACTIVE, "false");
+		const component = isGroupKey(item) ? managers.group.getForKey(item) : managers.row.get(item, false);
 		if (component != null) {
-			component.element?.setAttribute("data-active", "true");
+			component.element?.setAttribute(ATTRIBUTE_DATA_ACTIVE, "true");
 			if (scroll ?? true) if (component.element == null) components.body.elements.group.scrollTo({
 				top: managers.data.getIndex(item) * options.rowHeight,
 				behavior: "smooth"
 			});
 			else component.element.scrollIntoView({ block: "nearest" });
 		}
-		components.body.elements.group.setAttribute("aria-activedescendant", component == null ? "" : `tabela_${id}_${component.key}`);
+		components.body.elements.group.setAttribute(ARIA_ACTIVEDESCENDANT, component == null ? "" : `${prefix}${component.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;
+		case key === KEY_PAGE_DOWN: return Math.min(9, max - 1);
+		case key === KEY_PAGE_UP: return max < 10 ? 0 : max - 10;
 		default: return 0;
 	}
 }
-function getIndex(state, event, active, id) {
-	const key = getKey(active.replace(`tabela_${id}_`, ""));
+function getIndex(state, event, active) {
+	const key = getKey(active.replace(state.prefix, ""));
 	if (key == null) return;
-	if (absoluteKeys.has(event.key)) return event.key === "Home" ? 0 : state.managers.data.size - 1;
-	return clamp(state.managers.data.getIndex(key) + getOffset(event.key), 0, state.managers.data.size - 1, true);
+	if (absoluteKeys.has(event.key)) return event.key === KEY_HOME ? 0 : state.managers.data.size - 1;
+	return clamp(state.managers.data.getIndex(key) + (offset[event.key] ?? 0), 0, state.managers.data.size - 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 KEY_ARROW_DOWN = "ArrowDown";
+const KEY_ARROW_UP = "ArrowUp";
+const KEY_END = "End";
+const KEY_HOME = "Home";
+const KEY_PAGE_DOWN = "PageDown";
+const KEY_PAGE_UP = "PageUp";
+const absoluteKeys = new Set([KEY_END, KEY_HOME]);
+const arrowKeys = new Set([KEY_ARROW_DOWN, KEY_ARROW_UP]);
+const attributeDataActiveTrue = `[${ATTRIBUTE_DATA_ACTIVE}="true"]`;
+const negativeDefaultKeys = new Set([KEY_ARROW_UP, KEY_END]);
+const offset = {
+	[KEY_ARROW_DOWN]: 1,
+	[KEY_ARROW_UP]: -1,
+	[KEY_PAGE_DOWN]: 10,
+	[KEY_PAGE_UP]: -10
+};
+const pageKeys = new Set([KEY_PAGE_DOWN, KEY_PAGE_UP]);
 const allKeys = new Set([
 	...absoluteKeys,
 	...arrowKeys,
 	...pageKeys
 ]);
 //#endregion
-export { NavigationManager };
+export { NavigationManager, attributeDataActiveTrue };

package/dist/managers/render.manager.d.mts

@@ -1,2 +1,19 @@
-import { g as RenderManager } from "../group.component-Cq1YYbfJ.mjs";
+import { RenderElementPool, RenderState, RenderVisible } from "../models/render.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+
+//#region src/managers/render.manager.d.ts
+declare class RenderManager {
+  fragment: DocumentFragment;
+  listener: RemovableEventListener;
+  pool: RenderElementPool;
+  state: RenderState;
+  visible: RenderVisible;
+  constructor(state: State);
+  destroy(): void;
+  removeCells(keys: string[]): void;
+  getFragment(): DocumentFragment;
+  update(down: boolean, rerender?: boolean): void;
+}
+//#endregion
 export { RenderManager };

package/dist/managers/render.manager.mjs

@@ -1,13 +1,14 @@
-import { GroupComponent, renderGroup } from "../components/group.component.mjs";
+import { renderGroup } from "../components/group.component.mjs";
+import { isGroupKey } from "../helpers/misc.helpers.mjs";
 import { removeRow, renderRow } from "../components/row.component.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 //#region src/managers/render.manager.ts
 function getRange(state, down) {
 	const { element, managers, options } = state;
 	const { clientHeight, scrollTop } = element;
-	const { items } = managers.data;
+	const { keys } = managers.data;
 	const firstIndex = Math.floor(scrollTop / options.rowHeight);
-	const lastIndex = items.length - managers.group.collapsed.size - 1;
+	const lastIndex = keys.length - managers.group.collapsed.size - 1;
 	const last = Math.min(lastIndex, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
 	const visible = clientHeight / options.rowHeight;
 	const before = Math.ceil(visible) * (down ? 1 : 2);
@@ -38,7 +39,10 @@ var RenderManager = class {
 		rows: []
 	};
 	state;
-	visible = /* @__PURE__ */ new Map();
+	visible = {
+		indiced: /* @__PURE__ */ new Map(),
+		keys: /* @__PURE__ */ new Set()
+	};
 	constructor(state) {
 		this.listener = on(state.element, "scroll", onScroll.bind(this));
 		this.state = {
@@ -50,7 +54,8 @@ var RenderManager = class {
 	destroy() {
 		const { listener, pool, visible } = this;
 		listener();
-		visible.clear();
+		visible.indiced.clear();
+		visible.keys.clear();
 		const cells = Object.values(pool.cells).flat();
 		let { length } = cells;
 		for (let index = 0; index < length; index += 1) cells[index].remove();
@@ -64,18 +69,18 @@ var RenderManager = class {
 		this.state = void 0;
 		this.visible = void 0;
 	}
-	removeCells(fields) {
+	removeCells(keys) {
 		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) {
-			if (key instanceof GroupComponent) continue;
+		const { length } = keys;
+		for (let index = 0; index < length; index += 1) delete pool.cells[keys[index]];
+		for (const [, key] of visible.indiced) {
+			if (isGroupKey(key)) continue;
 			const row = state.managers.row.get(key, false);
 			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]];
+				row.cells[keys[index]].innerHTML = "";
+				row.cells[keys[index]].remove();
+				delete row.cells[keys[index]];
 			}
 		}
 	}
@@ -92,52 +97,60 @@ var RenderManager = class {
 		const range = getRange(state, down);
 		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
 		let remove = rerender ?? false;
-		for (const [index, key] of visible) {
-			if (key instanceof GroupComponent) {
+		for (const [index, key] of visible.indiced) {
+			if (isGroupKey(key)) {
 				if (remove || !indices.has(index)) {
-					visible.delete(index);
-					key.element?.remove();
+					visible.indiced.delete(index);
+					visible.keys.delete(key);
+					state.managers.group.getForKey(key)?.element?.remove();
 				}
 				continue;
 			}
 			const row = managers.row.get(key, false);
 			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
-				visible.delete(index);
+				visible.indiced.delete(index);
+				visible.keys.delete(key);
 				if (row != null) removeRow(pool, row);
 			}
 		}
 		const fragment = this.getFragment();
-		const { items } = managers.data;
+		const { keys } = managers.data;
 		let count = 0;
 		let offset = 0;
 		for (let index = range.start; index <= range.end + offset; index += 1) {
-			if (visible.has(index)) continue;
-			const item = items[index];
-			if (item instanceof GroupComponent) {
+			if (visible.indiced.has(index)) continue;
+			const key = keys[index];
+			if (isGroupKey(key)) {
+				const group = managers.group.getForKey(key);
+				if (group == null) continue;
 				count += 1;
-				renderGroup(state, item);
-				visible.set(index, item);
-				if (item.element != null) {
-					item.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
-					fragment.append(item.element);
+				renderGroup(state, group);
+				visible.indiced.set(index, group.key);
+				visible.keys.add(group.key);
+				if (group.element != null) {
+					group.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+					fragment.append(group.element);
 				}
 				continue;
 			}
-			const row = managers.row.get(item, true);
+			const row = managers.row.get(key, true);
 			if (row == null) continue;
-			if (managers.group.collapsed.has(item)) {
+			if (managers.group.collapsed.has(key)) {
 				offset += 1;
 				continue;
 			}
 			count += 1;
 			renderRow(state, row);
-			visible.set(index, item);
+			visible.indiced.set(index, key);
+			visible.keys.add(key);
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 				fragment.append(row.element);
 			}
 		}
-		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
+		if (count === 0) return;
+		if (down) components.body.elements.group.append(fragment);
+		else components.body.elements.group.prepend(fragment);
 	}
 };
 //#endregion

package/dist/managers/row.manager.d.mts

@@ -1,2 +1,19 @@
-import { f as RowManager } from "../group.component-Cq1YYbfJ.mjs";
+import { RowComponent } from "../components/row.component.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/row.manager.d.ts
+declare class RowManager {
+  state: State;
+  components: Map<Key, RowComponent>;
+  constructor(state: State);
+  clear(): void;
+  destroy(): void;
+  get(key: Key, create: boolean): RowComponent | undefined;
+  has(key: Key): boolean;
+  remove(key: Key): void;
+  removeRow(row: RowComponent): void;
+  update(key: Key): void;
+}
+//#endregion
 export { RowManager };

package/dist/managers/row.manager.mjs

@@ -38,7 +38,7 @@ var RowManager = class {
 	}
 	update(key) {
 		const row = this.components.get(key);
-		if (row != null) renderRow(this.state, row);
+		if (row?.element != null) renderRow(this.state, row);
 	}
 };
 //#endregion

package/dist/managers/selection.manager.d.mts

@@ -1,2 +1,23 @@
-import { d as SelectionManager } from "../group.component-Cq1YYbfJ.mjs";
+import { TabelaSelection } from "../models/selection.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/selection.manager.d.ts
+declare class SelectionManager {
+  state: State;
+  handlers: TabelaSelection;
+  items: Set<Key>;
+  last: Key | undefined;
+  constructor(state: State);
+  add(keys: Key[]): void;
+  clear(): void;
+  destroy(): void;
+  handle(event: MouseEvent, target: HTMLElement): void;
+  range(from: Key | HTMLElement, to: Key | HTMLElement): void;
+  remove(keys: Key[]): void;
+  set(keys: Key[]): void;
+  toggle(): void;
+  update(removed: Key[]): void;
+}
+//#endregion
 export { SelectionManager };

package/dist/managers/selection.manager.mjs

@@ -1,7 +1,7 @@
-import { CSS_TABELA_ROW_BODY, CSS_TABELA_ROW_SELECTED, CSS_TABELA_SELECTION } from "../models/style.model.mjs";
+import { ARIA_SELECTED, ATTRIBUTE_DATA_KEY } from "../models/dom.model.mjs";
+import { CSS_ROW_BODY, CSS_ROW_SELECTED, CSS_SELECTION, CSS_TABLE } from "../models/style.model.mjs";
 import { createElement } from "../helpers/dom.helpers.mjs";
-import { GroupComponent } from "../components/group.component.mjs";
-import { getKey } from "../helpers/misc.helpers.mjs";
+import { getKey, isGroupKey } from "../helpers/misc.helpers.mjs";
 import { preventSelection } from "../helpers/style.helper.mjs";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isKey } from "@oscarpalmer/atoms/is";
@@ -9,13 +9,13 @@ import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/managers/selection.manager.ts
 var SelectionManager = class {
-	handlers = Object.freeze({
+	handlers = {
 		add: (keys) => this.add(keys),
 		clear: () => this.clear(),
 		remove: (keys) => this.remove(keys),
 		set: (keys) => this.set(keys),
 		toggle: () => this.toggle()
-	});
+	};
 	items = /* @__PURE__ */ new Set();
 	last;
 	constructor(state) {
@@ -48,7 +48,7 @@ var SelectionManager = class {
 		this.state = void 0;
 	}
 	handle(event, target) {
-		const key = getKey(target.getAttribute("data-key"));
+		const key = getKey(target.getAttribute(ATTRIBUTE_DATA_KEY));
 		if (key == null) return;
 		const { items } = this;
 		if (event.shiftKey) {
@@ -68,18 +68,18 @@ var SelectionManager = class {
 	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"));
+		const fromKey = keyed ? from : getKey(from.getAttribute(ATTRIBUTE_DATA_KEY));
+		const toKey = keyed ? to : getKey(to.getAttribute(ATTRIBUTE_DATA_KEY));
 		if (fromKey === toKey) return;
-		const { items } = state.managers.data;
+		const { keys } = state.managers.data;
 		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) {
-			const item = items[index];
-			if (!(item instanceof GroupComponent)) selected.push(item);
+			const key = keys[index];
+			if (!isGroupKey(key)) selected.push(key);
 		}
 		if (keyed) this.add(selected);
 		else this.set(selected);
@@ -105,9 +105,9 @@ var SelectionManager = class {
 	}
 	toggle() {
 		const { items, state } = this;
-		const data = state.managers.data.items;
-		if (items.size === data.length - state.managers.group.items.length) this.clear();
-		else this.set(data.filter((key) => !(key instanceof GroupComponent)));
+		const { keys } = state.managers.data;
+		if (items.size === keys.length - state.managers.group.items.length) this.clear();
+		else this.set(keys.filter((key) => !isGroupKey(key)));
 	}
 	update(removed) {
 		const { state } = this;
@@ -123,19 +123,19 @@ var SelectionManager = class {
 			const { key, removed } = items[index];
 			const element = state.managers.row.get(key, false)?.element;
 			if (element == null) continue;
-			setAttribute(element, "aria-selected", String(!removed));
-			if (removed) element.classList.remove(CSS_TABELA_ROW_SELECTED);
-			else element.classList.add(CSS_TABELA_ROW_SELECTED);
+			setAttribute(element, ARIA_SELECTED, String(!removed));
+			if (removed) element.classList.remove(CSS_ROW_SELECTED);
+			else element.classList.add(CSS_ROW_SELECTED);
 		}
 	}
 };
 function getPlaceholder() {
-	placeholder ??= createElement("div", { className: CSS_TABELA_SELECTION }, {}, {});
+	placeholder ??= createElement("div", { className: CSS_SELECTION });
 	return placeholder;
 }
 function onMouseDown(event) {
 	if (shifted) {
-		const row = findAncestor(event.target, `.${CSS_TABELA_ROW_BODY}`);
+		const row = findAncestor(event.target, `.${CSS_ROW_BODY}`);
 		if (!(row instanceof HTMLElement)) return;
 		startElement = row;
 		startPosition = getPosition(event);
@@ -163,11 +163,11 @@ function onMouseUp(event) {
 		preventSelection.remove();
 	}
 	getPlaceholder().remove();
-	const row = findAncestor(event.target, ".tabela__row--body");
+	const row = findAncestor(event.target, bodyRowSelector);
 	if (row instanceof HTMLElement) {
 		endElement = row;
-		const endTable = findAncestor(endElement, ".tabela__table");
-		const startTable = findAncestor(startElement, ".tabela__table");
+		const endTable = findAncestor(endElement, tableSelector);
+		const startTable = findAncestor(startElement, tableSelector);
 		if (startTable != null && startTable === endTable) mapped.get(startTable)?.range(startElement, endElement);
 	}
 	endElement = void 0;
@@ -175,7 +175,7 @@ function onMouseUp(event) {
 	startPosition = void 0;
 }
 function onShift(event, value) {
-	if (event.key === "Shift") shifted = value;
+	if (event.key === KEY_SHIFT) shifted = value;
 }
 function onShiftDown(event) {
 	onShift(event, true);
@@ -183,7 +183,10 @@ function onShiftDown(event) {
 function onShiftUp(event) {
 	onShift(event, false);
 }
+const KEY_SHIFT = "Shift";
 const mapped = /* @__PURE__ */ new WeakMap();
+const bodyRowSelector = `.${CSS_ROW_BODY}`;
+const tableSelector = `.${CSS_TABLE}`;
 let shifted = false;
 let endElement;
 let placeholder;

package/dist/managers/sort.manager.d.mts

@@ -1,2 +1,23 @@
-import { l as SortManager, u as sortWithGroups } from "../group.component-Cq1YYbfJ.mjs";
+import { DataValue } from "../models/data.model.mjs";
+import { TabelaSort, TabelaSortDirection, TabelaSortItem } from "../models/sort.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+
+//#region src/managers/sort.manager.d.ts
+declare class SortManager {
+  state: State;
+  handlers: TabelaSort;
+  items: TabelaSortItem[];
+  constructor(state: State);
+  add(key: string, direction?: TabelaSortDirection): void;
+  addOrSet(event: MouseEvent, key: string): void;
+  clear(): void;
+  destroy(): void;
+  flip(key: string): void;
+  remove(key: string): void;
+  set(items: TabelaSortItem[], set: boolean): void;
+  sort(): void;
+  toggle(event: MouseEvent, key: string, direction?: string | null): void;
+}
+declare function sortWithGroups(state: State, data: DataValue[], sorters: TabelaSortItem[]): DataValue[];
+//#endregion
 export { SortManager, sortWithGroups };