cx 26.0.12 → 26.0.13

package/src/util/color/rgbToHsl.ts

@@ -1,36 +1,36 @@
-/**
- *
- * @param r
- * @param g
- * @param b
- * @returns {array}
- */
-export function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
-   r /= 255;
-   g /= 255;
-   b /= 255;
-   let max = Math.max(r, g, b), min = Math.min(r, g, b);
-   let h: number, s: number, l = (max + min) / 2;
-
-   if (max == min) {
-      h = s = 0; // achromatic
-   } else {
-      let d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-         case r:
-            h = (g - b) / d + (g < b ? 6 : 0);
-            break;
-         case g:
-            h = (b - r) / d + 2;
-            break;
-         case b:
-         default:
-            h = (r - g) / d + 4;
-            break;
-      }
-      h /= 6;
-   }
-
-   return [h * 360, s * 100, l * 100]
+/**
+ *
+ * @param r
+ * @param g
+ * @param b
+ * @returns {array}
+ */
+export function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+   r /= 255;
+   g /= 255;
+   b /= 255;
+   let max = Math.max(r, g, b), min = Math.min(r, g, b);
+   let h: number, s: number, l = (max + min) / 2;
+
+   if (max == min) {
+      h = s = 0; // achromatic
+   } else {
+      let d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+         case r:
+            h = (g - b) / d + (g < b ? 6 : 0);
+            break;
+         case g:
+            h = (b - r) / d + 2;
+            break;
+         case b:
+         default:
+            h = (r - g) / d + 4;
+            break;
+      }
+      h /= 6;
+   }
+
+   return [h * 360, s * 100, l * 100]
 }

package/src/util/getActiveElement.ts

@@ -1,4 +1,4 @@
-//IE sometimes returns null while other browsers always return document.body.
-export function getActiveElement(): Element {
-   return document.activeElement ?? document.body;
-}
+//IE sometimes returns null while other browsers always return document.body.
+export function getActiveElement(): Element {
+   return document.activeElement ?? document.body;
+}

package/src/util/hasKey.ts

@@ -1,18 +1,18 @@
-import { isFunction } from "./isFunction";
-import { isString } from "./isString";
-
-export function hasKey<K extends string>(obj: object, key: K): obj is Record<K, unknown> {
-   return key in obj;
-}
-
-export function hasStringAtKey<K extends string>(obj: object, key: K): obj is Record<K, string> {
-   return hasKey(obj, key) && isString(obj[key]);
-}
-
-export function hasValueAtKey<K extends string>(obj: object, key: K, value: unknown): obj is Record<K, unknown> {
-   return hasKey(obj, key) && obj[key] === value;
-}
-
-export function hasFunctionAtKey<K extends string>(obj: object, key: K): obj is Record<K, (...args: any[]) => any> {
-   return hasKey(obj, key) && isFunction(obj[key]);
-}
+import { isFunction } from "./isFunction";
+import { isString } from "./isString";
+
+export function hasKey<K extends string>(obj: object, key: K): obj is Record<K, unknown> {
+   return key in obj;
+}
+
+export function hasStringAtKey<K extends string>(obj: object, key: K): obj is Record<K, string> {
+   return hasKey(obj, key) && isString(obj[key]);
+}
+
+export function hasValueAtKey<K extends string>(obj: object, key: K, value: unknown): obj is Record<K, unknown> {
+   return hasKey(obj, key) && obj[key] === value;
+}
+
+export function hasFunctionAtKey<K extends string>(obj: object, key: K): obj is Record<K, (...args: any[]) => any> {
+   return hasKey(obj, key) && isFunction(obj[key]);
+}

package/src/util/index.ts

