cx 25.11.1 → 26.0.2

package/build/ui/DataProxy.spec.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { Controller } from "./Controller";
+import { DataProxy } from "./DataProxy";
+import { computable } from "../data/computable";
+import { useState } from "../hooks";
+import { createFunctionalComponent } from "./createFunctionalComponent";
+import { Widget } from "./Widget";
+import { bind } from "./bind";
+import { tpl } from "./tpl";
+describe("DataProxy", () => {
+    it("can calculate values", () => {
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: { bind: "value" },
+                }, children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["good"],
+        });
+    });
+    it("can write into values aliased with bind", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.set("$value", "excellent");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: { bind: "value" },
+                }, controller: TestController, children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(store.get("value"), "excellent");
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["excellent"],
+        });
+    });
+    it("can write into aliased values using provided setters", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.set("$value", "excellent");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: {
+                        expr: computable("value", (value) => value),
+                        set: (value, { store }) => {
+                            store.set("value", value);
+                        },
+                    },
+                }, controller: TestController, children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(store.get("value"), "excellent");
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["excellent"],
+        });
+    });
+    it("allows shorter syntax", () => {
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { alias: "$value", value: bind("value"), children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["good"],
+        });
+    });
+    it("correctly updates aliased data after write", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.set("$value", "excellent");
+                assert.equal(this.store.get("$value"), "excellent");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: { bind: "value" },
+                }, controller: TestController, children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(store.get("value"), "excellent");
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["excellent"],
+        });
+    });
+    it("properly binds structures", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.set("$person.firstName", "Jim");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $person: { bind: "person" },
+                }, controller: TestController, children: _jsx("span", { text: tpl("{$person.firstName} {$person.lastName}") }) }) }));
+        let store = new Store({
+            data: {
+                person: { firstName: "John", lastName: "Smith" },
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(store.get("person.firstName"), "Jim");
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["Jim Smith"],
+        });
+    });
+    it("works with Store refs", () => {
+        let widget = createFunctionalComponent(() => {
+            let valueRef = useState("a");
+            return (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                        $value: valueRef,
+                    }, children: _jsx("span", { text: bind("$value"), controller: {
+                            onInit() {
+                                valueRef.set("b");
+                            },
+                        } }) }) }));
+        });
+        let store = new Store({
+            data: {
+            //value: "good"
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["b"],
+        });
+    });
+    it("controllers set on the DataProxy can see calculated values", () => {
+        let value;
+        let widget = Widget.create(_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: 5,
+                }, controller: {
+                    onInit() {
+                        value = this.store.get("$value");
+                    },
+                } }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.equal(value, 5);
+    });
+    it("correctly propagates undefined values over a previous value (bug)", () => {
+        let widget = (_jsxs("cx", { children: [_jsx(DataProxy, { data: {
+                        $value: { bind: "value" },
+                    }, children: _jsx("span", { text: bind("$value") }) }), _jsx(DataProxy, { data: {
+                        $value: { bind: "dummy" },
+                    }, children: _jsx("span", { text: bind("$value") }) })] }));
+        let store = new Store({
+            data: {
+                value: "initial",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "span",
+                props: {},
+                children: ["initial"],
+            },
+            {
+                type: "span",
+                props: {},
+                children: null,
+            },
+        ]);
+    });
+});

package/build/ui/DetachedScope.d.ts

