cx 26.1.13 → 26.2.0

package/dist/widgets.css

@@ -5067,7 +5067,7 @@ th.cxe-calendar-display {
   left: 0;
   width: 0;
   border-right: 3px solid #bfbfbf;
-  background: rgba(191, 191, 191, 0.15);
+  background: color-mix(in srgb, #bfbfbf 15%, transparent);
   box-sizing: border-box;
 }
 

package/dist/widgets.js

@@ -144,7 +144,6 @@ import {
 	enableFatArrowExpansion,
 } from "cx/data";
 import { jsx as jsx$1, jsxs as jsxs$1 } from "cx/jsx-runtime";
-import RouteMatcher from "route-parser";
 
 function autoFocus(el, component) {
 	let data = component.props.data || component.props.instance.data;
@@ -4537,6 +4536,9 @@ const openContextMenu = (e, content, storeOrInstance, options) => {
 
 class FlyweightTooltipTrackerInstance extends Instance {}
 class FlyweightTooltipTracker extends Widget {
+	constructor(config) {
+		super(config);
+	}
 	initInstance(context, instance) {
 		let handler = (e) => this.handleMouseMove(e, instance);
 		if (typeof document !== "undefined") {
@@ -4619,13 +4621,391 @@ function createHotPromiseWindowFactory(module, factory) {
 	return (options) => result(null, options);
 }
 
+/**
+ * Route Parser - A TypeScript URL routing library
+ * Supports named parameters (:param), splats (*param), and optional segments (())
+ */
+/**
+ * Parse a route specification into tokens
+ */
+function tokenize(spec) {
+	const tokens = [];
+	let i = 0;
+	while (i < spec.length) {
+		const char = spec[i];
+		if (char === ":") {
+			// Named parameter
+			i++;
+			let name = "";
+			while (i < spec.length && /[\w]/.test(spec[i])) {
+				name += spec[i];
+				i++;
+			}
+			if (name) {
+				tokens.push({
+					type: "param",
+					value: name,
+				});
+			}
+		} else if (char === "*") {
+			// Splat parameter
+			i++;
+			let name = "";
+			while (i < spec.length && /[\w]/.test(spec[i])) {
+				name += spec[i];
+				i++;
+			}
+			if (name) {
+				tokens.push({
+					type: "splat",
+					value: name,
+				});
+			}
+		} else if (char === "(") {
+			// Optional segment - find matching closing paren
+			i++;
+			let depth = 1;
+			let optionalContent = "";
+			while (i < spec.length && depth > 0) {
+				if (spec[i] === "(") depth++;
+				else if (spec[i] === ")") depth--;
+				if (depth > 0) {
+					optionalContent += spec[i];
+				}
+				i++;
+			}
+			// Recursively parse the optional content
+			const children = tokenize(optionalContent);
+			tokens.push({
+				type: "optional",
+				value: optionalContent,
+				children,
+			});
+		} else if (char === "?" || char === "&") {
+			// Query separator - mark it specially
+			tokens.push({
+				type: "querySeparator",
+				value: char,
+			});
+			i++;
+		} else {
+			// Static text - consume until we hit a special character
+			let text = "";
+			while (i < spec.length && !":*()&?".includes(spec[i])) {
+				text += spec[i];
+				i++;
+			}
+			if (text) {
+				tokens.push({
+					type: "static",
+					value: text,
+				});
+			}
+		}
+	}
+	return tokens;
+}
+/**
+ * Check if tokens contain any query-related content (? or &)
+ */
+function hasQueryTokens(tokens) {
+	for (const token of tokens) {
+		if (token.type === "querySeparator") return true;
+		if (token.type === "optional" && token.children && hasQueryTokens(token.children)) return true;
+	}
+	return false;
+}
+/**
+ * Extract query parameter definitions from tokens
+ */
+function extractQueryParams(tokens, optional = false) {
+	const params = [];
+	for (let i = 0; i < tokens.length; i++) {
+		const token = tokens[i];
+		if (token.type === "param") {
+			// Look back for the key name (e.g., 'page=' before ':page')
+			let key = token.value; // Default to param name
+			if (i > 0) {
+				const prevToken = tokens[i - 1];
+				if (prevToken.type === "static" && prevToken.value.endsWith("=")) {
+					// Extract key from "key="
+					const match = prevToken.value.match(/([^=&?]+)=$/);
+					if (match) {
+						key = match[1];
+					}
+				}
+			}
+			params.push({
+				name: token.value,
+				key,
+				optional,
+			});
+		} else if (token.type === "optional" && token.children) {
+			// Recursively extract from optional segments
+			params.push(...extractQueryParams(token.children, true));
+		}
+	}
+	return params;
+}
+/**
+ * Split tokens into path tokens and query tokens
+ */
+function splitPathAndQuery(tokens) {
+	const pathTokens = [];
+	const queryTokens = [];
+	let inQuery = false;
+	for (const token of tokens) {
+		if (token.type === "querySeparator" && token.value === "?") {
+			inQuery = true;
+			queryTokens.push(token);
+		} else if (inQuery) {
+			queryTokens.push(token);
+		} else if (token.type === "optional" && token.children) {
+			// Check if this optional contains query content
+			if (hasQueryTokens(token.children)) {
+				// This optional is part of query
+				queryTokens.push(token);
+				inQuery = true; // After query optional, we're in query mode
+			} else {
+				pathTokens.push(token);
+			}
+		} else {
+			pathTokens.push(token);
+		}
+	}
+	return {
+		pathTokens,
+		queryTokens,
+	};
+}
+/**
+ * Escape special regex characters in a string
+ */
+function escapeRegex(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+/**
+ * Build a regex pattern from path tokens only (no query handling)
+ */
+function buildPathRegex(tokens) {
+	let pattern = "";
+	const paramNames = [];
+	for (const token of tokens) {
+		switch (token.type) {
+			case "static":
+				pattern += escapeRegex(token.value);
+				break;
+			case "param":
+				// Named parameter matches one path segment (no slashes)
+				pattern += "([^/]+)";
+				paramNames.push(token.value);
+				break;
+			case "splat":
+				// Splat matches any characters including slashes (non-greedy within constraints)
+				pattern += "(.+?)";
+				paramNames.push(token.value);
+				break;
+			case "optional":
+				// Optional segment - recursively build and wrap in optional group
+				if (token.children) {
+					const { pattern: childPattern, paramNames: childNames } = buildPathRegex(token.children);
+					pattern += `(?:${childPattern})?`;
+					paramNames.push(...childNames);
+				}
+				break;
+		}
+	}
+	return {
+		pattern,
+		paramNames,
+	};
+}
+/**
+ * Parse a query string into key-value pairs
+ */
+function parseQueryString(queryString) {
+	const params = new Map();
+	if (!queryString) return params;
+	// Remove leading ? if present
+	const qs = queryString.startsWith("?") ? queryString.slice(1) : queryString;
+	if (!qs) return params;
+	for (const pair of qs.split("&")) {
+		const [key, value] = pair.split("=");
+		if (key) {
+			params.set(key, value || "");
+		}
+	}
+	return params;
+}
+/**
+ * Attempt to reverse a route with given parameters
+ */
+function reverseTokens(tokens, params, isFirstQueryParam) {
+	let result = "";
+	for (const token of tokens) {
+		switch (token.type) {
+			case "static":
+				result += token.value;
+				break;
+			case "param":
+			case "splat": {
+				const value = params[token.value];
+				if (value === undefined || value === null || value === "") {
+					return false;
+				}
+				result += String(value);
+				break;
+			}
+			case "querySeparator":
+				// For reverse, we handle ? and & smartly
+				if (token.value === "?") {
+					if (isFirstQueryParam.value) {
+						result += "?";
+						isFirstQueryParam.value = false;
+					} else {
+						result += "&";
+					}
+				} else if (token.value === "&") {
+					if (isFirstQueryParam.value) {
+						result += "?";
+						isFirstQueryParam.value = false;
+					} else {
+						result += "&";
+					}
+				}
+				break;
+			case "optional":
+				if (token.children) {
+					// Try to fill the optional segment
+					const optionalResult = reverseTokens(token.children, params, isFirstQueryParam);
+					if (optionalResult !== false) {
+						result += optionalResult;
+					}
+					// If it fails, just skip the optional part (don't return false)
+				}
+				break;
+		}
+	}
+	return result;
+}
+/**
+ * RouteParser class
+ */
+class RouteParser {
+	spec;
+	tokens;
+	pathRegex;
+	pathParamNames;
+	queryParamDefs;
+	hasQueryInSpec;
+	constructor(spec) {
+		if (!spec) {
+			throw new Error("spec is required");
+		}
+		this.spec = spec;
+		this.tokens = tokenize(spec);
+		// Split into path and query parts
+		const { pathTokens, queryTokens } = splitPathAndQuery(this.tokens);
+		// Build regex for path part only
+		const { pattern, paramNames } = buildPathRegex(pathTokens);
+		this.pathRegex = new RegExp(`^${pattern}(?:\\?.*)?$`);
+		this.pathParamNames = paramNames;
+		// Extract query parameter definitions
+		this.queryParamDefs = extractQueryParams(queryTokens);
+		this.hasQueryInSpec = queryTokens.length > 0;
+	}
+	/**
+	 * Match a path against this route
+	 * Returns params object on match, false otherwise
+	 */
+	match(path) {
+		// Split path into pathname and query string
+		const queryIndex = path.indexOf("?");
+		const pathname = queryIndex >= 0 ? path.slice(0, queryIndex) : path;
+		const queryString = queryIndex >= 0 ? path.slice(queryIndex + 1) : "";
+		// Match only the pathname part (not query string) to avoid capturing ? in params
+		const match = this.pathRegex.exec(pathname);
+		if (!match) {
+			return false;
+		}
+		const params = {};
+		// Extract path parameters
+		for (let i = 0; i < this.pathParamNames.length; i++) {
+			params[this.pathParamNames[i]] = match[i + 1];
+		}
+		// If route has query params in spec, match them from URL's query string
+		if (this.hasQueryInSpec) {
+			const urlQueryParams = parseQueryString(queryString);
+			for (const paramDef of this.queryParamDefs) {
+				const value = urlQueryParams.get(paramDef.key);
+				if (value !== undefined) {
+					params[paramDef.name] = value;
+				} else if (paramDef.optional) {
+					params[paramDef.name] = undefined;
+				} else {
+					// Required query param not found
+					return false;
+				}
+			}
+		}
+		return params;
+	}
+	/**
+	 * Reverse the route with given parameters
+	 * Returns the path string on success, false otherwise
+	 */
+	reverse(params = {}) {
+		// Check if required (non-optional) params can be fulfilled
+		if (!this.canFulfillRequired(this.tokens, params)) {
+			return false;
+		}
+		const isFirstQueryParam = {
+			value: true,
+		};
+		return reverseTokens(this.tokens, params, isFirstQueryParam);
+	}
+	/**
+	 * Check if required params (non-optional) can be fulfilled
+	 */
+	canFulfillRequired(tokens, params) {
+		for (const token of tokens) {
+			if (token.type === "param" || token.type === "splat") {
+				const value = params[token.value];
+				if (value === undefined || value === null || value === "") {
+					return false;
+				}
+			}
+			// Optional segments don't need to be checked at top level
+		}
+		return true;
+	}
+}
+// Export a wrapper that supports both calling conventions
+const Route$1 = function (spec) {
+	if (!(this instanceof Route$1)) {
+		return new Route$1(spec);
+	}
+	if (!spec) {
+		throw new Error("spec is required");
+	}
+	const parser = new RouteParser(spec);
+	// Copy properties to this instance
+	this.spec = parser.spec;
+	this.match = parser.match.bind(parser);
+	this.reverse = parser.reverse.bind(parser);
+	return this;
+};
+// Ensure prototype chain works for instanceof
+Route$1.prototype = Object.create(Object.prototype);
+Route$1.prototype.constructor = Route$1;
+
 // Base class for extending with custom Config types
 class RouteBase extends PureContainerBase {
 	init() {
 		if (this.path) this.route = this.path;
 		super.init();
 		if (this.route && this.route[0] !== "+")
-			this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
+			this.matcher = new Route$1(this.route + (this.prefix ? "(*remainder)" : ""));
 	}
 	initInstance(context, instance) {
 		instance.store = new ReadOnlyDataView({
@@ -4650,7 +5030,7 @@ class RouteBase extends PureContainerBase {
 			if (this.route[0] === "+") {
 				route = routeAppend(context.lastRoute.route, this.route.substring(1));
 				if (!instance.cached.matcher || instance.cached.route !== route)
-					instance.cached.matcher = new RouteMatcher(route + (this.prefix ? "(*remainder)" : ""));
+					instance.cached.matcher = new Route$1(route + (this.prefix ? "(*remainder)" : ""));
 				matcher = instance.cached.matcher;
 			}
 			instance.cached.result = matcher.match(data.url);
@@ -14071,6 +14451,13 @@ class GridRowComponent extends VDOM.Component {
 	}
 }
 
+class GridInstance extends Instance {
+	resetColumnWidths() {
+		this.setState({
+			colWidth: {},
+		});
+	}
+}
 class Grid extends ContainerBase {
 	constructor(config) {
 		super(config);
@@ -14128,6 +14515,9 @@ class Grid extends ContainerBase {
 		if (this.focusable == null) this.focusable = !this.selection.isDummy || this.cellEditable;
 		super.init();
 	}
+	createInstance(key, parent, parentStore) {
+		return new GridInstance(this, key, parent, parentStore);
+	}
 	initState(context, instance) {
 		instance.state = {
 			colWidth: {},
@@ -16353,7 +16743,7 @@ class GridComponent extends VDOM.Component {
 					if (dstTableBody) {
 						let srcTableBody = this.dom.table.lastElementChild;
 						copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
-						let scrollColumnEl = dstTableBody.firstElementChild?.firstElementChild;
+						let scrollColumnEl = dstTableBody.firstElementChild?.lastElementChild;
 						if (scrollColumnEl) scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
 						this.dom.fixedFooter.style.display = "block";
 						footerHeight = this.dom.fixedFooter.offsetHeight;
@@ -17793,6 +18183,7 @@ export {
 	FlyweightTooltipTracker,
 	FlyweightTooltipTrackerInstance,
 	Grid,
+	GridInstance,
 	GridRow,
 	GridRowComponent,
 	GridRowLine,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.1.13",
+  "version": "26.2.0",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {
@@ -70,7 +70,7 @@
   "dependencies": {
     "@types/route-parser": "^0.1.7",
     "intl-io": "^0.4.4",
-    "route-parser": "^0.0.5"
+    "route-parser-ts": "^1.1.0"
   },
   "peerDependencies": {
     "@types/react": ">=18",