cx 26.3.8 → 26.3.10

package/dist/widgets.css

@@ -1383,6 +1383,10 @@ th.cxe-calendar-display {
   padding-right: 5px;
 }
 
+.cxb-lookupfield .cxs-icon > .cxe-lookupfield-input > .cxe-lookupfield-tags {
+  margin-left: 0;
+}
+
 .cxe-lookupfield-input {
   box-sizing: border-box;
   line-height: 16px;
@@ -3291,6 +3295,8 @@ th.cxe-calendar-display {
 .cxe-wheel-clip {
   position: relative;
   overflow: hidden;
+  width: fit-content;
+  box-sizing: content-box;
   background: inherit;
   user-select: none;
   background-color: #fff;
@@ -3310,11 +3316,11 @@ th.cxe-calendar-display {
 }
 
 .cxe-wheel-vscroll {
-  width: calc(100% + 20px);
   display: flex;
   overflow-y: auto;
   overflow-x: hidden;
   touch-action: pan-y;
+  scrollbar-width: none;
 }
 
 .cxe-wheel-vscroll::-webkit-scrollbar {
@@ -3412,6 +3418,8 @@ th.cxe-calendar-display {
 .cxe-datetimepicker-wheel-clip {
   position: relative;
   overflow: hidden;
+  width: fit-content;
+  box-sizing: content-box;
   background: inherit;
   user-select: none;
   background-color: #fff;
@@ -3431,11 +3439,11 @@ th.cxe-calendar-display {
 }
 
 .cxe-datetimepicker-wheel-vscroll {
-  width: calc(100% + 20px);
   display: flex;
   overflow-y: auto;
   overflow-x: hidden;
   touch-action: pan-y;
+  scrollbar-width: none;
 }
 
 .cxe-datetimepicker-wheel-vscroll::-webkit-scrollbar {
@@ -3931,7 +3939,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-xsmall-padding.cxs-icon {
-  padding-left: 16px;
+  padding-left: calc(0px + max(1lh, 16px));
 }
 
 .cxb-menuitem.cxs-xsmall-padding.cxs-empty {
@@ -3943,7 +3951,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-xsmall-padding > .cxe-menuitem-button {
-  width: 22px;
+  left: calc(-5px + 0.5lh);
 }
 
 .cxb-menuitem.cxs-small-padding > a, .cxb-menuitem.cxs-small-padding > span {
@@ -3958,7 +3966,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-small-padding.cxs-icon {
-  padding-left: 16px;
+  padding-left: calc(0px + max(1lh, 16px));
 }
 
 .cxb-menuitem.cxs-small-padding.cxs-empty {
@@ -3970,7 +3978,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-small-padding > .cxe-menuitem-button {
-  width: 26px;
+  left: calc(-3px + 0.5lh);
 }
 
 .cxb-menuitem.cxs-medium-padding > a, .cxb-menuitem.cxs-medium-padding > span {
@@ -3985,7 +3993,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-medium-padding.cxs-icon {
-  padding-left: 16px;
+  padding-left: calc(0px + max(1lh, 16px));
 }
 
 .cxb-menuitem.cxs-medium-padding.cxs-empty {
@@ -3997,7 +4005,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-medium-padding > .cxe-menuitem-button {
-  width: 36px;
+  left: calc(2px + 0.5lh);
 }
 
 .cxb-menuitem.cxs-large-padding > a, .cxb-menuitem.cxs-large-padding > span {
@@ -4012,7 +4020,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-large-padding.cxs-icon {
-  padding-left: 16px;
+  padding-left: calc(0px + max(1lh, 16px));
 }
 
 .cxb-menuitem.cxs-large-padding.cxs-empty {
@@ -4024,7 +4032,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-large-padding > .cxe-menuitem-button {
-  width: 46px;
+  left: calc(7px + 0.5lh);
 }
 
 .cxb-menuitem.cxs-xlarge-padding > a, .cxb-menuitem.cxs-xlarge-padding > span {
@@ -4039,7 +4047,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-xlarge-padding.cxs-icon {
-  padding-left: 16px;
+  padding-left: calc(0px + max(1lh, 16px));
 }
 
 .cxb-menuitem.cxs-xlarge-padding.cxs-empty {
@@ -4051,7 +4059,7 @@ th.cxe-calendar-display {
 }
 
 .cxb-menuitem.cxs-xlarge-padding > .cxe-menuitem-button {
-  width: 56px;
+  left: calc(12px + 0.5lh);
 }
 
 .cxe-menuitem-arrow {
@@ -4068,9 +4076,9 @@ th.cxe-calendar-display {
 
 .cxe-menuitem-button {
   position: absolute;
-  left: 0;
   top: 0;
   bottom: 0;
+  width: max(16px, 1lh);
 }
 
 .cxe-menuitem-baseline {

package/dist/widgets.js

@@ -5548,7 +5548,7 @@ let MenuItemComponent$1 = class MenuItemComponent extends VDOM.Component {
 			onFocus: this.onFocus.bind(this),
 			onClick: this.onClick.bind(this),
 			onBlur: this.onBlur.bind(this),
-			children: [children, icon, arrow, dropdown],
+			children: [icon, children, arrow, dropdown],
 		});
 	}
 	componentDidUpdate() {
@@ -13089,9 +13089,6 @@ class WheelComponent extends VDOM.Component {
 			children: [
 				jsxs("div", {
 					className: CSS.element(baseClass, "clip"),
-					style: {
-						width: this.state.wheelWidth,
-					},
 					onMouseDown: onMouseDown,
 					children: [
 						jsx("div", {
@@ -13170,7 +13167,6 @@ class WheelComponent extends VDOM.Component {
 		this.setState(
 			{
 				wheelHeight: this.wheelEl.offsetHeight,
-				wheelWidth: this.wheelEl.offsetWidth,
 			},
 			() => {
 				if (this.state.wheelHeight !== undefined) {

package/package.json

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

package/src/widgets/form/LookupField.scss

@@ -1,228 +1,227 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-lookupfield(
-   $name: "lookupfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $tool-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $tag-state-style-map: $cx-input-tag-state-style-map,
-   $tag-clear-state-style-map: $cx-input-tag-clear-state-style-map,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   $padding: cx-get-state-rule($state-style-map, default, padding);
-   $border-radius-offset: cx-multiply(cx-get-state-rule($tag-state-style-map, default, border-radius), 0.25);
-
-   .#{$block}#{$name} {
-      cursor: pointer;
-      width: $width;
-      font: cx-get-state-rule($state-style-map, default, "font");
-      font-size: cx-get-state-rule($state-style-map, default, "font-size");
-
-      @include cxb-field($besm, $state-style-map, $input: false);
-
-      &.#{$state}multiple {
-         min-width: $cx-default-input-width;
-         width: auto;
-      }
-
-      &.#{$state}readonly {
-         pointer-events: none;
-
-         & > .#{$element}#{$name}-input {
-            padding-right: cx-right($padding);
-         }
-      }
-
-      // &::before {
-      //    content: "\200B";
-      //    pointer-events: none;
-      // }
-   }
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $input: false,
-         $overrides: (
-            default: (
-               width: 100%,
-               display: inline-flex,
-               text-overflow: null,
-               padding: cx-top($padding)
-                  cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-input-tag-spacing) cx-bottom($padding)
-                  cx-left($padding),
-            )
-         )
-      );
-
-      .#{$state}single > & {
-         overflow: hidden;
-         text-overflow: ellipsis;
-         white-space: nowrap;
-         flex-basis: 0%;
-         flex-grow: 1;
-      }
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
-      }
-   }
-
-   .#{$element}#{$name}-tags {
-      display: flex;
-      margin: cx-calc($cx-default-input-tag-spacing, cx-multiply(cx-top($padding), -1))
-         cx-calc($cx-default-input-tag-spacing, cx-multiply(cx-right($padding), -1))
-         cx-calc($cx-default-input-tag-spacing, cx-multiply(cx-bottom($padding), -1))
-         cx-calc($cx-default-input-tag-spacing, cx-multiply(cx-left($padding), -1));
-      align-items: center;
-      flex-wrap: wrap;
-      gap: $cx-default-input-tag-spacing;
-   }
-
-   .#{$element}#{$name}-tag {
-      display: inline-block;
-      position: relative;
-      box-sizing: border-box;
-
-      @include cx-add-state-rules($tag-state-style-map, default);
-
-      &:hover {
-         @include cx-add-state-rules($tag-state-style-map, hover);
-      }
-
-      &.#{$state}readonly {
-         padding-right: cx-right($padding);
-         pointer-events: none;
-      }
-   }
-
-   .#{$element}#{$name}-placeholder {
-      color: $cx-default-input-placeholder-color;
-   }
-
-   .#{$element}#{$name}-tag-value {
-      padding: 0 cx-calc($cx-default-input-tag-spacing, $border-radius-offset);
-      display: inline-block;
-   }
-
-   .#{$element}#{$name}-tag-clear {
-      @include cxe-field-button($besm, $tag-clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-lookup-options {
-      padding: 0;
-      margin: 0;
-      min-width: 100%;
-      width: 100%;
-   }
-
-   .#{$element}#{$name}-query {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $width: calc(100% - 10px),
-         $overrides: (
-            default: (
-               margin: 5px,
-               flex: 0 0 auto,
-               height: auto,
-            )
-         )
-      );
-      //put query field down when placed up
-      .#{$state}place-up-right &,
-      .#{$state}place-up &,
-      .#{$state}place-up-left & {
-         order: 1;
-      }
-   }
-
-   .#{$element}#{$name}-dropdown {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-
-      &:focus {
-         outline: none;
-      }
-   }
-
-   .#{$element}#{$name}-message {
-      font-size: smaller;
-      padding: 10px;
-      color: gray;
-      font-style: italic;
-
-      &.#{$state}error {
-         color: #9e2f2d;
-      }
-   }
-
-   .#{$element}#{$name}-scroll-container {
-      overflow: auto;
-      flex: 1 1 auto;
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-
-      .#{$state}focus > & {
-         @include cx-add-state-rules($clear-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($clear-state-style-map, error);
-      }
-   }
-
-   .#{$element}#{$name}-tool {
-      @include cxe-field-button($besm, $tool-state-style-map);
-
-      .#{$state}disabled > & {
-         border-width: 0;
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($tool-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($tool-state-style-map, error);
-      }
-   }
-
-   .#{$element}#{$name}-left-icon {
-      @include cxe-field-button($besm, $left-icon-state-style-map);
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-}
-
-@if (cx-should-include("cx/widgets/LookupField")) {
-   @include cx-lookupfield();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-lookupfield(
+   $name: "lookupfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $tool-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $tag-state-style-map: $cx-input-tag-state-style-map,
+   $tag-clear-state-style-map: $cx-input-tag-clear-state-style-map,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   $padding: cx-get-state-rule($state-style-map, default, padding);
+   $border-radius-offset: cx-multiply(cx-get-state-rule($tag-state-style-map, default, border-radius), 0.25);
+
+   .#{$block}#{$name} {
+      cursor: pointer;
+      width: $width;
+      font: cx-get-state-rule($state-style-map, default, "font");
+      font-size: cx-get-state-rule($state-style-map, default, "font-size");
+
+      @include cxb-field($besm, $state-style-map, $input: false);
+
+      &.#{$state}multiple {
+         min-width: $cx-default-input-width;
+         width: auto;
+      }
+
+      &.#{$state}readonly {
+         pointer-events: none;
+
+         & > .#{$element}#{$name}-input {
+            padding-right: cx-right($padding);
+         }
+      }
+
+      .#{$state}icon > .#{$element}#{$name}-input > .#{$element}#{$name}-tags {
+         margin-left: 0;
+      }
+   }
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $input: false,
+         $overrides: (
+            default: (
+               width: 100%,
+               display: inline-flex,
+               text-overflow: null,
+               padding: cx-top($padding)
+                  cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-input-tag-spacing) cx-bottom($padding)
+                  cx-left($padding),
+            )
+         )
+      );
+
+      .#{$state}single > & {
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;
+         flex-basis: 0%;
+         flex-grow: 1;
+      }
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
+      }
+   }
+
+   .#{$element}#{$name}-tags {
+      display: flex;
+      margin: cx-calc($cx-default-input-tag-spacing, cx-multiply(cx-top($padding), -1))
+         cx-calc($cx-default-input-tag-spacing, cx-multiply(cx-right($padding), -1))
+         cx-calc($cx-default-input-tag-spacing, cx-multiply(cx-bottom($padding), -1))
+         cx-calc($cx-default-input-tag-spacing, cx-multiply(cx-left($padding), -1));
+      align-items: center;
+      flex-wrap: wrap;
+      gap: $cx-default-input-tag-spacing;
+   }
+
+   .#{$element}#{$name}-tag {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+
+      @include cx-add-state-rules($tag-state-style-map, default);
+
+      &:hover {
+         @include cx-add-state-rules($tag-state-style-map, hover);
+      }
+
+      &.#{$state}readonly {
+         padding-right: cx-right($padding);
+         pointer-events: none;
+      }
+   }
+
+   .#{$element}#{$name}-placeholder {
+      color: $cx-default-input-placeholder-color;
+   }
+
+   .#{$element}#{$name}-tag-value {
+      padding: 0 cx-calc($cx-default-input-tag-spacing, $border-radius-offset);
+      display: inline-block;
+   }
+
+   .#{$element}#{$name}-tag-clear {
+      @include cxe-field-button($besm, $tag-clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-lookup-options {
+      padding: 0;
+      margin: 0;
+      min-width: 100%;
+      width: 100%;
+   }
+
+   .#{$element}#{$name}-query {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $width: calc(100% - 10px),
+         $overrides: (
+            default: (
+               margin: 5px,
+               flex: 0 0 auto,
+               height: auto,
+            )
+         )
+      );
+      //put query field down when placed up
+      .#{$state}place-up-right &,
+      .#{$state}place-up &,
+      .#{$state}place-up-left & {
+         order: 1;
+      }
+   }
+
+   .#{$element}#{$name}-dropdown {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      &:focus {
+         outline: none;
+      }
+   }
+
+   .#{$element}#{$name}-message {
+      font-size: smaller;
+      padding: 10px;
+      color: gray;
+      font-style: italic;
+
+      &.#{$state}error {
+         color: #9e2f2d;
+      }
+   }
+
+   .#{$element}#{$name}-scroll-container {
+      overflow: auto;
+      flex: 1 1 auto;
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+
+      .#{$state}focus > & {
+         @include cx-add-state-rules($clear-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($clear-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-tool {
+      @include cxe-field-button($besm, $tool-state-style-map);
+
+      .#{$state}disabled > & {
+         border-width: 0;
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($tool-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($tool-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      @include cxe-field-button($besm, $left-icon-state-style-map);
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include("cx/widgets/LookupField")) {
+   @include cx-lookupfield();
+}

package/src/widgets/form/Wheel.scss

@@ -31,6 +31,8 @@
    .#{$element}#{$name}-clip {
       position: relative;
       overflow: hidden;
+      width: fit-content;
+      box-sizing: content-box;
       background: inherit;
       user-select: none;
       background-color: $cx-default-wheel-clip-background-color;
@@ -50,11 +52,11 @@
    }
 
    .#{$element}#{$name}-vscroll {
-      width: calc(100% + 20px);
       display: flex;
       overflow-y: auto;
       overflow-x: hidden;
       touch-action: pan-y;
+      scrollbar-width: none;
 
       &::-webkit-scrollbar {
          display: none;
@@ -65,7 +67,7 @@
    }
 
    .#{$element}#{$name}-option {
-      padding: 5px 15px;
+      padding: $cx-default-wheel-option-padding;
       flex: 0 0 auto;
 
       &.cxs-dummy {