cx 26.0.13 → 26.1.0

package/src/widgets/Sandbox.ts

@@ -1,103 +1,103 @@
-import { Widget } from "../ui/Widget";
-import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
-import { Binding, BindingInput } from "../data/Binding";
-import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { StringProp, WritableProp } from "../ui/Prop";
-
-export interface SandboxConfig extends PureContainerConfig {
-   /** Binding to the object that holds sandbox data. */
-   storage: WritableProp<Record<string, any>>;
-
-   /** Key used to identify the sandbox instance within the storage. */
-   key?: StringProp;
-
-   /** Alias for `key`. */
-   accessKey?: StringProp;
-
-   /** Alias used to expose sandbox data. Default is `$page`. */
-   recordName?: string;
-
-   /** Alias for `recordName`. */
-   recordAlias?: string;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that sandbox store data should not be mutated. */
-   sealed?: boolean;
-}
-
-export interface SandboxInstance extends Instance {
-   store: ExposedValueView;
-}
-
-export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
-   declare storage: WritableProp<Record<string, any>>;
-   declare key?: StringProp;
-   declare recordName?: string;
-   declare recordAlias?: string;
-   declare accessKey?: StringProp;
-   declare immutable?: boolean;
-   declare sealed?: boolean;
-   declare storageBinding: Binding;
-   init(): void {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.accessKey) this.key = this.accessKey;
-
-      this.storageBinding = Binding.get(this.storage);
-
-      super.init();
-   }
-
-   initInstance(context: RenderingContext, instance: SandboxInstance): void {
-      instance.store = new ExposedValueView({
-         store: instance.parentStore,
-         containerBinding: this.storageBinding,
-         key: null,
-         recordName: this.recordName,
-         immutable: this.immutable,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: SandboxInstance): void {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(
-         {
-            storage: undefined,
-            key: undefined,
-         },
-         ...args,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: SandboxInstance): void {
-      var { store, data } = instance;
-      if (store.getKey() !== data.key) {
-         //when navigating to a page using the same widget tree as the previous page
-         //everything needs to be reinstantiated, e.g. user/1 => user/2
-         instance.store = new ExposedValueView({
-            store: store,
-            containerBinding: this.storageBinding,
-            key: data.key,
-            recordName: this.recordName,
-            immutable: this.immutable,
-            sealed: this.sealed,
-         });
-         instance.clearChildrenCache();
-      }
-      super.prepareData(context, instance);
-   }
-}
-
-Sandbox.prototype.recordName = "$page";
-Sandbox.prototype.immutable = false;
-Sandbox.prototype.sealed = false;
-
-Widget.alias("sandbox", Sandbox);
+import { Widget } from "../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { Binding, BindingInput } from "../data/Binding";
+import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp, WritableProp } from "../ui/Prop";
+
+export interface SandboxConfig extends PureContainerConfig {
+   /** Binding to the object that holds sandbox data. */
+   storage: WritableProp<Record<string, any>>;
+
+   /** Key used to identify the sandbox instance within the storage. */
+   key?: StringProp;
+
+   /** Alias for `key`. */
+   accessKey?: StringProp;
+
+   /** Alias used to expose sandbox data. Default is `$page`. */
+   recordName?: string;
+
+   /** Alias for `recordName`. */
+   recordAlias?: string;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that sandbox store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export interface SandboxInstance extends Instance {
+   store: ExposedValueView;
+}
+
+export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
+   declare storage: WritableProp<Record<string, any>>;
+   declare key?: StringProp;
+   declare recordName?: string;
+   declare recordAlias?: string;
+   declare accessKey?: StringProp;
+   declare immutable?: boolean;
+   declare sealed?: boolean;
+   declare storageBinding: Binding;
+   init(): void {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.accessKey) this.key = this.accessKey;
+
+      this.storageBinding = Binding.get(this.storage);
+
+      super.init();
+   }
+
+   initInstance(context: RenderingContext, instance: SandboxInstance): void {
+      instance.store = new ExposedValueView({
+         store: instance.parentStore,
+         containerBinding: this.storageBinding,
+         key: null,
+         recordName: this.recordName,
+         immutable: this.immutable,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: SandboxInstance): void {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            storage: undefined,
+            key: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: SandboxInstance): void {
+      var { store, data } = instance;
+      if (store.getKey() !== data.key) {
+         //when navigating to a page using the same widget tree as the previous page
+         //everything needs to be reinstantiated, e.g. user/1 => user/2
+         instance.store = new ExposedValueView({
+            store: store,
+            containerBinding: this.storageBinding,
+            key: data.key,
+            recordName: this.recordName,
+            immutable: this.immutable,
+            sealed: this.sealed,
+         });
+         instance.clearChildrenCache();
+      }
+      super.prepareData(context, instance);
+   }
+}
+
+Sandbox.prototype.recordName = "$page";
+Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
+
+Widget.alias("sandbox", Sandbox);

package/src/widgets/autoFocus.ts

@@ -1,9 +1,9 @@
-import { FocusManager } from "../ui/FocusManager";
-import { isTouchEvent } from "../util/isTouchEvent";
-
-export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
-   let data = component.props.data || component.props.instance.data;
-   let autoFocusValue = el && data.autoFocus;
-   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
-   component.autoFocusValue = autoFocusValue;
-}
+import { FocusManager } from "../ui/FocusManager";
+import { isTouchEvent } from "../util/isTouchEvent";
+
+export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
+   let data = component.props.data || component.props.instance.data;
+   let autoFocusValue = el && data.autoFocus;
+   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
+   component.autoFocusValue = autoFocusValue;
+}

