cx 26.4.0 → 26.4.1

package/src/widgets/form/Switch.scss

@@ -1,152 +1,152 @@
-@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",
-   $state-style-map: $cx-input-state-style-map,
-   $styles: $cx-switch-handle-styles,
-   $width: $cx-default-switch-width,
-   $handle-size: $cx-default-switch-handle-size,
-   $axis-size: $cx-default-switch-axis-size,
-   $axis-background-color: $cx-default-switch-axis-background-color,
-   $range-background-color: $cx-default-switch-range-background-color,
-   $empty-text: $cx-empty-text,
-   $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-width: cx-get-state-rule($state-style-map, default, border-width);
-
-   $outer-styles: cx-deep-map-merge(
-      $state-style-map,
-      (
-         default: (
-            border-width: cx-top($border-width) 0 cx-bottom($border-width) 0,
-            padding: cx-top($padding) 0 cx-bottom($padding) 0,
-         ),
-      )
-   );
-
-   .#{$block}#{$name} {
-      cursor: pointer;
-      min-width: cx-calc($width, $handle-size);
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
-
-      &.#{$state}disabled {
-         pointer-events: none;
-         opacity: 0.5;
-      }
-
-      &:focus {
-         outline: none;
-      }
-   }
-
-   .#{$element}#{$name}-text {
-      display: inline-block;
-      margin-left: cx-calc($width, $handle-size);
-      padding: 0 cx-right($padding) 0 cx-left($padding);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-
-   .#{$element}#{$name}-axis {
-      user-select: none;
-      position: absolute;
-      background-color: $axis-background-color;
-      border-radius: cx-multiply($axis-size, 0.5);
-      box-sizing: border-box;
-      width: $width;
-
-      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 cx-multiply($axis-size, 0.5);
-   }
-
-   .#{$element}#{$name}-space {
-      position: relative;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-range {
-      position: absolute;
-      background-color: $range-background-color;
-      border-radius: cx-multiply($axis-size, 0.5);
-      height: 100%;
-      left: 0;
-      width: 0;
-      opacity: 0;
-      transform: scale(0);
-
-      transition: all 200ms;
-
-      .#{$state}on & {
-         width: 100%;
-         opacity: 1;
-         transform: none;
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-      box-sizing: border-box;
-      width: $handle-size;
-      height: $handle-size;
-      margin-left: cx-multiply($handle-size, -0.5);
-      margin-top: cx-multiply($handle-size, -0.5);
-      left: 0;
-      top: 50%;
-      transition: left 200ms;
-
-      @include cx-add-state-rules($styles, default);
-
-      .#{$state}on & {
-         left: 100%;
-         @include cx-add-state-rules($styles, on);
-      }
-
-      .#{$state}on:active & {
-         @include cx-add-state-rules($styles, on-active);
-      }
-
-      &:hover {
-         @include cx-add-state-rules($styles, hover);
-      }
-
-      .#{$block}#{$name}:focus & {
-         @include cx-add-state-rules($styles, focus);
-      }
-
-      .#{$block}#{$name}.#{$state}disabled & {
-         @include cx-add-state-rules($styles, disabled);
-      }
-
-      &:active {
-         @include cx-add-state-rules($styles, active);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Switch")) {
-   @include cx-switch();
-}
+@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",
+   $state-style-map: $cx-input-state-style-map,
+   $styles: $cx-switch-handle-styles,
+   $width: $cx-default-switch-width,
+   $handle-size: $cx-default-switch-handle-size,
+   $axis-size: $cx-default-switch-axis-size,
+   $axis-background-color: $cx-default-switch-axis-background-color,
+   $range-background-color: $cx-default-switch-range-background-color,
+   $empty-text: $cx-empty-text,
+   $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-width: cx-get-state-rule($state-style-map, default, border-width);
+
+   $outer-styles: cx-deep-map-merge(
+      $state-style-map,
+      (
+         default: (
+            border-width: cx-top($border-width) 0 cx-bottom($border-width) 0,
+            padding: cx-top($padding) 0 cx-bottom($padding) 0,
+         ),
+      )
+   );
+
+   .#{$block}#{$name} {
+      cursor: pointer;
+      min-width: cx-calc($width, $handle-size);
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
+
+      &.#{$state}disabled {
+         pointer-events: none;
+         opacity: 0.5;
+      }
+
+      &:focus {
+         outline: none;
+      }
+   }
+
+   .#{$element}#{$name}-text {
+      display: inline-block;
+      margin-left: cx-calc($width, $handle-size);
+      padding: 0 cx-right($padding) 0 cx-left($padding);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+
+   .#{$element}#{$name}-axis {
+      user-select: none;
+      position: absolute;
+      background-color: $axis-background-color;
+      border-radius: cx-multiply($axis-size, 0.5);
+      box-sizing: border-box;
+      width: $width;
+
+      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 cx-multiply($axis-size, 0.5);
+   }
+
+   .#{$element}#{$name}-space {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-range {
+      position: absolute;
+      background-color: $range-background-color;
+      border-radius: cx-multiply($axis-size, 0.5);
+      height: 100%;
+      left: 0;
+      width: 0;
+      opacity: 0;
+      transform: scale(0);
+
+      transition: all 200ms;
+
+      .#{$state}on & {
+         width: 100%;
+         opacity: 1;
+         transform: none;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      box-sizing: border-box;
+      width: $handle-size;
+      height: $handle-size;
+      margin-left: cx-multiply($handle-size, -0.5);
+      margin-top: cx-multiply($handle-size, -0.5);
+      left: 0;
+      top: 50%;
+      transition: left 200ms;
+
+      @include cx-add-state-rules($styles, default);
+
+      .#{$state}on & {
+         left: 100%;
+         @include cx-add-state-rules($styles, on);
+      }
+
+      .#{$state}on:active & {
+         @include cx-add-state-rules($styles, on-active);
+      }
+
+      &:hover {
+         @include cx-add-state-rules($styles, hover);
+      }
+
+      .#{$block}#{$name}:focus & {
+         @include cx-add-state-rules($styles, focus);
+      }
+
+      .#{$block}#{$name}.#{$state}disabled & {
+         @include cx-add-state-rules($styles, disabled);
+      }
+
+      &:active {
+         @include cx-add-state-rules($styles, active);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Switch")) {
+   @include cx-switch();
+}

