cx 25.11.1 → 26.0.1

package/src/util/scss/calc.scss

@@ -1,19 +1,23 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+
 @function cx-calc($lengths...) {
    $units: ();
 
    @each $l in $lengths {
-      $unit: unit($l);
-      @if (map-has-key($units, $unit)) {
-         $nl: map-get($units, $unit) + $l;
-         $units: map-merge($units, ($unit: $nl))
+      $unit: math.unit($l);
+      @if (map.has-key($units, $unit)) {
+         $nl: map.get($units, $unit) + $l;
+         $units: map.merge($units, ($unit: $nl))
       } @else {
-         $units: map-merge($units, ($unit: $l))
+         $units: map.merge($units, ($unit: $l))
       }
    }
 
-   $keys: map-keys($units);
-   @if (length($keys) == 1) {
-      @return map-get($units, nth($keys, 1));
+   $keys: map.keys($units);
+   @if (list.length($keys) == 1) {
+      @return map.get($units, list.nth($keys, 1));
    }
 
    $calc: '';

package/src/util/scss/call-once.scss

@@ -1,11 +1,13 @@
+@use "sass:map";
+
 $cx-call-once-data: () !default;
 
 @function cx-call-once($name) {
-   $result: map_get($cx-call-once-data, $name);
-   $cx-call-once-data: map_merge($cx-call-once-data, ($name: true)) !global;
+   $result: map.get($cx-call-once-data, $name);
+   $cx-call-once-data: map.merge($cx-call-once-data, ($name: true)) !global;
    @return $result != true;
 }
 
 @function cx-called-once($name) {
-   @return map_get($cx-call-once-data, $name);
+   @return map.get($cx-call-once-data, $name);
 }

package/src/util/scss/clockwise.scss

@@ -1,47 +1,49 @@
+@use "sass:list";
+
 @function cx-top($list) {
-   @if (length($list) > 0) {
-      @return nth($list, 1);
+   @if (list.length($list) > 0) {
+      @return list.nth($list, 1);
    }
    @return null;
 }
 
 @function cx-right($list) {
-   @if (length($list) == 1) {
-      @return nth($list, 1);
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
    }
-   @if (length($list) > 1) {
-      @return nth($list, 2);
+   @if (list.length($list) > 1) {
+      @return list.nth($list, 2);
    }
    @return null;
 }
 
 @function cx-bottom($list) {
-   @if (length($list) > 2) {
-      @return nth($list, 3);
+   @if (list.length($list) > 2) {
+      @return list.nth($list, 3);
    }
 
-   @if (length($list) >= 1) {
-      @return nth($list, 1);
+   @if (list.length($list) >= 1) {
+      @return list.nth($list, 1);
    }
 
    @return null;
 }
 
 @function cx-left($list) {
-   @if (length($list) == 1) {
-      @return nth($list, 1);
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
    }
 
-   @if (length($list) == 2) {
-      @return nth($list, 2);
+   @if (list.length($list) == 2) {
+      @return list.nth($list, 2);
    }
 
-   @if (length($list) == 3) {
-      @return nth($list, 2);
+   @if (list.length($list) == 3) {
+      @return list.nth($list, 2);
    }
 
-   @if (length($list) == 4) {
-      @return nth($list, 4);
+   @if (list.length($list) == 4) {
+      @return list.nth($list, 4);
    }
    @return null;
 }

package/src/util/scss/colors.scss

@@ -1,8 +1,10 @@
 
+@use "sass:color";
+
 @function cx-whiten($color, $percentage) {
-   @return mix(white, $color, $percentage);
+   @return color.mix(white, $color, $percentage);
 }
 
 @function cx-blacken($color, $percentage) {
-   @return mix(black, $color, $percentage);
+   @return color.mix(black, $color, $percentage);
 }

package/src/util/scss/deep-get.scss

@@ -1,6 +1,8 @@
+@use "sass:map";
+
 @function cx-map-deep-get($map, $keys...){
    @each $key in $keys {
-      $map: map-get($map, $key)
+      $map: map.get($map, $key)
    }
    @if $map != null {
       @return $map

package/src/util/scss/deep-merge.scss

@@ -1,17 +1,20 @@
+@use "sass:map";
+@use "sass:meta";
+
 @function cx-deep-map-merge($parent-map, $child-map) {
 	$result: $parent-map;
 	@each $key, $value in $child-map {
 		//If the parent map does not have the child map's key, or
 		//If their type don't match, or
 		//If they are not both maps,
-		@if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
+		@if (not map.has-key($result, $key)) or (meta.type-of(map.get($result, $key)) != meta.type-of($value)) or (not (meta.type-of(map.get($result, $key)) == map and meta.type-of($value) == map)) {
 			//Simply add that key to the parent map.
-			$result: map-merge($result, ($key: $value));
+			$result: map.merge($result, ($key: $value));
 		}
 		@else {
 			//If they are both maps, we need another non-destructive merger.
 			//Recursive, yay!
-			$result: map-merge($result, ($key: cx-deep-map-merge(map-get($result, $key), $value)));
+			$result: map.merge($result, ($key: cx-deep-map-merge(map.get($result, $key), $value)));
 		}
 	}
 	@return $result;

package/src/util/scss/include.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "call-once";
 @import "colors";
 
@@ -10,9 +11,9 @@ $cx-dependencies: () !default;
 
 @function cx-should-include($name, $once: true) {
    @return (
-       (map-get($cx-excluded, $name) != true) and
+       (map.get($cx-excluded, $name) != true) and
        ($cx-include-all or
-       ($cx-used != null and map-get($cx-used, $name) == true))
+       ($cx-used != null and map.get($cx-used, $name) == true))
    )
    and ($once != true or cx-call-once($name));
 }
@@ -22,12 +23,12 @@ $cx-dependencies: () !default;
 }
 
 @function cx-widget($name) {
-   @if (map-get($cx-excluded, $name)) {
+   @if (map.get($cx-excluded, $name)) {
       @return 0;
    }
-   $cx-used: map_merge($cx-used, ($name: true)) !global;
+   $cx-used: map.merge($cx-used, ($name: true)) !global;
    $dummy: 1;
-   $deps: map-get($cx-dependencies, $name);
+   $deps: map.get($cx-dependencies, $name);
    @if ($deps == null) {
       @return 0;
    }

package/src/util/shallowEquals.ts

@@ -0,0 +1,43 @@
+import {isArray} from './isArray';
+
+export function shallowEquals(v1: any, v2: any): boolean {
+
+   if (v1 === v2)
+      return true;
+
+   let t1 = typeof v1,
+      t2 = typeof v2,
+      k, i;
+
+   if (t1 != t2)
+      return false;
+
+   if (v1 == null || v2 == null) //this captures undefined too
+      return false;
+
+   if (t1 == 'object') {
+
+      if (isArray(v1)) {
+         if (!isArray(v2) || v1.length != v2.length)
+            return false;
+
+         for (i = 0; i < v1.length; i++)
+            if (!shallowEquals(v1[i], v2[i]))
+               return false;
+
+         return true;
+      }
+      else {
+         for (k in v1)
+            if (v1.hasOwnProperty(k) && (!v2.hasOwnProperty(k) || v1[k] !== v2[k]))
+               return false;
+
+         for (k in v2)
+            if (v2.hasOwnProperty(k) && (!v1.hasOwnProperty(k) || v1[k] !== v2[k]))
+               return false;
+
+         return true;
+      }
+   }
+   return v1 === v2;
+}

package/src/util/test/createTestRenderer.tsx

@@ -0,0 +1,12 @@
+/** @jsxImportSource react */
+import renderer from "react-test-renderer";
+import { Cx } from "../../ui/Cx";
+import { View } from "../../data/View";
+
+export function createTestRenderer(store: View, widget: any) {
+   return renderer.create(createTestWidget(store, widget));
+}
+
+export function createTestWidget(store: View, widget: any) {
+   return <Cx widget={widget} store={store} subscribe immediate />;
+}

package/src/util/throttle.ts

@@ -0,0 +1,21 @@
+/**
+ * Returns a function, that, after it is invoked, will trigger the `callback` function,
+ * after the `delay` amount of milliseconds has passed. During that time, all subsequent calls are
+ * ignored. All arguments are passed to the `callback` function.
+ * @param callback
+ * @param delay - Delay in milliseconds.
+ * @returns {Function}
+ */
+export function throttle<T extends (...args: any[]) => void>(callback: T, delay: number): T {
+   let timer: ReturnType<typeof setTimeout> | null;
+
+   return function (this: any, ...args: any[]) {
+      const context = this;
+
+      if (!timer)
+         timer = setTimeout(function () {
+            callback.apply(context, args);
+            timer = null;
+         }, delay);
+   } as T;
+}

package/src/util/validatedDebounce.ts

@@ -0,0 +1,23 @@
+export function validatedDebounce<T extends (...args: any[]) => void>(
+   callback: T,
+   valueGetter: () => any,
+   delay: number
+): T & { reset: T } {
+   let timer: ReturnType<typeof setTimeout> | undefined;
+   let result = function (...args: Parameters<T>) {
+      clearTimeout(timer);
+      let prev = valueGetter();
+      timer = setTimeout(function () {
+         let now = valueGetter();
+         if (prev !== now) return;
+         callback(...args);
+      }, delay);
+   } as T & { reset: T };
+
+   result.reset = function reset(...args: Parameters<T>) {
+      clearTimeout(timer);
+      callback(...args);
+   } as T;
+
+   return result;
+}

package/src/widgets/AccessorBindings.spec.tsx

@@ -1,12 +1,8 @@
 import assert from "assert";
-import reactTestRenderer from "react-test-renderer";
 import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
 import { Store } from "../data/Store";
 import { expr } from "../ui";
-import { Cx } from "../ui/Cx";
-import { HtmlElement } from "./HtmlElement";
-
-let DummyHack = HtmlElement;
+import { createTestRenderer } from "../util/test/createTestRenderer";
 
 interface Model {
    $page: {
@@ -34,9 +30,10 @@ describe("Accessors", () => {
          },
       });
 
-      const component = reactTestRenderer.create(<Cx widget={widget} store={store} />);
+      const component = createTestRenderer(store, widget);
 
       let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
       assert(tree.type === "div");
       assert.deepStrictEqual(tree.children, ["Test"]);
    });
@@ -57,9 +54,10 @@ describe("Accessors", () => {
          },
       });
 
-      const component = reactTestRenderer.create(<Cx widget={widget} store={store} />);
+      const component = createTestRenderer(store, widget);
 
       let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
       assert(tree.type === "div");
       assert.deepStrictEqual(tree.children, ["4"]);
    });

package/src/widgets/Button.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-button(
    $name: "button",
    $state-style-map: $cx-button-state-style-map,
@@ -5,10 +7,10 @@
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       position: relative;

package/src/widgets/Button.tsx

@@ -0,0 +1,201 @@
+/** @jsxImportSource react */
+import { Widget, VDOM, getContentArray } from "../ui/Widget";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
+import { yesNo } from "./overlay/alerts";
+import { Icon } from "./Icon";
+import { preventFocus } from "../ui/FocusManager";
+import { isFunction } from "../util/isFunction";
+import { isDefined } from "../util/isDefined";
+import { coalesce } from "../util/coalesce";
+import type { RenderingContext } from "../ui/RenderingContext";
+import type { Instance, WidgetData, RenderProps } from "../ui/Instance";
+import { YesNoResult } from "../ui/Instance";
+import { BooleanProp, StringProp, Prop, ModProp } from "../ui/Prop";
+import type { FormRenderingContext } from "./form/ValidationGroup";
+
+interface ButtonData extends WidgetData {
+   pressed?: boolean;
+   icon?: string | boolean;
+   disabled?: boolean;
+   enabled?: boolean;
+}
+
+export interface ButtonConfig extends HtmlElementConfig {
+   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
+   confirm?: Prop<string | Record<string, unknown>>;
+
+   /** If true button appears in pressed state. Useful for implementing toggle buttons. */
+   pressed?: BooleanProp;
+
+   /** Name of the icon to be put on the left side of the button. */
+   icon?: StringProp;
+
+   /** HTML tag to be used. Default is `button`. */
+   tag?: string;
+
+   /** Base CSS class to be applied to the element. Default is 'button'. */
+   baseClass?: string;
+
+   /**
+    * Determines if button should receive focus on mousedown event.
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+    */
+   focusOnMouseDown?: boolean;
+
+   /** Add type="submit" to the button. */
+   submit?: boolean;
+
+   /** Set to `true` to disable the button. */
+   disabled?: BooleanProp;
+
+   /** Set to `false` to disable the button. */
+   enabled?: BooleanProp;
+
+   /**
+    * Click handler.
+    *
+    * @param e - Event.
+    * @param instance - Cx widget instance that fired the event.
+    */
+   onClick?: string | ((e: MouseEvent, instance: Instance) => void);
+
+   onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
+
+   /** Button type. */
+   type?: "submit" | "button";
+
+   /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
+   dismiss?: boolean;
+
+   /** The form attribute specifies the form the button belongs to.
+    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
+    */
+   form?: StringProp;
+}
+
+export class Button extends HtmlElement<ButtonConfig, HtmlElementInstance> {
+   constructor(config?: ButtonConfig) {
+      super(config);
+   }
+
+   declare icon?: boolean | string;
+   declare focusOnMouseDown?: boolean;
+   declare submit?: boolean;
+   declare dismiss?: boolean;
+   declare onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
+   declare baseClass: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         confirm: { structured: true },
+         pressed: undefined,
+         icon: undefined,
+         disabled: undefined,
+         enabled: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
+      const { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pressed: data.pressed,
+      };
+      if (isDefined(data.enabled)) data.disabled = !data.enabled;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: FormRenderingContext, instance: HtmlElementInstance): void {
+      instance.data.parentDisabled = context.parentDisabled;
+      instance.data.parentStrict = context.parentStrict;
+
+      if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
+      if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
+
+      super.explore(context, instance);
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
+      super.attachProps(context, instance, props);
+
+      if (!this.focusOnMouseDown) {
+         props.onMouseDown = (e: React.MouseEvent) => {
+            if (this.onMouseDown && instance.invoke("onMouseDown", e.nativeEvent, instance) === false) return;
+            preventFocus(e);
+         };
+      }
+
+      if (this.dismiss) {
+         const { onClick } = props;
+
+         props.onClick = (e: React.MouseEvent) => {
+            if (onClick) {
+               const result = onClick(e);
+               if (result === false) return;
+            }
+
+            if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) {
+               instance.parentOptions.dismiss();
+            }
+         };
+      }
+
+      if (this.tag === "button") props.type = this.submit ? "submit" : "button";
+
+      delete props.confirm;
+      delete props.dismiss;
+      delete props.pressed;
+      delete props.submit;
+      delete props.focusOnMouseDown;
+      delete props.icon;
+      delete props.enabled;
+
+      const { data } = instance;
+
+      props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled) as
+         | boolean
+         | undefined;
+
+      if (data.confirm) {
+         const oldOnClick = props.onClick;
+         props.onClick = (e: React.MouseEvent) => {
+            yesNo(data.confirm!).then((btn: string) => {
+               if (btn === YesNoResult.Yes && oldOnClick) {
+                  oldOnClick(e);
+               }
+            });
+         };
+      }
+
+      if (data.icon) {
+         const icon = Icon.render(data.icon, {
+            key: "icon",
+            className: this.CSS.element(this.baseClass, "icon"),
+         });
+         const children = getContentArray(props.children);
+         props.children = [icon, ...children];
+         props.className = this.CSS.expand(
+            props.className,
+            this.CSS.state("icon"),
+            children.length === 0 && this.CSS.state("empty"),
+         );
+
+         if (children.length === 0) {
+            (props.children as React.ReactNode[]).push(
+               <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
+                  &nbsp;
+               </span>,
+            );
+         }
+      }
+   }
+}
+
+Button.prototype.tag = "button";
+Button.prototype.baseClass = "button";
+Button.prototype.icon = false;
+Button.prototype.focusOnMouseDown = false;
+Button.prototype.submit = false;
+
+Widget.alias("button", Button);

package/src/widgets/Button.variables.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "sass:map";
+
 $cx-default-button-font-family: $cx-default-box-font-family !default;
 $cx-default-button-font-size: $cx-default-box-font-size !default;
 $cx-default-button-font-weight: normal !default;
@@ -61,9 +64,9 @@ $cx-button-mods: (
          color: white,
       ),
       disabled: (
-         background-color: transparentize(#1f99f8, 0.5),
-         border-color: transparentize(#1e88e5, 0.9),
-         color: transparentize(white, 0.4),
+         background-color: color.adjust(#1f99f8, $alpha: -0.5),
+         border-color: color.adjust(#1e88e5, $alpha: -0.9),
+         color: color.adjust(white, $alpha: -0.4),
       ),
       hover: (
          background-color: #1f99f8,
@@ -76,9 +79,9 @@ $cx-button-mods: (
          color: white,
       ),
       disabled: (
-         background-color: transparentize(#d32f2f, 0.4),
-         border-color: transparentize(#c62828, 0.9),
-         color: transparentize(white, 0.5),
+         background-color: color.adjust(#d32f2f, $alpha: -0.4),
+         border-color: color.adjust(#c62828, $alpha: -0.9),
+         color: color.adjust(white, $alpha: -0.5),
       ),
       hover: (
          background-color: #d32f2f,
@@ -92,16 +95,16 @@ $cx-button-mods: (
          box-shadow: none,
       ),
       hover:
-         map-merge(
-            map-get($cx-list-item, hover),
+         map.merge(
+            map.get($cx-list-item, hover),
             (
                box-shadow: none,
                border-color: transparent,
             )
          ),
       focus:
-         map-merge(
-            map-get($cx-list-item, selected-cursor),
+         map.merge(
+            map.get($cx-list-item, selected-cursor),
             (
                box-shadow: none,
                border-color: transparent,

package/src/widgets/CxCredit.scss

@@ -1,8 +1,10 @@
+@use "sass:map";
+
 @mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       width: 50px;

package/src/widgets/CxCredit.tsx

@@ -0,0 +1,46 @@
+import { Widget, VDOM } from "../ui/Widget";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
+import { Icon } from "./Icon";
+import { RenderingContext } from "../ui/RenderingContext";
+import { RenderProps } from "../ui/Instance";
+
+export interface CxCreditConfig extends HtmlElementConfig {}
+
+export class CxCredit extends HtmlElement<CxCreditConfig, HtmlElementInstance> {
+   declare baseClass: string;
+
+   constructor(config?: CxCreditConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.tooltip = {
+         mouseTrap: true,
+         title: "Credits",
+         items: (
+            <cx>
+               <div ws>
+                  User interface of this project is implemented using the CxJS framework. For more information about
+                  CxJS, please visit
+                  <a href="https://cxjs.io/" target="_blank">
+                     the CxJS homepage
+                  </a>
+                  .
+               </div>
+            </cx>
+         ),
+      };
+      super.init();
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
+      props.children = Icon.render("cx", {
+         className: this.CSS.element(this.baseClass, "icon"),
+      });
+   }
+}
+
+CxCredit.prototype.baseClass = "cxcredit";
+CxCredit.prototype.tag = "div";
+
+Widget.alias("cx-credit", CxCredit);