@@ -0,0 +1,61 @@
+/** @jsxImportSource react */
+import { SubscribableView, SubscribableViewConfig } from "../data/SubscribableView";
+import { IsolatedScope, IsolatedScopeConfig } from "./IsolatedScope";
+import { Instance } from "./Instance";
+import { StructuredProp } from "./Prop";
+interface ContainmentStoreConfig extends SubscribableViewConfig {
+    selector: any;
+}
+declare class ContainmentStore extends SubscribableView<any> {
+    selector: any;
+    cache: {
+        version: number;
+        data?: any;
+        result?: any;
+        itemIndex?: number;
+        key?: string;
+        parentStoreData?: any;
+        containedData?: any;
+    };
+    constructor(config: ContainmentStoreConfig);
+    getData(): any;
+    setItem(path: string, value: any): boolean;
+    deleteItem(path: string): boolean;
+    wrapper(callback: () => void): boolean;
+}
+export interface DetachedScopeInstance extends Instance {
+    subStore: ContainmentStore;
+}
+export interface DetachedScopeConfig extends IsolatedScopeConfig {
+    /**
+     * A single binding path or a list of paths to be monitored for changes.
+     * Use `exclusive` as a shorthand for defining the `exclusiveData` object.
+     */
+    exclusive?: string | string[];
+    /**
+     * Exclusive data selector. If only exclusive data change, the scope will be re-rendered
+     * without recalculating other elements on the page.
+     * Use in case if the scope uses both exclusive and shared data.
+     */
+    exclusiveData?: StructuredProp;
+    /** Name of the scope used for debugging/reporting purposes. */
+    name?: string;
+    /** Options passed to the Cx component. */
+    options?: any;
+    /** Error handler for the detached scope. */
+    onError?: (error: Error, instance: Instance, info: any) => void;
+}
+export declare class DetachedScope extends IsolatedScope<DetachedScopeConfig, DetachedScopeInstance> {
+    exclusive?: string | string[];
+    exclusiveData?: any;
+    container?: any;
+    name?: string;
+    options?: any;
+    onError?: any;
+    declareData(...args: any[]): void;
+    init(): void;
+    initInstance(context: any, instance: DetachedScopeInstance): void;
+    applyParentStore(instance: any): void;
+    render(context: any, instance: any, key: string): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/build/ui/DetachedScope.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { PureContainer } from "./PureContainer";
+import { SubscribableView } from "../data/SubscribableView";
+import { getSelector } from "../data/getSelector";
+import { Cx } from "./Cx";
+import { IsolatedScope } from "./IsolatedScope";
+class ContainmentStore extends SubscribableView {
+    constructor(config) {
+        super(config);
+        this.selector = config.selector;
+    }
+    getData() {
+        return this.store.getData();
+    }
+    setItem(path, value) {
+        return this.wrapper(() => {
+            this.store.setItem(path, value);
+        });
+    }
+    deleteItem(path) {
+        return this.wrapper(() => {
+            this.store.deleteItem(path);
+        });
+    }
+    wrapper(callback) {
+        if (this.store.silently(callback)) {
+            let data = this.getData();
+            let containedData = this.selector(data);
+            if (containedData === this.cache.containedData) {
+                this.store.notify();
+            }
+            else {
+                this.cache.containedData = containedData;
+                this.notify(undefined);
+            }
+            return true;
+        }
+        return false;
+    }
+}
+export class DetachedScope extends IsolatedScope {
+    declareData(...args) {
+        return super.declareData(...args, {
+            exclusiveData: { structured: true },
+        });
+    }
+    init() {
+        if (typeof this.exclusive === "string")
+            this.exclusiveData = { bind: this.exclusive };
+        if (Array.isArray(this.exclusive)) {
+            this.exclusiveData = {};
+            this.exclusive.forEach((x, i) => {
+                this.exclusiveData[String(i)] = { bind: x };
+            });
+        }
+        this.container = PureContainer.create({
+            type: PureContainer,
+            items: this.children || this.items,
+        });
+        delete this.children;
+        this.items = [];
+        if (this.name)
+            this.options = {
+                ...this.options,
+                name: this.name,
+            };
+        super.init();
+    }
+    initInstance(context, instance) {
+        const config = {
+            store: instance.parentStore,
+            selector: getSelector(this.exclusiveData || this.data),
+        };
+        instance.subStore = new ContainmentStore(config);
+    }
+    applyParentStore(instance) {
+        instance.store = instance.parentStore;
+        instance.subStore.setStore(instance.parentStore);
+    }
+    render(context, instance, key) {
+        return (_jsx(Cx, { widget: this.container, store: instance.subStore, parentInstance: instance, subscribe: true, options: this.options, onError: this.onError }, key));
+    }
+}

package/build/ui/FocusManager.d.ts

@@ -0,0 +1,16 @@
+export declare class FocusManager {
+    static subscribe(callback: (el: any) => void): () => void;
+    static onFocusOut(el: any, callback: (el: any) => void): () => void;
+    static oneFocusOut(el: any, callback: (el: any) => void): () => void;
+    static nudge(): void;
+    static focus(el: HTMLElement): void;
+    static focusFirst(el: HTMLElement): HTMLElement | null;
+    static focusFirstChild(el: HTMLElement): HTMLElement | null;
+    static focusNext(el: HTMLElement): HTMLElement | undefined;
+    static setInterval(interval: number): void;
+}
+export declare function oneFocusOut(component: any, el: any, callback: (focus: any) => void): void;
+export declare function offFocusOut(component: any): void;
+export declare function preventFocus(e: React.MouseEvent): void;
+export declare function preventFocusOnTouch(e: any, force?: boolean): void;
+export declare function unfocusElement(target?: Element | null, unfocusParentOverlay?: boolean): void;

package/build/ui/FocusManager.js

@@ -0,0 +1,149 @@
+import { isSelfOrDescendant, findFirst, findFirstChild, isFocusable, closestParent } from "../util/DOM";
+import { batchUpdates } from "./batchUpdates";
+import { SubscriberList } from "../util/SubscriberList";
+import { isTouchEvent } from "../util/isTouchEvent";
+import { getActiveElement } from "../util/getActiveElement";
+/*
+ *  Purpose of FocusManager is to provide focusout notifications.
+ *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
+ *  to determine if focus went outside or stayed inside the component.
+ */
+let subscribers = new SubscriberList(), timerInterval = 300, timerId = null;
+let lastActiveElement = null;
+let pending = false;
+export class FocusManager {
+    static subscribe(callback) {
+        let unsubscribe = subscribers.subscribe(callback);
+        checkTimer();
+        return unsubscribe;
+    }
+    static onFocusOut(el, callback) {
+        let active = isSelfOrDescendant(el, getActiveElement());
+        return this.subscribe((focusedEl) => {
+            if (!active)
+                active = isSelfOrDescendant(el, getActiveElement());
+            else if (!isSelfOrDescendant(el, focusedEl)) {
+                active = false;
+                callback(focusedEl);
+            }
+        });
+    }
+    static oneFocusOut(el, callback) {
+        this.nudge();
+        let off = this.subscribe((focusedEl) => {
+            if (!isSelfOrDescendant(el, focusedEl)) {
+                callback(focusedEl);
+                off();
+            }
+        });
+        return off;
+    }
+    static nudge() {
+        if (typeof document !== "undefined" && getActiveElement() !== lastActiveElement) {
+            if (!pending) {
+                pending = true;
+                setTimeout(function () {
+                    pending = false;
+                    if (getActiveElement() !== lastActiveElement) {
+                        lastActiveElement = getActiveElement();
+                        batchUpdates(() => {
+                            subscribers.notify(lastActiveElement);
+                        });
+                        checkTimer();
+                    }
+                }, 0);
+            }
+        }
+    }
+    static focus(el) {
+        el.focus();
+        this.nudge();
+    }
+    static focusFirst(el) {
+        let focusable = findFirst(el, isFocusable);
+        if (focusable)
+            this.focus(focusable);
+        return focusable;
+    }
+    static focusFirstChild(el) {
+        let focusable = findFirstChild(el, isFocusable);
+        if (focusable)
+            this.focus(focusable);
+        return focusable;
+    }
+    static focusNext(el) {
+        let next = el, skip = true;
+        do {
+            if (!skip) {
+                let focusable = this.focusFirst(next);
+                if (focusable)
+                    return focusable;
+            }
+            if (next.nextSibling) {
+                next = next.nextSibling;
+                skip = false;
+            }
+            else {
+                next = next.parentNode;
+                skip = true;
+            }
+        } while (next);
+    }
+    static setInterval(interval) {
+        timerInterval = interval;
+        checkTimer();
+    }
+}
+export function oneFocusOut(component, el, callback) {
+    if (!component.oneFocusOut)
+        component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
+            delete component.oneFocusOut;
+            callback(focus);
+        });
+}
+export function offFocusOut(component) {
+    if (component.oneFocusOut) {
+        component.oneFocusOut();
+        delete component.oneFocusOut;
+    }
+}
+export function preventFocus(e) {
+    //Focus can be prevented only on mousedown event. On touchstart this will not work
+    //preventDefault cannot be used as it prevents scrolling
+    if (e.type !== "mousedown")
+        return;
+    e.preventDefault();
+    unfocusElement(e.currentTarget, false);
+}
+function checkTimer() {
+    let shouldRun = !subscribers.isEmpty();
+    if (shouldRun && !timerId)
+        timerId = setInterval(() => {
+            FocusManager.nudge();
+        }, timerInterval);
+    if (!shouldRun && timerId) {
+        clearInterval(timerId);
+        timerId = null;
+    }
+}
+export function preventFocusOnTouch(e, force = false) {
+    if (force || isTouchEvent())
+        preventFocus(e);
+}
+export function unfocusElement(target = null, unfocusParentOverlay = true) {
+    const activeElement = getActiveElement();
+    if (!target)
+        target = activeElement;
+    if (unfocusParentOverlay) {
+        let focusableOverlayContainer = closestParent(target, (el) => el.dataset?.focusableOverlayContainer);
+        if (focusableOverlayContainer)
+            target = focusableOverlayContainer;
+    }
+    //find the closest focusable parent of the target element and focus it instead
+    let focusableParent = closestParent(target, (el) => isFocusable(el) && (!unfocusParentOverlay || !!el.dataset?.focusableOverlayContainer));
+    if (focusableParent && focusableParent !== document.body)
+        focusableParent.focus({ preventScroll: true });
+    else
+        activeElement.blur();
+    FocusManager.nudge();
+}