@@ -1,55 +1,55 @@
-export * from "./Console";
-export * from "./Debug";
-export * from "./DOM";
-export * from "./Format";
-export * from "./expandFatArrows";
-export * from "./GlobalCacheIdentifier";
-export * from "./innerTextTrim";
-export * from "./isDigit";
-export * from "./isPromise";
-export * from "./isTouchDevice";
-export * from "./KeyCode";
-export * from "./parseStyle";
-export * from "./quote";
-export * from "./scrollElementIntoView";
-export * from "./shallowEquals";
-export * from "./Timing";
-export * from "./date/index";
-export * from "./color/index";
-export * from "./getVendorPrefix";
-export * from "./eventCallbacks";
-export * from "./getSearchQueryPredicate";
-export * from "./escapeSpecialRegexCharacters";
-export * from "./browserSupportsPassiveEventHandlers";
-export * from "./isTouchEvent";
-export * from "./debounce";
-export * from "./throttle";
-export * from "./SubscriberList";
-export * from "./findScrollableParent";
-export * from "./getScrollerBoundingClientRect";
-export * from "./isNonEmptyArray";
-export * from "./isArray";
-export * from "./isObject";
-export * from "./isNumber";
-export * from "./isFunction";
-export * from "./isString";
-export * from "./isUndefined";
-export * from "./isDefined";
-export * from "./routeAppend";
-export * from "./reverseSlice";
-export * from "./getTopLevelBoundingClientRect";
-export * from "./getParentFrameBoundingClientRect";
-export * from "./getActiveElement";
-export * from "./Component";
-export * from "./onIdleCallback";
-export * from "./validatedDebounce";
-export * from "./addEventListenerWithOptions";
-export * from "./coalesce";
-export * from "./dummyCallback";
-export * from "./calculateNaturalElementHeight";
-export * from "./isTextInputElement";
-export * from "./capitalize";
-export * from "./isValidIdentifierName";
-export * from "./isDataRecord";
-export * from "./TraversalStack";
-export * from "./hasKey"
+export * from "./Console";
+export * from "./Debug";
+export * from "./DOM";
+export * from "./Format";
+export * from "./expandFatArrows";
+export * from "./GlobalCacheIdentifier";
+export * from "./innerTextTrim";
+export * from "./isDigit";
+export * from "./isPromise";
+export * from "./isTouchDevice";
+export * from "./KeyCode";
+export * from "./parseStyle";
+export * from "./quote";
+export * from "./scrollElementIntoView";
+export * from "./shallowEquals";
+export * from "./Timing";
+export * from "./date/index";
+export * from "./color/index";
+export * from "./getVendorPrefix";
+export * from "./eventCallbacks";
+export * from "./getSearchQueryPredicate";
+export * from "./escapeSpecialRegexCharacters";
+export * from "./browserSupportsPassiveEventHandlers";
+export * from "./isTouchEvent";
+export * from "./debounce";
+export * from "./throttle";
+export * from "./SubscriberList";
+export * from "./findScrollableParent";
+export * from "./getScrollerBoundingClientRect";
+export * from "./isNonEmptyArray";
+export * from "./isArray";
+export * from "./isObject";
+export * from "./isNumber";
+export * from "./isFunction";
+export * from "./isString";
+export * from "./isUndefined";
+export * from "./isDefined";
+export * from "./routeAppend";
+export * from "./reverseSlice";
+export * from "./getTopLevelBoundingClientRect";
+export * from "./getParentFrameBoundingClientRect";
+export * from "./getActiveElement";
+export * from "./Component";
+export * from "./onIdleCallback";
+export * from "./validatedDebounce";
+export * from "./addEventListenerWithOptions";
+export * from "./coalesce";
+export * from "./dummyCallback";
+export * from "./calculateNaturalElementHeight";
+export * from "./isTextInputElement";
+export * from "./capitalize";
+export * from "./isValidIdentifierName";
+export * from "./isDataRecord";
+export * from "./TraversalStack";
+export * from "./hasKey"

package/src/util/innerTextTrim.ts

@@ -1,10 +1,10 @@
-/**
- *
- * @param str
- * @return {string}
- */
-export function innerTextTrim(str: string): string {
-   str = str.replace(/\t/g, "");
-   str = str.replace(/(\s*[\r\n]\s*)/g, " ");
-   return str;
-}
+/**
+ *
+ * @param str
+ * @return {string}
+ */
+export function innerTextTrim(str: string): string {
+   str = str.replace(/\t/g, "");
+   str = str.replace(/(\s*[\r\n]\s*)/g, " ");
+   return str;
+}

package/src/util/isArray.ts

@@ -1,3 +1,3 @@
-export function isArray<T = unknown>(x: unknown): x is T[] {
-   return Array.isArray(x);
-}
+export function isArray<T = unknown>(x: unknown): x is T[] {
+   return Array.isArray(x);
+}

package/src/util/isDataRecord.ts

@@ -1,5 +1,5 @@
-import { isObject } from "./isObject";
-
-export function isDataRecord(v: unknown): v is Record<string, any> {
-   return isObject(v);
-}
+import { isObject } from "./isObject";
+
+export function isDataRecord(v: unknown): v is Record<string, any> {
+   return isObject(v);
+}

package/src/util/isDefined.ts

