cx 26.2.2 → 26.2.3

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

@@ -0,0 +1,36 @@
+@use "../variables" as *;
+@use "./Field.maps.scss" as *;
+@use "../../util/scss/deep-merge" as *;
+@use "../../util/scss/add-rules.scss" as *;
+
+$cx-radio-state-style-map: cx-deep-map-merge(
+   $cx-input-state-style-map,
+   (
+      default: (
+         color: $cx-default-radio-color,
+         background-color: $cx-default-radio-background-color,
+         border-width: $cx-default-radio-border-width,
+         border-color: $cx-default-radio-border-color,
+      ),
+      hover: (),
+      checked: (),
+      checked-focus: (),
+      checked-hover: (),
+      focus: (
+         border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
+         outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
+         box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow),
+      ),
+      disabled: (
+         background: rgb(235, 235, 228),
+         color: rgb(84, 84, 84),
+      ),
+      disabled-checked: (),
+      error: (
+         border-color: rgba(220, 0, 9, 0.8),
+      ),
+      error-focus: (
+         box-shadow: 0 0 2px rgba(220, 0, 9, 0.8),
+      ),
+   )
+) !default;

package/src/widgets/form/Radio.scss

@@ -1,4 +1,14 @@
+@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/calc.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-radio(
    $name: "radio",
@@ -32,7 +42,7 @@
       margin: 0 !important;
       width: $size;
       height: $size;
-      top: calc(50% - #{$size * 0.5});
+      top: calc(50% - #{cx-multiply($size, 0.5)});
       left: 0;
       display: inline-block;
       position: absolute;
@@ -65,7 +75,7 @@
    .#{$element}#{$name}-input {
       width: $size;
       height: $size;
-      top: calc(50% - #{$size * 0.5});
+      top: calc(50% - #{cx-multiply($size, 0.5)});
       left: 0;
       display: inline-block;
       position: absolute;

package/src/widgets/form/Radio.variables.scss

@@ -1,46 +1,7 @@
+@use "../box.scss" as *;
+@use "./Field.variables.scss" as *;
 
 $cx-default-radio-color: currentColor !default;
 $cx-default-radio-background-color: $cx-default-input-background-color !default;
-$cx-default-radio-border-width: cx-get-state-rule($cx-input-state-style-map, default, border-width) !default;
+$cx-default-radio-border-width: $cx-default-box-border-width !default;
 $cx-default-radio-border-color: $cx-default-input-border-color !default;
-
-$cx-radio-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    color: $cx-default-radio-color,
-    background-color: $cx-default-radio-background-color,
-    border-width: $cx-default-radio-border-width,
-    border-color: $cx-default-radio-border-color    
-  ),
-  hover: (
-
-  ),
-  checked: (
-
-  ),
-  checked-focus: (
-   
-  ),
-  checked-hover: (
-  
-  ),
-  focus: (
-    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
-    outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
-    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow)
-  ),
-
-  disabled: (
-    background: rgb(235, 235, 228),
-    color: rgb(84, 84, 84)
-  ),
-  disabled-checked: (
-  
-  ),
-  error: (
-    border-color: rgba(220, 0, 9, 0.8)
-  ),
-
-  error-focus: (
-    box-shadow: 0 0 2px rgba(220, 0, 9, 0.8)
-  )
-)) !default;

package/src/widgets/form/Select.scss

@@ -1,6 +1,13 @@
+@use "sass:math";
 @use "sass:map";
-
-@import "../overlay/Dropdown";
+@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/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
 
 @mixin cx-select(
    $name: "select",
@@ -20,7 +27,12 @@
    $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
+      @include cxb-field(
+         $besm,
+         $state-style-map: $state-style-map,
+         $width: $width,
+         $input: true
+      );
 
       .#{$element}#{$name}-left-icon {
          pointer-events: none;
@@ -36,13 +48,13 @@
          $state-style-map,
          $placeholder: $placeholder,
          $overrides: (
-            padding: cx-top($cx-default-input-padding)
+            padding: $cx-default-input-padding-top
                calc(
-                  #{cx-right($cx-default-input-padding)} + #{$cx-default-clear-size} - #{cx-right(
-                        $cx-default-input-padding
-                     )}
+                  #{$cx-default-input-padding-right} +
+                     #{$cx-default-clear-size} -
+                     #{$cx-default-input-padding-right}
                )
-               cx-bottom($cx-default-input-padding) cx-left($cx-default-input-padding),
+               $cx-default-input-padding-bottom $cx-default-input-padding-left,
             -webkit-appearance: none,
             -moz-appearance: none,
             -ms-appearance: none,
@@ -51,7 +63,11 @@
       );
 
       .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+         padding-left: cx-calc(
+            cx-left($padding),
+            $cx-default-input-left-tool-size,
+            $cx-default-input-left-tool-spacing
+         );
       }
 
       .#{$state}empty > & {

