cx 24.8.6 → 24.9.0

package/dist/widgets.css

@@ -833,6 +833,7 @@
 }
 
 .cxe-textfield-left-icon {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -844,7 +845,6 @@
   line-height: 16px;
   opacity: 0.6;
   text-align: center;
-  pointer-events: none;
 }
 .cxe-textfield-left-icon:hover {
   opacity: 1;
@@ -961,6 +961,7 @@
 }
 
 .cxe-numberfield-tool {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -973,7 +974,6 @@
   opacity: 0.6;
   text-align: center;
   cursor: pointer;
-  pointer-events: none;
 }
 .cxe-numberfield-tool:hover {
   opacity: 1;
@@ -992,6 +992,7 @@
 }
 
 .cxe-numberfield-left-icon {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -1003,7 +1004,6 @@
   line-height: 16px;
   opacity: 0.6;
   text-align: center;
-  pointer-events: none;
 }
 .cxe-numberfield-left-icon:hover {
   opacity: 1;
@@ -1030,6 +1030,11 @@
 }
 
 .cxb-calendar {
+  display: inline-block;
+  vertical-align: middle;
+  width: 18em;
+  overflow-y: auto;
+  box-sizing: border-box;
   line-height: 16px;
   padding: 5px;
   border-width: 1px;
@@ -1046,11 +1051,6 @@
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  display: inline-block;
-  vertical-align: middle;
-  width: 18em;
-  overflow-y: auto;
-  box-sizing: border-box;
 }
 .cxb-calendar:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -1078,10 +1078,10 @@
   font-weight: 500;
 }
 .cxb-calendar tbody td {
+  user-select: none;
   font-size: 13px;
   background-color: transparent;
   border-radius: 0;
-  user-select: none;
 }
 .cxb-calendar .cxe-calendar-header {
   font-size: 13px;
@@ -1198,12 +1198,12 @@ th.cxe-calendar-display {
 }
 
 .cxb-lookupfield {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
   cursor: pointer;
   width: 180px;
   font-size: 13px;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
 }
 .cxb-lookupfield.cxs-view-mode {
   line-height: 16px;
@@ -1224,6 +1224,7 @@ th.cxe-calendar-display {
 }
 
 .cxe-lookupfield-input {
+  height: 100%;
   box-sizing: border-box;
   line-height: 16px;
   padding: 5px 24px 5px 5px;
@@ -1241,7 +1242,6 @@ th.cxe-calendar-display {
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  height: 100%;
 }
 .cxe-lookupfield-input:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -1450,10 +1450,10 @@ th.cxe-calendar-display {
   opacity: 1;
 }
 .cxs-disabled > .cxe-lookupfield-tool {
+  border-width: 0;
   background: rgb(235, 235, 228);
   color: rgb(84, 84, 84);
   pointer-events: none;
-  border-width: 0;
 }
 .cxe-lookupfield-left-icon {
   display: block;
@@ -1653,6 +1653,7 @@ th.cxe-calendar-display {
   border-color: transparent;
 }
 .cxb-select .cxe-select-left-icon {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -1664,7 +1665,6 @@ th.cxe-calendar-display {
   line-height: 16px;
   opacity: 0.6;
   text-align: center;
-  pointer-events: none;
 }
 .cxb-select .cxe-select-left-icon:hover {
   opacity: 1;
@@ -1762,6 +1762,7 @@ th.cxe-calendar-display {
 }
 
 .cxe-select-tool {
+  pointer-events: none;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -1774,16 +1775,15 @@ th.cxe-calendar-display {
   opacity: 0.6;
   text-align: center;
   cursor: pointer;
-  pointer-events: none;
 }
 .cxe-select-tool:hover {
   opacity: 1;
 }
 .cxs-disabled > .cxe-select-tool {
+  border-width: 0;
   background: rgb(235, 235, 228);
   color: rgb(84, 84, 84);
   pointer-events: none;
-  border-width: 0;
 }
 .cxe-select-icon {
   display: block;
@@ -1799,11 +1799,11 @@ th.cxe-calendar-display {
 }
 
 .cxb-textarea {
+  line-height: 0;
+  width: 300px;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  line-height: 0;
-  width: 300px;
 }
 .cxb-textarea.cxs-view-mode {
   line-height: normal;
@@ -1814,6 +1814,8 @@ th.cxe-calendar-display {
 }
 
 .cxe-textarea-input {
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
   line-height: normal;
   padding: 5px;
@@ -1831,8 +1833,6 @@ th.cxe-calendar-display {
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  width: 100%;
-  height: 100%;
 }
 .cxe-textarea-input:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -1886,6 +1886,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-checkbox {
+  min-width: 14px;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -1895,7 +1896,6 @@ th.cxe-calendar-display {
   border-style: solid;
   border-color: transparent;
   font-size: 13px;
-  min-width: 14px;
 }
 .cxb-checkbox.cxs-view-mode {
   line-height: 16px;
@@ -1944,6 +1944,12 @@ th.cxe-calendar-display {
 }
 
 .cxe-checkbox-input {
+  width: 14px;
+  height: 14px;
+  top: calc(50% - 7px);
+  left: 0;
+  display: inline-block;
+  position: absolute;
   box-sizing: border-box;
   line-height: 16px;
   padding: 0;
@@ -1962,12 +1968,6 @@ th.cxe-calendar-display {
   -moz-appearance: none;
   -webkit-appearance: none;
   margin: 0 !important;
-  width: 14px;
-  height: 14px;
-  top: calc(50% - 7px);
-  left: 0;
-  display: inline-block;
-  position: absolute;
 }
 .cxe-checkbox-input:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -2001,6 +2001,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-radio {
+  min-width: 14px;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -2010,7 +2011,6 @@ th.cxe-calendar-display {
   border-style: solid;
   border-color: transparent;
   font-size: 13px;
-  min-width: 14px;
 }
 .cxb-radio.cxs-view-mode {
   line-height: 16px;
@@ -2052,6 +2052,14 @@ th.cxe-calendar-display {
 }
 
 .cxe-radio-input {
+  width: 14px;
+  height: 14px;
+  top: calc(50% - 7px);
+  left: 0;
+  display: inline-block;
+  position: absolute;
+  border-radius: 50%;
+  opacity: 1;
   box-sizing: border-box;
   line-height: 16px;
   padding: 0;
@@ -2070,14 +2078,6 @@ th.cxe-calendar-display {
   -moz-appearance: none;
   -webkit-appearance: none;
   margin: 0 !important;
-  width: 14px;
-  height: 14px;
-  top: calc(50% - 7px);
-  left: 0;
-  display: inline-block;
-  position: absolute;
-  border-radius: 50%;
-  opacity: 1;
 }
 .cxe-radio-input:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -2111,6 +2111,8 @@ th.cxe-calendar-display {
 }
 
 .cxb-colorpicker {
+  display: inline-flex;
+  flex-direction: column;
   line-height: 16px;
   padding: 4px;
   border-width: 1px;
@@ -2127,8 +2129,6 @@ th.cxe-calendar-display {
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  display: inline-flex;
-  flex-direction: column;
 }
 @media screen and (min-width: 500px) {
   .cxb-colorpicker {
@@ -2405,6 +2405,11 @@ th.cxe-calendar-display {
   opacity: 1;
 }
 .cxe-colorfield-left-icon {
+  box-sizing: border-box;
+  opacity: 1;
+  background-image: linear-gradient(45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(-45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%), linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
   display: block;
   position: absolute;
   font-size: 16px;
@@ -2417,11 +2422,6 @@ th.cxe-calendar-display {
   opacity: 0.6;
   text-align: center;
   cursor: pointer;
-  background-image: linear-gradient(45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(-45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%), linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%);
-  background-size: 8px 8px;
-  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
-  box-sizing: border-box;
-  opacity: 1;
 }
 .cxe-colorfield-left-icon:hover {
   opacity: 1;
@@ -2449,6 +2449,15 @@ th.cxe-calendar-display {
 }
 
 .cxb-monthpicker {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  min-height: 10em;
+  max-height: 30em;
+  height: 100%;
+  position: relative;
+  width: 23em;
+  overflow-anchor: none;
+  touch-action: pan-y;
   box-sizing: border-box;
   line-height: 16px;
   padding: 5px;
@@ -2466,15 +2475,6 @@ th.cxe-calendar-display {
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  min-height: 10em;
-  max-height: 30em;
-  height: 100%;
-  position: relative;
-  width: 23em;
-  overflow-anchor: none;
-  touch-action: pan-y;
 }
 .cxb-monthpicker:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -2497,14 +2497,17 @@ th.cxe-calendar-display {
   width: 100%;
   font-size: 0.9em;
 }
-.cxb-monthpicker th, .cxb-monthpicker td {
+.cxb-monthpicker th,
+.cxb-monthpicker td {
   border-top: 1px solid rgba(191, 191, 191, 0.5);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.cxb-monthpicker tbody:not(:first-child) tr:first-child th, .cxb-monthpicker tbody:not(:first-child) tr:first-child td {
+.cxb-monthpicker tbody:not(:first-child) tr:first-child th,
+.cxb-monthpicker tbody:not(:first-child) tr:first-child td {
   border-top: 1px solid #bfbfbf;
 }
-.cxb-monthpicker th, .cxb-monthpicker td {
+.cxb-monthpicker th,
+.cxb-monthpicker td {
   text-align: center;
   font-size: smaller;
   font-weight: normal;
@@ -2535,13 +2538,14 @@ th.cxe-calendar-display {
   pointer-events: none;
 }
 .cxb-monthpicker td.cxs-selected {
-  background-color: rgba(123, 190, 255, 0.4);
   border-color: transparent;
+  background-color: rgba(123, 190, 255, 0.4);
 }
 .cxb-monthpicker td.cxs-selected:hover {
   background-color: rgba(123, 190, 255, 0.2);
 }
-.cxb-monthpicker td.cxs-cursor, .cxb-monthpicker th.cxs-cursor {
+.cxb-monthpicker td.cxs-cursor,
+.cxb-monthpicker th.cxs-cursor {
   background-color: rgba(128, 128, 128, 0.1);
   outline: none;
   cursor: pointer;
@@ -2549,7 +2553,8 @@ th.cxe-calendar-display {
 .cxb-monthpicker:focus td.cxs-selected {
   background-color: rgba(123, 190, 255, 0.4);
 }
-.cxb-monthpicker:focus td.cxs-cursor, .cxb-monthpicker:focus th.cxs-cursor {
+.cxb-monthpicker:focus td.cxs-cursor,
+.cxb-monthpicker:focus th.cxs-cursor {
   background-color: rgba(123, 190, 255, 0.3);
   outline: none;
 }
@@ -2857,6 +2862,8 @@ th.cxe-calendar-display {
 }
 
 .cxb-slider {
+  width: 180px;
+  user-select: none;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -2866,8 +2873,6 @@ th.cxe-calendar-display {
   border-style: solid;
   border-color: transparent;
   font-size: 13px;
-  width: 180px;
-  user-select: none;
 }
 .cxb-slider.cxs-view-mode {
   line-height: 16px;
@@ -2968,6 +2973,9 @@ th.cxe-calendar-display {
 }
 
 .cxb-switch {
+  cursor: pointer;
+  min-width: 50px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -2977,9 +2985,6 @@ th.cxe-calendar-display {
   border-style: solid;
   border-color: transparent;
   font-size: 13px;
-  cursor: pointer;
-  min-width: 50px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .cxb-switch.cxs-view-mode {
   line-height: 16px;

package/dist/widgets.js

@@ -141,45 +141,41 @@ import { HtmlElement as HtmlElement$1 } from "cx/widgets";
 import { parseStyle as parseStyle$1 } from "cx/src/util/parseStyle";
 
 function _extends() {
-	_extends = Object.assign
-		? Object.assign.bind()
-		: function (target) {
-				for (var i = 1; i < arguments.length; i++) {
-					var source = arguments[i];
-					for (var key in source) {
-						if (Object.prototype.hasOwnProperty.call(source, key)) {
-							target[key] = source[key];
-						}
+	return (
+		(_extends = Object.assign
+			? Object.assign.bind()
+			: function (n) {
+					for (var e = 1; e < arguments.length; e++) {
+						var t = arguments[e];
+						for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
 					}
-				}
-				return target;
-			};
-	return _extends.apply(this, arguments);
-}
-function _inheritsLoose(subClass, superClass) {
-	subClass.prototype = Object.create(superClass.prototype);
-	subClass.prototype.constructor = subClass;
-	_setPrototypeOf(subClass, superClass);
+					return n;
+				}),
+		_extends.apply(null, arguments)
+	);
 }
-function _setPrototypeOf(o, p) {
-	_setPrototypeOf = Object.setPrototypeOf
-		? Object.setPrototypeOf.bind()
-		: function _setPrototypeOf(o, p) {
-				o.__proto__ = p;
-				return o;
-			};
-	return _setPrototypeOf(o, p);
+function _inheritsLoose(t, o) {
+	(t.prototype = Object.create(o.prototype)), (t.prototype.constructor = t), _setPrototypeOf(t, o);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-	if (source == null) return {};
-	var target = {};
-	for (var key in source) {
-		if (Object.prototype.hasOwnProperty.call(source, key)) {
-			if (excluded.indexOf(key) >= 0) continue;
-			target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+	if (null == r) return {};
+	var t = {};
+	for (var n in r)
+		if ({}.hasOwnProperty.call(r, n)) {
+			if (e.includes(n)) continue;
+			t[n] = r[n];
 		}
-	}
-	return target;
+	return t;
+}
+function _setPrototypeOf(t, e) {
+	return (
+		(_setPrototypeOf = Object.setPrototypeOf
+			? Object.setPrototypeOf.bind()
+			: function (t, e) {
+					return (t.__proto__ = e), t;
+				}),
+		_setPrototypeOf(t, e)
+	);
 }
 
 var impl$1 = false;
@@ -2219,7 +2215,7 @@ function captureMouse2(e, _ref) {
 	}
 	function doubleClick(e) {
 		try {
-			onDblClick(e);
+			onDblClick && onDblClick(e);
 		} finally {
 			tear();
 		}
@@ -2271,16 +2267,16 @@ function captureMouseOrTouch2(e, _ref2) {
 				e.preventDefault();
 			});
 		};
-		var end = function end(e) {
+		var _end = function end(e) {
 			batchUpdates(function () {
 				el.removeEventListener("touchmove", move);
-				el.removeEventListener("touchend", end);
+				el.removeEventListener("touchend", _end);
 				if (onMouseUp) onMouseUp(e);
 				e.preventDefault();
 			});
 		};
 		el.addEventListener("touchmove", move);
-		el.addEventListener("touchend", end);
+		el.addEventListener("touchend", _end);
 		e.stopPropagation();
 	} else
 		captureMouse2(e, {
@@ -2721,7 +2717,7 @@ function notifyDragMove(e, captureData) {
 		}
 		if (scrollY || scrollX) {
 			if (!scrollTimer) {
-				var cb = function cb() {
+				var _cb = function cb() {
 					if (scrollY) {
 						var current = vscrollParent.scrollTop;
 						var next = Math.min(
@@ -2738,9 +2734,9 @@ function notifyDragMove(e, captureData) {
 						); //60 FPS
 						hscrollParent.scrollLeft = _next;
 					}
-					scrollTimer = requestAnimationFrame(cb);
+					scrollTimer = requestAnimationFrame(_cb);
 				};
-				scrollTimer = requestAnimationFrame(cb);
+				scrollTimer = requestAnimationFrame(_cb);
 			}
 		} else {
 			clearScrollTimer();
@@ -4220,7 +4216,7 @@ function getTooltipInstance(e, parentInstance, tooltip, options) {
 	if (
 		tooltipInstance &&
 		(tooltipInstance.widget.relatedElement != target ||
-			tooltipInstance.config != tooltip ||
+			!shallowEquals(tooltipInstance.config, tooltip) ||
 			tooltipInstance.store.store != parentInstance.store)
 	) {
 		if (tooltipInstance.dismissTooltip) tooltipInstance.dismissTooltip();
@@ -4246,6 +4242,7 @@ function getTooltipInstance(e, parentInstance, tooltip, options) {
 		});
 		tooltipInstance = parentInstance.tooltips[name] = parentInstance.getDetachedChild(tooltipWidget, name, store);
 		tooltipInstance.config = tooltip;
+		tooltipInstance.tooltipName = name;
 		if (tooltip.alwaysVisible || tooltip.trackMouse || tooltip.trackMouseX || tooltip.trackMouseY) {
 			tooltipInstance.init(new RenderingContext());
 			tooltipInstance.data = tooltipInstance.dataSelector(store);
@@ -4272,6 +4269,8 @@ function tooltipMouseMove(e, parentInstance, tooltip, options) {
 			dismiss();
 		});
 		instance.dismissTooltip = function () {
+			if (instance.parent.tooltips[instance.tooltipName] === instance)
+				delete instance.parent.tooltips[instance.tooltipName];
 			unsubscribeDismiss();
 			dismiss();
 		};
@@ -4295,7 +4294,9 @@ function tooltipMouseMove(e, parentInstance, tooltip, options) {
 }
 function tooltipMouseLeave(e, parentInstance, tooltip, options) {
 	var instance = getTooltipInstance(e, parentInstance, tooltip, options);
-	if (instance) {
+
+	// do not process leave events twice even if called multiple times
+	if (instance && instance.mouseOverTarget) {
 		instance.mouseOverTarget = false;
 		instance.widget.handleMouseLeavesParent(instance);
 	}
@@ -4872,20 +4873,24 @@ var FlyweightTooltipTracker = /*#__PURE__*/ (function (_Widget) {
 	};
 	_proto.handleMouseMove = function handleMouseMove(e, instance) {
 		if (!this.onGetTooltip) return;
-		if (instance.lastTarget != e.target) {
-			instance.lastTarget = e.target;
-			var tooltip = null;
-			instance.parentEl = closest(e.target, function (element) {
-				tooltip = instance.invoke("onGetTooltip", element, instance);
-				if (tooltip) return true;
+		var parentEl, tooltip;
+		if (instance.lastTarget == e.target) return;
+		instance.lastTarget = e.target;
+		parentEl = closest(e.target, function (element) {
+			tooltip = instance.invoke("onGetTooltip", element, instance);
+			if (tooltip) return true;
+		});
+		if (!parentEl)
+			tooltipMouseLeave$1(e, instance, instance.tooltip, {
+				target: instance.parentEl,
 			});
+		else {
 			instance.tooltip = tooltip;
-		}
-		if (!instance.parentEl) tooltipMouseMove$1(e, instance, null);
-		else
+			instance.parentEl = parentEl;
 			tooltipMouseMove$1(e, instance, instance.tooltip, {
-				target: instance.parentEl,
+				target: parentEl,
 			});
+		}
 	};
 	return FlyweightTooltipTracker;
 })(Widget);
@@ -13885,7 +13890,7 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 	_proto2.scrollTo = function scrollTo() {
 		var _this4 = this;
 		var size = this.props.size;
-		var callback = function callback() {
+		var _callback = function callback() {
 			if (!_this4.scrolling) return;
 			var x = (_this4.index * _this4.state.wheelHeight) / size;
 			var delta = Math.round(x - _this4.scrollEl.scrollTop);
@@ -13897,11 +13902,11 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			delta = Math.abs(delta) / 10;
 			if (delta < 1) delta = 1;
 			_this4.scrollEl.scrollTop += sign * delta;
-			requestAnimationFrame(callback);
+			requestAnimationFrame(_callback);
 		};
 		if (!this.scrolling) {
 			this.scrolling = true;
-			requestAnimationFrame(callback);
+			requestAnimationFrame(_callback);
 		}
 	};
 	return WheelComponent;