cx 26.0.1 → 26.0.2

package/build/ui/index.js

@@ -0,0 +1,41 @@
+export * from "./Prop";
+export * from "./Controller";
+export * from "./Widget";
+export * from "./Container";
+export * from "./PureContainer";
+export * from "./Repeater";
+export * from "./Rescope";
+export * from "./StaticText";
+export * from "./Text";
+export * from "./CSS";
+export * from "./CSSHelper";
+export * from "./FocusManager";
+export * from "./ResizeManager";
+export * from "./ZIndexManager";
+export * from "./Format";
+export * from "./Culture";
+export * from "./Localization";
+export * from "./Cx";
+export * from "./Instance";
+export * from "./RenderingContext";
+export * from "./ContentResolver";
+export * from "./batchUpdates";
+export * from "./IsolatedScope";
+export * from "./DetachedScope";
+export * from "./Restate";
+export * from "./DataProxy";
+export * from "./keyboardShortcuts";
+export * from "./StructuredInstanceDataAccessor";
+export * from "./HoverSync";
+export * from "./createFunctionalComponent";
+export * from "./flattenProps";
+export * from "./selection/index";
+export * from "./layout/index";
+export * from "./app/index";
+export * from "./adapter/index";
+export * from "./bind";
+export * from "./tpl";
+export * from "./expr";
+//re-export computable here
+import { computable } from "../data/computable";
+export { computable };

package/build/ui/keyboardShortcuts.d.ts

@@ -0,0 +1,10 @@
+interface KeyDescriptor {
+    keyCode: number;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+}
+export type KeyboardShortcut = number | KeyDescriptor;
+export declare function executeKeyboardShortcuts(e: KeyboardEvent): void;
+export declare function registerKeyboardShortcut(key: number | KeyDescriptor, callback: (e: KeyboardEvent) => void): any;
+export {};

package/build/ui/keyboardShortcuts.js

@@ -0,0 +1,27 @@
+import { SubscriberList } from "../util/SubscriberList";
+import { isObject } from "../util/isObject";
+let subscribers, eventBan = 0;
+export function executeKeyboardShortcuts(e) {
+    if (Date.now() < eventBan)
+        return;
+    // Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
+    eventBan = Date.now() + 5;
+    subscribers && subscribers.notify(e);
+}
+export function registerKeyboardShortcut(key, callback) {
+    const keyCode = isObject(key) ? key.keyCode : key;
+    const shiftKey = isObject(key) ? key.shiftKey : false;
+    const ctrlKey = isObject(key) ? key.ctrlKey : false;
+    const altKey = isObject(key) ? key.altKey : false;
+    if (!subscribers) {
+        subscribers = new SubscriberList();
+        document.addEventListener("keydown", (e) => {
+            if (e.target == document.body)
+                executeKeyboardShortcuts(e);
+        });
+    }
+    return subscribers.subscribe((e) => {
+        if (e.keyCode == keyCode && (!shiftKey || e.shiftKey) && (!ctrlKey || e.ctrlKey) && (!altKey || e.altKey))
+            callback(e);
+    });
+}

package/build/ui/layout/Content.d.ts

@@ -0,0 +1,14 @@
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { Instance } from "../Instance";
+export interface ContentConfig extends PureContainerConfig {
+    /** Placeholder name where the content is rendered. */
+    name?: string;
+    /** Placeholder name where the content is rendered. */
+    for?: string;
+}
+export declare class Content extends PureContainerBase<ContentConfig, Instance> {
+    name?: string;
+    for?: string;
+    constructor(config?: ContentConfig);
+    init(): void;
+}

package/build/ui/layout/Content.js

@@ -0,0 +1,15 @@
+import { Widget } from "../Widget";
+import { PureContainerBase } from "../PureContainer";
+export class Content extends PureContainerBase {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        super.init();
+        if (!this.putInto)
+            this.putInto = this.for || this.name;
+    }
+}
+Content.prototype.name = "body";
+Content.prototype.isContent = true;
+Widget.alias("content", Content);

