cx 26.3.3 → 26.3.5

package/dist/widgets.css

@@ -130,7 +130,8 @@
 
 .cxe-button-baseline {
   display: inline-block;
-  min-width: 16px;
+  width: 1px;
+  margin-left: -1px;
 }
 
 .cxb-button.cxs-icon {
@@ -138,12 +139,7 @@
 }
 
 .cxb-button.cxs-icon.cxs-empty {
-  padding: 5px 5px 5px 5px;
-}
-
-.cxb-button.cxs-icon.cxs-empty .cxe-button-icon {
-  left: 50%;
-  margin-left: -8px;
+  padding: 5px 5px 5px 21px;
 }
 
 .cxb-list {
@@ -2969,7 +2965,8 @@ th.cxe-calendar-display {
 
 .cxe-uploadbutton-baseline {
   display: inline-block;
-  min-width: 16px;
+  width: 1px;
+  margin-left: -1px;
 }
 
 .cxb-uploadbutton.cxs-icon {
@@ -2977,12 +2974,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-uploadbutton.cxs-icon.cxs-empty {
-  padding: 5px 5px 5px 5px;
-}
-
-.cxb-uploadbutton.cxs-icon.cxs-empty .cxe-uploadbutton-icon {
-  left: 50%;
-  margin-left: -8px;
+  padding: 5px 5px 5px 21px;
 }
 
 .cxe-uploadbutton-input {

package/dist/widgets.js

@@ -53,9 +53,6 @@ export {
 	DetachedScope,
 	GroupAdapter,
 	IsolatedScope,
-	LabelsLeftLayout,
-	LabelsTopLayout,
-	LabelsTopLayoutCell,
 	PrivateStore,
 	PureContainer,
 	Repeater,
@@ -3340,13 +3337,13 @@ class OverlayBeacon extends VDOM.Component {
 						display: "none",
 					},
 				}),
-				this.el && this.props.childrenFactory(this.el),
+				this.state?.children,
 			],
 		});
 	}
 	componentDidMount() {
 		this.setState({
-			beaconRendered: true,
+			children: this.props.childrenFactory(this.el),
 		});
 	}
 }
