@gtkx/react 1.0.0-rc.4 → 1.1.0

package/src/adw/element-behaviors.ts

@@ -4,21 +4,23 @@ import type { AlertDialogResponse } from "./prop-types.js";
 import {
     addRemoveSlot,
     adoptedChildrenSlot,
+    applicationCreator,
     boxSlot,
+    childMatcher,
     childSetterSlot,
     contentSetterSlot,
     deferred,
+    indexedSlot,
     list,
     slot,
 } from "../reconciler/behaviors.js";
-import { type ElementConfig, forTypes, registerElements } from "../reconciler/registry.js";
+import { type ElementBehavior, type ElementConfig, forTypes, registerElements } from "../reconciler/registry.js";
 import { BUILTIN_ELEMENTS, CHILD_SETTER_TYPES, CONTENT_SETTER_TYPES } from "./element-config.js";
 
 type AdwChildSetter =
     | Adw.Bin |
     Adw.BreakpointBin |
     Adw.Clamp |
-    Adw.ClampScrollable |
     Adw.Dialog |
     Adw.NavigationPage |
     Adw.SplitButton |
@@ -27,11 +29,11 @@ type AdwChildSetter =
     Adw.ToastOverlay |
     Adw.Toggle;
 
-type AdwContentSetter = Adw.ApplicationWindow | Adw.BottomSheet | Adw.Flap | Adw.OverlaySplitView | Adw.Window;
+type AdwContentSetter = Adw.ApplicationWindow | Adw.BottomSheet | Adw.OverlaySplitView | Adw.Window;
 type BreakpointHost = Adw.ApplicationWindow | Adw.Window | Adw.Dialog;
-type PageHost = Adw.PreferencesDialog | Adw.PreferencesWindow;
 type PrefixSuffixRow = Adw.ActionRow | Adw.EntryRow | Adw.ExpanderRow;
 
+const SLOT_SUFFIX = "Slot";
 const childSetter = childSetterSlot<AdwChildSetter>();
 const contentSetter = contentSetterSlot<AdwContentSetter>();
 