@@ -1,3 +1,3 @@
-export function isDefined<T>(x: T | undefined): x is T {
-   return x !== undefined;
-}
+export function isDefined<T>(x: T | undefined): x is T {
+   return x !== undefined;
+}

package/src/util/isString.ts

@@ -1,3 +1,3 @@
-export function isString(x: unknown): x is string {
-   return typeof x === "string";
-}
+export function isString(x: unknown): x is string {
+   return typeof x === "string";
+}

package/src/widgets/AccessorBindings.spec.tsx

@@ -61,4 +61,30 @@ describe("Accessors", () => {
       assert(tree.type === "div");
       assert.deepStrictEqual(tree.children, ["4"]);
    });
+
+   it("expr infers correct types from accessor chains", () => {
+      let selector = expr($page.a, $page.b, (a, b) => {
+         // a and b should be inferred as number | undefined
+         const typedA: number | undefined = a;
+         const typedB: number | undefined = b;
+         // @ts-expect-error - a should not be string
+         const wrongA: string = a;
+         // @ts-expect-error - b should not be string
+         const wrongB: string = b;
+         return (typedA ?? 0) + (typedB ?? 0);
+      });
+      assert.ok(selector);
+   });
+
+   it("expr resolves AccessorChain<any> and nested properties to any", () => {
+      let m = createAccessorModelProxy<{ data: any }>();
+      let selector = expr(m.data.nested.value, (value) => {
+         // value should be any, so all assignments should work
+         const asString: string = value;
+         const asNumber: number = value;
+         const asBoolean: boolean = value;
+         return value;
+      });
+      assert.ok(selector);
+   });
 });

package/src/widgets/Button.tsx

@@ -8,21 +8,14 @@ import { isFunction } from "../util/isFunction";
 import { isDefined } from "../util/isDefined";
 import { coalesce } from "../util/coalesce";
 import type { RenderingContext } from "../ui/RenderingContext";
-import type { Instance, WidgetData, RenderProps } from "../ui/Instance";
+import type { Instance, RenderProps } from "../ui/Instance";
 import { YesNoResult } from "../ui/Instance";
 import { BooleanProp, StringProp, Prop, ModProp } from "../ui/Prop";
 import type { FormRenderingContext } from "./form/ValidationGroup";
 