package/build/ui/layout/ContentPlaceholder.d.ts

@@ -0,0 +1,35 @@
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+import { StringProp } from "../Prop";
+import { Instance } from "../Instance";
+export interface ContentPlaceholderConfig extends PureContainerConfig {
+    /** Name of the placeholder. Default is `body`. */
+    name?: StringProp;
+    /** Set to `true` to scope the placeholder to a local context. */
+    scoped?: boolean;
+    /** Set to `true` to allow all registered content elements to render inside the placeholder. Otherwise only one element is rendered. */
+    allowMultiple?: boolean;
+}
+export declare class ContentPlaceholderInstance extends Instance<ContentPlaceholder> {
+    content?: any;
+    unregisterContentPlaceholder?: () => void;
+}
+export declare class ContentPlaceholder extends PureContainerBase<ContentPlaceholderConfig, ContentPlaceholderInstance> {
+    name?: string;
+    scoped?: boolean;
+    allowMultiple?: boolean;
+    declareData(...args: any[]): void;
+    explore(context: RenderingContext, instance: ContentPlaceholderInstance): void;
+    prepare(context: RenderingContext, instance: ContentPlaceholderInstance): void;
+    setContent(context: RenderingContext, instance: ContentPlaceholderInstance, content: any): void;
+    render(context: RenderingContext, instance: ContentPlaceholderInstance, key: any): any;
+}
+export interface ContentPlaceholderScopeConfig extends PureContainerConfig {
+    name: string | string[];
+}
+export declare class ContentPlaceholderScope extends PureContainerBase<ContentPlaceholderScopeConfig> {
+    name: string[];
+    init(): void;
+    explore(context: RenderingContext, instance: any): void;
+    exploreCleanup(context: RenderingContext, instance: any): void;
+}

package/build/ui/layout/ContentPlaceholder.js

@@ -0,0 +1,105 @@
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { isString } from "../../util/isString";
+import { PureContainerBase } from "../PureContainer";
+import { Widget } from "../Widget";
+import { Instance } from "../Instance";
+export class ContentPlaceholderInstance extends Instance {
+    unregisterContentPlaceholder;
+}
+export class ContentPlaceholder extends PureContainerBase {
+    declareData(...args) {
+        super.declareData(...args, {
+            name: undefined,
+        });
+    }
+    explore(context, instance) {
+        instance.content = null;
+        let { data } = instance;
+        if (this.allowMultiple) {
+            const contentList = context.contentList && context.contentList[data.name];
+            if (isNonEmptyArray(contentList) && !this.scoped)
+                for (let i = 0; i < contentList.length; i++)
+                    this.setContent(context, instance, contentList[i]);
+            // in multi mode register a callback to allow for more entries to be added
+            context.pushNamedValue("contentPlaceholder", data.name, (content) => {
+                this.setContent(context, instance, content);
+            });
+        }
+        else {
+            const content = context.content && context.content[data.name];
+            if (content && !this.scoped)
+                this.setContent(context, instance, content);
+            else
+                context.pushNamedValue("contentPlaceholder", data.name, (content) => {
+                    this.setContent(context, instance, content);
+                });
+        }
+        if (this.scoped)
+            instance.unregisterContentPlaceholder = () => {
+                context.popNamedValue("contentPlaceholder", data.name);
+            };
+        super.explore(context, instance);
+    }
+    prepare(context, instance) {
+        let { content } = instance;
+        if (this.allowMultiple) {
+            let contentId = "";
+            let shouldUpdate = false;
+            if (content) {
+                for (let i = 0; i < content.length; i++) {
+                    let c = content[i];
+                    contentId += c.id + "+";
+                    shouldUpdate = shouldUpdate || c.shouldUpdate;
+                }
+            }
+            if (instance.cache("content", contentId) || shouldUpdate)
+                instance.markShouldUpdate(context);
+        }
+        else if (instance.cache("content", content) || (content && content.shouldUpdate))
+            instance.markShouldUpdate(context);
+    }
+    setContent(context, instance, content) {
+        if (this.allowMultiple) {
+            if (instance.content == null)
+                instance.content = [];
+            instance.content.push(content);
+        }
+        else
+            instance.content = content;
+        content.contentPlaceholder = instance;
+    }
+    render(context, instance, key) {
+        const { content } = instance;
+        if (!content)
+            return super.render(context, instance, key);
+        if (this.allowMultiple)
+            return content.map((x) => x.contentVDOM);
+        return content.contentVDOM;
+    }
+}
+ContentPlaceholder.prototype.name = "body";
+ContentPlaceholder.prototype.scoped = false;
+ContentPlaceholder.prototype.allowMultiple = false;
+Widget.alias("content-placeholder", ContentPlaceholder);
+export class ContentPlaceholderScope extends PureContainerBase {
+    init() {
+        super.init();
+        if (isString(this.name))
+            this.name = [this.name];
+    }
+    explore(context, instance) {
+        this.name.forEach((name) => {
+            context.pushNamedValue("contentPlaceholder", name, null);
+            context.pushNamedValue("content", name, null);
+            context.pushNamedValue("contentList", name, []);
+        });
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        this.name.forEach((name) => {
+            context.popNamedValue("contentPlaceholder", name);
+            context.popNamedValue("content", name);
+            context.popNamedValue("contentList", name);
+        });
+    }
+}