package/src/widgets/form/Switch.tsx

@@ -1,176 +1,176 @@
-/** @jsxImportSource react */
-import type { RenderingContext } from "../../ui/RenderingContext";
-import type { Instance } from "../../ui/Instance";
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { KeyCode } from "../../util/KeyCode";
-import { parseStyle } from "../../util/parseStyle";
-import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { preventFocus } from "../../ui/FocusManager";
-import { isDefined } from "../../util/isDefined";
-import { BooleanProp, StringProp, StyleProp } from "../../ui/Prop";
-
-export interface SwitchConfig extends FieldConfig {
-   /** Value indicating that switch is on. */
-   on?: BooleanProp;
-
-   /** Value indicating that switch is off. */
-   off?: BooleanProp;
-
-   /** Value indicating that switch is on. */
-   value?: BooleanProp;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: BooleanProp;
-
-   /** Text description. */
-   text?: StringProp;
-
-   /** Style object to be applied on the axis range when the switch is on. */
-   rangeStyle?: StyleProp;
-
-   /** Style object to be applied on the switch handle. */
-   handleStyle?: StyleProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `switch`. */
-   baseClass?: string;
-
-   /** Determines if button should receive focus on mousedown event. Default is `false`. */
-   focusOnMouseDown?: boolean;
-
-   /** Custom validation function. */
-   onValidate?: string | ((value: boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
-}
-
-export class Switch extends Field<SwitchConfig> {
-   declare public on?: unknown;
-   declare public off?: unknown;
-   declare public value?: unknown;
-   declare public rangeStyle?: Record<string, unknown> | string;
-   declare public handleStyle?: Record<string, unknown> | string;
-   declare public focusOnMouseDown?: boolean;
-
-   constructor(config?: SwitchConfig) {
-      super(config);
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(
-         {
-            on: false,
-            off: true,
-            value: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            readOnly: undefined,
-            text: undefined,
-            rangeStyle: {
-               structured: true,
-            },
-            handleStyle: {
-               structured: true,
-            },
-         },
-         ...args,
-      );
-   }
-
-   isEmpty(): boolean {
-      return false;
-   }
-
-   init(): void {
-      if (isDefined(this.value)) this.on = this.value;
-
-      this.rangeStyle = parseStyle(this.rangeStyle);
-      this.handleStyle = parseStyle(this.handleStyle);
-
-      super.init();
-   }
-
-   prepareData(context: RenderingContext, instance: FieldInstance<Switch>): void {
-      let { data } = instance;
-
-      if (isDefined(this.off)) data.on = !data.off;
-
-      data.stateMods = {
-         ...data.stateMods,
-         on: data.on,
-         disabled: data.disabled,
-      };
-      super.prepareData(context, instance);
-   }
-
-   renderInput(context: RenderingContext, instance: FieldInstance, key: string): React.ReactElement {
-      let { data, widget } = instance;
-      let { rangeStyle, handleStyle } = data;
-      let { CSS, baseClass } = this;
-
-      let text = data.text || this.renderChildren(context, instance);
-      let renderTextElement = text?.length != 0;
-
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            id={data.id}
-            tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
-            onMouseDown={(e: React.MouseEvent) => {
-               e.stopPropagation();
-               if (!this.focusOnMouseDown) preventFocus(e);
-            }}
-            onClick={(e: React.MouseEvent) => {
-               this.toggle(e, instance);
-            }}
-            onKeyDown={(e: React.KeyboardEvent) => {
-               const switchWidget = widget as Switch;
-               if (switchWidget.handleKeyDown && switchWidget.handleKeyDown(e, instance) === false) return;
-               if (e.keyCode == KeyCode.space) {
-                  this.toggle(e, instance);
-               }
-            }}
-            onMouseMove={(e: React.MouseEvent) => {
-               const tooltip = getFieldTooltip(instance);
-               if (Array.isArray(tooltip)) {
-                  tooltipMouseMove(e, ...tooltip);
-               }
-            }}
-            onMouseLeave={(e: React.MouseEvent) => {
-               const tooltip = getFieldTooltip(instance);
-               if (Array.isArray(tooltip)) {
-                  tooltipMouseLeave(e, ...tooltip);
-               }
-            }}
-         >
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            &nbsp;
-            <div className={CSS.element(baseClass, "axis")}>
-               <div className={CSS.element(baseClass, "range")} style={parseStyle(rangeStyle)} />
-               <div className={CSS.element(baseClass, "space")}>
-                  <div className={CSS.element(baseClass, "handle")} style={parseStyle(handleStyle)} />
-               </div>
-            </div>
-            {renderTextElement && (
-               <div key="text" className={CSS.element(this.baseClass, "text")}>
-                  {text}
-               </div>
-            )}
-         </div>
-      );
-   }
-
-   toggle(e: React.MouseEvent | React.KeyboardEvent, instance: Instance): void {
-      let { data } = instance;
-      if (data.readOnly || data.disabled) return;
-      instance.set("on", !data.on);
-      instance.set("off", data.on);
-      e.preventDefault();
-      e.stopPropagation();
-   }
-}
-
-Switch.prototype.baseClass = "switch";
-Switch.prototype.focusOnMouseDown = false;
-
-Widget.alias("switch", Switch);
+/** @jsxImportSource react */
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { preventFocus } from "../../ui/FocusManager";
+import { isDefined } from "../../util/isDefined";
+import { BooleanProp, StringProp, StyleProp } from "../../ui/Prop";
+
+export interface SwitchConfig extends FieldConfig {
+   /** Value indicating that switch is on. */
+   on?: BooleanProp;
+
+   /** Value indicating that switch is off. */
+   off?: BooleanProp;
+
+   /** Value indicating that switch is on. */
+   value?: BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: BooleanProp;
+
+   /** Text description. */
+   text?: StringProp;
+
+   /** Style object to be applied on the axis range when the switch is on. */
+   rangeStyle?: StyleProp;
+
+   /** Style object to be applied on the switch handle. */
+   handleStyle?: StyleProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `switch`. */
+   baseClass?: string;
+
+   /** Determines if button should receive focus on mousedown event. Default is `false`. */
+   focusOnMouseDown?: boolean;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Switch extends Field<SwitchConfig> {
+   declare public on?: unknown;
+   declare public off?: unknown;
+   declare public value?: unknown;
+   declare public rangeStyle?: Record<string, unknown> | string;
+   declare public handleStyle?: Record<string, unknown> | string;
+   declare public focusOnMouseDown?: boolean;
+
+   constructor(config?: SwitchConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            on: false,
+            off: true,
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            text: undefined,
+            rangeStyle: {
+               structured: true,
+            },
+            handleStyle: {
+               structured: true,
+            },
+         },
+         ...args,
+      );
+   }
+
+   isEmpty(): boolean {
+      return false;
+   }
+
+   init(): void {
+      if (isDefined(this.value)) this.on = this.value;
+
+      this.rangeStyle = parseStyle(this.rangeStyle);
+      this.handleStyle = parseStyle(this.handleStyle);
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<Switch>): void {
+      let { data } = instance;
+
+      if (isDefined(this.off)) data.on = !data.off;
+
+      data.stateMods = {
+         ...data.stateMods,
+         on: data.on,
+         disabled: data.disabled,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance, key: string): React.ReactElement {
+      let { data, widget } = instance;
+      let { rangeStyle, handleStyle } = data;
+      let { CSS, baseClass } = this;
+
+      let text = data.text || this.renderChildren(context, instance);
+      let renderTextElement = text?.length != 0;
+
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            id={data.id}
+            tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
+            onMouseDown={(e: React.MouseEvent) => {
+               e.stopPropagation();
+               if (!this.focusOnMouseDown) preventFocus(e);
+            }}
+            onClick={(e: React.MouseEvent) => {
+               this.toggle(e, instance);
+            }}
+            onKeyDown={(e: React.KeyboardEvent) => {
+               const switchWidget = widget as Switch;
+               if (switchWidget.handleKeyDown && switchWidget.handleKeyDown(e, instance) === false) return;
+               if (e.keyCode == KeyCode.space) {
+                  this.toggle(e, instance);
+               }
+            }}
+            onMouseMove={(e: React.MouseEvent) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseMove(e, ...tooltip);
+               }
+            }}
+            onMouseLeave={(e: React.MouseEvent) => {
+               const tooltip = getFieldTooltip(instance);
+               if (Array.isArray(tooltip)) {
+                  tooltipMouseLeave(e, ...tooltip);
+               }
+            }}
+         >
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            &nbsp;
+            <div className={CSS.element(baseClass, "axis")}>
+               <div className={CSS.element(baseClass, "range")} style={parseStyle(rangeStyle)} />
+               <div className={CSS.element(baseClass, "space")}>
+                  <div className={CSS.element(baseClass, "handle")} style={parseStyle(handleStyle)} />
+               </div>
+            </div>
+            {renderTextElement && (
+               <div key="text" className={CSS.element(this.baseClass, "text")}>
+                  {text}
+               </div>
+            )}
+         </div>
+      );
+   }
+
+   toggle(e: React.MouseEvent | React.KeyboardEvent, instance: Instance): void {
+      let { data } = instance;
+      if (data.readOnly || data.disabled) return;
+      instance.set("on", !data.on);
+      instance.set("off", data.on);
+      e.preventDefault();
+      e.stopPropagation();
+   }
+}
+
+Switch.prototype.baseClass = "switch";
+Switch.prototype.focusOnMouseDown = false;
+
+Widget.alias("switch", Switch);