cx 26.0.5 → 26.0.8

package/src/widgets/icons/forward.tsx

@@ -1,22 +1,22 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('forward', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 20 20">
-
-      <path fill="currentColor"
-         strokeWidth="0"
-         stroke="currentColor"
-         d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" />
-
-      <path fill="currentColor"
-         strokeWidth="0"
-         stroke="currentColor"
-         d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" />
-
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('forward', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 20 20">
+
+      <path fill="currentColor"
+         strokeWidth="0"
+         stroke="currentColor"
+         d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" />
+
+      <path fill="currentColor"
+         strokeWidth="0"
+         stroke="currentColor"
+         d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" />
+
+   </svg>
+}, true);
+

package/src/widgets/icons/loading.tsx

@@ -1,24 +1,24 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('loading', (props: any) => {
-   let style = {
-      animation: 'linear infinite 0.5s cx-rotate'
-   };
-
-   if (props && props.style)
-      Object.assign(style, props.style);
-
-   props = {
-      ...props,
-      style
-   };
-
-   return <svg
-      {...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" />
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('loading', (props: any) => {
+   let style = {
+      animation: 'linear infinite 0.5s cx-rotate'
+   };
+
+   if (props && props.style)
+      Object.assign(style, props.style);
+
+   props = {
+      ...props,
+      style
+   };
+
+   return <svg
+      {...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" />
+   </svg>
+}, true);
+

package/src/widgets/icons/menu.tsx

@@ -1,17 +1,17 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('menu', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 24 24">
-
-      <path d="M0 0h24v24H0z" 
-            fill="none" />
-      <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-            fill="currentColor" />
-
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('menu', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 24 24">
+
+      <path d="M0 0h24v24H0z" 
+            fill="none" />
+      <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+            fill="currentColor" />
+
+   </svg>
+}, true);
+

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

@@ -1,18 +1,18 @@
-/** @jsxImportSource react */
-import { VDOM } from "../../ui/Widget";
-import { registerIcon } from "./registry";
-
-export default registerIcon(
-   "pixel-picker",
-   (props: any) => {
-      return (
-         <svg {...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"
-            />
-         </svg>
-      );
-   },
-   true
-);
+/** @jsxImportSource react */
+import { VDOM } from "../../ui/Widget";
+import { registerIcon } from "./registry";
+
+export default registerIcon(
+   "pixel-picker",
+   (props: any) => {
+      return (
+         <svg {...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"
+            />
+         </svg>
+      );
+   },
+   true
+);

package/src/widgets/icons/search.tsx

@@ -1,13 +1,13 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('search', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 32 32">
-      <path fill="currentColor"
-            d="M25.595 22.036l-5.26-5.075c.75-1.18 1.206-2.56 1.206-4.05 0-4.32-3.63-7.82-8.103-7.82-4.477 0-8.107 3.503-8.107 7.82 0 4.32 3.63 7.825 8.106 7.825 1.544 0 2.972-.44 4.198-1.162l5.26 5.074c.37.356.98.354 1.35 0l1.352-1.304c.37-.357.37-.947 0-1.304zm-12.16-3.91c-2.985 0-5.405-2.336-5.405-5.216 0-2.88 2.42-5.214 5.405-5.214 2.984 0 5.404 2.335 5.404 5.214 0 2.88-2.42 5.215-5.407 5.215z" />
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('search', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 32 32">
+      <path fill="currentColor"
+            d="M25.595 22.036l-5.26-5.075c.75-1.18 1.206-2.56 1.206-4.05 0-4.32-3.63-7.82-8.103-7.82-4.477 0-8.107 3.503-8.107 7.82 0 4.32 3.63 7.825 8.106 7.825 1.544 0 2.972-.44 4.198-1.162l5.26 5.074c.37.356.98.354 1.35 0l1.352-1.304c.37-.357.37-.947 0-1.304zm-12.16-3.91c-2.985 0-5.405-2.336-5.405-5.216 0-2.88 2.42-5.214 5.405-5.214 2.984 0 5.404 2.335 5.404 5.214 0 2.88-2.42 5.215-5.407 5.215z" />
+   </svg>
+}, true);
+

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

@@ -1,14 +1,14 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('sort-asc', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 16 16">
-      <path fill="currentColor"
-         d="M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z"
-      />
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('sort-asc', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 16 16">
+      <path fill="currentColor"
+         d="M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z"
+      />
+   </svg>
+}, true);
+

package/src/widgets/icons/square.tsx

@@ -1,18 +1,18 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('square', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 64 64">
-      <rect
-         x="12"
-         y="12"
-         width="40"
-         height="40"
-         fill="currentColor"
-      />
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('square', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 64 64">
+      <rect
+         x="12"
+         y="12"
+         width="40"
+         height="40"
+         fill="currentColor"
+      />
+   </svg>
+}, true);
+

package/src/widgets/nav/MenuItem.tsx

@@ -61,6 +61,7 @@ export interface MenuItemConfig extends HtmlElementConfig {
    padding?: string;
    hideCursor?: boolean;
    dropdown?: any;
+   onClick?: string | ((e: React.MouseEvent | null, instance: HtmlElementInstance<MenuItem>) => void);
 }
 
 export class MenuItemInstance extends HtmlElementInstance<MenuItem> {

package/src/widgets/nav/Route.ts

@@ -1,142 +1,142 @@
-import { Widget } from "../../ui/Widget";
-import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
-import RouteMatcher from "route-parser";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { routeAppend } from "../../util/routeAppend";
-import { StringProp, BooleanProp, Prop } from "../../ui/Prop";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { Instance } from "../../ui/Instance";
-
-export interface RouteConfig extends PureContainerConfig {
-   /** Url binding. Bind this to the global `url` variable. */
-   url?: StringProp;
-
-   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
-   route?: string;
-
-   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
-   path?: string;
-
-   /** Name used to expose local data. Defaults to `$route`. */
-   recordName?: string;
-
-   /** Match route even if given `route` is only a prefix of the current `url`. */
-   prefix?: BooleanProp;
-
-   /** Parameters mapping */
-   params?: Prop<any>;
-
-   /** Parameter name mapping */
-   map?: Record<string, string>;
-}
-
-// Base class for extending with custom Config types
-export class RouteBase<Config extends RouteConfig = RouteConfig> extends PureContainerBase<Config> {
-   declare url?: string;
-   declare route: string;
-   declare path?: string;
-   declare prefix?: boolean;
-   declare recordName: string;
-   declare params?: Prop<any>;
-   declare map?: Record<string, string>;
-   declare matcher?: any;
-   init() {
-      if (this.path) this.route = this.path;
-
-      super.init();
-
-      if (this.route && this.route[0] !== "+")
-         this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
-   }
-
-   initInstance(context: RenderingContext, instance: Instance) {
-      instance.store = new ReadOnlyDataView({
-         store: instance.parentStore,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: Instance) {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData(...args: any[]): void {
-      super.declareData(...args, {
-         url: undefined,
-      });
-   }
-
-   checkVisible(context: RenderingContext, instance: Instance, data: any) {
-      if (!data.visible) return false;
-
-      if (data.url !== instance.cached.url) {
-         instance.cached.url = data.url;
-         let matcher = this.matcher;
-         let route = this.route;
-         if (this.route[0] === "+") {
-            route = routeAppend(context.lastRoute.route, this.route.substring(1));
-            if (!instance.cached.matcher || instance.cached.route !== route)
-               instance.cached.matcher = new RouteMatcher(route + (this.prefix ? "(*remainder)" : ""));
-            matcher = instance.cached.matcher;
-         }
-         instance.cached.result = matcher.match(data.url);
-         instance.cached.matcher = matcher;
-         instance.cached.route = data.route = route;
-      }
-      if (!instance.cached.result) return false;
-
-      return super.checkVisible(context, instance, data);
-   }
-
-   prepareData(context: RenderingContext, instance: Instance) {
-      super.prepareData(context, instance);
-
-      const { store, cached } = instance;
-
-      (store as ReadOnlyDataView).setData({
-         [this.recordName]: cached.result,
-      });
-
-      //TODO: Replace comparison with deepEquals
-      if (this.params && this.params.bind) {
-         var params = store.get(this.params.bind);
-         if (JSON.stringify(params) != JSON.stringify(cached.result)) {
-            store.set(this.params.bind, cached.result);
-         }
-      }
-
-      if (this.map) {
-         for (var key in cached.result) {
-            var binding = this.map[key];
-            if (binding) store.set(binding, cached.result[key]);
-         }
-      }
-   }
-
-   explore(context: RenderingContext, instance: Instance) {
-      context.push("lastRoute", {
-         route: instance.cached.route,
-         result: instance.cached.result,
-         reverse: function (data: any) {
-            return instance.cached.matcher.reverse({
-               ...instance.cached.result,
-               remainder: "",
-               ...data,
-            });
-         },
-      });
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: RenderingContext, instance: Instance) {
-      context.pop("lastRoute");
-   }
-}
-
-RouteBase.prototype.recordName = "$route";
-RouteBase.prototype.prefix = false;
-
-// Closed type for direct usage
-export class Route extends RouteBase<RouteConfig> {}
-
-Widget.alias("route", Route);
+import { Widget } from "../../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import RouteMatcher from "route-parser";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { routeAppend } from "../../util/routeAppend";
+import { StringProp, BooleanProp, Prop } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+
+export interface RouteConfig extends PureContainerConfig {
+   /** Url binding. Bind this to the global `url` variable. */
+   url?: StringProp;
+
+   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
+   route?: string;
+
+   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
+   path?: string;
+
+   /** Name used to expose local data. Defaults to `$route`. */
+   recordName?: string;
+
+   /** Match route even if given `route` is only a prefix of the current `url`. */
+   prefix?: BooleanProp;
+
+   /** Parameters mapping */
+   params?: Prop<any>;
+
+   /** Parameter name mapping */
+   map?: Record<string, string>;
+}
+
+// Base class for extending with custom Config types
+export class RouteBase<Config extends RouteConfig = RouteConfig> extends PureContainerBase<Config> {
+   declare url?: string;
+   declare route: string;
+   declare path?: string;
+   declare prefix?: boolean;
+   declare recordName: string;
+   declare params?: Prop<any>;
+   declare map?: Record<string, string>;
+   declare matcher?: any;
+   init() {
+      if (this.path) this.route = this.path;
+
+      super.init();
+
+      if (this.route && this.route[0] !== "+")
+         this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
+   }
+
+   initInstance(context: RenderingContext, instance: Instance) {
+      instance.store = new ReadOnlyDataView({
+         store: instance.parentStore,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: Instance) {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         url: undefined,
+      });
+   }
+
+   checkVisible(context: RenderingContext, instance: Instance, data: any) {
+      if (!data.visible) return false;
+
+      if (data.url !== instance.cached.url) {
+         instance.cached.url = data.url;
+         let matcher = this.matcher;
+         let route = this.route;
+         if (this.route[0] === "+") {
+            route = routeAppend(context.lastRoute.route, this.route.substring(1));
+            if (!instance.cached.matcher || instance.cached.route !== route)
+               instance.cached.matcher = new RouteMatcher(route + (this.prefix ? "(*remainder)" : ""));
+            matcher = instance.cached.matcher;
+         }
+         instance.cached.result = matcher.match(data.url);
+         instance.cached.matcher = matcher;
+         instance.cached.route = data.route = route;
+      }
+      if (!instance.cached.result) return false;
+
+      return super.checkVisible(context, instance, data);
+   }
+
+   prepareData(context: RenderingContext, instance: Instance) {
+      super.prepareData(context, instance);
+
+      const { store, cached } = instance;
+
+      (store as ReadOnlyDataView).setData({
+         [this.recordName]: cached.result,
+      });
+
+      //TODO: Replace comparison with deepEquals
+      if (this.params && this.params.bind) {
+         var params = store.get(this.params.bind);
+         if (JSON.stringify(params) != JSON.stringify(cached.result)) {
+            store.set(this.params.bind, cached.result);
+         }
+      }
+
+      if (this.map) {
+         for (var key in cached.result) {
+            var binding = this.map[key];
+            if (binding) store.set(binding, cached.result[key]);
+         }
+      }
+   }
+
+   explore(context: RenderingContext, instance: Instance) {
+      context.push("lastRoute", {
+         route: instance.cached.route,
+         result: instance.cached.result,
+         reverse: function (data: any) {
+            return instance.cached.matcher.reverse({
+               ...instance.cached.result,
+               remainder: "",
+               ...data,
+            });
+         },
+      });
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: Instance) {
+      context.pop("lastRoute");
+   }
+}
+
+RouteBase.prototype.recordName = "$route";
+RouteBase.prototype.prefix = false;
+
+// Closed type for direct usage
+export class Route extends RouteBase<RouteConfig> {}
+
+Widget.alias("route", Route);

package/src/widgets/overlay/ContextMenu.ts

@@ -1,42 +1,42 @@
-import { Dropdown, DropdownConfig } from "./Dropdown";
-import { getCursorPos } from "./captureMouse";
-import { View } from "../../data/View";
-import { Instance } from "../../ui/Instance";
-
-export interface ContextMenuConfig extends DropdownConfig {}
-
-export class ContextMenu extends Dropdown {
-   constructor(config?: ContextMenuConfig) {
-      super(config);
-   }
-}
-ContextMenu.prototype.trackMouse = true;
-ContextMenu.prototype.dismissOnFocusOut = true;
-ContextMenu.prototype.firstChildDefinesWidth = true;
-ContextMenu.prototype.matchWidth = false;
-ContextMenu.prototype.placementOrder = "down-right right up-right down-left left up-left";
-ContextMenu.prototype.offset = 0;
-ContextMenu.prototype.autoFocus = true;
-ContextMenu.prototype.autoFocusFirstChild = false;
-ContextMenu.prototype.focusable = true;
-
-export const openContextMenu = (
-   e: React.MouseEvent,
-   content: any,
-   storeOrInstance?: View | Instance,
-   options?: any,
-) => {
-   e.preventDefault();
-   e.stopPropagation();
-   let position = getCursorPos(e);
-   let menu = ContextMenu.create({
-      relatedElement: e.currentTarget,
-      mousePosition: {
-         x: position.clientX,
-         y: position.clientY,
-      },
-      trackMouse: true,
-      items: content,
-   });
-   return menu.open(storeOrInstance, options);
-};
+import { Dropdown, DropdownConfig } from "./Dropdown";
+import { getCursorPos } from "./captureMouse";
+import { View } from "../../data/View";
+import { Instance } from "../../ui/Instance";
+
+export interface ContextMenuConfig extends DropdownConfig {}
+
+export class ContextMenu extends Dropdown {
+   constructor(config?: ContextMenuConfig) {
+      super(config);
+   }
+}
+ContextMenu.prototype.trackMouse = true;
+ContextMenu.prototype.dismissOnFocusOut = true;
+ContextMenu.prototype.firstChildDefinesWidth = true;
+ContextMenu.prototype.matchWidth = false;
+ContextMenu.prototype.placementOrder = "down-right right up-right down-left left up-left";
+ContextMenu.prototype.offset = 0;
+ContextMenu.prototype.autoFocus = true;
+ContextMenu.prototype.autoFocusFirstChild = false;
+ContextMenu.prototype.focusable = true;
+
+export const openContextMenu = (
+   e: React.MouseEvent,
+   content: any,
+   storeOrInstance?: View | Instance,
+   options?: any,
+) => {
+   e.preventDefault();
+   e.stopPropagation();
+   let position = getCursorPos(e);
+   let menu = ContextMenu.create({
+      relatedElement: e.currentTarget,
+      mousePosition: {
+         x: position.clientX,
+         y: position.clientY,
+      },
+      trackMouse: true,
+      items: content,
+   });
+   return menu.open(storeOrInstance, options);
+};