cx 26.6.0 → 26.7.1

package/src/widgets/form/DateTimeField.scss

@@ -1,111 +1,111 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/deep-merge.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-datetimefield(
-   $name: "datetimefield",
-   $input-state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $input-state-style-map, $width: $width, $input: true);
-   }
-
-   $padding: cx-get-state-rule($input-state-style-map, default, "padding");
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input(
-         $besm,
-         $input-state-style-map,
-         $placeholder: $placeholder,
-         $overrides: (
-            default: (
-               padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
-                  cx-bottom($padding)
-                  cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
-            )
-         )
-      );
-   }
-
-   .#{$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}-left-icon {
-      @include cxe-field-button(
-         $besm,
-         cx-deep-map-merge(
-            $left-icon-state-style-map,
-            (
-               default: (
-                  cursor: pointer,
-               ),
-            )
-         )
-      );
-
-      .#{$state}disabled > & {
-         @include cx-add-state-rules($input-state-style-map, disabled);
-         border-width: 0;
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($left-icon-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($left-icon-state-style-map, error);
-      }
-   }
-
-   .#{$element}#{$name}-right-icon {
-      @include cxe-field-button($besm, $right-icon-state-style-map);
-      .#{$state}disabled > & {
-         @include cx-add-state-rules($input-state-style-map, disabled);
-         border-width: 0;
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($right-icon-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($right-icon-state-style-map, error);
-      }
-   }
-
-   .#{$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/DateTimeField")) {
-   @include cx-datetimefield();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-datetimefield(
+   $name: "datetimefield",
+   $input-state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $input-state-style-map, $width: $width, $input: true);
+   }
+
+   $padding: cx-get-state-rule($input-state-style-map, default, "padding");
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input(
+         $besm,
+         $input-state-style-map,
+         $placeholder: $placeholder,
+         $overrides: (
+            default: (
+               padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
+                  cx-bottom($padding)
+                  cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
+            )
+         )
+      );
+   }
+
+   .#{$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}-left-icon {
+      @include cxe-field-button(
+         $besm,
+         cx-deep-map-merge(
+            $left-icon-state-style-map,
+            (
+               default: (
+                  cursor: pointer,
+               ),
+            )
+         )
+      );
+
+      .#{$state}disabled > & {
+         @include cx-add-state-rules($input-state-style-map, disabled);
+         border-width: 0;
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($left-icon-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($left-icon-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-right-icon {
+      @include cxe-field-button($besm, $right-icon-state-style-map);
+      .#{$state}disabled > & {
+         @include cx-add-state-rules($input-state-style-map, disabled);
+         border-width: 0;
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($right-icon-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($right-icon-state-style-map, error);
+      }
+   }
+
+   .#{$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/DateTimeField")) {
+   @include cx-datetimefield();
+}

package/src/widgets/form/LookupField.maps.scss

@@ -1,26 +1,26 @@
-@use "../variables" as *;
-@use "./Field.maps.scss" as *;
-@use "../../util/scss/deep-merge.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-
-$cx-input-tag-state-style-map: (
-   default: (
-      font-size: $cx-default-input-tag-font-size,
-      background-color: $cx-default-input-tag-background-color,
-      padding: $cx-default-input-tag-padding,
-      padding-right: cx-calc($cx-default-clear-size, 2px),
-      border-radius: $cx-default-input-tag-border-radius,
-      border-width: $cx-default-input-tag-border-width,
-      border-style: solid,
-      border-color: $cx-default-input-tag-border-color,
-   ),
-) !default;
-
-$cx-input-tag-clear-state-style-map: cx-deep-map-merge(
-   $cx-clear-state-style-map,
-   (
-      default: (
-         right: cx-multiply($cx-default-input-tag-border-radius, 0.125),
-      ),
-   )
-) !default;
+@use "../variables" as *;
+@use "./Field.maps.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+
+$cx-input-tag-state-style-map: (
+   default: (
+      font-size: $cx-default-input-tag-font-size,
+      background-color: $cx-default-input-tag-background-color,
+      padding: $cx-default-input-tag-padding,
+      padding-right: cx-calc($cx-default-clear-size, 2px),
+      border-radius: $cx-default-input-tag-border-radius,
+      border-width: $cx-default-input-tag-border-width,
+      border-style: solid,
+      border-color: $cx-default-input-tag-border-color,
+   ),
+) !default;
+
+$cx-input-tag-clear-state-style-map: cx-deep-map-merge(
+   $cx-clear-state-style-map,
+   (
+      default: (
+         right: cx-multiply($cx-default-input-tag-border-radius, 0.125),
+      ),
+   )
+) !default;

package/src/widgets/form/MonthField.scss

@@ -1,113 +1,113 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/deep-merge.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-monthfield(
-   $name: "monthfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map, $width: $width);
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $overrides: (
-            default: (
-               padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
-                  cx-bottom($padding)
-                  cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
-            )
-         )
-      );
-   }
-
-   .#{$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}-left-icon {
-      @include cxe-field-button(
-         $besm,
-         cx-deep-map-merge(
-            $left-icon-state-style-map,
-            (
-               default: (
-                  cursor: pointer,
-               ),
-            )
-         )
-      );
-
-      .#{$state}disabled > & {
-         @include cx-add-state-rules($state-style-map, disabled);
-         border-width: 0;
-      }
-
-      .#{$state}focus > & {
-         @include cx-add-state-rules($left-icon-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($left-icon-state-style-map, error);
-      }
-   }
-
-   .#{$element}#{$name}-right-icon {
-      @include cxe-field-button($besm, $right-icon-state-style-map);
-
-      .#{$state}disabled > & {
-         @include cx-add-state-rules($state-style-map, disabled);
-         border-width: 0;
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($right-icon-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($right-icon-state-style-map, error);
-      }
-   }
-
-   .#{$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/MonthField")) {
-   @include cx-monthfield();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-monthfield(
+   $name: "monthfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $state-style-map, $width: $width);
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $overrides: (
+            default: (
+               padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
+                  cx-bottom($padding)
+                  cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
+            )
+         )
+      );
+   }
+
+   .#{$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}-left-icon {
+      @include cxe-field-button(
+         $besm,
+         cx-deep-map-merge(
+            $left-icon-state-style-map,
+            (
+               default: (
+                  cursor: pointer,
+               ),
+            )
+         )
+      );
+
+      .#{$state}disabled > & {
+         @include cx-add-state-rules($state-style-map, disabled);
+         border-width: 0;
+      }
+
+      .#{$state}focus > & {
+         @include cx-add-state-rules($left-icon-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($left-icon-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-right-icon {
+      @include cxe-field-button($besm, $right-icon-state-style-map);
+
+      .#{$state}disabled > & {
+         @include cx-add-state-rules($state-style-map, disabled);
+         border-width: 0;
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($right-icon-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($right-icon-state-style-map, error);
+      }
+   }
+
+   .#{$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/MonthField")) {
+   @include cx-monthfield();
+}

package/src/widgets/form/NumberField.scss

@@ -42,6 +42,10 @@
       .#{$state}icon > & {
          padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
       }
+
+      .#{$state}clear > & {
+         padding-right: cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing);
+      }
    }
 
    .#{$element}#{$name}-tool {

package/src/widgets/form/NumberField.tsx

@@ -312,6 +312,7 @@ class Input extends VDOM.Component<InputProps, InputState> {
             visited: state.visited,
             focus: this.state.focus,
             icon: !!icon,
+            clear: insideButton != null,
             empty: empty && !data.placeholder,
             error:
               data.error &&