cx 26.1.4 → 26.1.5

package/build/ui/Widget.d.ts

@@ -5,7 +5,7 @@ import { RenderingContext } from "./RenderingContext";
 import type { Controller, ControllerConfig, ControllerFactory } from "./Controller";
 import { BooleanProp, ClassProp, ModProp, StyleProp } from "./Prop";
 import { Instance } from "./Instance";
-export declare const VDOM: any;
+export declare const VDOM: import("cx-react").CxVDOM;
 export type ControllerProp = CreateConfig<typeof Controller> | (ControllerConfig & {
     type?: never;
     $type?: never;

package/build/ui/exprHelpers.d.ts

@@ -31,10 +31,14 @@ export declare function strictEqual<V>(arg: AccessorChain<V>, value: V): Selecto
 /** Returns a selector that checks if the value strictly does not equal the given value using !== */
 export declare function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;
 /** Returns a selector that formats the value using the specified format string.
- * Format strings use semicolon-separated syntax: "formatType;param1;param2|nullText"
+ * Format strings use semicolon-separated syntax: "formatType;param1;param2"
+ * @param arg - The accessor chain to the value
+ * @param fmt - The format string
+ * @param nullText - Optional text to display for null/undefined values
  * @example
  * format(m.price, "n;2") // formats as number with 2 decimal places
  * format(m.date, "d") // formats as date
  * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
+ * format(m.value, "n;2", "N/A") // shows "N/A" for null values
  */
-export declare function format<V>(arg: AccessorChain<V>, fmt: string): Selector<string>;
+export declare function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string>;

package/build/ui/exprHelpers.js

@@ -1,3 +1,4 @@
+import { computable } from "../data/computable";
 import { Format } from "../util/Format";
 import { expr } from "./expr";
 /** Returns a selector that converts the value to boolean using !! */
@@ -61,12 +62,17 @@ export function strictNotEqual(arg, value) {
     return expr(arg, (x) => x !== value);
 }
 /** Returns a selector that formats the value using the specified format string.
- * Format strings use semicolon-separated syntax: "formatType;param1;param2|nullText"
+ * Format strings use semicolon-separated syntax: "formatType;param1;param2"
+ * @param arg - The accessor chain to the value
+ * @param fmt - The format string
+ * @param nullText - Optional text to display for null/undefined values
  * @example
  * format(m.price, "n;2") // formats as number with 2 decimal places
  * format(m.date, "d") // formats as date
  * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
+ * format(m.value, "n;2", "N/A") // shows "N/A" for null values
  */
-export function format(arg, fmt) {
-    return expr(arg, (x) => Format.value(x, fmt));
+export function format(arg, fmt, nullText) {
+    let f = nullText != null ? `${fmt}|${nullText}` : fmt;
+    return computable(arg, (x) => Format.value(x, f));
 }

package/build/ui/tpl.d.ts

@@ -1,3 +1,5 @@
-export declare function tpl(text: string): {
-    tpl: string;
-};
+import { ComputableSelector } from "../data/computable";
+import { MemoSelector } from "../data/Selector";
+import { Tpl } from "./Prop";
+export declare function tpl(text: string): Tpl;
+export declare function tpl<T extends ComputableSelector[]>(...args: [...T, string]): MemoSelector<string>;

package/build/ui/tpl.js

@@ -1,5 +1,12 @@
-export function tpl(text) {
-    return {
-        tpl: text
-    };
+import { computable } from "../data/computable";
+import { StringTemplate } from "../data/StringTemplate";
+export function tpl(...args) {
+    if (args.length === 1)
+        return {
+            tpl: args[0],
+        };
+    let template = args[args.length - 1];
+    let formatter = StringTemplate.get(template);
+    let selectors = args.slice(0, -1);
+    return computable(...selectors, (...values) => formatter(values));
 }

package/build/widgets/overlay/Overlay.d.ts

@@ -156,9 +156,9 @@ export declare class OverlayComponent<Props extends OverlayComponentProps = Over
     customStyle: any;
     root: Root;
     constructor(props: Props);
-    render(): any;
+    render(): import("react/jsx-runtime").JSX.Element | null;
     renderOverlay(): import("react/jsx-runtime").JSX.Element;
-    renderOverlayBody(): any;
+    renderOverlayBody(): Props["children"];
     onFocus(): void;
     onBlur(): void;
     onFocusIn(): void;
@@ -181,7 +181,7 @@ export declare class OverlayComponent<Props extends OverlayComponentProps = Over
     setCustomStyle(style: Partial<CSSStyleDeclaration>): void;
     getOverlayStyle(): any;
     setCSSState(mods: Record<string, boolean>): void;
-    getOverlayCssClass(): any;
+    getOverlayCssClass(): string;
     overlayDidUpdate(): void;
     componentDidUpdate(): void;
 }