@@ -4255,11 +4252,11 @@ class Window extends OverlayBase {
 	render(context, instance, key) {
 		var header = this.renderHeader(context, instance, "header");
 		var footer = this.renderFooter(context, instance, "footer");
-		return jsx(
-			OverlayBeacon,
-			{
-				childrenFactory: (beaconEl) =>
-					jsx(WindowComponent, {
+		return jsx(OverlayBeacon, {
+			childrenFactory: (beaconEl) =>
+				jsx(
+					WindowComponent,
+					{
 						beaconEl: beaconEl,
 						instance: instance,
 						header: header,
@@ -4267,10 +4264,10 @@ class Window extends OverlayBase {
 						subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
 						parentEl: context.options.parentEl,
 						children: this.renderContents(context, instance),
-					}),
-			},
-			key,
-		);
+					},
+					key,
+				),
+		});
 	}
 }
 Window.prototype.baseClass = "window";
@@ -7933,7 +7930,6 @@ const validationCheck = (date, data, disabledDaysOfWeek) => {
 };
 class CalendarCmp extends VDOM.Component {
 	el = null;
-	unsubscribeWheel;
 	constructor(props) {
 		super(props);
 		let { data } = props.instance;
@@ -8112,9 +8108,7 @@ class CalendarCmp extends VDOM.Component {
 		if (calendarWidget.autoFocus && this.el) this.el.focus();
 		if (this.el) {
 			tooltipParentDidMount$1(this.el, ...getFieldTooltip(this.props.instance));
-			this.unsubscribeWheel = addEventListenerWithOptions(this.el, "wheel", (e) => this.handleWheel(e), {
-				passive: false,
-			});
+			this.el.addEventListener("wheel", (e) => this.handleWheel(e));
 		}
 	}
 	UNSAFE_componentWillReceiveProps(props) {
@@ -8130,7 +8124,6 @@ class CalendarCmp extends VDOM.Component {
 	componentWillUnmount() {
 		offFocusOut(this);
 		tooltipParentWillUnmount$1(this.props.instance);
-		this.unsubscribeWheel?.();
 	}
 	showYearDropdown() {
 		if (this.el && this.el.firstChild) {
@@ -17828,13 +17821,7 @@ class TreeNode extends ContainerBase {
 					jsxs("div", {
 						className: CSS.element(baseClass, "handle"),
 						onClick: (e) => this.toggle(e, instance),
-						onMouseDown:
-							!this.hideIcon && !data.leaf
-								? (e) => {
-										e.stopPropagation();
-										e.preventDefault();
-									}
-								: undefined,
+						onMouseDown: !this.hideIcon ? stopPropagation : undefined,
 						children: [
 							!data.leaf &&
 								!data.hideArrow &&

package/package.json

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

package/src/charts/BarGraph.scss

@@ -1,31 +1,31 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-bar {
-      stroke-width: $cx-default-chart-shape-stroke-width;
-      fill: $cx-default-chart-shape-fill-color;
-      stroke: $cx-default-chart-shape-stroke-color;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: $cx-default-chart-selected-stroke-width;
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/BarGraph")) {
-   @include cx-bargraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-bar {
+      stroke-width: $cx-default-chart-shape-stroke-width;
+      fill: $cx-default-chart-shape-fill-color;
+      stroke: $cx-default-chart-shape-stroke-color;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: $cx-default-chart-selected-stroke-width;
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/BarGraph")) {
+   @include cx-bargraph();
+}

package/src/charts/Legend.scss

@@ -1,57 +1,57 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-legend($name: "legend", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: $cx-default-chart-legend-gap;
-   }
-
-   .#{$block}#{$name}.#{$state}vertical {
-      flex-direction: column;
-   }
-
-   .#{$element}#{$name}-entry {
-      display: flex;
-      align-items: center;
-      padding: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      font-size: $cx-default-chart-legend-font-size;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-legend-shape-color;
-      stroke-width: $cx-default-chart-legend-shape-stroke-width;
-   }
-
-   .#{$element}#{$name}-value {
-      order: 3;
-   }
-
-   .#{$element}#{$name}-entry-text {
-      order: 2;
-   }
-}
-
-@if (cx-should-include("cx/charts/Legend")) {
-   @include cx-legend();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-legend($name: "legend", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: $cx-default-chart-legend-gap;
+   }
+
+   .#{$block}#{$name}.#{$state}vertical {
+      flex-direction: column;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      font-size: $cx-default-chart-legend-font-size;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-legend-shape-color;
+      stroke-width: $cx-default-chart-legend-shape-stroke-width;
+   }
+
+   .#{$element}#{$name}-value {
+      order: 3;
+   }
+
+   .#{$element}#{$name}-entry-text {
+      order: 2;
+   }
+}
+
+@if (cx-should-include("cx/charts/Legend")) {
+   @include cx-legend();
+}

package/src/charts/LegendEntry.scss

@@ -1,35 +1,35 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: inline-flex;
-      align-items: center;
-      padding: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-shape-fill-color;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: inline-flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-shape-fill-color;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}

package/src/charts/LineGraph.scss

@@ -1,28 +1,28 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-linegraph($name: "linegraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-line {
-      stroke: $cx-default-chart-line-stroke-color;
-      stroke-width: $cx-default-chart-line-stroke-width;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: $cx-default-chart-area-opacity;
-   }
-}
-
-@if (cx-should-include("cx/charts/LineGraph")) {
-   @include cx-linegraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-linegraph($name: "linegraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-line {
+      stroke: $cx-default-chart-line-stroke-color;
+      stroke-width: $cx-default-chart-line-stroke-width;
+      fill: none !important;
+   }
+
+   .#{$element}#{$name}-area {
+      stroke-width: 0;
+      opacity: $cx-default-chart-area-opacity;
+   }
+}
+
+@if (cx-should-include("cx/charts/LineGraph")) {
+   @include cx-linegraph();
+}