@gtkx/react 0.9.4 → 0.10.0

package/dist/nodes/tree-list-item.js

@@ -0,0 +1,102 @@
+import { registerNodeClass } from "../registry.js";
+import { scheduleAfterCommit } from "../scheduler.js";
+import { VirtualNode } from "./virtual.js";
+export class TreeListItemNode extends VirtualNode {
+    static priority = 1;
+    store;
+    parentItemId;
+    childNodes = [];
+    static matches(type) {
+        return type === "TreeListItem";
+    }
+    setStore(store) {
+        this.store = store;
+        for (const child of this.childNodes) {
+            child.setStore(store);
+        }
+    }
+    setParentItemId(parentId) {
+        this.parentItemId = parentId;
+    }
+    getParentItemId() {
+        return this.parentItemId;
+    }
+    appendChild(child) {
+        if (!(child instanceof TreeListItemNode)) {
+            return;
+        }
+        child.setStore(this.store);
+        child.setParentItemId(this.props.id);
+        this.childNodes.push(child);
+        scheduleAfterCommit(() => {
+            if (this.store && child.props.id !== undefined) {
+                this.store.addItem(child.props.id, {
+                    value: child.props.value,
+                    indentForDepth: child.props.indentForDepth,
+                    indentForIcon: child.props.indentForIcon,
+                    hideExpander: child.props.hideExpander,
+                }, this.props.id);
+            }
+        });
+    }
+    insertBefore(child, before) {
+        if (!(child instanceof TreeListItemNode) || !(before instanceof TreeListItemNode)) {
+            return;
+        }
+        child.setStore(this.store);
+        child.setParentItemId(this.props.id);
+        const beforeIndex = this.childNodes.indexOf(before);
+        if (beforeIndex === -1) {
+            this.childNodes.push(child);
+        }
+        else {
+            this.childNodes.splice(beforeIndex, 0, child);
+        }
+        scheduleAfterCommit(() => {
+            if (this.store && child.props.id !== undefined && before.props.id !== undefined) {
+                this.store.insertItemBefore(child.props.id, before.props.id, {
+                    value: child.props.value,
+                    indentForDepth: child.props.indentForDepth,
+                    indentForIcon: child.props.indentForIcon,
+                    hideExpander: child.props.hideExpander,
+                }, this.props.id);
+            }
+        });
+    }
+    removeChild(child) {
+        if (!(child instanceof TreeListItemNode)) {
+            return;
+        }
+        const index = this.childNodes.indexOf(child);
+        if (index !== -1) {
+            this.childNodes.splice(index, 1);
+        }
+        if (this.store && child.props.id !== undefined) {
+            this.store.removeItem(child.props.id, this.props.id);
+        }
+        child.setStore(undefined);
+        child.setParentItemId(undefined);
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!this.store) {
+            return;
+        }
+        if (!oldProps ||
+            oldProps.id !== newProps.id ||
+            oldProps.value !== newProps.value ||
+            oldProps.indentForDepth !== newProps.indentForDepth ||
+            oldProps.indentForIcon !== newProps.indentForIcon ||
+            oldProps.hideExpander !== newProps.hideExpander) {
+            if (newProps.id !== undefined) {
+                this.store.updateItem(newProps.id, {
+                    value: newProps.value,
+                    indentForDepth: newProps.indentForDepth,
+                    indentForIcon: newProps.indentForIcon,
+                    hideExpander: newProps.hideExpander,
+                });
+            }
+        }
+    }
+}
+registerNodeClass(TreeListItemNode);

package/dist/nodes/tree-list-view.d.ts

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

package/dist/nodes/tree-list-view.js