package/src/widgets/form/Slider.scss

@@ -1,5 +1,14 @@
-
+@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/calc.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-slider(
    $name: "slider",
@@ -36,23 +45,23 @@
    .#{$element}#{$name}-axis {
       position: absolute;
       background-color: $axis-background-color;
-      border-radius: $size * 0.5;
+      border-radius: cx-multiply($size, 0.5);
       box-sizing: border-box;
 
       .#{$block}#{$name}.#{$state}horizontal & {
-         left: $size * 0.5;
-         right: $size * 0.5;
-         top: calc(50% - #{$axis-size * 0.5});
+         left: cx-multiply($size, 0.5);
+         right: cx-multiply($size, 0.5);
+         top: calc(50% - #{cx-multiply($axis-size, 0.5)});
          height: $axis-size;
-         padding: 0 $axis-size * 0.5;
+         padding: 0 cx-multiply($axis-size, 0.5);
       }
 
       .#{$block}#{$name}.#{$state}vertical & {
-         top: $size * 0.5;
-         bottom: $size * 0.5;
+         top: cx-multiply($size, 0.5);
+         bottom: cx-multiply($size, 0.5);
          width: $axis-size;
-         left: calc(50% - #{$axis-size * 0.5});
-         padding: $axis-size * 0.5 0;
+         left: calc(50% - #{cx-multiply($axis-size, 0.5)});
+         padding: cx-multiply($axis-size, 0.5) 0;
       }
    }
 
@@ -66,7 +75,7 @@
       position: absolute;
 
       background-color: $range-background-color;
-      border-radius: $axis-size * 0.5;
+      border-radius: cx-multiply($axis-size, 0.5);
 
       .#{$block}#{$name}.#{$state}horizontal & {
          height: 100%;
@@ -82,9 +91,9 @@
       box-sizing: border-box;
       width: $size;
       height: $size;
-      margin-left: -$size * 0.5;
-      margin-top: -$size * 0.5;
-      margin-bottom: -$size * 0.5;
+      margin-left: cx-multiply($size, -0.5);
+      margin-top: cx-multiply($size, -0.5);
+      margin-bottom: cx-multiply($size, -0.5);
       touch-action: none;
 
       @include cx-add-state-rules($styles, default);

package/src/widgets/form/Switch.scss

@@ -1,4 +1,14 @@
+@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-switch(
    $name: "switch",
@@ -60,15 +70,15 @@
       user-select: none;
       position: absolute;
       background-color: $axis-background-color;
-      border-radius: $axis-size * 0.5;
+      border-radius: cx-multiply($axis-size, 0.5);
       box-sizing: border-box;
       width: $width;
 
-      left: $handle-size * 0.5;
-      right: $handle-size * 0.5;
-      top: calc(50% - #{$axis-size * 0.5});
+      left: cx-multiply($handle-size, 0.5);
+      right: cx-multiply($handle-size, 0.5);
+      top: calc(50% - #{cx-multiply($axis-size, 0.5)});
       height: $axis-size;
-      padding: 0 $axis-size * 0.5;
+      padding: 0 cx-multiply($axis-size, 0.5);
    }
 
    .#{$element}#{$name}-space {
@@ -81,7 +91,7 @@
    .#{$element}#{$name}-range {
       position: absolute;
       background-color: $range-background-color;
-      border-radius: $axis-size * 0.5;
+      border-radius: cx-multiply($axis-size, 0.5);
       height: 100%;
       left: 0;
       width: 0;
@@ -102,8 +112,8 @@
       box-sizing: border-box;
       width: $handle-size;
       height: $handle-size;
-      margin-left: -$handle-size * 0.5;
-      margin-top: -$handle-size * 0.5;
+      margin-left: cx-multiply($handle-size, -0.5);
+      margin-top: cx-multiply($handle-size, -0.5);
       left: 0;
       top: 50%;
       transition: left 200ms;

package/src/widgets/form/TextArea.scss

@@ -1,4 +1,12 @@
+@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/include.scss" as *;
+@use "./Field.scss" as *;
 
 @mixin cx-textarea(
    $name: "textarea",
@@ -24,7 +32,12 @@
    .#{$element}#{$name}-input {
       width: 100%;
       height: 100%;
-      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder, $input: false);
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $input: false
+      );
    }
 
    .#{$element}#{$name}-tool {

package/src/widgets/form/TextField.scss

@@ -1,4 +1,13 @@
+@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/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
 
 @mixin cx-textfield(
    $name: "textfield",
@@ -23,14 +32,26 @@
    $padding: cx-get-state-rule($state-style-map, default, "padding");
 
    .#{$element}#{$name}-input {
-      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder
+      );
 
       .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+         padding-left: cx-calc(
+            cx-left($padding),
+            $cx-default-input-left-tool-size,
+            $cx-default-input-left-tool-spacing
+         );
       }
 
       .#{$state}clear > & {
-         padding-right: cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-clear-spacing);
+         padding-right: cx-calc(
+            cx-right($padding),
+            $cx-default-clear-size,
+            $cx-default-clear-spacing
+         );
       }
    }
 

