cx 26.0.1 → 26.0.3

package/build/widgets/form/Select.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { Field, getFieldTooltip } from "./Field";
+import { tooltipParentWillReceiveProps, tooltipMouseMove, tooltipMouseLeave, tooltipParentDidMount, } from "../overlay/tooltip-ops";
+import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
+import DropdownIcon from "../icons/drop-down";
+import ClearIcon from "../icons/clear";
+import { Localization } from "../../ui/Localization";
+import { isString } from "../../util/isString";
+import { isDefined } from "../../util/isDefined";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+export class Select extends Field {
+    declareData(...args) {
+        super.declareData({
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            required: undefined,
+            placeholder: undefined,
+            icon: undefined,
+        }, ...args);
+    }
+    init() {
+        if (isDefined(this.hideClear))
+            this.showClear = !this.hideClear;
+        if (this.alwaysShowClear)
+            this.showClear = true;
+        super.init();
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(SelectComponent, { instance: instance, multiple: this.multiple, select: (v) => this.select(v, instance), label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")), help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")), icon: this.renderIcon(context, instance, "icon"), children: this.renderChildren(context, instance) }, key));
+    }
+    convert(value) {
+        if (value == this.nullString)
+            return null;
+        if (value == "true")
+            return true;
+        if (value == "false")
+            return false;
+        if (value.match(/^\d+(\.\d+)?$/))
+            return Number(value);
+        return value;
+    }
+    select(value, instance) {
+        let processedValue = value;
+        if (this.convertValues && value != null)
+            processedValue = this.convert(value);
+        instance.set("value", processedValue);
+    }
+    add(item) {
+        if (isString(item))
+            return;
+        super.add(item);
+    }
+}
+Select.prototype.baseClass = "select";
+Select.prototype.multiple = false;
+Select.prototype.convertValues = true;
+Select.prototype.nullString = "";
+Select.prototype.suppressErrorsUntilVisited = true;
+Select.prototype.showClear = true;
+Select.prototype.alwaysShowClear = false;
+Select.prototype.icon = null;
+Widget.alias("select", Select);
+Localization.registerPrototype("cx/widgets/Select", Select);
+class SelectComponent extends VDOM.Component {
+    select = null;
+    constructor(props) {
+        super(props);
+        this.state = {
+            visited: false,
+            focus: false,
+        };
+    }
+    render() {
+        let { multiple, select, instance, label, help, icon: iconVDOM } = this.props;
+        let { data, widget, state } = instance;
+        let { CSS, baseClass } = widget;
+        let icon = iconVDOM && _jsx("div", { className: CSS.element(baseClass, "left-icon"), children: iconVDOM });
+        let insideButton, readOnly = data.disabled || data.readOnly;
+        if (widget.showClear &&
+            !readOnly &&
+            !this.props.multiple &&
+            (widget.alwaysShowClear || !data.required) &&
+            data.placeholder &&
+            !data.empty) {
+            insideButton = (_jsx("div", { onMouseDown: preventDefault, onClick: (e) => this.onClearClick(e), className: CSS.element(baseClass, "clear"), children: _jsx(ClearIcon, { className: CSS.element(baseClass, "icon") }) }));
+        }
+        else {
+            insideButton = (_jsx("div", { className: CSS.element(baseClass, "tool"), children: _jsx(DropdownIcon, { className: CSS.element(baseClass, "icon") }) }));
+        }
+        let placeholder;
+        if (data.placeholder) {
+            placeholder = (_jsx("option", { value: widget.nullString, className: CSS.element(baseClass, "placeholder"), disabled: true, hidden: true, children: data.placeholder }));
+        }
+        return (_jsxs("div", { className: CSS.expand(data.classNames, CSS.state({
+                visited: state.visited,
+                icon: !!iconVDOM,
+                focus: this.state.focus,
+                error: state.visited && data.error,
+                empty: data.empty && !data.placeholder,
+            })), style: data.style, onMouseDown: stopPropagation, onTouchStart: stopPropagation, children: [_jsxs("select", { id: data.id, ref: (el) => {
+                        this.select = el;
+                    }, className: CSS.expand(CSS.element(baseClass, "select"), data.inputClass), style: data.inputStyle, value: data.value == null ? widget.nullString : String(data.value), multiple: multiple, disabled: data.disabled, tabIndex: data.tabIndex, ...data.inputAttrs, onBlur: this.onBlur.bind(this), onFocus: (e) => this.onFocus(), onKeyDown: this.onKeyDown.bind(this), onChange: (e) => {
+                        e.preventDefault();
+                        select(e.target.value);
+                    }, onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(instance)), children: [placeholder, this.props.children] }), insideButton, icon, label, help] }));
+    }
+    onBlur() {
+        this.props.instance.setState({ visited: true });
+        if (this.state.focus)
+            this.setState({
+                focus: false,
+            });
+    }
+    onFocus() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.trackFocus) {
+            this.setState({
+                focus: true,
+            });
+        }
+    }
+    onClearClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        let { instance } = this.props;
+        let { widget } = instance;
+        instance.set("value", widget.emptyValue);
+    }
+    onKeyDown(e) {
+        switch (e.keyCode) {
+            case KeyCode.up:
+            case KeyCode.down:
+                e.stopPropagation();
+                break;
+        }
+    }
+    componentDidMount() {
+        const { select } = this.props;
+        if (this.select) {
+            select(this.select.value);
+            tooltipParentDidMount(this.select, ...getFieldTooltip(this.props.instance));
+            autoFocus(this.select, this);
+        }
+    }
+    componentDidUpdate() {
+        if (this.select) {
+            autoFocus(this.select, this);
+        }
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        if (this.select) {
+            tooltipParentWillReceiveProps(this.select, ...getFieldTooltip(props.instance));
+        }
+    }
+}
+export class Option extends HtmlElement {
+    declareData(...args) {
+        super.declareData({
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            selected: undefined,
+            text: undefined,
+        }, ...args);
+    }
+    prepareData(context, instance) {
+        super.prepareData(context, instance);
+        const { data } = instance;
+        if (!data.empty)
+            data.value = data.value.toString();
+    }
+    render(context, instance, key) {
+        const { data } = instance;
+        return (_jsx("option", { value: data.value, children: data.text || this.renderChildren(context, instance) }, key));
+    }
+}
+Widget.alias("option", Option);