@@ -0,0 +1,57 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { TreeListItemRenderer } from "./internal/tree-list-item-renderer.js";
+import { filterProps } from "./internal/utils.js";
+import { TreeList } from "./models/tree-list.js";
+import { TreeListItemNode } from "./tree-list-item.js";
+import { WidgetNode } from "./widget.js";
+const PROP_NAMES = ["renderItem", "autoexpand", "selectionMode", "selected", "onSelectionChanged"];
+class TreeListViewNode extends WidgetNode {
+    static priority = 1;
+    itemRenderer;
+    treeList;
+    static matches(type) {
+        return type === "TreeListView";
+    }
+    static createContainer() {
+        return new Gtk.ListView();
+    }
+    constructor(typeName, props, container, rootContainer) {
+        const listView = container ?? new Gtk.ListView();
+        super(typeName, props, listView, rootContainer);
+        this.treeList = new TreeList(props.autoexpand, props.selectionMode);
+        this.itemRenderer = new TreeListItemRenderer(this.signalStore);
+        this.itemRenderer.setStore(this.treeList.getStore());
+        this.container.setFactory(this.itemRenderer.getFactory());
+    }
+    mount() {
+        super.mount();
+        this.container.setModel(this.treeList.getSelectionModel());
+    }
+    appendChild(child) {
+        if (!(child instanceof TreeListItemNode)) {
+            throw new Error(`Cannot append '${child.typeName}' to 'TreeListView': expected TreeListItem`);
+        }
+        this.treeList.appendChild(child);
+    }
+    insertBefore(child, before) {
+        if (!(child instanceof TreeListItemNode) || !(before instanceof TreeListItemNode)) {
+            throw new Error(`Cannot insert '${child.typeName}' to 'TreeListView': expected TreeListItem`);
+        }
+        this.treeList.insertBefore(child, before);
+    }
+    removeChild(child) {
+        if (!(child instanceof TreeListItemNode)) {
+            throw new Error(`Cannot remove '${child.typeName}' from 'TreeListView': expected TreeListItem`);
+        }
+        this.treeList.removeChild(child);
+    }
+    updateProps(oldProps, newProps) {
+        if (!oldProps || oldProps.renderItem !== newProps.renderItem) {
+            this.itemRenderer.setRenderFn(newProps.renderItem);
+        }
+        this.treeList.updateProps(filterProps(oldProps ?? {}, ["renderItem"]), filterProps(newProps, ["renderItem"]));
+        super.updateProps(filterProps(oldProps ?? {}, PROP_NAMES), filterProps(newProps, PROP_NAMES));
+    }
+}
+registerNodeClass(TreeListViewNode);

package/dist/nodes/virtual.d.ts

@@ -0,0 +1,13 @@
+import { Node } from "../node.js";
+import type { Container, Props } from "../types.js";
+export declare class VirtualNode<P = Props> extends Node<undefined, P> {
+    static priority: number;
+    static matches(_type: string): boolean;
+    static createContainer(): void;
+    props: P;
+    constructor(typeName: string, props: P | undefined, container: undefined, rootContainer?: Container);
+    appendChild(_child: Node): void;
+    removeChild(_child: Node): void;
+    insertBefore(_child: Node, _before: Node): void;
+    updateProps(_oldProps: P | null, newProps: P): void;
+}

package/dist/nodes/virtual.js

@@ -0,0 +1,21 @@
+import { Node } from "../node.js";
+import { registerNodeClass } from "../registry.js";
+export class VirtualNode extends Node {
+    static priority = 1;
+    static matches(_type) {
+        return false;
+    }
+    static createContainer() { }
+    props;
+    constructor(typeName, props = {}, container, rootContainer) {
+        super(typeName, props, container, rootContainer);
+        this.props = props;
+    }
+    appendChild(_child) { }
+    removeChild(_child) { }
+    insertBefore(_child, _before) { }
+    updateProps(_oldProps, newProps) {
+        this.props = newProps;
+    }
+}
+registerNodeClass(VirtualNode);

package/dist/nodes/widget.d.ts