package/build/ui/layout/ContentPlaceholder.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/ui/layout/ContentPlaceholder.spec.js

@@ -0,0 +1,333 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../../data/Store";
+import { ContentPlaceholder, ContentPlaceholderScope } from "./ContentPlaceholder";
+import assert from "assert";
+import { PureContainer } from "../PureContainer";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+import { bind } from "../bind";
+describe("ContentPlaceholder", () => {
+    it("allows putting content inside", () => {
+        let store = new Store();
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx("main", { children: _jsx("h2", { putInto: "header", children: "Header" }) })] }) })));
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "header",
+                    props: {},
+                    children: [
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header"],
+                        },
+                    ],
+                },
+                {
+                    type: "main",
+                    props: {},
+                    children: null,
+                },
+            ],
+        });
+    });
+    it("updates content on change", () => {
+        let store = new Store({
+            data: {
+                headerText: "Header",
+            },
+        });
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "header" }), _jsx("h2", { putInto: "header", text: bind("headerText") })] }) })));
+        let getTree = (headerText) => ({
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "h2",
+                    props: {},
+                    children: [headerText],
+                },
+            ],
+        });
+        assert.deepEqual(component.toJSON(), getTree("Header"));
+        store.set("headerText", "Footer");
+        assert.deepEqual(component.toJSON(), getTree("Footer"));
+    });
+    it("allows putting multiple entries inside", () => {
+        let store = new Store();
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsxs("main", { children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" })] })] }) })));
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "header",
+                    props: {},
+                    children: [
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header1"],
+                        },
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header2"],
+                        },
+                    ],
+                },
+                {
+                    type: "main",
+                    props: {},
+                    children: null,
+                },
+            ],
+        });
+    });
+    it("allows putting multiple entries inside when content is defined before and after the placeholder", () => {
+        let store = new Store();
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsxs(PureContainer, { children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" })] }), _jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsxs(PureContainer, { children: [_jsx("h2", { putInto: "headers", children: "Header3" }), _jsx("h2", { putInto: "headers", children: "Header4" })] })] }) })));
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "header",
+                    props: {},
+                    children: [
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header1"],
+                        },
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header2"],
+                        },
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header3"],
+                        },
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header4"],
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    it("allows putting multiple entries into separate placeholders using content placeholder scopes", () => {
+        let store = new Store();
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsxs(ContentPlaceholderScope, { name: "headers", children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" }), _jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) })] }), _jsxs(ContentPlaceholderScope, { name: "headers", children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsx("h2", { putInto: "headers", children: "Header3" }), _jsx("h2", { putInto: "headers", children: "Header4" })] })] }) })));
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "header",
+                    props: {},
+                    children: [
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header1"],
+                        },
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header2"],
+                        },
+                    ],
+                },
+                {
+                    type: "header",
+                    props: {},
+                    children: [
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header3"],
+                        },
+                        {
+                            type: "h2",
+                            props: {},
+                            children: ["Header4"],
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    it("is used for defining body position in outer layouts", () => {
+        let store = new Store();
+        let layout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: "Header" }), _jsx(ContentPlaceholder, {}), _jsx("footer", { children: "Footer" })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("main", { outerLayout: layout }) })));
+        assert.deepEqual(component.toJSON(), {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "header",
+                    props: {},
+                    children: ["Header"],
+                },
+                {
+                    type: "main",
+                    props: {},
+                    children: null,
+                },
+                {
+                    type: "footer",
+                    props: {},
+                    children: ["Footer"],
+                },
+            ],
+        });
+    });
+    it("data in deeply nested placeholders is correctly updated", () => {
+        let store = new Store({
+            data: {
+                header: "H",
+                footer: "F",
+                body: "B",
+            },
+        });
+        let layout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx(ContentPlaceholder, {}), _jsx("footer", { children: _jsx(ContentPlaceholder, { name: "footer" }) })] }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("main", { outerLayout: layout, children: [_jsx("div", { putInto: "header", children: _jsx("span", { text: bind("header") }) }), _jsx("div", { putInto: "footer", children: _jsx("span", { text: bind("footer") }) }), _jsx("span", { text: bind("body") })] }) })));
+        let getTree = (h, b, f) => ({
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "header",
+                    props: {},
+                    children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
+                },
+                {
+                    type: "main",
+                    props: {},
+                    children: [{ type: "span", props: {}, children: [b] }],
+                },
+                {
+                    type: "footer",
+                    props: {},
+                    children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
+                },
+            ],
+        });
+        assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
+        store.set("header", "H2");
+        assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
+        store.set("footer", "F2");
+        assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
+        store.set("body", "B2");
+        assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
+    });
+    it("inside a two-level deep outer-layout works", () => {
+        let store = new Store();
+        let outerLayout = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
+        let innerLayout = (_jsx("cx", { children: _jsx("main", { outerLayout: outerLayout, children: _jsx(ContentPlaceholder, {}) }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) })));
+        let tree = component.toJSON();
+        //console.log(tree);
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "main",
+                    props: {},
+                    children: [
+                        {
+                            type: "section",
+                            props: {},
+                            children: null,
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    it("works in strange order", () => {
+        let store = new Store();
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "footer" }), _jsx(PureContainer, { putInto: "footer-content", children: "works" }), _jsxs(PureContainer, { putInto: "footer", children: ["It", _jsx(ContentPlaceholder, { name: "footer-content", children: "doesn't work" })] })] }) })));
+        let tree = component.toJSON();
+        //console.log(tree);
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["It", "works"],
+        });
+    });
+    it("inside a complex two-level-deep outer-layout works", () => {
+        let store = new Store();
+        let outerLayout = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
+        let innerLayout = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsx("main", { outerLayout: outerLayout, children: _jsx(ContentPlaceholder, {}) }) }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) })));
+        assert.deepEqual(component.toJSON(), {
+            type: "div",
+            props: {},
+            children: [{ type: "main", props: {}, children: [{ type: "section", props: {}, children: null }] }],
+        });
+    });
+    it("each level use an outer-layout", () => {
+        let store = new Store();
+        let outerLayout1 = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
+        let outerLayout2 = (_jsx("cx", { children: _jsx("main", { children: _jsx(ContentPlaceholder, {}) }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx(PureContainer, { outerLayout: outerLayout1, children: _jsx(PureContainer, { outerLayout: outerLayout2, children: "Content" }) }) })));
+        assert.deepEqual(component.toJSON(), {
+            type: "div",
+            props: {},
+            children: [{ type: "main", props: {}, children: ["Content"] }],
+        });
+    });
+    it("data in a two-level deep outer-layout is correctly updated", () => {
+        let store = new Store({
+            data: {
+                header: "H",
+                footer: "F",
+                body: "B",
+            },
+        });
+        let outerLayout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, {}), _jsx("footer", { children: _jsx(ContentPlaceholder, { name: "footer" }) })] }) }));
+        let innerLayout = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsxs(PureContainer, { outerLayout: outerLayout, children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx(ContentPlaceholder, {})] }) }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsxs("main", { outerLayout: innerLayout, children: [_jsx("div", { putInto: "header", children: _jsx("span", { text: bind("header") }) }), _jsx("div", { putInto: "footer", children: _jsx("span", { text: bind("footer") }) }), _jsx("span", { text: bind("body") })] }) })));
+        let getTree = (h, b, f) => ({
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "header",
+                    props: {},
+                    children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
+                },
+                {
+                    type: "main",
+                    props: {},
+                    children: [{ type: "span", props: {}, children: [b] }],
+                },
+                {
+                    type: "footer",
+                    props: {},
+                    children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
+                },
+            ],
+        });
+        assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
+        store.set("header", "H2");
+        assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
+        store.set("footer", "F2");
+        assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
+        store.set("body", "B2");
+        assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
+    });
+});

