@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/dist/_chunk/grid.js

@@ -0,0 +1,623 @@
+import { a as useLocale } from "./createCollator.js";
+import { createMemo, createSignal } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+//#region src/grid/GridKeyboardDelegate.ts
+/**
+* A keyboard delegate that handles navigation in a grid.
+*/
+var GridKeyboardDelegate = class {
+	collection;
+	disabledKeys;
+	ref;
+	focusMode;
+	direction;
+	constructor(options) {
+		this.collection = options.collection;
+		this.disabledKeys = options.disabledKeys;
+		this.ref = options.ref;
+		this.focusMode = options.focusMode;
+		this.direction = options.direction;
+	}
+	/**
+	* Check if a key is disabled.
+	*/
+	isDisabled(key) {
+		return this.disabledKeys.has(key);
+	}
+	/**
+	* Get the parent row key for a cell.
+	*/
+	getRowKey(key) {
+		const item = this.collection.getItem(key);
+		if (!item) return null;
+		if (item.type === "item") return key;
+		if (item.type === "cell" && item.parentKey != null) return item.parentKey;
+		return null;
+	}
+	/**
+	* Get all body rows (excluding header rows).
+	*/
+	getBodyRows() {
+		return this.collection.rows.filter((row) => row.type === "item");
+	}
+	/**
+	* Get the first non-disabled key.
+	*/
+	getFirstKey(fromKey, global) {
+		const rows = this.getBodyRows();
+		if (this.focusMode === "row" || global) {
+			for (const row of rows) if (!this.isDisabled(row.key)) return row.key;
+			return null;
+		}
+		if (fromKey != null) {
+			const rowKey = this.getRowKey(fromKey);
+			if (rowKey != null) {
+				const children = [...this.collection.getChildren(rowKey)];
+				if (children.length > 0) return children[0].key;
+			}
+		}
+		if (rows.length > 0) {
+			const children = [...this.collection.getChildren(rows[0].key)];
+			if (children.length > 0) return children[0].key;
+		}
+		return null;
+	}
+	/**
+	* Get the last non-disabled key.
+	*/
+	getLastKey(fromKey, global) {
+		const rows = this.getBodyRows();
+		if (this.focusMode === "row" || global) {
+			for (let i = rows.length - 1; i >= 0; i--) if (!this.isDisabled(rows[i].key)) return rows[i].key;
+			return null;
+		}
+		if (fromKey != null) {
+			const rowKey = this.getRowKey(fromKey);
+			if (rowKey != null) {
+				const children = [...this.collection.getChildren(rowKey)];
+				if (children.length > 0) return children[children.length - 1].key;
+			}
+		}
+		if (rows.length > 0) {
+			const children = [...this.collection.getChildren(rows[rows.length - 1].key)];
+			if (children.length > 0) return children[children.length - 1].key;
+		}
+		return null;
+	}
+	/**
+	* Get the key above the current key.
+	*/
+	getKeyAbove(key) {
+		const item = this.collection.getItem(key);
+		if (!item) return null;
+		const rows = this.getBodyRows();
+		if (this.focusMode === "row" || item.type === "item") {
+			const rowKey = item.type === "item" ? key : item.parentKey;
+			const rowIndex = rows.findIndex((r) => r.key === rowKey);
+			if (rowIndex > 0) {
+				for (let i = rowIndex - 1; i >= 0; i--) if (!this.isDisabled(rows[i].key)) return rows[i].key;
+			}
+			return null;
+		}
+		if (item.type === "cell" && item.parentKey != null) {
+			const rowIndex = rows.findIndex((r) => r.key === item.parentKey);
+			const colIndex = item.column ?? item.index;
+			if (rowIndex > 0) {
+				for (let i = rowIndex - 1; i >= 0; i--) if (!this.isDisabled(rows[i].key)) {
+					const children = [...this.collection.getChildren(rows[i].key)];
+					const targetCol = Math.min(colIndex, children.length - 1);
+					if (targetCol >= 0) return children[targetCol].key;
+				}
+			}
+		}
+		return null;
+	}
+	/**
+	* Get the key below the current key.
+	*/
+	getKeyBelow(key) {
+		const item = this.collection.getItem(key);
+		if (!item) return null;
+		const rows = this.getBodyRows();
+		if (this.focusMode === "row" || item.type === "item") {
+			const rowKey = item.type === "item" ? key : item.parentKey;
+			const rowIndex = rows.findIndex((r) => r.key === rowKey);
+			if (rowIndex >= 0 && rowIndex < rows.length - 1) {
+				for (let i = rowIndex + 1; i < rows.length; i++) if (!this.isDisabled(rows[i].key)) return rows[i].key;
+			}
+			return null;
+		}
+		if (item.type === "cell" && item.parentKey != null) {
+			const rowIndex = rows.findIndex((r) => r.key === item.parentKey);
+			const colIndex = item.column ?? item.index;
+			if (rowIndex >= 0 && rowIndex < rows.length - 1) {
+				for (let i = rowIndex + 1; i < rows.length; i++) if (!this.isDisabled(rows[i].key)) {
+					const children = [...this.collection.getChildren(rows[i].key)];
+					const targetCol = Math.min(colIndex, children.length - 1);
+					if (targetCol >= 0) return children[targetCol].key;
+				}
+			}
+		}
+		return null;
+	}
+	/**
+	* Get the key to the left of the current key.
+	*/
+	getKeyLeftOf(key) {
+		const item = this.collection.getItem(key);
+		if (!item) return null;
+		if (this.focusMode === "row") return null;
+		if (item.type === "cell" && item.parentKey != null) {
+			const children = [...this.collection.getChildren(item.parentKey)];
+			const colIndex = children.findIndex((c) => c.key === key);
+			if (this.direction === "rtl") {
+				if (colIndex < children.length - 1) return children[colIndex + 1].key;
+			} else if (colIndex > 0) return children[colIndex - 1].key;
+		}
+		return null;
+	}
+	/**
+	* Get the key to the right of the current key.
+	*/
+	getKeyRightOf(key) {
+		const item = this.collection.getItem(key);
+		if (!item) return null;
+		if (this.focusMode === "row") return null;
+		if (item.type === "cell" && item.parentKey != null) {
+			const children = [...this.collection.getChildren(item.parentKey)];
+			const colIndex = children.findIndex((c) => c.key === key);
+			if (this.direction === "rtl") {
+				if (colIndex > 0) return children[colIndex - 1].key;
+			} else if (colIndex < children.length - 1) return children[colIndex + 1].key;
+		}
+		return null;
+	}
+	/**
+	* Get the key for page up.
+	*/
+	getKeyPageAbove(key) {
+		const el = this.ref();
+		if (!el) return null;
+		const item = this.collection.getItem(key);
+		if (!item) return null;
+		const rows = this.getBodyRows();
+		const rowKey = this.getRowKey(key);
+		const rowIndex = rows.findIndex((r) => r.key === rowKey);
+		if (rowIndex < 0) return null;
+		const rowHeight = el.scrollHeight / rows.length;
+		const pageSize = Math.max(1, Math.floor(el.clientHeight / rowHeight));
+		const targetIndex = Math.max(0, rowIndex - pageSize);
+		for (let i = targetIndex; i >= 0; i--) if (!this.isDisabled(rows[i].key)) {
+			if (this.focusMode === "row" || item.type === "item") return rows[i].key;
+			const colIndex = item.type === "cell" ? item.column ?? item.index : 0;
+			const children = [...this.collection.getChildren(rows[i].key)];
+			const targetCol = Math.min(colIndex, children.length - 1);
+			if (targetCol >= 0) return children[targetCol].key;
+		}
+		return null;
+	}
+	/**
+	* Get the key for page down.
+	*/
+	getKeyPageBelow(key) {
+		const el = this.ref();
+		if (!el) return null;
+		const item = this.collection.getItem(key);
+		if (!item) return null;
+		const rows = this.getBodyRows();
+		const rowKey = this.getRowKey(key);
+		const rowIndex = rows.findIndex((r) => r.key === rowKey);
+		if (rowIndex < 0) return null;
+		const rowHeight = el.scrollHeight / rows.length;
+		const pageSize = Math.max(1, Math.floor(el.clientHeight / rowHeight));
+		const targetIndex = Math.min(rows.length - 1, rowIndex + pageSize);
+		for (let i = targetIndex; i < rows.length; i++) if (!this.isDisabled(rows[i].key)) {
+			if (this.focusMode === "row" || item.type === "item") return rows[i].key;
+			const colIndex = item.type === "cell" ? item.column ?? item.index : 0;
+			const children = [...this.collection.getChildren(rows[i].key)];
+			const targetCol = Math.min(colIndex, children.length - 1);
+			if (targetCol >= 0) return children[targetCol].key;
+		}
+		return null;
+	}
+	/**
+	* Get the key that matches the search string.
+	*/
+	getKeyForSearch(search, fromKey) {
+		const searchLower = search.toLowerCase();
+		const rows = this.getBodyRows();
+		let startIndex = 0;
+		if (fromKey != null) {
+			const rowKey = this.getRowKey(fromKey);
+			const idx = rows.findIndex((r) => r.key === rowKey);
+			if (idx >= 0) startIndex = idx + 1;
+		}
+		for (let i = startIndex; i < rows.length; i++) {
+			const row = rows[i];
+			if (!this.isDisabled(row.key)) {
+				if ((row.textValue?.toLowerCase() ?? "").startsWith(searchLower)) return row.key;
+			}
+		}
+		for (let i = 0; i < startIndex; i++) {
+			const row = rows[i];
+			if (!this.isDisabled(row.key)) {
+				if ((row.textValue?.toLowerCase() ?? "").startsWith(searchLower)) return row.key;
+			}
+		}
+		return null;
+	}
+};
+//#endregion
+//#region src/grid/createGrid.ts
+/**
+* createGrid - Provides accessibility for a grid component.
+* Based on @react-aria/grid/useGrid.
+*/
+const gridMap = /* @__PURE__ */ new WeakMap();
+/**
+* Get the grid metadata for child components.
+*/
+function getGridData(state) {
+	return gridMap.get(state);
+}
+/**
+* Creates accessibility props for a grid component.
+* A grid displays data in rows and columns and enables navigation via arrow keys.
+*/
+function createGrid(props, state, ref) {
+	const id = createId(props().id);
+	const locale = useLocale();
+	const [_isFocused, setIsFocused] = createSignal(false);
+	const keyboardDelegate = createMemo(() => {
+		const p = props();
+		const s = state();
+		if (p.keyboardDelegate) return p.keyboardDelegate;
+		return new GridKeyboardDelegate({
+			collection: s.collection,
+			disabledKeys: s.disabledKeys,
+			ref,
+			focusMode: p.focusMode ?? "row",
+			direction: locale().direction
+		});
+	});
+	const storeGridData = () => {
+		const s = state();
+		const p = props();
+		gridMap.set(s, {
+			keyboardDelegate: keyboardDelegate(),
+			actions: {
+				onRowAction: p.onRowAction,
+				onCellAction: p.onCellAction
+			},
+			shouldSelectOnPressUp: p.shouldSelectOnPressUp
+		});
+	};
+	createMemo(() => {
+		storeGridData();
+	});
+	const onKeyDown = (e) => {
+		const s = state();
+		const p = props();
+		const delegate = keyboardDelegate();
+		if (s.isKeyboardNavigationDisabled) return;
+		const focusedKey = s.focusedKey;
+		if (focusedKey == null) {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
+				const firstKey = delegate.getFirstKey?.();
+				if (firstKey != null) {
+					e.preventDefault();
+					s.setFocusedKey(firstKey);
+				}
+			}
+			return;
+		}
+		let nextKey = null;
+		switch (e.key) {
+			case "ArrowDown":
+				nextKey = delegate.getKeyBelow?.(focusedKey) ?? null;
+				break;
+			case "ArrowUp":
+				nextKey = delegate.getKeyAbove?.(focusedKey) ?? null;
+				break;
+			case "ArrowLeft":
+				nextKey = delegate.getKeyLeftOf?.(focusedKey) ?? null;
+				break;
+			case "ArrowRight":
+				nextKey = delegate.getKeyRightOf?.(focusedKey) ?? null;
+				break;
+			case "Home":
+				if (e.ctrlKey) nextKey = delegate.getFirstKey?.() ?? null;
+				else nextKey = delegate.getFirstKey?.(focusedKey) ?? null;
+				break;
+			case "End":
+				if (e.ctrlKey) nextKey = delegate.getLastKey?.() ?? null;
+				else nextKey = delegate.getLastKey?.(focusedKey) ?? null;
+				break;
+			case "PageDown":
+				nextKey = delegate.getKeyPageBelow?.(focusedKey) ?? null;
+				break;
+			case "PageUp":
+				nextKey = delegate.getKeyPageAbove?.(focusedKey) ?? null;
+				break;
+			case "Escape":
+				if (p.escapeKeyBehavior !== "none") s.clearSelection();
+				return;
+			case "a":
+				if (e.ctrlKey || e.metaKey) {
+					e.preventDefault();
+					if (s.selectionMode === "multiple") s.selectAll();
+				}
+				return;
+			case " ":
+			case "Enter":
+				e.preventDefault();
+				if (s.selectionMode !== "none") if (e.shiftKey && s.selectionMode === "multiple") s.extendSelection(focusedKey);
+				else s.toggleSelection(focusedKey);
+				return;
+			default:
+				if (!p.disallowTypeAhead && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+					const key = delegate.getKeyForSearch?.(e.key, focusedKey);
+					if (key != null) {
+						e.preventDefault();
+						s.setFocusedKey(key);
+					}
+				}
+				return;
+		}
+		if (nextKey != null) {
+			e.preventDefault();
+			s.setFocusedKey(nextKey);
+			if (e.shiftKey && s.selectionMode === "multiple") s.extendSelection(nextKey);
+		}
+	};
+	const onFocus = (e) => {
+		const s = state();
+		if (!ref()?.contains(e.target)) return;
+		if (!s.isFocused) {
+			s.setFocused(true);
+			setIsFocused(true);
+			if (s.focusedKey == null) {
+				const firstKey = keyboardDelegate().getFirstKey?.();
+				if (firstKey != null) s.setFocusedKey(firstKey);
+			}
+		}
+	};
+	const onBlur = (e) => {
+		const s = state();
+		const el = ref();
+		if (el && !el.contains(e.relatedTarget)) {
+			s.setFocused(false);
+			setIsFocused(false);
+		}
+	};
+	createMemo(() => {
+		const p = props();
+		if (!p["aria-label"] && !p["aria-labelledby"]) console.warn("Grid: An aria-label or aria-labelledby prop is required for accessibility.");
+	});
+	const gridProps = createMemo(() => {
+		const p = props();
+		const s = state();
+		const baseProps = {
+			role: "grid",
+			id,
+			"aria-label": p["aria-label"],
+			"aria-labelledby": p["aria-labelledby"],
+			"aria-describedby": p["aria-describedby"],
+			"aria-multiselectable": s.selectionMode === "multiple" ? "true" : void 0,
+			tabIndex: s.collection.size === 0 ? 0 : -1,
+			onKeyDown,
+			onFocus,
+			onBlur
+		};
+		if (p.isVirtualized) {
+			baseProps["aria-rowcount"] = s.collection.rowCount;
+			baseProps["aria-colcount"] = s.collection.columnCount;
+		}
+		return baseProps;
+	});
+	return { get gridProps() {
+		return gridProps();
+	} };
+}
+//#endregion
+//#region src/grid/createGridRow.ts
+/**
+* createGridRow - Provides accessibility for a grid row.
+* Based on @react-aria/grid/useGridRow.
+*/
+/**
+* Creates accessibility props for a grid row.
+*/
+function createGridRow(props, state, _ref) {
+	const [isPressed, setIsPressed] = createSignal(false);
+	const isSelected = createMemo(() => {
+		const s = state();
+		const p = props();
+		return s.isSelected(p.key);
+	});
+	const isDisabled = createMemo(() => {
+		const s = state();
+		const p = props();
+		return s.isDisabled(p.key);
+	});
+	const isFocused = createMemo(() => {
+		const s = state();
+		const p = props();
+		return s.focusedKey === p.key;
+	});
+	const onClick = (e) => {
+		const s = state();
+		const p = props();
+		if (isDisabled()) return;
+		const onRowAction = getGridData(s)?.actions.onRowAction;
+		if (s.selectionMode !== "none") if (e.shiftKey && s.selectionMode === "multiple") s.extendSelection(p.key);
+		else if (e.ctrlKey || e.metaKey) s.toggleSelection(p.key);
+		else s.replaceSelection(p.key);
+		if (onRowAction) onRowAction(p.key);
+		if (p.onAction) p.onAction();
+	};
+	const onKeyDown = (e) => {
+		const s = state();
+		const p = props();
+		if (isDisabled()) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			const onRowAction = getGridData(s)?.actions.onRowAction;
+			if (s.selectionMode !== "none") s.toggleSelection(p.key);
+			if (onRowAction) onRowAction(p.key);
+			if (p.onAction) p.onAction();
+		}
+	};
+	const onFocus = () => {
+		const s = state();
+		const p = props();
+		s.setFocusedKey(p.key);
+	};
+	const onPointerDown = () => {
+		setIsPressed(true);
+	};
+	const onPointerUp = () => {
+		setIsPressed(false);
+	};
+	const rowProps = createMemo(() => {
+		const s = state();
+		const p = props();
+		const baseProps = {
+			role: "row",
+			"aria-selected": s.selectionMode !== "none" ? isSelected() : void 0,
+			"aria-disabled": isDisabled() || void 0,
+			tabIndex: isFocused() ? 0 : -1,
+			onClick,
+			onKeyDown,
+			onFocus,
+			onPointerDown,
+			onPointerUp
+		};
+		if (p.isVirtualized && p.index != null) baseProps["aria-rowindex"] = p.index + 1;
+		return baseProps;
+	});
+	return {
+		get rowProps() {
+			return rowProps();
+		},
+		get isSelected() {
+			return isSelected();
+		},
+		get isDisabled() {
+			return isDisabled();
+		},
+		get isPressed() {
+			return isPressed();
+		}
+	};
+}
+//#endregion
+//#region src/grid/createGridCell.ts
+/**
+* createGridCell - Provides accessibility for a grid cell.
+* Based on @react-aria/grid/useGridCell.
+*/
+/**
+* Creates accessibility props for a grid cell.
+*/
+function createGridCell(props, state, _ref) {
+	const [isPressed, setIsPressed] = createSignal(false);
+	const isSelected = createMemo(() => {
+		const s = state();
+		const p = props();
+		const node = s.collection.getItem(p.key);
+		if (node?.parentKey != null) return s.isSelected(node.parentKey);
+		return false;
+	});
+	const isDisabled = createMemo(() => {
+		const s = state();
+		const p = props();
+		const node = s.collection.getItem(p.key);
+		if (node?.parentKey != null) return s.isDisabled(node.parentKey);
+		return false;
+	});
+	const isFocused = createMemo(() => {
+		const s = state();
+		const p = props();
+		return s.focusedKey === p.key;
+	});
+	const onClick = (e) => {
+		const s = state();
+		const p = props();
+		if (isDisabled()) return;
+		const onCellAction = getGridData(s)?.actions.onCellAction;
+		const rowKey = s.collection.getItem(p.key)?.parentKey;
+		if (rowKey != null && s.selectionMode !== "none") if (e.shiftKey && s.selectionMode === "multiple") s.extendSelection(rowKey);
+		else if (e.ctrlKey || e.metaKey) s.toggleSelection(rowKey);
+		else s.replaceSelection(rowKey);
+		if (onCellAction) onCellAction(p.key);
+		if (p.onAction) p.onAction();
+	};
+	const onKeyDown = (e) => {
+		const s = state();
+		const p = props();
+		if (isDisabled()) return;
+		if (e.key === "Enter" || e.key === " ") {
+			const onCellAction = getGridData(s)?.actions.onCellAction;
+			if (onCellAction || p.onAction) {
+				e.preventDefault();
+				if (onCellAction) onCellAction(p.key);
+				if (p.onAction) p.onAction();
+			}
+		}
+	};
+	const onFocus = () => {
+		const s = state();
+		const p = props();
+		s.setFocusedKey(p.key);
+	};
+	const onPointerDown = () => {
+		setIsPressed(true);
+	};
+	const onPointerUp = () => {
+		setIsPressed(false);
+	};
+	const cellProps = createMemo(() => {
+		const s = state();
+		const p = props();
+		const node = s.collection.getItem(p.key);
+		let role = "gridcell";
+		if (node?.type === "rowheader") role = "rowheader";
+		else if (node?.type === "column") role = "columnheader";
+		const baseProps = {
+			role,
+			"aria-disabled": isDisabled() || void 0,
+			"aria-selected": s.selectionMode !== "none" ? isSelected() : void 0,
+			tabIndex: isFocused() ? 0 : -1,
+			onClick,
+			onKeyDown,
+			onFocus,
+			onPointerDown,
+			onPointerUp
+		};
+		if (p.isVirtualized && node?.column != null) baseProps["aria-colindex"] = node.column + 1;
+		if (node?.colspan != null && node.colspan > 1) baseProps["aria-colspan"] = node.colspan;
+		return baseProps;
+	});
+	return {
+		get cellProps() {
+			return cellProps();
+		},
+		get isSelected() {
+			return isSelected();
+		},
+		get isDisabled() {
+			return isDisabled();
+		},
+		get isPressed() {
+			return isPressed();
+		},
+		get isFocused() {
+			return isFocused();
+		}
+	};
+}
+//#endregion
+export { GridKeyboardDelegate as a, getGridData as i, createGridRow as n, createGrid as r, createGridCell as t };
+
+//# sourceMappingURL=grid.js.map