package/src/widgets/form/TextField.tsx

@@ -12,12 +12,6 @@ export interface TextFieldConfig extends FieldConfig {
   /** Default text displayed when the field is empty. */
   placeholder?: StringProp;
 
-  /** Defaults to `false`. Set to `true` to disable the field. */
-  disabled?: BooleanProp;
-
-  /** The opposite of `disabled`. */
-  enabled?: BooleanProp;
-
   /** Defaults to `false`. Used to make the field read-only. */
   readOnly?: BooleanProp;
 
@@ -75,12 +69,6 @@ export interface TextFieldConfig extends FieldConfig {
   /** If `trackFocus` is set, this value will be set when the field receives or loses focus. */
   focused?: BooleanProp;
 
-  /** Callback invoked when the value changes. */
-  onChange?: string | ((value: any, instance: Instance) => void);
-
-  /** Callback invoked on each input event. */
-  onInput?: string | ((value: any, instance: Instance) => void);
-
   /** Callback invoked when the field receives focus. */
   onFocus?: string | ((e: FocusEvent, instance: Instance) => void);
 
@@ -90,7 +78,7 @@ export interface TextFieldConfig extends FieldConfig {
   /** Handler triggered on key down events. Return `false` to prevent default behavior. */
   onKeyDown?:
     | string
-    | ((e: KeyboardEvent, instance: Instance) => boolean | void);
+    | ((e: React.KeyboardEvent, instance: Instance) => boolean | void);
 
   /** Custom validation function. Can return a Promise for async validation. */
   onValidate?:
@@ -98,7 +86,7 @@ export interface TextFieldConfig extends FieldConfig {
     | ((
         value: string,
         instance: Instance,
-        validationParams: any
+        validationParams: any,
       ) => string | undefined | false | Promise<string | undefined | false>);
 }
 
@@ -160,7 +148,7 @@ export class TextField<
         trim: undefined,
         inputType: undefined,
       },
-      ...args
+      ...args,
     );
   }
 
@@ -200,7 +188,7 @@ export class TextField<
         data.error = StringTemplate.format(
           this.minLengthValidationErrorText,
           data.minLength,
-          data.value.length
+          data.value.length,
         );
       else if (
         typeof data.value === "string" &&
@@ -210,7 +198,7 @@ export class TextField<
         data.error = StringTemplate.format(
           this.maxLengthValidationErrorText,
           data.maxLength,
-          data.value.length
+          data.value.length,
         );
     }
   }
@@ -292,7 +280,7 @@ class Input extends VDOM.Component<any, any> {
             error:
               data.error &&
               (state.visited || !suppressErrorsUntilVisited || !empty),
-          })
+          }),
         )}
         style={data.style}
         onMouseDown={stopPropagation}
@@ -304,7 +292,7 @@ class Input extends VDOM.Component<any, any> {
           }}
           className={CSS.expand(
             CSS.element(baseClass, "input"),
-            data.inputClass
+            data.inputClass,
           )}
           defaultValue={data.value}
           id={data.id}
@@ -347,13 +335,13 @@ class Input extends VDOM.Component<any, any> {
   }
 
   onBlur(e: any): void {
+    this.onChange((e.target as any).value, "blur");
     if (this.state.focus) {
       this.setState({
         focus: false,
       });
       this.props.instance.set("focused", false);
     }
-    this.onChange((e.target as any).value, "blur");
   }
 
   onClearClick(_e: any): void {
@@ -424,7 +412,7 @@ class Input extends VDOM.Component<any, any> {
       this.input!,
       tooltip[0],
       tooltip[1],
-      tooltip[2]
+      tooltip[2],
     );
   }
 