@@ -1,5 +1,19 @@
-import type * as Gtk from "@gtkx/ffi/gtk";
+import * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
-export declare class WidgetNode extends Node<Gtk.Widget> {
-    static matches(_type: string): boolean;
+import type { Container, ContainerClass, Props } from "../types.js";
+export declare class WidgetNode<T extends Gtk.Widget = Gtk.Widget, P extends Props = Props> extends Node<T, P> {
+    static priority: number;
+    private motionController?;
+    private clickController?;
+    private keyController?;
+    private scrollController?;
+    static matches(_type: string, containerOrClass?: Container | ContainerClass): boolean;
+    static createContainer(props: Props, containerClass: typeof Gtk.Widget): Container | undefined;
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    updateProps(oldProps: P | null, newProps: P): void;
+    private updateEventControllerProp;
+    private propNameToSignalName;
+    private setProperty;
 }

package/dist/nodes/widget.js

@@ -1,6 +1,262 @@
+import { batch, NativeObject } from "@gtkx/ffi";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { CONSTRUCTOR_PROPS, PROPS, SIGNALS } from "../generated/internal.js";
 import { Node } from "../node.js";
+import { registerNodeClass } from "../registry.js";
+import { isAddable, isAppendable, isEditable, isInsertable, isRemovable, isReorderable, isSingleChild, } from "./internal/predicates.js";
+import { filterProps, isContainerType } from "./internal/utils.js";
+import { SlotNode } from "./slot.js";
+const EVENT_CONTROLLER_PROPS = new Set([
+    "onEnter",
+    "onLeave",
+    "onMotion",
+    "onPressed",
+    "onReleased",
+    "onKeyPressed",
+    "onKeyReleased",
+    "onScroll",
+    "onNotify",
+]);
 export class WidgetNode extends Node {
-    static matches(_type) {
-        return true;
+    static priority = 3;
+    motionController;
+    clickController;
+    keyController;
+    scrollController;
+    static matches(_type, containerOrClass) {
+        return isContainerType(Gtk.Widget, containerOrClass);
+    }
+    static createContainer(props, containerClass) {
+        const WidgetClass = containerClass;
+        const typeName = WidgetClass.glibTypeName;
+        const args = (CONSTRUCTOR_PROPS[typeName] ?? []).map((name) => props[name]);
+        return new WidgetClass(...args);
+    }
+    appendChild(child) {
+        if (child instanceof SlotNode) {
+            child.setParent(this.container);
+            return;
+        }
+        if (!(child instanceof WidgetNode)) {
+            throw new Error(`Cannot append '${child.typeName}' to 'Widget': expected WidgetNode child`);
+        }
+        if (child.container instanceof Gtk.Window) {
+            throw new Error(`Cannot append 'Window' to '${this.typeName}': windows must be top-level containers`);
+        }
+        batch(() => {
+            if (isAppendable(this.container)) {
+                const currentParent = child.container.getParent();
+                if (currentParent !== null && isRemovable(currentParent)) {
+                    currentParent.remove(child.container);
+                }
+                this.container.append(child.container);
+            }
+            else if (isAddable(this.container)) {
+                const currentParent = child.container.getParent();
+                if (currentParent !== null && isRemovable(currentParent)) {
+                    currentParent.remove(child.container);
+                }
+                this.container.add(child.container);
+            }
+            else if (isSingleChild(this.container)) {
+                this.container.setChild(child.container);
+            }
+            else {
+                throw new Error(`Cannot append '${child.typeName}' to '${this.container.constructor.name}': container does not support children`);
+            }
+        });
+    }
+    removeChild(child) {
+        if (child instanceof SlotNode) {
+            return;
+        }
+        if (!(child instanceof WidgetNode)) {
+            throw new Error(`Cannot remove '${child.typeName}' from 'Widget': expected WidgetNode child`);
+        }
+        if (child.container instanceof Gtk.Window) {
+            throw new Error(`Cannot remove 'Window' from '${this.typeName}': windows must be top-level containers`);
+        }
+        batch(() => {
+            if (isRemovable(this.container)) {
+                this.container.remove(child.container);
+            }
+            else if (isSingleChild(this.container)) {
+                this.container.setChild(null);
+            }
+            else {
+                throw new Error(`Cannot remove '${child.typeName}' from '${this.container.constructor.name}': container does not support child removal`);
+            }
+        });
+    }
+    insertBefore(child, before) {
+        if (child instanceof SlotNode) {
+            child.setParent(this.container);
+            return;
+        }
+        if (!(child instanceof WidgetNode) || !(before instanceof WidgetNode)) {
+            throw new Error(`Cannot insert '${child.typeName}' before '${before.typeName}': expected WidgetNode children`);
+        }
+        if (child.container instanceof Gtk.Window) {
+            throw new Error(`Cannot insert 'Window' into '${this.typeName}': windows must be top-level containers`);
+        }
+        batch(() => {
+            if (isReorderable(this.container)) {
+                let beforeChild = this.container.getFirstChild();
+                while (beforeChild) {
+                    if (beforeChild.equals(before.container)) {
+                        break;
+                    }
+                    beforeChild = beforeChild.getNextSibling();
+                }
+                if (!beforeChild) {
+                    throw new Error(`Cannot insert '${child.typeName}': 'before' child not found in container`);
+                }
+                const previousSibling = beforeChild.getPrevSibling() ?? undefined;
+                const currentParent = child.container.getParent();
+                const isChildOfThisContainer = currentParent?.equals(this.container);
+                if (isChildOfThisContainer) {
+                    this.container.reorderChildAfter(child.container, previousSibling);
+                }
+                else {
+                    if (currentParent !== null && isRemovable(currentParent)) {
+                        currentParent.remove(child.container);
+                    }
+                    this.container.insertChildAfter(child.container, previousSibling);
+                }
+            }
+            else if (isInsertable(this.container)) {
+                const currentParent = child.container.getParent();
+                if (currentParent !== null && isRemovable(currentParent)) {
+                    currentParent.remove(child.container);
+                }
+                let position = 0;
+                let currentChild = this.container.getFirstChild();
+                while (currentChild) {
+                    if (currentChild.equals(before.container)) {
+                        break;
+                    }
+                    position++;
+                    currentChild = currentChild.getNextSibling();
+                }
+                if (!currentChild) {
+                    throw new Error(`Cannot insert '${child.typeName}': 'before' child not found in container`);
+                }
+                this.container.insert(child.container, position);
+            }
+            else {
+                this.appendChild(child);
+            }
+        });
+    }
+    updateProps(oldProps, newProps) {
+        const propNames = new Set([
+            ...Object.keys(filterProps(oldProps ?? {}, ["children"])),
+            ...Object.keys(filterProps(newProps ?? {}, ["children"])),
+        ]);
+        const WidgetClass = this.container.constructor;
+        const signals = SIGNALS[WidgetClass.glibTypeName] || new Set();
+        for (const name of propNames) {
+            const oldValue = oldProps?.[name];
+            const newValue = newProps[name];
+            if (oldValue === newValue)
+                continue;
+            if (EVENT_CONTROLLER_PROPS.has(name)) {
+                this.updateEventControllerProp(name, newValue);
+                continue;
+            }
+            const signalName = this.propNameToSignalName(name);
+            if (signals.has(signalName)) {
+                const handler = typeof newValue === "function" ? newValue : undefined;
+                this.signalStore.set(this.container, signalName, handler);
+            }
+            else if (newValue !== undefined) {
+                this.setProperty(name, newValue);
+            }
+        }
+    }
+    updateEventControllerProp(propName, handler) {
+        switch (propName) {
+            case "onEnter":
+            case "onLeave":
+            case "onMotion": {
+                if (!this.motionController) {
+                    this.motionController = new Gtk.EventControllerMotion();
+                    this.container.addController(this.motionController);
+                }
+                const signalName = propName === "onEnter" ? "enter" : propName === "onLeave" ? "leave" : "motion";
+                this.signalStore.set(this.motionController, signalName, handler);
+                break;
+            }
+            case "onPressed":
+            case "onReleased": {
+                if (!this.clickController) {
+                    this.clickController = new Gtk.GestureClick();
+                    this.container.addController(this.clickController);
+                }
+                const signalName = propName === "onPressed" ? "pressed" : "released";
+                this.signalStore.set(this.clickController, signalName, handler);
+                break;
+            }
+            case "onKeyPressed":
+            case "onKeyReleased": {
+                if (!this.keyController) {
+                    this.keyController = new Gtk.EventControllerKey();
+                    this.container.addController(this.keyController);
+                }
+                const signalName = propName === "onKeyPressed" ? "key-pressed" : "key-released";
+                this.signalStore.set(this.keyController, signalName, handler);
+                break;
+            }
+            case "onScroll": {
+                if (!this.scrollController) {
+                    this.scrollController = new Gtk.EventControllerScroll(Gtk.EventControllerScrollFlags.BOTH_AXES);
+                    this.container.addController(this.scrollController);
+                }
+                this.signalStore.set(this.scrollController, "scroll", handler);
+                break;
+            }
+            case "onNotify": {
+                const wrappedHandler = handler
+                    ? (_obj, pspec) => {
+                        handler(pspec.getName());
+                    }
+                    : undefined;
+                this.signalStore.set(this.container, "notify", wrappedHandler);
+                break;
+            }
+        }
+    }
+    propNameToSignalName(name) {
+        return name
+            .slice(2)
+            .replace(/([A-Z])/g, "-$1")
+            .toLowerCase()
+            .replace(/^-/, "");
+    }
+    setProperty(key, value) {
+        const WidgetClass = this.container.constructor;
+        const [getterName, setterName] = PROPS[WidgetClass.glibTypeName]?.[key] || [];
+        const setter = this.container[setterName];
+        const getter = this.container[getterName];
+        if (getter && typeof getter === "function") {
+            const currentValue = getter.call(this.container);
+            if (currentValue === value) {
+                return;
+            }
+            if (currentValue instanceof NativeObject && currentValue.equals(value)) {
+                return;
+            }
+        }
+        if (setter && typeof setter === "function") {
+            const editable = isEditable(this.container) ? this.container : null;
+            const shouldPreserveCursor = key === "text" && editable !== null;
+            const cursorPosition = shouldPreserveCursor ? editable.getPosition() : 0;
+            setter.call(this.container, value);
+            if (shouldPreserveCursor && editable !== null) {
+                const textLength = editable.getText().length;
+                editable.setPosition(Math.min(cursorPosition, textLength));
+            }
+        }
     }
 }
+registerNodeClass(WidgetNode);

package/dist/nodes/window.d.ts

@@ -1,12 +1 @@
-import * as Gtk from "@gtkx/ffi/gtk";
-import type { Props } from "../factory.js";
-import { Node } from "../node.js";
-export declare class WindowNode extends Node<Gtk.Window> {
-    static consumedPropNames: string[];
-    static matches(type: string): boolean;
-    protected isStandalone(): boolean;
-    protected createWidget(type: string, _props: Props): Gtk.Window;
-    mount(): void;
-    unmount(): void;
-    updateProps(oldProps: Props, newProps: Props): void;
-}
+export {};

package/dist/nodes/window.js

@@ -1,44 +1,83 @@
-import { getApplication } from "@gtkx/ffi";
 import * as Adw from "@gtkx/ffi/adw";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { Node, normalizeWidgetType } from "../node.js";
-const WINDOW_TYPES = new Set(["Window", "ApplicationWindow", "AdwWindow", "AdwApplicationWindow"]);
-export class WindowNode extends Node {
-    static consumedPropNames = ["defaultWidth", "defaultHeight"];
-    static matches(type) {
-        return WINDOW_TYPES.has(normalizeWidgetType(type));
-    }
-    isStandalone() {
-        return true;
-    }
-    createWidget(type, _props) {
-        const widgetType = normalizeWidgetType(type);
-        if (widgetType === "ApplicationWindow") {
-            return new Gtk.ApplicationWindow(getApplication());
+import { registerNodeClass } from "../registry.js";
+import { filterProps, isContainerType } from "./internal/utils.js";
+import { Menu } from "./models/menu.js";
+import { WidgetNode } from "./widget.js";
+const PROPS = ["defaultWidth", "defaultHeight"];
+class WindowNode extends WidgetNode {
+    static priority = 1;
+    menu;
+    static matches(_type, containerOrClass) {
+        return isContainerType(Gtk.Window, containerOrClass);
+    }
+    static createContainer(props, containerClass, rootContainer) {
+        const WindowClass = containerClass;
+        if (isContainerType(Gtk.ApplicationWindow, WindowClass) ||
+            isContainerType(Adw.ApplicationWindow, WindowClass)) {
+            if (!(rootContainer instanceof Gtk.Application)) {
+                throw new Error("Expected ApplicationWindow to be created within Application");
+            }
+            if (isContainerType(Adw.ApplicationWindow, WindowClass)) {
+                return new Adw.ApplicationWindow(rootContainer);
+            }
+            return new Gtk.ApplicationWindow(rootContainer);
         }
-        if (widgetType === "AdwApplicationWindow") {
-            return new Adw.ApplicationWindow(getApplication());
+        return WidgetNode.createContainer(props, containerClass);
+    }
+    constructor(typeName, props, container, rootContainer) {
+        super(typeName, props, container, rootContainer);
+        const application = rootContainer instanceof Gtk.Application ? rootContainer : undefined;
+        const actionMap = container instanceof Gtk.ApplicationWindow ? container : undefined;
+        this.menu = new Menu("root", {}, actionMap, application);
+    }
+    appendChild(child) {
+        if (child.container instanceof Gtk.Window) {
+            child.container.setTransientFor(this.container);
+            return;
         }
-        if (widgetType === "AdwWindow") {
-            return new Adw.Window();
+        this.menu.appendChild(child);
+        if (child instanceof WidgetNode &&
+            (this.container instanceof Adw.ApplicationWindow || this.container instanceof Adw.Window)) {
+            this.container.setContent(child.container);
+            return;
         }
-        return new Gtk.Window();
+        super.appendChild(child);
+    }
+    removeChild(child) {
+        if (child.container instanceof Gtk.Window) {
+            child.container.setTransientFor(undefined);
+            return;
+        }
+        this.menu.removeChild(child);
+        if (child instanceof WidgetNode &&
+            (this.container instanceof Adw.ApplicationWindow || this.container instanceof Adw.Window)) {
+            this.container.setContent(undefined);
+            return;
+        }
+        super.removeChild(child);
+    }
+    insertBefore(child, before) {
+        this.menu.insertBefore(child, before);
+        this.appendChild(child);
     }
     mount() {
-        this.widget.present();
+        this.container.present();
+        super.mount();
     }
     unmount() {
-        this.widget.destroy();
+        this.container.destroy();
         super.unmount();
     }
     updateProps(oldProps, newProps) {
-        const widthChanged = oldProps.defaultWidth !== newProps.defaultWidth;
-        const heightChanged = oldProps.defaultHeight !== newProps.defaultHeight;
-        if (widthChanged || heightChanged) {
+        if (!oldProps ||
+            oldProps.defaultWidth !== newProps.defaultWidth ||
+            oldProps.defaultHeight !== newProps.defaultHeight) {
             const width = newProps.defaultWidth ?? -1;
             const height = newProps.defaultHeight ?? -1;
-            this.widget.setDefaultSize(width, height);
+            this.container.setDefaultSize(width, height);
         }
-        super.updateProps(oldProps, newProps);
+        super.updateProps(filterProps(oldProps ?? {}, PROPS), filterProps(newProps, PROPS));
     }
 }
+registerNodeClass(WindowNode);

package/dist/portal.d.ts

@@ -1,23 +1,28 @@
 import type { ReactNode, ReactPortal } from "react";
+import type { Container } from "./types.js";
 /**
- * Creates a portal that renders children into a different GTK widget container.
+ * Creates a React portal for rendering children into a different part of the widget tree.
  *
- * Similar to ReactDOM.createPortal, this allows you to render a subtree into
- * a different part of the widget tree.
+ * Portals are useful for rendering dialogs, tooltips, or other floating content
+ * that should visually appear outside its parent component's boundaries.
  *
- * When called without a container argument, the portal renders at the root level.
- * This is useful for dialogs which don't need a parent container.
- *
- * Implementation note: ReactPortal is an opaque type, so we manually construct
- * the internal representation required by custom reconcilers.
+ * @param children - The React elements to render in the portal
+ * @param container - The target container widget to render into
+ * @param key - Optional key for the portal element
+ * @returns A ReactPortal element
  *
  * @example
  * ```tsx
- * // Render dialog at root level (no container needed)
- * {createPortal(<AboutDialog programName="My App" />)}
+ * import { createPortal } from "@gtkx/react";
  *
- * // Render into a specific container
- * {createPortal(<Label label="This is in the Box" />, boxRef.current)}
+ * const Modal = ({ container, children }) => {
+ *   return createPortal(
+ *     <GtkWindow modal>
+ *       {children}
+ *     </GtkWindow>,
+ *     container
+ *   );
+ * };
  * ```
  */
-export declare const createPortal: (children: ReactNode, container?: unknown, key?: string | null) => ReactPortal;
+export declare const createPortal: (children: ReactNode, container: Container, key?: string | null) => ReactPortal;