package/src/widgets/cx.ts

@@ -1,63 +1,63 @@
-import { HtmlElement } from "./HtmlElement";
-import { VDOM } from "../ui/Widget";
-import { createComponentFactory, isComponentFactory } from "../util/Component";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { isString } from "../util/isString";
-import { isNumber } from "../util/isNumber";
-import { isFunction } from "../util/isFunction";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-
-import { flattenProps } from "../ui/flattenProps";
-
-let htmlFactoryCache: Record<string, any> = {};
-
-function getHtmlElementFactory(tagName: string): any {
-   let factory = htmlFactoryCache[tagName];
-   if (factory) return factory;
-   return (htmlFactoryCache[tagName] = createComponentFactory(
-      () => {},
-      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
-      { tag: tagName },
-   ));
-}
-
-export function cx(typeName: any, props?: any, ...children: any[]): any {
-   if (isArray(typeName)) return typeName;
-
-   if (isFunction(typeName) && isUndefined(props))
-      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
-
-   if (typeName.type || typeName.$type) return typeName;
-
-   if (children && children.length == 0) children = [];
-
-   if (children && children.length == 1) children = children[0];
-
-   if (typeName == "cx") return children;
-
-   if (typeName == "react") return react(children);
-
-   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
-
-   return {
-      $type: typeName,
-      $props: props,
-      jsxAttributes: props && Object.keys(props),
-      children,
-   };
-}
-
-export function react(config: any): any {
-   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
-
-   if (isArray(config)) return config.map(react);
-
-   let type = config.$type;
-
-   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
-
-   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
-
-   return VDOM.createElement(type, config.$props, react(config.children));
-}
+import { HtmlElement } from "./HtmlElement";
+import { VDOM } from "../ui/Widget";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { isString } from "../util/isString";
+import { isNumber } from "../util/isNumber";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+
+import { flattenProps } from "../ui/flattenProps";
+
+let htmlFactoryCache: Record<string, any> = {};
+
+function getHtmlElementFactory(tagName: string): any {
+   let factory = htmlFactoryCache[tagName];
+   if (factory) return factory;
+   return (htmlFactoryCache[tagName] = createComponentFactory(
+      () => {},
+      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
+      { tag: tagName },
+   ));
+}
+
+export function cx(typeName: any, props?: any, ...children: any[]): any {
+   if (isArray(typeName)) return typeName;
+
+   if (isFunction(typeName) && isUndefined(props))
+      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
+
+   if (typeName.type || typeName.$type) return typeName;
+
+   if (children && children.length == 0) children = [];
+
+   if (children && children.length == 1) children = children[0];
+
+   if (typeName == "cx") return children;
+
+   if (typeName == "react") return react(children);
+
+   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
+
+   return {
+      $type: typeName,
+      $props: props,
+      jsxAttributes: props && Object.keys(props),
+      children,
+   };
+}
+
+export function react(config: any): any {
+   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
+
+   if (isArray(config)) return config.map(react);
+
+   let type = config.$type;
+
+   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
+
+   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
+
+   return VDOM.createElement(type, config.$props, react(config.children));
+}