package/build/ui/Format.d.ts

@@ -0,0 +1,4 @@
+import { Format as Fmt } from "../util/Format";
+export declare const Format: typeof Fmt;
+export declare function resolveNumberFormattingFlags(flags?: string): any;
+export declare function enableCultureSensitiveFormatting(): void;

package/build/ui/Format.js

@@ -0,0 +1,96 @@
+import { Culture, getCurrentCultureCache } from "./Culture";
+import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
+import { setGetExpressionCacheCallback } from "../data/Expression";
+import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
+import { parseDateInvariant } from "../util";
+import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
+export const Format = Fmt;
+let cultureSensitiveFormatsRegistered = false;
+export function resolveNumberFormattingFlags(flags) {
+    if (!flags)
+        return null;
+    let result = {};
+    if (flags.indexOf("+") >= 0)
+        result.signDisplay = "exceptZero";
+    if (flags.indexOf("c") >= 0)
+        result.notation = "compact";
+    if (flags.indexOf("a") >= 0)
+        result.currencySign = "accounting";
+    return result;
+}
+export function enableCultureSensitiveFormatting() {
+    if (cultureSensitiveFormatsRegistered)
+        return;
+    cultureSensitiveFormatsRegistered = true;
+    Fmt.registerFactory(["number", "n"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
+        let culture = Culture.getNumberCulture();
+        let formatter = culture.getFormatter({
+            ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+            ...resolveNumberFormattingFlags(flags),
+        });
+        return (value) => formatter.format(value);
+    });
+    Fmt.registerFactory("currency", (format, currency, minimumFractionDigits, maximumFractionDigits, flags) => {
+        let culture = Culture.getNumberCulture();
+        currency = currency || Culture.defaultCurrency;
+        let formatter = culture.getFormatter({
+            style: "currency",
+            currency: currency,
+            ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+            ...resolveNumberFormattingFlags(flags),
+        });
+        return (value) => formatter.format(value);
+    });
+    Fmt.registerFactory(["percentage", "p", "%"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
+        let culture = Culture.getNumberCulture();
+        let formatter = culture.getFormatter({
+            style: "percent",
+            ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+            ...resolveNumberFormattingFlags(flags),
+        });
+        return (value) => formatter.format(value);
+    });
+    Fmt.registerFactory(["percentSign", "ps"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
+        let culture = Culture.getNumberCulture();
+        let formatter = culture.getFormatter({
+            style: "percent",
+            ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+            ...resolveNumberFormattingFlags(flags),
+        });
+        return (value) => formatter.format(value / 100);
+    });
+    Fmt.registerFactory(["date", "d"], (fmt, format = "yyyyMMdd") => {
+        let culture = Culture.getDateTimeCulture();
+        let formatter = culture.getFormatter(format);
+        return (value) => formatter.format(parseDateInvariant(value));
+    });
+    Fmt.registerFactory(["time", "t"], (fmt, format = "hhmmss") => {
+        let culture = Culture.getDateTimeCulture();
+        let formatter = culture.getFormatter(format);
+        return (value) => formatter.format(parseDateInvariant(value));
+    });
+    Fmt.registerFactory(["datetime", "dt"], (fmt, format = "yyyyMd hhmm") => {
+        let culture = Culture.getDateTimeCulture();
+        let formatter = culture.getFormatter(format);
+        return (value) => formatter.format(parseDateInvariant(value));
+    });
+    setGetFormatCacheCallback(() => {
+        let cache = getCurrentCultureCache();
+        if (!cache.formatCache)
+            cache.formatCache = {};
+        return cache.formatCache;
+    });
+    setGetExpressionCacheCallback(() => {
+        let cache = getCurrentCultureCache();
+        if (!cache.exprCache)
+            cache.exprCache = {};
+        return cache.exprCache;
+    });
+    setGetStringTemplateCacheCallback(() => {
+        let cache = getCurrentCultureCache();
+        if (!cache.strTplCache)
+            cache.strTplCache = {};
+        return cache.strTplCache;
+    });
+    GlobalCacheIdentifier.change();
+}