package/build/widgets/form/Slider.d.ts

@@ -0,0 +1,68 @@
+/** @jsxImportSource react */
+import { BooleanProp, NumberProp, StringProp, StructuredProp, StyleProp } from "../../ui/Prop";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { type TooltipConfig } from "../overlay/tooltip-ops";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+export interface SliderConfig extends FieldConfig {
+    /** Low value of the slider range. */
+    from?: NumberProp;
+    /** High value of the slider range. */
+    to?: NumberProp;
+    /** Rounding step. */
+    step?: NumberProp;
+    /** Minimum allowed value. Default is `0`. */
+    minValue?: NumberProp;
+    /** Maximum allowed value. Default is `100`. */
+    maxValue?: NumberProp;
+    /** Style object to be applied on the selected axis range. */
+    rangeStyle?: StyleProp;
+    /** Style object to be applied on the handle. */
+    handleStyle?: StyleProp;
+    /** Minimum allowed value. Default is `0`. */
+    min?: NumberProp;
+    /** Maximum allowed value. Default is `100`. */
+    max?: NumberProp;
+    /** High value of the slider range. */
+    value?: NumberProp;
+    /** Set to `true` to orient the slider vertically. */
+    vertical?: boolean;
+    /** Invert vertical slider behavior. Set this to `true` if you want the slider to go from `top` to `bottom`. */
+    invert?: boolean;
+    /** Range tooltip configuration. */
+    toTooltip?: StringProp | StructuredProp;
+    /** Range tooltip configuration. */
+    valueTooltip?: StringProp | StructuredProp;
+    /** Range tooltip configuration. */
+    fromTooltip?: StringProp | StructuredProp;
+    /** When set to `true`, slider responds to mouse wheel events, while hovering it. It will not work if both `from` and `to` values are used. Default value is `false`. */
+    wheel?: BooleanProp;
+    /** Value increment/decrement, when controlling the slider with mouse wheel. Default value is set to `1%` of range. */
+    increment?: NumberProp;
+    /** Increment percentage. Default value is `0.01` (1%). */
+    incrementPercentage?: number;
+    /** Set to `true` to make the slider read-only. */
+    readOnly?: BooleanProp;
+}
+export declare class Slider extends Field<SliderConfig, FieldInstance<Slider>> {
+    baseClass: string;
+    min?: number;
+    max?: number;
+    minValue: number;
+    maxValue: number;
+    value?: number;
+    vertical: boolean;
+    invert: boolean;
+    from?: number;
+    to?: number;
+    showFrom?: boolean;
+    showTo?: boolean;
+    toTooltip?: TooltipConfig;
+    fromTooltip?: TooltipConfig;
+    valueTooltip?: TooltipConfig;
+    incrementPercentage: number;
+    wheel: boolean;
+    declareData(...args: Record<string, unknown>[]): void;
+    init(): void;
+    prepareData(context: RenderingContext, instance: FieldInstance<Slider>): void;
+    renderInput(context: RenderingContext, instance: FieldInstance<Slider>, key: string): React.ReactNode;
+}

