cx 26.0.13 → 26.1.0

package/src/widgets/overlay/MsgBox.tsx

@@ -1,141 +1,141 @@
-import { Window } from "./Window";
-import { Button } from "../Button";
-import { Localization } from "../../ui/Localization";
-import { FlexRow } from "../FlexBox";
-import { registerAlertImpl } from "./alerts";
-import { isString } from "../../util/isString";
-import { Instance } from "../../ui/Instance";
-
-export interface MsgBoxOptions {
-   message?: string;
-   title?: string;
-   header?: string;
-   style?: string;
-   callback?: (option?: string) => boolean | void;
-   okText?: string;
-   yesText?: string;
-   noText?: string;
-   yesButtonMod?: string;
-   noButtonMod?: string;
-   items?: any;
-   children?: any;
-   store?: any;
-}
-
-export class MsgBox {
-   buttonMod?: string;
-   footerDirection?: string;
-   footerJustify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
-   yesText?: string;
-   noText?: string;
-
-   static alert(options: string | MsgBoxOptions): Promise<void> {
-      let opts: MsgBoxOptions;
-      if (isString(options))
-         opts = {
-            message: options,
-         };
-      else opts = options;
-
-      return new Promise<void>(function (resolve) {
-         let callback = (e: any, instance: Instance) => {
-            if (opts.callback && opts.callback() === false) return;
-            instance.parentOptions.dismiss();
-            resolve();
-         };
-
-         let w = Window.create(
-            <cx>
-               <Window
-                  title={opts.title}
-                  header={opts.header}
-                  mod="alert"
-                  modal
-                  center
-                  resizable={false}
-                  closable={false}
-                  style={opts.style || "max-width: 90vw"}
-                  dismissOnPopState
-               >
-                  {opts.message || opts.items || opts.children}
-                  <FlexRow
-                     putInto="footer"
-                     direction={MsgBox.prototype.footerDirection}
-                     justify={MsgBox.prototype.footerJustify}
-                  >
-                     <Button mod={MsgBox.prototype.buttonMod} onClick={callback}>
-                        {opts.okText || "OK"}
-                     </Button>
-                  </FlexRow>
-               </Window>
-            </cx>,
-         ) as any;
-
-         w.open(opts.store);
-      });
-   }
-
-   static yesNo(options: string | MsgBoxOptions): Promise<string> {
-      let opts: MsgBoxOptions;
-      if (isString(options))
-         opts = {
-            message: options,
-         };
-      else opts = options;
-
-      return new Promise<string>(function (resolve, reject) {
-         let callback = (option: string) => (e: any, instance: Instance) => {
-            if (opts.callback && opts.callback(option) === false) return;
-            instance.parentOptions.dismiss();
-            if (option == "yes") resolve(option);
-            else resolve(option);
-         };
-         let w = Window.create(
-            <cx>
-               <Window
-                  title={opts.title}
-                  header={opts.header}
-                  mod="alert"
-                  modal
-                  center
-                  resizable={false}
-                  closable={false}
-                  style={opts.style || "max-width: 90vw"}
-                  dismissOnPopState
-               >
-                  {opts.message || opts.items || opts.children}
-                  <FlexRow
-                     putInto="footer"
-                     direction={MsgBox.prototype.footerDirection}
-                     justify={MsgBox.prototype.footerJustify}
-                     hspacing="small"
-                  >
-                     <Button mod={opts.yesButtonMod || MsgBox.prototype.buttonMod} onClick={callback("yes")}>
-                        {opts.yesText || MsgBox.prototype.yesText}
-                     </Button>
-                     <Button mod={opts.noButtonMod || MsgBox.prototype.buttonMod} onClick={callback("no")}>
-                        {opts.noText || MsgBox.prototype.noText}
-                     </Button>
-                  </FlexRow>
-               </Window>
-            </cx>,
-         ) as any;
-
-         w.open(opts.store);
-      });
-   }
-}
-
-MsgBox.prototype.buttonMod = undefined;
-MsgBox.prototype.footerDirection = "row";
-MsgBox.prototype.footerJustify = "center";
-MsgBox.prototype.yesText = "Yes";
-MsgBox.prototype.noText = "No";
-Localization.registerPrototype("cx/widgets/MsgBox", MsgBox);
-
-export function enableMsgBoxAlerts(): void {
-   registerAlertImpl({
-      yesNo: MsgBox.yesNo.bind(MsgBox),
-      alert: MsgBox.alert.bind(MsgBox),
-   });
-}
+import { Window } from "./Window";
+import { Button } from "../Button";
+import { Localization } from "../../ui/Localization";
+import { FlexRow } from "../FlexBox";
+import { registerAlertImpl } from "./alerts";
+import { isString } from "../../util/isString";
+import { Instance } from "../../ui/Instance";
+
+export interface MsgBoxOptions {
+   message?: string;
+   title?: string;
+   header?: string;
+   style?: string;
+   callback?: (option?: string) => boolean | void;
+   okText?: string;
+   yesText?: string;
+   noText?: string;
+   yesButtonMod?: string;
+   noButtonMod?: string;
+   items?: any;
+   children?: any;
+   store?: any;
+}
+
+export class MsgBox {
+   buttonMod?: string;
+   footerDirection?: string;
+   footerJustify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
+   yesText?: string;
+   noText?: string;
+
+   static alert(options: string | MsgBoxOptions): Promise<void> {
+      let opts: MsgBoxOptions;
+      if (isString(options))
+         opts = {
+            message: options,
+         };
+      else opts = options;
+
+      return new Promise<void>(function (resolve) {
+         let callback = (e: any, instance: Instance) => {
+            if (opts.callback && opts.callback() === false) return;
+            instance.parentOptions.dismiss();
+            resolve();
+         };
+
+         let w = Window.create(
+            <cx>
+               <Window
+                  title={opts.title}
+                  header={opts.header}
+                  mod="alert"
+                  modal
+                  center
+                  resizable={false}
+                  closable={false}
+                  style={opts.style || "max-width: 90vw"}
+                  dismissOnPopState
+               >
+                  {opts.message || opts.items || opts.children}
+                  <FlexRow
+                     putInto="footer"
+                     direction={MsgBox.prototype.footerDirection}
+                     justify={MsgBox.prototype.footerJustify}
+                  >
+                     <Button mod={MsgBox.prototype.buttonMod} onClick={callback}>
+                        {opts.okText || "OK"}
+                     </Button>
+                  </FlexRow>
+               </Window>
+            </cx>,
+         ) as any;
+
+         w.open(opts.store);
+      });
+   }
+
+   static yesNo(options: string | MsgBoxOptions): Promise<string> {
+      let opts: MsgBoxOptions;
+      if (isString(options))
+         opts = {
+            message: options,
+         };
+      else opts = options;
+
+      return new Promise<string>(function (resolve, reject) {
+         let callback = (option: string) => (e: any, instance: Instance) => {
+            if (opts.callback && opts.callback(option) === false) return;
+            instance.parentOptions.dismiss();
+            if (option == "yes") resolve(option);
+            else resolve(option);
+         };
+         let w = Window.create(
+            <cx>
+               <Window
+                  title={opts.title}
+                  header={opts.header}
+                  mod="alert"
+                  modal
+                  center
+                  resizable={false}
+                  closable={false}
+                  style={opts.style || "max-width: 90vw"}
+                  dismissOnPopState
+               >
+                  {opts.message || opts.items || opts.children}
+                  <FlexRow
+                     putInto="footer"
+                     direction={MsgBox.prototype.footerDirection}
+                     justify={MsgBox.prototype.footerJustify}
+                     hspacing="small"
+                  >
+                     <Button mod={opts.yesButtonMod || MsgBox.prototype.buttonMod} onClick={callback("yes")}>
+                        {opts.yesText || MsgBox.prototype.yesText}
+                     </Button>
+                     <Button mod={opts.noButtonMod || MsgBox.prototype.buttonMod} onClick={callback("no")}>
+                        {opts.noText || MsgBox.prototype.noText}
+                     </Button>
+                  </FlexRow>
+               </Window>
+            </cx>,
+         ) as any;
+
+         w.open(opts.store);
+      });
+   }
+}
+
+MsgBox.prototype.buttonMod = undefined;
+MsgBox.prototype.footerDirection = "row";
+MsgBox.prototype.footerJustify = "center";
+MsgBox.prototype.yesText = "Yes";
+MsgBox.prototype.noText = "No";
+Localization.registerPrototype("cx/widgets/MsgBox", MsgBox);
+
+export function enableMsgBoxAlerts(): void {
+   registerAlertImpl({
+      yesNo: MsgBox.yesNo.bind(MsgBox),
+      alert: MsgBox.alert.bind(MsgBox),
+   });
+}