package/build/ui/HoverSync.d.ts

@@ -0,0 +1,30 @@
+/** @jsxImportSource react */
+import { StyledContainerBase, StyledContainerConfig } from "./Container";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Instance } from "./Instance";
+import { Prop, StyleProp, ClassProp } from "./Prop";
+export interface HoverSyncConfig extends PureContainerConfig {
+}
+export declare class HoverSync extends PureContainerBase<HoverSyncConfig, Instance> {
+    constructor(config?: HoverSyncConfig);
+    initInstance(context: any, instance: any): void;
+    explore(context: any, instance: any): void;
+    exploreCleanup(context: any, instance: any): void;
+}
+export declare function withHoverSync(key: string | number, hoverSync: any, hoverChannel: string | undefined, hoverId: any, render: (props: any) => any): any;
+export interface HoverSyncElementConfig extends StyledContainerConfig {
+    hoverChannel?: string;
+    hoverId?: Prop<any>;
+    hoverClass?: ClassProp;
+    hoverStyle?: StyleProp;
+}
+export declare class HoverSyncElement extends StyledContainerBase<HoverSyncElementConfig, Instance> {
+    hoverChannel: string;
+    hoverId?: Prop<any>;
+    hoverClass?: ClassProp;
+    hoverStyle?: StyleProp;
+    constructor(config?: HoverSyncElementConfig);
+    declareData(...args: any[]): void;
+    prepareData(context: any, instance: any): void;
+    render(context: any, instance: any, key: string): any;
+}