cx 26.0.14 → 26.1.1

package/src/widgets/grid/GridCellEditor.tsx

@@ -37,7 +37,13 @@ class GridCellEditorCmp extends VDOM.Component<GridCellEditorCmpProps> {
       let { className, style, children } = this.props;
 
       return (
-         <div ref={(el) => (this.el = el)} className={className} style={style}>
+         <div
+            ref={(el) => {
+               this.el = el;
+            }}
+            className={className}
+            style={style}
+         >
             {children}
          </div>
       );

package/src/widgets/icons/calendar.tsx

@@ -1,17 +1,22 @@
 /** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('calendar', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 32 32">
-
-      <path d="M4 3h6m10 0h6" fill="none" stroke="currentColor" strokeWidth="2"/>
-      <path d="M19 21h4v4h-4z" fill="currentColor"/>
-      <path d="M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5" fill="none" stroke="currentColor"/>
-      <path fill="currentColor" d="M10 8h10v2H10z"/>
-      <path fill="none" stroke="currentColor" strokeWidth="2" d="M3 5h24v24H3z"/>
-   </svg>
-}, true);
+import { registerIcon } from "./registry";
 
+export default registerIcon(
+   "calendar",
+   ({ key, ...props }: any) => {
+      return (
+         <svg key={key} {...props} viewBox="0 0 32 32">
+            <path d="M4 3h6m10 0h6" fill="none" stroke="currentColor" strokeWidth="2" />
+            <path d="M19 21h4v4h-4z" fill="currentColor" />
+            <path
+               d="M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5"
+               fill="none"
+               stroke="currentColor"
+            />
+            <path fill="currentColor" d="M10 8h10v2H10z" />
+            <path fill="none" stroke="currentColor" strokeWidth="2" d="M3 5h24v24H3z" />
+         </svg>
+      );
+   },
+   true,
+);

package/src/widgets/icons/check.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('check', (props: any) => {
+export default registerIcon('check', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 64 64">
       <path d="M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z"

package/src/widgets/icons/clear.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('clear', (props: any) => {
+export default registerIcon('clear', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 32 32">
       <path fill="currentColor"

package/src/widgets/icons/close.tsx

@@ -4,9 +4,9 @@ import { registerIcon } from "./registry";
 
 export default registerIcon(
    "close",
-   (props: any) => {
+   ({ key, ...props }: any) => {
       return (
-         <svg {...props} viewBox="0 0 32 32">
+         <svg key={key} {...props} viewBox="0 0 32 32">
             <path
                fill="currentColor"
                strokeWidth="1"

package/src/widgets/icons/cx.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('cx', (props: any) => {
+export default registerIcon('cx', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="-347 249.7 48 48"
    >

package/src/widgets/icons/drop-down.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('drop-down', (props: any) => {
+export default registerIcon('drop-down', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 20 20">
       <path fill="currentColor"

package/src/widgets/icons/file.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('file', (props: any) => {
+export default registerIcon('file', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 16 16">
       <path d="M2 2h5v5h5v7H2z" fill="currentColor" stroke="none"/>

package/src/widgets/icons/folder-open.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('folder-open', (props: any) => {
+export default registerIcon('folder-open', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 16 16">
 

package/src/widgets/icons/folder.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('folder', (props: any) => {
+export default registerIcon('folder', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 16 16">
 

package/src/widgets/icons/forward.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('forward', (props: any) => {
+export default registerIcon('forward', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 20 20">
 

package/src/widgets/icons/loading.tsx

@@ -2,7 +2,7 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('loading', (props: any) => {
+export default registerIcon('loading', ({ key, ...props }: any) => {
    let style = {
       animation: 'linear infinite 0.5s cx-rotate'
    };
@@ -16,6 +16,7 @@ export default registerIcon('loading', (props: any) => {
    };
 
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 50 50">
       <path fill="currentColor" d="M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z" />

package/src/widgets/icons/menu.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('menu', (props: any) => {
+export default registerIcon('menu', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 24 24">
 

package/src/widgets/icons/pixel-picker.tsx

@@ -4,9 +4,9 @@ import { registerIcon } from "./registry";
 
 export default registerIcon(
    "pixel-picker",
-   (props: any) => {
+   ({ key, ...props }: any) => {
       return (
-         <svg {...props} viewBox="0 0 30 30">
+         <svg key={key} {...props} viewBox="0 0 30 30">
             <path
                d="M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z"
                fill="currentColor"

package/src/widgets/icons/search.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('search', (props: any) => {
+export default registerIcon('search', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 32 32">
       <path fill="currentColor"

package/src/widgets/icons/sort-asc.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('sort-asc', (props: any) => {
+export default registerIcon('sort-asc', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 16 16">
       <path fill="currentColor"

package/src/widgets/icons/square.tsx

@@ -2,8 +2,9 @@
 import {VDOM} from '../../ui/Widget';
 import {registerIcon} from './registry';
 
-export default registerIcon('square', (props: any) => {
+export default registerIcon('square', ({ key, ...props }: any) => {
    return <svg
+      key={key}
       {...props}
       viewBox="0 0 64 64">
       <rect

package/src/widgets/nav/Route.spec.tsx

@@ -4,7 +4,7 @@ import { createTestRenderer } from "../../util/test/createTestRenderer";
 import assert from "assert";
 
 describe("Route", () => {
-   it("matching works for ~/widgets/color-pickers", () => {
+   it("matching works for ~/widgets/color-pickers", async () => {
       let widget = (
          <cx>
             <Route url="~/widgets/color-pickers" route="~/widgets/color-pickers">
@@ -15,7 +15,7 @@ describe("Route", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree));

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();
    }