@@ -42,36 +44,123 @@ const breakpoints = slot<BreakpointHost, Adw.Breakpoint>("breakpoints", "AdwBrea
 });
 
 const prefixSuffix = [
-    slot<PrefixSuffixRow, Gtk.Widget>("prefix", "GtkWidget", {
-        attach: (row, child) => {
+    addRemoveSlot<Gtk.Widget, PrefixSuffixRow>(
+        "prefix",
+        "GtkWidget",
+        (row, child) => {
             row.addPrefix(child);
         },
-        detach: (row, child) => {
+        (row, child) => {
             row.remove(child);
         },
-    }),
-    slot<PrefixSuffixRow, Gtk.Widget>("suffix", "GtkWidget", {
-        attach: (row, child) => {
+    ),
+    addRemoveSlot<Gtk.Widget, PrefixSuffixRow>(
+        "suffix",
+        "GtkWidget",
+        (row, child) => {
             row.addSuffix(child);
         },
-        detach: (row, child) => {
+        (row, child) => {
             row.remove(child);
         },
-    }),
+    ),
 ];
 
-const pageHostChildren = addRemoveSlot<Adw.PreferencesPage, PageHost>(
+const preferencesDialogChildren = addRemoveSlot<Adw.PreferencesPage, Adw.PreferencesDialog>(
     "children",
     "AdwPreferencesPage",
-    (host, page) => {
-        host.add(page);
+    (dialog, page) => {
+        dialog.add(page);
     },
-    (host, page) => {
-        host.remove(page);
+    (dialog, page) => {
+        dialog.remove(page);
     },
 );
 
+const alertDialogExtraChild = slot<Adw.AlertDialog, Gtk.Widget>("children", "GtkWidget", {
+    attach: (dialog, child) => {
+        dialog.setExtraChild(child);
+    },
+    detach: (dialog) => {
+        dialog.setExtraChild(null);
+    },
+});
+
+const sidebarSections = indexedSlot<Adw.Sidebar, Adw.SidebarSection>("children", "AdwSidebarSection");
+const sidebarItems = indexedSlot<Adw.SidebarSection, Adw.SidebarItem>("children", "AdwSidebarItem");
+const isWidget = childMatcher("GtkWidget");
+
+const multiLayoutSlots: ElementBehavior<Adw.MultiLayoutView> = {
+    attach: (view, child, info) => {
+        const id = getSlotId(info.slot);
+
+        if (id === null || !isWidget(child)) {
+            return;
+        }
+
+        view.setChild(id, child as Gtk.Widget);
+
+        return true;
+    },
+    detach: (view, child, info) => {
+        const id = getSlotId(info.slot);
+
+        if (id === null || !isWidget(child)) {
+            return;
+        }
+
+        const widget = child as Gtk.Widget;
+
+        if (view.getChild(id) === widget) {
+            widget.unparent();
+        }
+    },
+};
+
+const multiLayoutLayouts = slot<Adw.MultiLayoutView, Gtk.Widget>("layouts", "GtkWidget", {
+    attach: (view, content) => {
+        const layout = new Adw.Layout({ content });
+        view.addLayout(layout);
+
+        return layout;
+    },
+    reorder: (_view, _content, info) => info.adopted,
+    detach: (view, _content, info) => {
+        if (info.adopted instanceof Adw.Layout) {
+            view.removeLayout(info.adopted);
+        }
+    },
+});
+
 const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
+    AdwApplication: {
+        behaviors: [applicationCreator(Adw.Application)],
+    },
+    AdwSidebar: {
+        behaviors: [sidebarSections],
+    },
+    AdwSidebarSection: {
+        behaviors: [sidebarItems],
+    },
+    AdwMultiLayoutView: {
+        behaviors: [
+            multiLayoutLayouts,
+            multiLayoutSlots,
+            deferred<Adw.MultiLayoutView, string>("layoutName", (view, name) => view.getLayoutByName(name) !== null),
+        ],
+    },
+    AdwClampScrollable: {
+        behaviors: [
+            slot<Adw.ClampScrollable, Gtk.Scrollable & Gtk.Widget>("children", "GtkScrollable", {
+                attach: (clamp, child) => {
+                    clamp.setChild(child);
+                },
+                detach: (clamp) => {
+                    clamp.setChild(null);
+                },
+            }),
+        ],
+    },
     ...forTypes(CHILD_SETTER_TYPES, {
         behaviors: [childSetter],
     }),
@@ -121,26 +210,13 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
                     row.remove(child);
                 },
             ),
-            addRemoveSlot<Gtk.Widget, Adw.ExpanderRow>(
-                "actions",
-                "GtkWidget",
-                (row, child) => {
-                    row.addAction(child);
-                },
-                (row, child) => {
-                    row.remove(child);
-                },
-            ),
         ],
     },
     AdwNavigationSplitView: {
         behaviors: [contentSetterSlot<Adw.NavigationSplitView, Adw.NavigationPage>("AdwNavigationPage")],
     },
-    AdwLeaflet: {
-        behaviors: [boxSlot<Adw.Leaflet | Adw.WrapBox>()],
-    },
     AdwWrapBox: {
-        behaviors: [boxSlot<Adw.Leaflet | Adw.WrapBox>()],
+        behaviors: [boxSlot<Adw.WrapBox>()],
     },
     AdwCarousel: {
         behaviors: [
@@ -170,10 +246,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
         ],
     },
     AdwPreferencesDialog: {
-        behaviors: [pageHostChildren],
-    },
-    AdwPreferencesWindow: {
-        behaviors: [pageHostChildren],
+        behaviors: [preferencesDialogChildren],
     },
     AdwPreferencesGroup: {
         behaviors: [
@@ -189,20 +262,6 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
             ),
         ],
     },
-    AdwSqueezer: {
-        behaviors: [
-            addRemoveSlot<Gtk.Widget, Adw.Squeezer>(
-                "children",
-                "GtkWidget",
-                (squeezer, child) => {
-                    squeezer.add(child);
-                },
-                (squeezer, child) => {
-                    squeezer.remove(child);
-                },
-            ),
-        ],
-    },
     AdwTabView: {
         behaviors: [
             slot<Adw.TabView, Gtk.Widget>("children", "GtkWidget", {
@@ -250,22 +309,26 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     AdwToolbarView: {
         behaviors: [
             contentSetterSlot<Adw.ToolbarView>(),
-            slot<Adw.ToolbarView, Gtk.Widget>("topBar", "GtkWidget", {
-                attach: (view, child) => {
+            addRemoveSlot<Gtk.Widget, Adw.ToolbarView>(
+                "topBar",
+                "GtkWidget",
+                (view, child) => {
                     view.addTopBar(child);
                 },
-                detach: (view, child) => {
+                (view, child) => {
                     view.remove(child);
                 },
-            }),
-            slot<Adw.ToolbarView, Gtk.Widget>("bottomBar", "GtkWidget", {
-                attach: (view, child) => {
+            ),
+            addRemoveSlot<Gtk.Widget, Adw.ToolbarView>(
+                "bottomBar",
+                "GtkWidget",
+                (view, child) => {
                     view.addBottomBar(child);
                 },
-                detach: (view, child) => {
+                (view, child) => {
                     view.remove(child);
                 },
-            }),
+            ),
         ],
     },
     AdwHeaderBar: {
@@ -324,6 +387,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     AdwAlertDialog: {
         behaviors: [
+            alertDialogExtraChild,
             list<Adw.AlertDialog, AlertDialogResponse>("responses", {
                 add: (dialog, response) => {
                     dialog.addResponse(response.id, response.label);
@@ -344,5 +408,13 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
 };
 
+function getSlotId(name: string): string | null {
+    if (name.length <= SLOT_SUFFIX.length || !name.endsWith(SLOT_SUFFIX)) {
+        return null;
+    }
+
+    return name.slice(0, -SLOT_SUFFIX.length);
+}
+
 registerElements(BUILTIN_ELEMENTS);
 registerElements(BUILTIN_BEHAVIORS);

package/src/adw/element-config.ts

@@ -3,7 +3,6 @@ import { type ElementConfig, forTypes, internal, type ModuleExport } from "../re
 const CHILD_SETTER_TYPES: string[] = [
     "AdwBin",
     "AdwClamp",
-    "AdwClampScrollable",
     "AdwNavigationPage",
     "AdwSplitButton",
     "AdwStatusPage",
@@ -12,17 +11,11 @@ const CHILD_SETTER_TYPES: string[] = [
     "AdwToggle",
 ];
 
-const CONTENT_SETTER_TYPES: string[] = ["AdwBottomSheet", "AdwFlap", "AdwOverlaySplitView"];
+const CONTENT_SETTER_TYPES: string[] = ["AdwBottomSheet", "AdwOverlaySplitView"];
 const childrenProps = internal("ChildrenProps");
 const breakpointsProps = adw("AdwBreakpointsProps");
 const preferencesRowProps = adw("AdwPreferencesRowProps");
 
-/**
- * The framework's own element configuration for the Adwaita types it customizes: the base props interface each
- * generated element extends, the component that wraps it, the GObject properties left out of its generated
- * props, and whether its GObject is created by its parent. Carries no behaviors, so importing it never
- * reaches the GObject bindings.
- */
 const BUILTIN_ELEMENTS: Record<string, ElementConfig> = {
     ...forTypes(CHILD_SETTER_TYPES, {
         props: childrenProps,
@@ -32,12 +25,25 @@ const BUILTIN_ELEMENTS: Record<string, ElementConfig> = {
         props: childrenProps,
         omittedProps: ["content"],
     }),
+    AdwClampScrollable: {
+        props: childrenProps,
+        omittedProps: ["child"],
+    },
     AdwViewStackPage: {
         isLazy: true,
     },
     AdwTabPage: {
         isLazy: true,
     },
+    AdwLayout: {
+        isLazy: true,
+    },
+    AdwSidebarSection: {
+        props: childrenProps,
+    },
+    AdwMultiLayoutView: {
+        props: adw("AdwMultiLayoutViewProps"),
+    },
     AdwPreferencesRow: {
         props: preferencesRowProps,
     },
@@ -71,9 +77,6 @@ const BUILTIN_ELEMENTS: Record<string, ElementConfig> = {
         props: childrenProps,
         omittedProps: ["content"],
     },
-    AdwLeaflet: {
-        props: childrenProps,
-    },
     AdwWrapBox: {
         props: childrenProps,
     },
@@ -86,15 +89,9 @@ const BUILTIN_ELEMENTS: Record<string, ElementConfig> = {
     AdwPreferencesDialog: {
         props: childrenProps,
     },
-    AdwPreferencesWindow: {
-        props: childrenProps,
-    },
     AdwPreferencesGroup: {
         props: childrenProps,
     },
-    AdwSqueezer: {
-        props: childrenProps,
-    },
     AdwTabView: {
         props: childrenProps,
     },
@@ -122,6 +119,7 @@ const BUILTIN_ELEMENTS: Record<string, ElementConfig> = {
     },
     AdwAlertDialog: {
         props: adw("AdwAlertDialogProps"),
+        omittedProps: ["extraChild"],
     },
 };
 

package/src/adw/prop-types.ts

@@ -2,36 +2,68 @@ import type * as Adw from "@gtkx/gi/adw";
 import type { ReactNode } from "react";
 import type { ChildrenProps } from "../prop-types.js";
 
+/** One button in an `Adw.AlertDialog`'s `responses` prop. */
 type AlertDialogResponse = {
+    /** Name the dialog reports on `onResponse` when this button is chosen. */
     id: string;
+    /** Text shown on the button. */
     label: string;
+    /** Styling the button is given, such as suggested or destructive; defaults to the plain appearance. */
     appearance?: Adw.ResponseAppearance;
+    /** Whether the button can be activated; defaults to true. */
     isEnabled?: boolean;
 };
 
+/** Props of an `Adw.AlertDialog` element. */
 type AdwAlertDialogProps = {
+    /** Buttons the dialog offers, added and removed as the list changes. */
     responses?: AlertDialogResponse[] | null | undefined;
-} & ChildrenProps;
+    /**
+     * Widget set as the dialog's extra child, shown below the `heading` and `body` and above the
+     * response buttons, leaving the dialog's own chrome in place.
+     */
+    children?: ReactNode;
+};
 
+/** Props of an `Adw.PreferencesRow` element. */
 type AdwPreferencesRowProps = {
+    /** Widgets added at the start of the row, before its title. */
     prefix?: ReactNode | null | undefined;
+    /** Widgets added at the end of the row. */
     suffix?: ReactNode | null | undefined;
 };
 
+/** Props of an `Adw.ExpanderRow` element. */
 type AdwExpanderRowProps = {
+    /** Widgets added to the area the row reveals when it expands. */
     rows?: ReactNode | null | undefined;
-    actions?: ReactNode | null | undefined;
 } & AdwPreferencesRowProps;
 
+/** Props of an `Adw.ToolbarView` element, whose `children` is the content the bars surround. */
 type AdwToolbarViewProps = {
+    /** Widgets stacked above the content. */
     topBar?: ReactNode | null | undefined;
+    /** Widgets stacked below the content. */
     bottomBar?: ReactNode | null | undefined;
 } & ChildrenProps;
 
+/** Props of an element that hosts breakpoints, such as `Adw.Window` or `Adw.BreakpointBin`. */
 type AdwBreakpointsProps = {
+    /** `Adw.Breakpoint` elements added to the element, each applying while its condition holds. */
     breakpoints?: ReactNode | null | undefined;
 } & ChildrenProps;
 
+/** Props of an `Adw.MultiLayoutView` element. */
+type AdwMultiLayoutViewProps = {
+    /** `Adw.Layout` elements added to the view, each holding the content it lays out. */
+    layouts?: ReactNode | null | undefined;
+    /**
+     * Widget the view places in the `Adw.LayoutSlot` whose `id` is the prop name without its `Slot`
+     * suffix, so `sidebarSlot` fills the slot with id `sidebar` in whichever layout is current.
+     */
+    [slot: `${string}Slot`]: ReactNode | null | undefined;
+};
+
 export {
     type AlertDialogResponse,
     type AdwAlertDialogProps,
@@ -39,4 +71,5 @@ export {
     type AdwExpanderRowProps,
     type AdwToolbarViewProps,
     type AdwBreakpointsProps,
+    type AdwMultiLayoutViewProps,
 };

package/src/components/application-window.tsx

@@ -0,0 +1,10 @@
+import type { ElementType, ReactNode } from "react";
+import { useApplication } from "../hooks/use-application.js";
+import { createPortaledComponent } from "./portaled.js";
+import { createPresentedWindowComponent } from "./window.js";
+
+const createApplicationWindowComponent = (Component: ElementType): ((props: unknown) => ReactNode) =>
+    createPortaledComponent(createPresentedWindowComponent(Component), useApplication);
+
+/** @internal */
+export { createApplicationWindowComponent };

package/src/components/application.tsx

@@ -1,10 +1,12 @@
 import type * as Gtk from "@gtkx/gi/gtk";
 import { quitApplication, runApplication } from "@gtkx/runtime";
-import { pickBy } from "@gtkx/utils";
+import { pickBy, warn } from "@gtkx/utils";
+import process from "node:process";
 import { type ElementType, type ReactNode, type Ref, useLayoutEffect, useState } from "react";
 import { applicationId as defaultApplicationId } from "virtual:gtkx-config";
 import { ApplicationContext } from "../hooks/use-application.js";
 import { useMergedRef } from "../hooks/use-merged-refs.js";
+import { createPortaledComponent } from "./portaled.js";
 
 type ApplicationComponentProps = {
     applicationId?: string | null | undefined;
@@ -14,23 +16,57 @@ type ApplicationComponentProps = {
 
 const POST_ACTIVATE_PROPS = new Set(["menubar"]);
 
+const commandLine = (applicationId: string | null): string[] => [
+    applicationId?.split(".").at(-1) ?? "gtkx",
+    ...process.argv.slice(2),
+];
+
+const reportOwnedApplicationId = (application: Gtk.Application): void => {
+    if (!application.getIsRegistered() || !application.getIsRemote()) {
+        return;
+    }
+
+    warn(
+        `Another process already owns ${application.applicationId ?? "this application ID"}, so this process ` +
+        "registered as a remote instance and can never show a window. Quit that instance or change " +
+        "applicationId, then start this application again.",
+    );
+};
+
+const startApplication = (
+    application: Gtk.Application,
+    setActivated: (isActivated: boolean) => void,
+    applicationId: string | null,
+): void => {
+    application.on("activate", () => {
+        setActivated(true);
+    });
+
+    const { exitStatus } = runApplication(application, commandLine(applicationId));
+    reportOwnedApplicationId(application);
+
+    if (exitStatus !== 0) {
+        process.exitCode = exitStatus;
+    }
+};
+
 const useApplicationLifecycle = (
     application: Gtk.Application | null,
     setActivated: (isActivated: boolean) => void,
+    applicationId: string | null,
 ): void => {
     useLayoutEffect(() => {
         if (!application) {
             return;
         }
 
-        runApplication(application);
-        setActivated(true);
+        startApplication(application, setActivated, applicationId);
 
         return () => {
             quitApplication(application);
             setActivated(false);
         };
-    }, [application, setActivated]);
+    }, [application, setActivated, applicationId]);
 };
 
 const applicationChildren = (application: Gtk.Application | null, children: ReactNode): ReactNode => {
@@ -41,13 +77,13 @@ const applicationChildren = (application: Gtk.Application | null, children: Reac
     return <ApplicationContext.Provider value={application}>{children}</ApplicationContext.Provider>;
 };
 
-const createApplicationComponent = (
+const createApplicationElement = (
     Component: ElementType,
 ): ((props: ApplicationComponentProps) => ReactNode) => {
     return ({ applicationId = defaultApplicationId, children, ref, ...rest }: ApplicationComponentProps): ReactNode => {
         const [application, setApplication] = useState<Gtk.Application | null>(null);
         const [activated, setActivated] = useState(false);
-        useApplicationLifecycle(application, setActivated);
+        useApplicationLifecycle(application, setActivated, applicationId);
         const mergedRef = useMergedRef(ref, setApplication);
         const appliedProps = activated ? rest : pickBy(rest, (_value, key) => !POST_ACTIVATE_PROPS.has(key));
 
@@ -59,5 +95,8 @@ const createApplicationComponent = (
     };
 };
 
+const createApplicationComponent = (Component: ElementType): ((props: unknown) => ReactNode) =>
+    createPortaledComponent(createApplicationElement(Component));
+
 /** @internal */
 export { createApplicationComponent };

package/src/components/element.tsx

@@ -3,44 +3,80 @@ import { createElement, type ElementType, isValidElement, type ReactElement, typ
 import type { Props } from "../reconciler/registry.js";
 
 const Prop = "gtkx:prop";
+const NO_PROP_CHILDREN: ReactNode[] = [];
 
 const hasElement = (value: unknown): boolean =>
     isValidElement(value) || (Array.isArray(value) && value.some((item: unknown) => hasElement(item)));
 
-const routeProp = (key: string, value: unknown, hostProps: Props, propChildren: ReactNode[]): void => {
-    if (key !== "ref" && hasElement(value)) {
+const isRoutedProp = (key: string, value: unknown): boolean =>
+    key !== "children" && key !== "ref" && hasElement(value);
+
+const collectPropChildren = (record: Props): ReactNode[] | null => {
+    let propChildren: ReactNode[] | null = null;
+
+    for (const key in record) {
+        if (!isRoutedProp(key, record[key])) {
+            continue;
+        }
+
+        propChildren ??= [];
+
         propChildren.push(
-            createElement(Prop, { propName: key, key: `${Prop}:${key}` }, value as ReactNode),
+            createElement(Prop, { propName: key, key: `${Prop}:${key}` }, record[key] as ReactNode),
         );
-    } else {
-        hostProps[key] = value;
     }
+
+    return propChildren;
 };
 
-const buildElement = (typeName: string, record: Props): ReactElement => {
-    const Host = typeName as ElementType;
+const hostPropsWithout = (record: Props): Props => {
     const hostProps: Props = {};
-    const propChildren: ReactNode[] = [];
 
     for (const key in record) {
-        if (key === "children") {
-            continue;
+        if (key !== "children" && !isRoutedProp(key, record[key])) {
+            hostProps[key] = record[key];
         }
+    }
+
+    return hostProps;
+};
 
-        routeProp(key, record[key], hostProps, propChildren);
+const buildElement = (typeName: string, record: Props): ReactElement => {
+    const Host = typeName as ElementType;
+    const propChildren = collectPropChildren(record);
+
+    if (propChildren === null) {
+        return (
+            <Host {...record}>
+                {NO_PROP_CHILDREN}
+                {record.children as ReactNode}
+            </Host>
+        );
     }
 
     return (
-        <Host {...hostProps}>
+        <Host {...hostPropsWithout(record)}>
             {propChildren}
             {record.children as ReactNode}
         </Host>
     );
 };
 
-const createElementComponent =
-    (typeName: string): ((props: unknown) => ReactNode) =>
-        (props: unknown): ReactNode =>
-            buildElement(typeName, isRecord(props) ? props : {});
+/**
+ * Builds the component that renders the element of a GLib type, which is how the generated `@gtkx/jsx`
+ * store exposes every widget. Reach for it to render a type codegen does not cover, such as one
+ * `registerClass` created: the element name is the GType name, and the component routes each prop whose
+ * value is an element into that prop's slot, which a bare intrinsic element cannot do.
+ *
+ * Name the props the element takes as the type argument, since the GType name says nothing about them.
+ * Left out, the component takes `unknown`, which accepts no attributes at all.
+ *
+ * @param typeName GType name to render, such as `GtkButton` or the `typeName` given to `registerClass`.
+ * @returns A component taking that type's props.
+ */
+/* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- callers name the props */
+function createElementComponent<P = unknown>(typeName: string): (props: P) => ReactNode {
+    return (props: P): ReactNode => buildElement(typeName, isRecord(props) ? props : {});
+}
 
 export { Prop, createElementComponent };

package/src/components/portaled.tsx

@@ -0,0 +1,14 @@
+import type { ElementType, ReactNode } from "react";
+import { isRecord } from "@gtkx/utils";
+import type { Container } from "../reconciler/host-config.js";
+import { rootElement } from "../reconciler/root-element.js";
+import { createPortal } from "../reconciler/root.js";
+
+const useRootContainer = (): Container => rootElement;
+
+const createPortaledComponent =
+    (Component: ElementType, useContainer: () => Container = useRootContainer): ((props: unknown) => ReactNode) =>
+        (props: unknown): ReactNode =>
+            createPortal(<Component {...(isRecord(props) ? props : {})} />, useContainer());
+
+export { createPortaledComponent };