package/src/widgets/form/Checkbox.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource react */
 
-import * as React from "react";
 import { VDOM } from "../../ui/VDOM";
 import type { Instance } from "../../ui/Instance";
 import type { RenderingContext } from "../../ui/RenderingContext";

package/src/widgets/form/ColorField.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource react */
 
-import * as React from "react";
 import { Cx } from "../../ui/Cx";
 import { DropdownInstance, DropdownWidgetProps, Instance } from "../../ui/Instance";
 import type { RenderingContext } from "../../ui/RenderingContext";
@@ -49,7 +48,10 @@ export interface ColorFieldConfig extends FieldConfig {
    onValidate?: string | ((value: string, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 
-export class ColorFieldInstance<F extends ColorField = ColorField> extends FieldInstance<F> implements DropdownWidgetProps {
+export class ColorFieldInstance<F extends ColorField = ColorField>
+   extends FieldInstance<F>
+   implements DropdownWidgetProps
+{
    lastDropdown?: Instance;
    dropdownOpen?: boolean;
    selectedIndex?: number;
@@ -231,10 +233,7 @@ class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
 
       let insideButton;
       if (!data.readOnly && !data.disabled) {
-         if (
-            showClear &&
-            (((!data.required || alwaysShowClear) && !data.empty) || instance.state?.inputError)
-         )
+         if (showClear && (((!data.required || alwaysShowClear) && !data.empty) || instance.state?.inputError))
             insideButton = (
                <div
                   className={CSS.element(baseClass, "clear")}
@@ -301,14 +300,18 @@ class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
                type="text"
                className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
                style={data.inputStyle as React.CSSProperties}
-               defaultValue={this.trim(data.value as string || "")}
+               defaultValue={this.trim((data.value as string) || "")}
                disabled={data.disabled as boolean}
                readOnly={data.readOnly as boolean}
                tabIndex={data.tabIndex as number}
                placeholder={data.placeholder as string}
-               {...data.inputAttrs as Record<string, any>}
-               onInput={(e: React.ChangeEvent<HTMLInputElement>) => this.onChange((e.target as HTMLInputElement).value, "input")}
-               onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.onChange((e.target as HTMLInputElement).value, "change")}
+               {...(data.inputAttrs as Record<string, any>)}
+               onInput={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  this.onChange((e.target as HTMLInputElement).value, "input")
+               }
+               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  this.onChange((e.target as HTMLInputElement).value, "change")
+               }
                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => this.onKeyDown(e)}
                onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
                   this.onBlur(e);
@@ -355,7 +358,7 @@ class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
       let { instance } = this.props;
       let { widget } = instance;
       const colorFieldWidget = widget as ColorField;
-      
+
       if (colorFieldWidget.trackFocus) {
          this.setState({
             focus: true,
@@ -430,7 +433,7 @@ class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
    UNSAFE_componentWillReceiveProps(props: ColorInputProps): void {
       let { data, instance } = props;
       let { state } = instance;
-      let nv = this.trim(data.value as string || "");
+      let nv = this.trim((data.value as string) || "");
       if (nv != this.input.value && (this.data.value != data.value || !state?.inputError)) {
          this.input.value = nv;
          instance.setState({

package/src/widgets/form/DateTimeField.tsx

@@ -1,6 +1,4 @@
 /** @jsxImportSource react */
-
-import * as React from "react";
 import { StringTemplate } from "../../data/StringTemplate";
 import { Culture } from "../../ui/Culture";
 import { Cx } from "../../ui/Cx";

package/src/widgets/form/DateTimePicker.tsx

@@ -1,6 +1,4 @@
 /** @jsxImportSource react */
-
-import * as React from "react";
 import { Culture } from "../../ui/Culture";
 import { offFocusOut, oneFocusOut } from "../../ui/FocusManager";
 import { enableCultureSensitiveFormatting } from "../../ui/Format";

package/src/widgets/form/Radio.tsx

@@ -7,7 +7,6 @@ import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
 import { stopPropagation } from "../../util/eventCallbacks";
 import { KeyCode } from "../../util/KeyCode";
 import { isUndefined } from "../../util/isUndefined";
-import * as React from "react";
 import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
 
 export interface RadioConfig extends FieldConfig {

package/src/widgets/form/Slider.tsx

@@ -247,7 +247,9 @@ class SliderComponent extends VDOM.Component<SliderComponentProps, SliderCompone
             style={data.style}
             id={data.id}
             onClick={(e: React.MouseEvent) => this.onClick(e)}
-            ref={(el: HTMLDivElement | null) => (this.dom.el = el || undefined)}
+            ref={(el: HTMLDivElement | null) => {
+               this.dom.el = el || undefined;
+            }}
             onMouseMove={(e: React.MouseEvent) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
             onMouseLeave={(e: React.MouseEvent) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
          >
@@ -257,7 +259,9 @@ class SliderComponent extends VDOM.Component<SliderComponentProps, SliderCompone
                <div
                   key="space"
                   className={CSS.element(baseClass, "space")}
-                  ref={(c: HTMLDivElement | null) => (this.dom.range = c || undefined)}
+                  ref={(c: HTMLDivElement | null) => {
+                     this.dom.range = c || undefined;
+                  }}
                >
                   {widget.showFrom && (
                      <div
@@ -271,7 +275,9 @@ class SliderComponent extends VDOM.Component<SliderComponentProps, SliderCompone
                         }
                         onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "from")}
                         onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "from")}
-                        ref={(c: HTMLDivElement | null) => (this.dom.from = c || undefined)}
+                        ref={(c: HTMLDivElement | null) => {
+                           this.dom.from = c || undefined;
+                        }}
                      />
                   )}
                   {widget.showTo && (
@@ -286,7 +292,9 @@ class SliderComponent extends VDOM.Component<SliderComponentProps, SliderCompone
                         }
                         onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "to")}
                         onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "to")}
-                        ref={(c: HTMLDivElement | null) => (this.dom.to = c || undefined)}
+                        ref={(c: HTMLDivElement | null) => {
+                           this.dom.to = c || undefined;
+                        }}
                      />
                   )}
                </div>

package/src/widgets/form/Switch.tsx

@@ -8,7 +8,6 @@ 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 * as React from "react";
 import { BooleanProp, StringProp, StyleProp } from "../../ui/Prop";
 
 export interface SwitchConfig extends FieldConfig {
@@ -72,7 +71,7 @@ export class Switch extends Field<SwitchConfig> {
                structured: true,
             },
          },
-         ...args
+         ...args,
       );
    }
 
@@ -116,7 +115,7 @@ export class Switch extends Field<SwitchConfig> {
             className={data.classNames}
             style={data.style}
             id={data.id}
-            tabIndex={data.disabled ? undefined : ((data.tabIndex as number) || 0)}
+            tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
             onMouseDown={(e: React.MouseEvent) => {
                e.stopPropagation();
                if (!this.focusOnMouseDown) preventFocus(e);

package/src/widgets/form/Wheel.tsx

@@ -8,7 +8,6 @@ import { addEventListenerWithOptions } from "../../util";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
 import type { CSS } from "../../ui/CSS";
-import * as React from "react";
 import { Prop, StructuredProp } from "../../ui/Prop";
 
 export interface WheelConfig extends PureContainerConfig {

package/src/widgets/grid/Grid.tsx

@@ -1,5 +1,4 @@
 /** @jsxImportSource react */
-import * as React from "react";
 import { View } from "../../data";
 import { Binding } from "../../data/Binding";
 import { getAccessor } from "../../data/getAccessor";