package/build/widgets/form/Slider.js

@@ -0,0 +1,264 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isDefined } from "../../util/isDefined";
+import { isUndefined } from "../../util/isUndefined";
+import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
+import { tooltipMouseLeave, tooltipMouseMove, tooltipParentDidMount, tooltipParentWillReceiveProps, tooltipParentWillUnmount, } from "../overlay/tooltip-ops";
+import { Field, getFieldTooltip } from "./Field";
+export class Slider extends Field {
+    declareData(...args) {
+        super.declareData({
+            from: 0,
+            to: 0,
+            step: undefined,
+            minValue: undefined,
+            maxValue: undefined,
+            increment: undefined,
+            incrementPercentage: undefined,
+            wheel: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            rangeStyle: {
+                structured: true,
+            },
+            handleStyle: {
+                structured: true,
+            },
+            invert: false,
+        }, ...args);
+    }
+    init() {
+        if (isDefined(this.min))
+            this.minValue = this.min;
+        if (isDefined(this.max))
+            this.maxValue = this.max;
+        if (this.value != null)
+            this.to = this.value;
+        if (isUndefined(this.from))
+            this.from = this.minValue;
+        else
+            this.showFrom = true;
+        if (isUndefined(this.to))
+            this.to = this.maxValue;
+        else
+            this.showTo = true;
+        if (this.valueTooltip)
+            this.toTooltip = this.valueTooltip;
+        super.init();
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.stateMods = {
+            ...data.stateMods,
+            horizontal: !this.vertical,
+            vertical: this.vertical,
+            disabled: data.disabled,
+        };
+        super.prepareData(context, instance);
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(SliderComponent, { instance: instance, data: instance.data, label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")) }, key));
+    }
+}
+Slider.prototype.baseClass = "slider";
+Slider.prototype.minValue = 0;
+Slider.prototype.maxValue = 100;
+Slider.prototype.vertical = false;
+Slider.prototype.incrementPercentage = 0.01;
+Slider.prototype.wheel = false;
+Slider.prototype.invert = false;
+Widget.alias("slider", Slider);
+class SliderComponent extends VDOM.Component {
+    dom;
+    unsubscribeOnWheel;
+    constructor(props) {
+        super(props);
+        this.dom = {};
+        let { data } = props;
+        this.state = {
+            from: data.from,
+            to: data.to,
+        };
+    }
+    render() {
+        let { instance, data, label } = this.props;
+        let { widget } = instance;
+        let { CSS, baseClass } = widget;
+        let { minValue, maxValue } = data;
+        let { from, to } = this.state;
+        from = Math.min(maxValue, Math.max(minValue, from));
+        to = Math.min(maxValue, Math.max(minValue, to));
+        let handleStyle = CSS.parseStyle(data.handleStyle);
+        let anchor = widget.vertical ? (widget.invert ? "top" : "bottom") : "left";
+        let rangeStart = from - minValue;
+        let rangeSize = to - from;
+        let fromHandleStyle = {
+            ...handleStyle,
+            [anchor]: `${(100 * (from - minValue)) / (maxValue - minValue)}%`,
+        };
+        let toHandleStyle = {
+            ...handleStyle,
+            [anchor]: `${(100 * (to - minValue)) / (maxValue - minValue)}%`,
+        };
+        let rangeStyle = {
+            ...CSS.parseStyle(data.rangeStyle),
+            [anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
+            [widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
+        };
+        return (_jsxs("div", { className: data.classNames, style: data.style, id: data.id, onClick: (e) => this.onClick(e), ref: (el) => (this.dom.el = el || undefined), onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(instance)), children: [label, "\u00A0", _jsxs("div", { className: CSS.element(baseClass, "axis"), children: [rangeSize > 0 && _jsx("div", { className: CSS.element(baseClass, "range"), style: rangeStyle }, "range"), _jsxs("div", { className: CSS.element(baseClass, "space"), ref: (c) => (this.dom.range = c || undefined), children: [widget.showFrom && (_jsx("div", { className: CSS.element(baseClass, "handle"), tabIndex: data.disabled ? undefined : data.tabIndex || 0, style: fromHandleStyle, onMouseDown: (e) => this.onHandleMouseDown(e, "from"), onMouseMove: (e) => tooltipMouseMove(e, instance, widget.fromTooltip, { tooltipName: "fromTooltip" }), onMouseLeave: (e) => this.onHandleMouseLeave(e, "from"), onTouchStart: (e) => this.onHandleMouseDown(e, "from"), ref: (c) => (this.dom.from = c || undefined) }, "from")), widget.showTo && (_jsx("div", { className: CSS.element(baseClass, "handle"), tabIndex: data.disabled ? undefined : 0, style: toHandleStyle, onMouseDown: (e) => this.onHandleMouseDown(e, "to"), onMouseMove: (e) => tooltipMouseMove(e, instance, widget.toTooltip, { tooltipName: "toTooltip" }), onMouseLeave: (e) => this.onHandleMouseLeave(e, "to"), onTouchStart: (e) => this.onHandleMouseDown(e, "to"), ref: (c) => (this.dom.to = c || undefined) }, "to"))] }, "space")] })] }));
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        this.setState({
+            from: props.data.from,
+            to: props.data.to,
+        });
+        let { instance } = props;
+        let { widget } = instance;
+        tooltipParentWillReceiveProps(this.dom.to, instance, widget.toTooltip, { tooltipName: "toTooltip" });
+        tooltipParentWillReceiveProps(this.dom.from, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
+    }
+    componentWillUnmount() {
+        tooltipParentWillUnmount(this.props.instance);
+        this.unsubscribeOnWheel?.();
+    }
+    componentDidMount() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        tooltipParentDidMount(this.dom.to, instance, widget.toTooltip, { tooltipName: "toTooltip" });
+        tooltipParentDidMount(this.dom.from, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
+        this.unsubscribeOnWheel = addEventListenerWithOptions(this.dom.el, "wheel", (e) => this.onWheel(e), {
+            passive: false,
+        });
+    }
+    onHandleMouseLeave(e, handle) {
+        if (!this.state.drag) {
+            let tooltipName = handle + "Tooltip";
+            let { instance } = this.props;
+            let tooltip = handle == "from" ? instance.widget.fromTooltip : instance.widget.toTooltip;
+            tooltipMouseLeave(e, instance, tooltip, { tooltipName });
+        }
+    }
+    onHandleMouseDown(e, handle) {
+        e.preventDefault();
+        e.stopPropagation();
+        let { instance } = this.props;
+        let { data, widget } = instance;
+        if (data.disabled || data.readOnly)
+            return;
+        let handleEl = this.dom[handle];
+        let b = getTopLevelBoundingClientRect(handleEl);
+        let pos = getCursorPos(e);
+        let dx = pos.clientX - (b.left + b.right) / 2;
+        let dy = pos.clientY - (b.top + b.bottom) / 2;
+        let tooltipName = handle + "Tooltip";
+        let tooltip = handle == "from" ? widget.fromTooltip : widget.toTooltip;
+        this.setState({
+            drag: true,
+        });
+        captureMouseOrTouch(e, (e) => {
+            let { value } = this.getValues(e, widget.vertical ? dy : dx);
+            if (handle === "from") {
+                if (instance.set("from", value))
+                    this.setState({ from: value });
+                if (value > this.state.to) {
+                    if (instance.set("to", value))
+                        this.setState({ to: value });
+                }
+            }
+            else if (handle === "to") {
+                if (instance.set("to", value))
+                    this.setState({ to: value });
+                if (value < this.state.from) {
+                    if (instance.set("from", value))
+                        this.setState({ from: value });
+                }
+            }
+            tooltipMouseMove(e, instance, tooltip, { tooltipName, target: handleEl });
+        }, (e) => {
+            this.setState({
+                drag: false,
+            });
+            let pos = getCursorPos(e);
+            let el = document.elementFromPoint(pos.clientX, pos.clientY);
+            if (el !== handleEl)
+                tooltipMouseLeave(e, instance, tooltip, { tooltipName, target: handleEl });
+        });
+    }
+    getValues(e, d = 0) {
+        let { data, widget } = this.props.instance;
+        let { minValue, maxValue } = data;
+        let b = getTopLevelBoundingClientRect(this.dom.range);
+        let pos = getCursorPos(e);
+        let pct = widget.vertical
+            ? widget.invert
+                ? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range.offsetHeight))
+                : Math.max(0, Math.min(1, (b.bottom - pos.clientY + d) / this.dom.range.offsetHeight))
+            : Math.max(0, Math.min(1, (pos.clientX - b.left - d) / this.dom.range.offsetWidth));
+        let delta = (maxValue - minValue) * pct;
+        if (data.step) {
+            let currentValue = Math.round(delta / data.step) * data.step + minValue;
+            let value = this.checkBoundaries(currentValue);
+            if (maxValue % data.step === 0)
+                delta = Math.round(delta / data.step) * data.step;
+            delta = value - minValue;
+        }
+        return {
+            percent: delta / (maxValue - minValue),
+            value: minValue + delta,
+        };
+    }
+    onClick(e) {
+        let { instance } = this.props;
+        let { data, widget } = instance;
+        if (!data.disabled && !data.readOnly) {
+            let { value } = this.getValues(e);
+            this.props.instance.set("value", value, { immediate: true });
+            if (widget.showFrom) {
+                this.setState({ from: value });
+                this.props.instance.set("from", value, { immediate: true });
+            }
+            if (widget.showTo) {
+                this.setState({ to: value });
+                this.props.instance.set("to", value, { immediate: true });
+            }
+        }
+    }
+    onWheel(e) {
+        let { instance } = this.props;
+        let { data, widget } = instance;
+        if ((widget.showFrom && widget.showTo) || !data.wheel)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        let increment = e.deltaY > 0 ? this.getIncrement() : -this.getIncrement();
+        if (!data.disabled && !data.readOnly) {
+            if (widget.showFrom) {
+                let value = this.checkBoundaries(data.from + increment);
+                if (instance.set("from", value))
+                    this.setState({ from: value });
+            }
+            else if (widget.showTo) {
+                let value = this.checkBoundaries(data.to + increment);
+                if (instance.set("to", value))
+                    this.setState({ to: value });
+            }
+        }
+    }
+    checkBoundaries(value) {
+        let { data } = this.props.instance;
+        if (value > data.maxValue)
+            value = data.maxValue;
+        else if (value < data.minValue)
+            value = data.minValue;
+        return value;
+    }
+    getIncrement() {
+        let { instance } = this.props;
+        let { data } = instance;
+        let increment = data.increment || (data.maxValue - data.minValue) * data.incrementPercentage;
+        return increment;
+    }
+}

package/build/widgets/form/Switch.d.ts

@@ -0,0 +1,41 @@
+/** @jsxImportSource react */
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import * as React from "react";
+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;
+}
+export declare class Switch extends Field<SwitchConfig> {
+    on?: unknown;
+    off?: unknown;
+    value?: unknown;
+    rangeStyle?: Record<string, unknown> | string;
+    handleStyle?: Record<string, unknown> | string;
+    focusOnMouseDown?: boolean;
+    constructor(config?: SwitchConfig);
+    declareData(...args: Record<string, unknown>[]): void;
+    isEmpty(): boolean;
+    init(): void;
+    prepareData(context: RenderingContext, instance: FieldInstance<Switch>): void;
+    renderInput(context: RenderingContext, instance: FieldInstance, key: string): React.ReactElement;
+    toggle(e: React.MouseEvent | React.KeyboardEvent, instance: Instance): void;
+}

package/build/widgets/form/Switch.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Widget, getContent } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { Field, getFieldTooltip } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { preventFocus } from "../../ui/FocusManager";
+import { isDefined } from "../../util/isDefined";
+export class Switch extends Field {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData({
+            on: false,
+            off: true,
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            text: undefined,
+            rangeStyle: {
+                structured: true,
+            },
+            handleStyle: {
+                structured: true,
+            },
+        }, ...args);
+    }
+    isEmpty() {
+        return false;
+    }
+    init() {
+        if (isDefined(this.value))
+            this.on = this.value;
+        this.rangeStyle = parseStyle(this.rangeStyle);
+        this.handleStyle = parseStyle(this.handleStyle);
+        super.init();
+    }
+    prepareData(context, instance) {
+        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, instance, key) {
+        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 (_jsxs("div", { className: data.classNames, style: data.style, id: data.id, tabIndex: data.disabled ? undefined : (data.tabIndex || 0), onMouseDown: (e) => {
+                e.stopPropagation();
+                if (!this.focusOnMouseDown)
+                    preventFocus(e);
+            }, onClick: (e) => {
+                this.toggle(e, instance);
+            }, onKeyDown: (e) => {
+                const switchWidget = widget;
+                if (switchWidget.handleKeyDown && switchWidget.handleKeyDown(e, instance) === false)
+                    return;
+                if (e.keyCode == KeyCode.space) {
+                    this.toggle(e, instance);
+                }
+            }, onMouseMove: (e) => {
+                const tooltip = getFieldTooltip(instance);
+                if (Array.isArray(tooltip)) {
+                    tooltipMouseMove(e, ...tooltip);
+                }
+            }, onMouseLeave: (e) => {
+                const tooltip = getFieldTooltip(instance);
+                if (Array.isArray(tooltip)) {
+                    tooltipMouseLeave(e, ...tooltip);
+                }
+            }, children: [this.labelPlacement && getContent(this.renderLabel(context, instance, "label")), "\u00A0", _jsxs("div", { className: CSS.element(baseClass, "axis"), children: [_jsx("div", { className: CSS.element(baseClass, "range"), style: parseStyle(rangeStyle) }), _jsx("div", { className: CSS.element(baseClass, "space"), children: _jsx("div", { className: CSS.element(baseClass, "handle"), style: parseStyle(handleStyle) }) })] }), renderTextElement && (_jsx("div", { className: CSS.element(this.baseClass, "text"), children: text }, "text"))] }, key));
+    }
+    toggle(e, instance) {
+        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);

package/build/widgets/form/TextArea.d.ts

@@ -0,0 +1,20 @@
+/** @jsxImportSource react */
+import { TextField, TextFieldConfig } from "./TextField";
+import { FieldInstance } from "./Field";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp } from "../../ui/Prop";
+export interface TextAreaConfig extends TextFieldConfig {
+    /** Specifies the number of visible lines. */
+    rows?: NumberProp;
+    /** Event used to report on a new value. Defaults to `blur`. Other permitted value is `input`. */
+    reactOn?: string;
+    /** Base CSS class to be applied to the element. Defaults to `textarea`. */
+    baseClass?: string;
+}
+export declare class TextArea extends TextField<TextAreaConfig> {
+    constructor(config?: TextAreaConfig);
+    declareData(...args: Record<string, unknown>[]): void;
+    prepareData(context: RenderingContext, instance: FieldInstance<TextArea>): void;
+    renderInput(context: RenderingContext, instance: FieldInstance<TextArea>, key: string): React.ReactNode;
+    validateRequired(context: RenderingContext, instance: FieldInstance<TextArea>): string | undefined;
+}