-interface ButtonData extends WidgetData {
-   pressed?: boolean;
-   icon?: string | boolean;
-   disabled?: boolean;
-   enabled?: boolean;
-}
-
-export interface ButtonConfig extends HtmlElementConfig {
+export interface ButtonConfig extends Omit<HtmlElementConfig<"button">, "disabled" | "type" | "form"> {
    /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
-   confirm?: Prop<string | Record<string, unknown>>;
+   confirm?: Prop<string | Record<string, unknown> | false>;
 
    /** If true button appears in pressed state. Useful for implementing toggle buttons. */
    pressed?: BooleanProp;
@@ -30,9 +23,6 @@ export interface ButtonConfig extends HtmlElementConfig {
    /** Name of the icon to be put on the left side of the button. */
    icon?: StringProp;
 
-   /** HTML tag to be used. Default is `button`. */
-   tag?: string;
-
    /** Base CSS class to be applied to the element. Default is 'button'. */
    baseClass?: string;
 
@@ -57,9 +47,7 @@ export interface ButtonConfig extends HtmlElementConfig {
     * @param e - Event.
     * @param instance - Cx widget instance that fired the event.
     */
-   onClick?: string | ((e: MouseEvent, instance: Instance) => void);
-
-   onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
+   onClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
 
    /** Button type. */
    type?: "submit" | "button";
@@ -121,7 +109,7 @@ export class Button extends HtmlElement<ButtonConfig, HtmlElementInstance> {
 
       if (!this.focusOnMouseDown) {
          props.onMouseDown = (e: React.MouseEvent) => {
-            if (this.onMouseDown && instance.invoke("onMouseDown", e.nativeEvent, instance) === false) return;
+            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
             preventFocus(e);
          };
       }

package/src/widgets/DocumentTitle.ts

@@ -1,92 +1,95 @@
-import { Widget, WidgetConfig } from "../ui/Widget";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { StringProp } from "../ui/Prop";
-
-export interface DocumentTitleConfig extends WidgetConfig {
-   /** Text value to be used for the document title. */
-   value?: StringProp;
-
-   /** Deprecated. Use `action: "append"` instead. */
-   append?: boolean;
-
-   /** How to combine the title with existing document title. Default is `append`. */
-   action?: "append" | "replace" | "prepend";
-
-   /** Separator used when appending or prepending to the title. Default is empty string. */
-   separator?: StringProp;
-}
-
-export class DocumentTitle extends Widget<DocumentTitleConfig> {
-   declare value?: StringProp;
-   declare text?: StringProp;
-   declare append?: boolean;
-   declare action?: "append" | "replace" | "prepend";
-   declare separator?: StringProp;
-
-   constructor(config?: DocumentTitleConfig) {
-      super(config);
-   }
-
-   init(): void {
-      if (this.value) this.text = this.value;
-
-      if (this.append) this.action = "append";
-
-      super.init();
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(...args, {
-         value: undefined,
-         text: undefined,
-         action: undefined,
-         separator: undefined,
-      });
-   }
-
-   explore(context: RenderingContext, instance: Instance): void {
-      if (!(context as any).documentTitle) {
-         (context as any).documentTitle = {
-            activeInstance: instance,
-            title: "",
-         };
-      }
-
-      let { data } = instance;
-
-      if (data.text) {
-         switch (data.action) {
-            case "append":
-               if ((context as any).documentTitle.title) (context as any).documentTitle.title += data.separator;
-               (context as any).documentTitle.title += data.text;
-               break;
-
-            case "prepend":
-               (context as any).documentTitle.title = data.text + data.separator + (context as any).documentTitle.title;
-               break;
-
-            default:
-            case "replace":
-               (context as any).documentTitle.title = data.text;
-               break;
-         }
-      }
-
-      super.explore(context, instance);
-   }
-
-   prepare(context: RenderingContext, instance: Instance): void {
-      if ((context as any).documentTitle.activeInstance == instance)
-         document.title = (context as any).documentTitle.title;
-   }
-
-   render(): null {
-      return null;
-   }
-}
-
-DocumentTitle.prototype.action = "append";
-DocumentTitle.prototype.separator = "";
-
-Widget.alias("document-title", DocumentTitle);
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp } from "../ui/Prop";
+
+export interface DocumentTitleConfig extends WidgetConfig {
+   /** Text value to be used for the document title. */
+   value?: StringProp;
+
+   /** Text value to be used for the document title. */
+   text?: StringProp;
+
+   /** Deprecated. Use `action: "append"` instead. */
+   append?: boolean;
+
+   /** How to combine the title with existing document title. Default is `append`. */
+   action?: "append" | "replace" | "prepend";
+
+   /** Separator used when appending or prepending to the title. Default is empty string. */
+   separator?: StringProp;
+}
+
+export class DocumentTitle extends Widget<DocumentTitleConfig> {
+   declare value?: StringProp;
+   declare text?: StringProp;
+   declare append?: boolean;
+   declare action?: "append" | "replace" | "prepend";
+   declare separator?: StringProp;
+
+   constructor(config?: DocumentTitleConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.value) this.text = this.value;
+
+      if (this.append) this.action = "append";
+
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         value: undefined,
+         text: undefined,
+         action: undefined,
+         separator: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: Instance): void {
+      if (!(context as any).documentTitle) {
+         (context as any).documentTitle = {
+            activeInstance: instance,
+            title: "",
+         };
+      }
+
+      let { data } = instance;
+
+      if (data.text) {
+         switch (data.action) {
+            case "append":
+               if ((context as any).documentTitle.title) (context as any).documentTitle.title += data.separator;
+               (context as any).documentTitle.title += data.text;
+               break;
+
+            case "prepend":
+               (context as any).documentTitle.title = data.text + data.separator + (context as any).documentTitle.title;
+               break;
+
+            default:
+            case "replace":
+               (context as any).documentTitle.title = data.text;
+               break;
+         }
+      }
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: RenderingContext, instance: Instance): void {
+      if ((context as any).documentTitle.activeInstance == instance)
+         document.title = (context as any).documentTitle.title;
+   }
+
+   render(): null {
+      return null;
+   }
+}
+
+DocumentTitle.prototype.action = "append";
+DocumentTitle.prototype.separator = "";
+
+Widget.alias("document-title", DocumentTitle);

package/src/widgets/Heading.ts

@@ -1,7 +1,7 @@
-import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "./HtmlElement";
 import { RenderingContext } from "../ui/RenderingContext";
 
-export interface HeadingConfig extends HtmlElementConfig {
+export interface HeadingConfig extends HtmlElementConfigBase {
    /** Name of the HTML element to be rendered. Default is `div`. */
    tag?: string;