package/src/widgets/form/UploadButton.scss

@@ -1,10 +1,17 @@
-
+@use "sass:math";
+@use "../box.scss" as *;
+@use "../../util/scss/add-rules.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 "../Button.variables.scss" as *;
+@use "../Button.maps.scss" as *;
+@use "../Button.scss" as *;
 @use "sass:map";
 
-@import "../Button";
-
 @mixin cx-uploadbutton(
-   $name: 'uploadbutton',
+   $name: "uploadbutton",
    $state-style-map: $cx-button-state-style-map,
    $mods: $cx-button-mods,
    $besm: $cx-besm
@@ -13,7 +20,8 @@
    $element: map.get($besm, element);
    $state: map.get($besm, state);
 
-   @include cx-button($name,
+   @include cx-button(
+      $name,
       $mods: $mods,
       $state-style-map: $state-style-map,
       $besm: $besm
@@ -44,6 +52,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/UploadButton')) {
+@if (cx-should-include("cx/widgets/UploadButton")) {
    @include cx-uploadbutton();
 }

package/src/widgets/form/ValidationError.scss

@@ -1,9 +1,13 @@
 @use "sass:map";
+@use "sass:math";
+@use "../box.scss" as *;
+@use "../../util/scss/add-rules.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 *;
 
-@mixin cx-validationerror(
-   $name: 'uploadbutton',
-   $besm: $cx-besm
-) {
+@mixin cx-validationerror($name: "uploadbutton", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $mod: map.get($besm, mod);
@@ -18,6 +22,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/ValidationError')) {
+@if (cx-should-include("cx/widgets/ValidationError")) {
    @include cx-validationerror();
-}
+}

package/src/widgets/form/Wheel.scss

@@ -1,4 +1,13 @@
+@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/calc.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
 @mixin cx-wheel-elements(
    $name: "wheel",
@@ -74,7 +83,8 @@
       @include cx-add-state-rules($cx-wheel-selection-state-style-map, default);
    }
 
-   .#{$element}#{$name}-container.#{$state}active .#{$element}#{$name}-selection {
+   .#{$element}#{$name}-container.#{$state}active
+      .#{$element}#{$name}-selection {
       @include cx-add-state-rules($cx-wheel-selection-state-style-map, active);
    }
 
@@ -82,7 +92,7 @@
    .#{$element}#{$name}-arrow-down {
       position: absolute;
       left: 50%;
-      margin-left: -($tool-size * 0.5);
+      margin-left: cx-multiply($tool-size, -0.5);
       width: $tool-size;
       height: $tool-size;
       opacity: 0.5;
@@ -106,8 +116,8 @@
       position: absolute;
       left: 50%;
       top: 50%;
-      margin-left: -$icon-size * 0.5;
-      margin-top: -$icon-size * 0.5;
+      margin-left: cx-multiply($icon-size, -0.5);
+      margin-top: cx-multiply($icon-size, -0.5);
       width: $icon-size;
       height: $icon-size;
    }

package/src/widgets/form/index.scss

@@ -1,24 +1,22 @@
-
-@import "Field";
-@import "Label";
-@import "TextField";
-@import "NumberField";
-@import "Calendar";
-@import "LookupField";
-@import "Select";
-@import "TextArea";
-@import "Checkbox";
-@import "Radio";
-@import "ColorPicker";
-@import "ColorField";
-@import "MonthPicker";
-@import "MonthField";
-@import "UploadButton";
-@import "Slider";
-@import "ValidationError";
-@import "Switch";
-@import "HelpText";
-@import "Wheel";
-@import "DateTimePicker";
-@import "DateTimeField";
-
+@use "Field";
+@use "Label";
+@use "TextField";
+@use "NumberField";
+@use "Calendar";
+@use "LookupField";
+@use "Select";
+@use "TextArea";
+@use "Checkbox";
+@use "Radio";
+@use "ColorPicker";
+@use "ColorField";
+@use "MonthPicker";
+@use "MonthField";
+@use "UploadButton";
+@use "Slider";
+@use "ValidationError";
+@use "Switch";
+@use "HelpText";
+@use "Wheel";
+@use "DateTimePicker";
+@use "DateTimeField";