cx 26.4.1 → 26.4.3

package/dist/widgets.css

@@ -4319,6 +4319,7 @@ th.cxe-calendar-display {
   display: block;
   left: -10000px;
   top: -10000px;
+  --cx-scss-dropdown-arrow-offset: var(--cx-js-dropdown-arrow-offset, 16px);
   color: #373a3c;
   background-color: white;
   border-radius: 0;
@@ -4406,18 +4407,18 @@ th.cxe-calendar-display {
 
 .cxs-place-right-down > .cxe-dropdown-arrow-fill,
 .cxs-place-left-down > .cxe-dropdown-arrow-fill {
-  top: 16px;
+  top: var(--cx-scss-dropdown-arrow-offset);
 }
 
 .cxs-place-right-down > .cxe-dropdown-arrow-border,
 .cxs-place-left-down > .cxe-dropdown-arrow-border {
-  top: 16px;
+  top: var(--cx-scss-dropdown-arrow-offset);
 }
 
 .cxs-place-right-up > .cxe-dropdown-arrow-fill, .cxs-place-right-up > .cxe-dropdown-arrow-border,
 .cxs-place-left-up > .cxe-dropdown-arrow-fill,
 .cxs-place-left-up > .cxe-dropdown-arrow-border {
-  top: calc(100% + -16px);
+  top: calc(100% - var(--cx-scss-dropdown-arrow-offset));
 }
 
 .cxs-place-up > .cxe-dropdown-arrow-fill,
@@ -4459,17 +4460,17 @@ th.cxe-calendar-display {
 .cxs-place-down-right > .cxe-dropdown-arrow-fill, .cxs-place-down-right > .cxe-dropdown-arrow-border,
 .cxs-place-up-right > .cxe-dropdown-arrow-fill,
 .cxs-place-up-right > .cxe-dropdown-arrow-border {
-  left: 16px;
+  left: var(--cx-scss-dropdown-arrow-offset);
 }
 
 .cxs-place-down-left > .cxe-dropdown-arrow-fill,
 .cxs-place-up-left > .cxe-dropdown-arrow-fill {
-  left: calc(100% + -16px);
+  left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
 }
 
 .cxs-place-down-left > .cxe-dropdown-arrow-border,
 .cxs-place-up-left > .cxe-dropdown-arrow-border {
-  left: calc(100% + -16px);
+  left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
 }
 
 .cxb-window {
@@ -4732,18 +4733,18 @@ th.cxe-calendar-display {
 
 .cxs-place-right-down > .cxe-tooltip-arrow-fill,
 .cxs-place-left-down > .cxe-tooltip-arrow-fill {
-  top: 16px;
+  top: var(--cx-scss-dropdown-arrow-offset);
 }
 
 .cxs-place-right-down > .cxe-tooltip-arrow-border,
 .cxs-place-left-down > .cxe-tooltip-arrow-border {
-  top: 16px;
+  top: var(--cx-scss-dropdown-arrow-offset);
 }
 
 .cxs-place-right-up > .cxe-tooltip-arrow-fill, .cxs-place-right-up > .cxe-tooltip-arrow-border,
 .cxs-place-left-up > .cxe-tooltip-arrow-fill,
 .cxs-place-left-up > .cxe-tooltip-arrow-border {
-  top: calc(100% + -16px);
+  top: calc(100% - var(--cx-scss-dropdown-arrow-offset));
 }
 
 .cxs-place-up > .cxe-tooltip-arrow-fill,
@@ -4785,17 +4786,17 @@ th.cxe-calendar-display {
 .cxs-place-down-right > .cxe-tooltip-arrow-fill, .cxs-place-down-right > .cxe-tooltip-arrow-border,
 .cxs-place-up-right > .cxe-tooltip-arrow-fill,
 .cxs-place-up-right > .cxe-tooltip-arrow-border {
-  left: 16px;
+  left: var(--cx-scss-dropdown-arrow-offset);
 }
 
 .cxs-place-down-left > .cxe-tooltip-arrow-fill,
 .cxs-place-up-left > .cxe-tooltip-arrow-fill {
-  left: calc(100% + -16px);
+  left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
 }
 
 .cxs-place-down-left > .cxe-tooltip-arrow-border,
 .cxs-place-up-left > .cxe-tooltip-arrow-border {
-  left: calc(100% + -16px);
+  left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
 }
 
 @keyframes cx-toast-enter-animation {

package/dist/widgets.js

@@ -2765,13 +2765,17 @@ class OverlayBase extends ContainerBase {
 				},
 				key,
 			);
-		return jsx(OverlayComponent, {
-			beaconEl: null,
-			instance: instance,
-			subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
-			parentEl: context.options.parentEl,
-			children: this.renderContents(context, instance),
-		});
+		return jsx(
+			OverlayComponent,
+			{
+				beaconEl: null,
+				instance: instance,
+				subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
+				parentEl: context.options.parentEl,
+				children: this.renderContents(context, instance),
+			},
+			key,
+		);
 	}
 	renderContents(context, instance) {
 		return this.renderChildren(context, instance);
@@ -3377,6 +3381,15 @@ class DropdownBase extends OverlayBase {
 		instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
 		super.initInstance(context, instance);
 	}
+	prepareData(context, instance) {
+		super.prepareData(context, instance);
+		if (this.arrowOffset != null) {
+			instance.data.style = {
+				...instance.data.style,
+				"--cx-js-dropdown-arrow-offset": `${this.arrowOffset}px`,
+			};
+		}
+	}
 	explore(context, instance) {
 		context.push("lastDropdown", instance);
 		super.explore(context, instance);
@@ -3464,7 +3477,8 @@ class DropdownBase extends OverlayBase {
 		if (this.matchMaxWidth) style.maxWidth = `${parentBounds.right - parentBounds.left}px`;
 		var contentSize = this.measureNaturalDropdownSize(instance, component);
 		var placement = this.findOptimalPlacement(contentSize, parentBounds, data.placement, component.lastPlacement);
-		this.applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, false);
+		var arrowAdjust = this.getArrowAdjust(component);
+		this.applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, false, arrowAdjust);
 		component.setCustomStyle(style);
 		this.setDirectionClass(component, placement);
 		if (this.constrain) {
@@ -3472,7 +3486,7 @@ class DropdownBase extends OverlayBase {
 			let newContentSize = this.measureNaturalDropdownSize(instance, component);
 			if (newContentSize.width != contentSize.width || newContentSize.height != contentSize.height) {
 				let newStyle = {};
-				this.applyPositioningPlacementStyles(newStyle, placement, newContentSize, parentBounds, el, true);
+				this.applyPositioningPlacementStyles(newStyle, placement, newContentSize, parentBounds, el, true, arrowAdjust);
 				component.setCustomStyle(newStyle);
 			}
 		}
@@ -3491,7 +3505,17 @@ class DropdownBase extends OverlayBase {
 			);
 		instance.positionChangeSubscribers.notify();
 	}
-	applyFixedPositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto) {
+	getArrowAdjust(component) {
+		if (!this.alignArrow || !this.arrow) return 0;
+		if (component.cachedArrowOffset != null) return component.cachedArrowOffset;
+		if (!component.el) return 0;
+		let raw = getComputedStyle(component.el).getPropertyValue("--cx-scss-dropdown-arrow-offset").trim();
+		let parsed = parseFloat(raw);
+		if (!isFinite(parsed)) return 0;
+		component.cachedArrowOffset = parsed;
+		return parsed;
+	}
+	applyFixedPositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto, arrowAdjust = 0) {
 		let viewport = getViewportRect(this.screenPadding);
 		style.position = "fixed";
 		if (placement.startsWith("down")) {
@@ -3515,10 +3539,10 @@ class DropdownBase extends OverlayBase {
 				break;
 			case "down-right":
 				style.right = "auto";
-				style.left = `${rel.left}px`;
+				style.left = `${rel.left - arrowAdjust}px`;
 				break;
 			case "down-left":
-				style.right = `${document.documentElement.offsetWidth - rel.right}px`;
+				style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
 				style.left = "auto";
 				break;
 			case "up":
@@ -3528,10 +3552,10 @@ class DropdownBase extends OverlayBase {
 				break;
 			case "up-right":
 				style.right = "auto";
-				style.left = `${rel.left}px`;
+				style.left = `${rel.left - arrowAdjust}px`;
 				break;
 			case "up-left":
-				style.right = `${document.documentElement.offsetWidth - rel.right}px`;
+				style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
 				style.left = "auto";
 				break;
 			case "right":
@@ -3542,7 +3566,7 @@ class DropdownBase extends OverlayBase {
 				style.left = `${rel.right + this.offset}px`;
 				break;
 			case "right-down":
-				style.top = `${rel.top}px`;
+				style.top = `${rel.top - arrowAdjust}px`;
 				style.right = "auto";
 				style.bottom = "auto";
 				style.left = `${rel.right + this.offset}px`;
@@ -3550,7 +3574,7 @@ class DropdownBase extends OverlayBase {
 			case "right-up":
 				style.top = "auto";
 				style.right = "auto";
-				style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
+				style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
 				style.left = `${rel.right + this.offset}px`;
 				break;
 			case "left":
@@ -3561,7 +3585,7 @@ class DropdownBase extends OverlayBase {
 				style.left = "auto";
 				break;
 			case "left-down":
-				style.top = `${rel.top}px`;
+				style.top = `${rel.top - arrowAdjust}px`;
 				style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
 				style.bottom = "auto";
 				style.left = "auto";
@@ -3569,7 +3593,7 @@ class DropdownBase extends OverlayBase {
 			case "left-up":
 				style.top = "auto";
 				style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-				style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
+				style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
 				style.left = "auto";
 				break;
 			case "screen-center":
@@ -3582,7 +3606,7 @@ class DropdownBase extends OverlayBase {
 				break;
 		}
 	}
-	applyAbsolutePositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto) {
+	applyAbsolutePositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto, arrowAdjust = 0) {
 		var viewport = getViewportRect(this.screenPadding);
 		style.position = "absolute";
 		if (placement.startsWith("down")) {
@@ -3608,10 +3632,10 @@ class DropdownBase extends OverlayBase {
 				break;
 			case "down-right":
 				style.right = "auto";
-				style.left = `0`;
+				style.left = `${-arrowAdjust}px`;
 				break;
 			case "down-left":
-				style.right = `0`;
+				style.right = `${-arrowAdjust}px`;
 				style.left = "auto";
 				break;
 			case "up":
@@ -3621,10 +3645,10 @@ class DropdownBase extends OverlayBase {
 				break;
 			case "up-right":
 				style.right = "auto";
-				style.left = `0`;
+				style.left = `${-arrowAdjust}px`;
 				break;
 			case "up-left":
-				style.right = `0`;
+				style.right = `${-arrowAdjust}px`;
 				style.left = "auto";
 				break;
 			case "right":
@@ -3635,7 +3659,7 @@ class DropdownBase extends OverlayBase {
 				style.left = `${rel.right - rel.left + this.offset}px`;
 				break;
 			case "right-down":
-				style.top = `0`;
+				style.top = `${-arrowAdjust}px`;
 				style.right = "auto";
 				style.bottom = "auto";
 				style.left = `${rel.right - rel.left + this.offset}px`;
@@ -3643,7 +3667,7 @@ class DropdownBase extends OverlayBase {
 			case "right-up":
 				style.top = "auto";
 				style.right = "auto";
-				style.bottom = `0`;
+				style.bottom = `${-arrowAdjust}px`;
 				style.left = `${rel.right - rel.left + this.offset}px`;
 				break;
 			case "left":
@@ -3654,7 +3678,7 @@ class DropdownBase extends OverlayBase {
 				style.left = "auto";
 				break;
 			case "left-down":
-				style.top = `0`;
+				style.top = `${-arrowAdjust}px`;
 				style.right = `${rel.right - rel.left + this.offset}px`;
 				style.bottom = "auto";
 				style.left = "auto";
@@ -3662,23 +3686,48 @@ class DropdownBase extends OverlayBase {
 			case "left-up":
 				style.top = "auto";
 				style.right = `${rel.right - rel.left + this.offset}px`;
-				style.bottom = `0`;
+				style.bottom = `${-arrowAdjust}px`;
 				style.left = "auto";
 				break;
 		}
 	}
-	applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto) {
+	applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto, arrowAdjust = 0) {
 		switch (this.positioning) {
 			case "absolute":
-				this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+				this.applyAbsolutePositioningPlacementStyles(
+					style,
+					placement,
+					contentSize,
+					parentBounds,
+					el,
+					noAuto,
+					arrowAdjust,
+				);
 				break;
 			case "auto":
 				if (isTouchDevice())
-					this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-				else this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+					this.applyAbsolutePositioningPlacementStyles(
+						style,
+						placement,
+						contentSize,
+						parentBounds,
+						el,
+						noAuto,
+						arrowAdjust,
+					);
+				else
+					this.applyFixedPositioningPlacementStyles(
+						style,
+						placement,
+						contentSize,
+						parentBounds,
+						el,
+						noAuto,
+						arrowAdjust,
+					);
 				break;
 			default:
-				this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
+				this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto, arrowAdjust);
 				break;
 		}
 	}
@@ -3861,6 +3910,7 @@ DropdownBase.prototype.constrain = false;
 DropdownBase.prototype.positioning = "fixed";
 DropdownBase.prototype.touchFriendly = false;
 DropdownBase.prototype.arrow = false;
+DropdownBase.prototype.alignArrow = false;
 DropdownBase.prototype.pad = false;
 DropdownBase.prototype.elementExplode = 0;
 DropdownBase.prototype.closeOnScrollDistance = 50;
@@ -4590,6 +4640,7 @@ ContextMenu.prototype.offset = 0;
 ContextMenu.prototype.autoFocus = true;
 ContextMenu.prototype.autoFocusFirstChild = false;
 ContextMenu.prototype.focusable = true;
+ContextMenu.prototype.alignArrow = true;
 Localization.registerPrototype("cx/widgets/ContextMenu", ContextMenu);
 const openContextMenu = (e, content, storeOrInstance, options) => {
 	e.preventDefault();
@@ -4788,38 +4839,6 @@ function hasQueryTokens(tokens) {
 	}
 	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
  */
@@ -4858,7 +4877,7 @@ function escapeRegex(str) {
 	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 /**
- * Build a regex pattern from path tokens only (no query handling)
+ * Build a regex pattern from path tokens
  */
 function buildPathRegex(tokens) {
 	let pattern = "";
@@ -4869,17 +4888,14 @@ function buildPathRegex(tokens) {
 				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})?`;
@@ -4893,13 +4909,104 @@ function buildPathRegex(tokens) {
 		paramNames,
 	};
 }
+/**
+ * Build a regex pattern from query tokens.
+ * Handles both key-value patterns (a=:a&b=:b) and structural patterns (auth(*splat)).
+ * Strips leading ? and & query separators from optional children.
+ */
+function buildQueryRegex(tokens) {
+	let pattern = "";
+	const paramNames = [];
+	for (const token of tokens) {
+		switch (token.type) {
+			case "static":
+				pattern += escapeRegex(token.value);
+				break;
+			case "param":
+				pattern += "([^&]+)";
+				paramNames.push(token.value);
+				break;
+			case "splat":
+				pattern += "(.+?)";
+				paramNames.push(token.value);
+				break;
+			case "optional":
+				if (token.children) {
+					// Strip leading query separators (? and &) from optional children
+					let children = token.children;
+					while (children.length > 0 && children[0].type === "querySeparator") {
+						children = children.slice(1);
+					}
+					const { pattern: childPattern, paramNames: childNames } = buildQueryRegex(children);
+					pattern += `(?:${childPattern})?`;
+					paramNames.push(...childNames);
+				}
+				break;
+			case "querySeparator":
+				if (token.value === "&") {
+					pattern += "&";
+				}
+				break;
+		}
+	}
+	return {
+		pattern,
+		paramNames,
+	};
+}
+function extractQueryDefs(tokens, optional = false) {
+	const defs = [];
+	for (let i = 0; i < tokens.length; i++) {
+		const token = tokens[i];
+		if (token.type === "param") {
+			let key = token.value;
+			if (i > 0) {
+				const prevToken = tokens[i - 1];
+				if (prevToken.type === "static" && prevToken.value.endsWith("=")) {
+					const match = prevToken.value.match(/([^=&?]+)=$/);
+					if (match) key = match[1];
+				}
+			}
+			defs.push({
+				key,
+				paramName: token.value,
+				optional,
+			});
+		} else if (token.type === "static") {
+			// Extract fixed key=value pairs (e.g., 'type=bar')
+			for (const part of token.value.split("&")) {
+				const clean = part.replace(/^[?&]/, "");
+				const eqIdx = clean.indexOf("=");
+				if (eqIdx > 0 && clean.length > eqIdx + 1) {
+					defs.push({
+						key: clean.slice(0, eqIdx),
+						fixedValue: clean.slice(eqIdx + 1),
+						optional,
+					});
+				}
+			}
+		} else if (token.type === "optional" && token.children) {
+			defs.push(...extractQueryDefs(token.children, true));
+		}
+	}
+	return defs;
+}
+/**
+ * Check if tokens contain splat parameters (recursively)
+ */
+function hasSplats(tokens) {
+	for (const token of tokens) {
+		if (token.type === "splat") return true;
+		if (token.type === "optional" && token.children && hasSplats(token.children)) return true;
+	}
+	return false;
+}
 /**
  * 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("&")) {
@@ -4969,8 +5076,10 @@ class RouteParser {
 	tokens;
 	pathRegex;
 	pathParamNames;
-	queryParamDefs;
-	hasQueryInSpec;
+	// Query matching: use regex for structural patterns (splats), map-based for key-value patterns
+	queryRegex;
+	queryRegexParamNames;
+	queryDefs;
 	constructor(spec) {
 		if (!spec) {
 			throw new Error("spec is required");
@@ -4983,9 +5092,20 @@ class RouteParser {
 		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;
+		// Query matching setup
+		if (queryTokens.length > 0 && hasSplats(queryTokens)) {
+			// Structural query: use regex
+			const qTokens = queryTokens[0]?.type === "querySeparator" ? queryTokens.slice(1) : queryTokens;
+			const { pattern: qPattern, paramNames: qParamNames } = buildQueryRegex(qTokens);
+			this.queryRegex = new RegExp(`^${qPattern}$`);
+			this.queryRegexParamNames = qParamNames;
+			this.queryDefs = [];
+		} else {
+			// Key-value query: use map-based matching (order-independent)
+			this.queryRegex = null;
+			this.queryRegexParamNames = [];
+			this.queryDefs = extractQueryDefs(queryTokens);
+		}
 	}
 	/**
 	 * Match a path against this route
@@ -4996,7 +5116,6 @@ class RouteParser {
 		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;
@@ -5006,18 +5125,29 @@ class RouteParser {
 		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) {
+		// Structural query matching (splats)
+		if (this.queryRegex) {
+			const qMatch = this.queryRegex.exec(queryString);
+			if (!qMatch) return false;
+			for (let i = 0; i < this.queryRegexParamNames.length; i++) {
+				params[this.queryRegexParamNames[i]] = qMatch[i + 1];
+			}
+		}
+		// Key-value query matching (order-independent)
+		if (this.queryDefs.length > 0) {
 			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;
+			for (const def of this.queryDefs) {
+				if (def.fixedValue !== undefined) {
+					if (urlQueryParams.get(def.key) !== def.fixedValue && !def.optional) return false;
 				} else {
-					// Required query param not found
-					return false;
+					const value = urlQueryParams.get(def.key);
+					if (value !== undefined) {
+						params[def.paramName] = value;
+					} else if (def.optional) {
+						params[def.paramName] = undefined;
+					} else {
+						return false;
+					}
 				}
 			}
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.4.1",
+  "version": "26.4.3",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/charts/shapes.tsx

@@ -35,39 +35,45 @@ export function getAvailableShapes(): string[] {
 }
 
 export function circle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   return <circle {...props} cx={cx} cy={cy} r={size / 2} />;
+   const { key, ...rest } = props ?? {};
+   return <circle key={key} {...rest} cx={cx} cy={cy} r={size / 2} />;
 }
 registerShape("circle", circle);
 
 export function square(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <rect {...props} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
+   const { key, ...rest } = props ?? {};
+   return <rect key={key} {...rest} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
 }
 registerShape("square", square);
 registerShape("rect", square);
 
 export function bar(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <rect {...props} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
+   const { key, ...rest } = props ?? {};
+   return <rect key={key} {...rest} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
 }
 registerShape("bar", bar);
 
 export function column(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <rect {...props} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
+   const { key, ...rest } = props ?? {};
+   return <rect key={key} {...rest} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
 }
 registerShape("column", column);
 
 export function line(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <line {...props} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
+   const { key, ...rest } = props ?? {};
+   return <line key={key} {...rest} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
 }
 registerShape("line", line);
 registerShape("hline", line);
 
 export function vline(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
    size *= 0.9;
-   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
+   const { key, ...rest } = props ?? {};
+   return <line key={key} {...rest} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
 }
 registerShape("vline", vline);
 
@@ -80,7 +86,8 @@ export function triangle(cx: number, cy: number, size: number, props?: Config, o
    d += `L ${cx + (cos * size) / 2} ${cy + (sin * size) / 2} `;
    d += `L ${cx - (cos * size) / 2} ${cy + (sin * size) / 2} `;
    d += `Z`;
-   return <path {...props} d={d} />;
+   const { key, ...rest } = props ?? {};
+   return <path key={key} {...rest} d={d} />;
 }
 
 registerShape("triangle", triangle);