package/build/ui/layout/FirstVisibleChildLayout.d.ts

@@ -0,0 +1,7 @@
+import { PureContainer } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+export declare class FirstVisibleChildLayout extends PureContainer {
+    explore(context: RenderingContext, instance: any): void;
+    exploreCleanup(context: RenderingContext, instance: any): void;
+    wrapItem(item: any): any;
+}

package/build/ui/layout/FirstVisibleChildLayout.js

@@ -0,0 +1,58 @@
+import { PureContainer } from "../PureContainer";
+function isVisibleDeep(instance) {
+    if (instance.visible && (!instance.widget.isPureContainer || !instance.widget.useParentLayout))
+        return true;
+    if (instance.children) {
+        for (let i = 0; i < instance.children.length; i++)
+            if (isVisibleDeep(instance.children[i]))
+                return true;
+    }
+    return false;
+}
+class FirstVisibleChildItem extends PureContainer {
+    constructor(config) {
+        super(config);
+    }
+    checkVisible(context, instance, data) {
+        if (instance.parent.firstVisibleChild)
+            return false;
+        return super.checkVisible(context, instance, data);
+    }
+    explore(context, instance) {
+        if (instance.parent.firstVisibleChild)
+            return;
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        if (instance.parent.firstVisibleChild)
+            return;
+        if (isVisibleDeep(instance))
+            instance.parent.firstVisibleChild = instance;
+    }
+    render(context, instance, key) {
+        if (instance.parent.firstVisibleChild != instance)
+            return null;
+        return super.render(context, instance, key);
+    }
+}
+FirstVisibleChildItem.prototype.useParentLayout = true;
+export class FirstVisibleChildLayout extends PureContainer {
+    explore(context, instance) {
+        instance.firstVisibleChild = null;
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        let { children, firstVisibleChild } = instance;
+        if (children) {
+            for (let i = 0; i < children.length; i++)
+                if (children[i] != firstVisibleChild)
+                    children[i].destroy();
+        }
+        instance.children = [];
+        if (firstVisibleChild)
+            instance.children.push(firstVisibleChild);
+    }
+    wrapItem(item) {
+        return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({ items: item });
+    }
+}

package/build/ui/layout/FirstVisibleChildLayout.spec.d.ts

@@ -0,0 +1 @@
+export {};