package/src/widgets/overlay/Overlay.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource react */
+import type { Root } from "cx-react";
 import { isBinding, isBindingObject } from "../../data/Binding";
 import { Store } from "../../data/Store";
 import { startAppLoop } from "../../ui/app/startAppLoop";
@@ -469,6 +470,7 @@ export class OverlayComponent<
    onPopState?: () => void;
    unsubscribeWheelBlock?: () => void;
    declare customStyle: any;
+   declare root: Root;
 
    constructor(props: Props) {
       super(props);
@@ -865,6 +867,7 @@ export class OverlayComponent<
 
       if (this.ownedEl) {
          setTimeout(() => {
+            this.root?.unmount();
             if (this.ownedEl?.parentNode) this.ownedEl.parentNode.removeChild(this.ownedEl);
             this.ownedEl = null;
          }, widget.destroyDelay);
@@ -936,7 +939,8 @@ export class OverlayComponent<
 
    componentDidUpdate() {
       if (this.containerEl && !VDOM.DOM.createPortal) {
-         VDOM.DOM.render(this.renderOverlay(), this.containerEl);
+         this.root = VDOM.DOM.createRoot(this.containerEl);
+         this.root.render(this.renderOverlay());
       }
       this.overlayDidUpdate();
    }

package/src/widgets/overlay/Toast.ts

@@ -1,111 +1,111 @@
-import { OverlayBase, OverlayConfig, OverlayInstance } from "./Overlay";
-import { Text } from "../../ui/Text";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { NumberProp, StringProp, RecordsProp } from "../../ui/Prop";
-
-export interface ToastConfig extends OverlayConfig {
-   /** Value of timeout in milliseconds after which the toast is automatically dismissed. */
-   timeout?: NumberProp;
-
-   message?: StringProp;
-
-   /** Add default padding. Default is `true`. */
-   pad?: boolean;
-
-   /**
-    * Defines where the toast will be placed.
-    * Supported values are `top`, `right`, `bottom` and `left`. Default value is `top`.
-    */
-   placement?: string;
-}
-
-export class Toast extends OverlayBase<ToastConfig, OverlayInstance> {
-   declare message?: StringProp;
-   declare pad?: boolean;
-   declare placement?: string;
-
-   init(): void {
-      if (this.message)
-         this.items = {
-            type: Text,
-            value: this.message,
-         } as any;
-      super.init();
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(...args, {
-         timeout: undefined,
-      });
-   }
-
-   prepareData(context: RenderingContext, instance: OverlayInstance): void {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pad: this.pad,
-      };
-      super.prepareData(context, instance);
-   }
-
-   overlayDidUpdate(instance: OverlayInstance, component: any): void {
-      let el = component.containerEl || component.props.parentEl;
-      if (component.state.animated) {
-         el.style.height = `${component.el.offsetHeight}px`;
-         el.classList.add(this.CSS.state("live"));
-      }
-   }
-
-   overlayDidMount(instance: OverlayInstance, component: any): void {
-      let { data } = instance;
-      if (data.timeout > 0) {
-         component.timeoutTimer = setTimeout(() => {
-            instance.dismiss!();
-         }, data.timeout);
-      }
-   }
-
-   overlayWillUnmount(instance: OverlayInstance, component: any): void {
-      let el = component.containerEl || component.props.parentEl;
-      el.style.height = 0;
-      el.classList.remove(this.CSS.state("live"));
-      if (component.timeoutTimer) clearTimeout(component.timeoutTimer);
-   }
-
-   containerFactory(): HTMLElement {
-      let el = document.createElement("div");
-      el.className = this.CSS.element("toaster", "item");
-      let placement = this.placement || "top";
-      let toaster = getToaster(placement);
-      toaster.el.className = this.CSS.block("toaster", null, {
-         [`placement-${placement}`]: true,
-      });
-      toaster.el.insertBefore(el, toaster.el.firstChild);
-      return el;
-   }
-}
-
-interface ToasterInfo {
-   el: HTMLElement;
-}
-
-const toasters: Record<string, ToasterInfo> = {};
-
-function getToaster(placement: string): ToasterInfo {
-   let t = toasters[placement];
-   if (!t) {
-      let el = document.createElement("div");
-      document.body.appendChild(el);
-      t = toasters[placement] = {
-         el,
-      };
-   }
-   return t;
-}
-
-Toast.prototype.styled = true;
-Toast.prototype.pad = true;
-Toast.prototype.animate = true;
-Toast.prototype.baseClass = "toast";
-Toast.prototype.placement = "top";
-Toast.prototype.destroyDelay = 300;
+import { OverlayBase, OverlayConfig, OverlayInstance } from "./Overlay";
+import { Text } from "../../ui/Text";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, StringProp, RecordsProp } from "../../ui/Prop";
+
+export interface ToastConfig extends OverlayConfig {
+   /** Value of timeout in milliseconds after which the toast is automatically dismissed. */
+   timeout?: NumberProp;
+
+   message?: StringProp;
+
+   /** Add default padding. Default is `true`. */
+   pad?: boolean;
+
+   /**
+    * Defines where the toast will be placed.
+    * Supported values are `top`, `right`, `bottom` and `left`. Default value is `top`.
+    */
+   placement?: string;
+}
+
+export class Toast extends OverlayBase<ToastConfig, OverlayInstance> {
+   declare message?: StringProp;
+   declare pad?: boolean;
+   declare placement?: string;
+
+   init(): void {
+      if (this.message)
+         this.items = {
+            type: Text,
+            value: this.message,
+         } as any;
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         timeout: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: OverlayInstance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pad: this.pad,
+      };
+      super.prepareData(context, instance);
+   }
+
+   overlayDidUpdate(instance: OverlayInstance, component: any): void {
+      let el = component.containerEl || component.props.parentEl;
+      if (component.state.animated) {
+         el.style.height = `${component.el.offsetHeight}px`;
+         el.classList.add(this.CSS.state("live"));
+      }
+   }
+
+   overlayDidMount(instance: OverlayInstance, component: any): void {
+      let { data } = instance;
+      if (data.timeout > 0) {
+         component.timeoutTimer = setTimeout(() => {
+            instance.dismiss!();
+         }, data.timeout);
+      }
+   }
+
+   overlayWillUnmount(instance: OverlayInstance, component: any): void {
+      let el = component.containerEl || component.props.parentEl;
+      el.style.height = 0;
+      el.classList.remove(this.CSS.state("live"));
+      if (component.timeoutTimer) clearTimeout(component.timeoutTimer);
+   }
+
+   containerFactory(): HTMLElement {
+      let el = document.createElement("div");
+      el.className = this.CSS.element("toaster", "item");
+      let placement = this.placement || "top";
+      let toaster = getToaster(placement);
+      toaster.el.className = this.CSS.block("toaster", null, {
+         [`placement-${placement}`]: true,
+      });
+      toaster.el.insertBefore(el, toaster.el.firstChild);
+      return el;
+   }
+}
+
+interface ToasterInfo {
+   el: HTMLElement;
+}
+
+const toasters: Record<string, ToasterInfo> = {};
+
+function getToaster(placement: string): ToasterInfo {
+   let t = toasters[placement];
+   if (!t) {
+      let el = document.createElement("div");
+      document.body.appendChild(el);
+      t = toasters[placement] = {
+         el,
+      };
+   }
+   return t;
+}
+
+Toast.prototype.styled = true;
+Toast.prototype.pad = true;
+Toast.prototype.animate = true;
+Toast.prototype.baseClass = "toast";
+Toast.prototype.placement = "top";
+Toast.prototype.destroyDelay = 300;