cx 26.6.0 → 26.7.1

package/src/widgets/Sandbox.ts

@@ -1,104 +1,104 @@
-import { Widget } from "../ui/Widget";
-import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
-import { Binding, BindingInput } from "../data/Binding";
-import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { StringProp, WritableProp } from "../ui/Prop";
-import { AccessorChain } from "../data/createAccessorModelProxy";
-
-export interface SandboxConfig extends PureContainerConfig {
-   /** Binding to the object that holds sandbox data. */
-   storage: WritableProp<Record<string, any>>;
-
-   /** Key used to identify the sandbox instance within the storage. */
-   key?: StringProp;
-
-   /** Alias for `key`. */
-   accessKey?: StringProp;
-
-   /** Alias used to expose sandbox data. Default is `$page`. */
-   recordName?: string | AccessorChain<any>;
-
-   /** Alias for `recordName`. */
-   recordAlias?: string | AccessorChain<any>;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that sandbox store data should not be mutated. */
-   sealed?: boolean;
-}
-
-export interface SandboxInstance extends Instance {
-   store: ExposedValueView;
-}
-
-export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
-   declare storage: WritableProp<Record<string, any>>;
-   declare key?: StringProp;
-   declare recordName?: string;
-   declare recordAlias?: string;
-   declare accessKey?: StringProp;
-   declare immutable?: boolean;
-   declare sealed?: boolean;
-   declare storageBinding: Binding;
-   init(): void {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.accessKey) this.key = this.accessKey;
-
-      this.storageBinding = Binding.get(this.storage);
-
-      super.init();
-   }
-
-   initInstance(context: RenderingContext, instance: SandboxInstance): void {
-      instance.store = new ExposedValueView({
-         store: instance.parentStore,
-         containerBinding: this.storageBinding,
-         key: null,
-         recordName: this.recordName,
-         immutable: this.immutable,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: SandboxInstance): void {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(
-         {
-            storage: undefined,
-            key: undefined,
-         },
-         ...args,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: SandboxInstance): void {
-      var { store, data } = instance;
-      if (store.getKey() !== data.key) {
-         //when navigating to a page using the same widget tree as the previous page
-         //everything needs to be reinstantiated, e.g. user/1 => user/2
-         instance.store = new ExposedValueView({
-            store: store,
-            containerBinding: this.storageBinding,
-            key: data.key,
-            recordName: this.recordName,
-            immutable: this.immutable,
-            sealed: this.sealed,
-         });
-         instance.clearChildrenCache();
-      }
-      super.prepareData(context, instance);
-   }
-}
-
-Sandbox.prototype.recordName = "$page";
-Sandbox.prototype.immutable = false;
-Sandbox.prototype.sealed = false;
-
-Widget.alias("sandbox", Sandbox);
+import { Widget } from "../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { Binding, BindingInput } from "../data/Binding";
+import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp, WritableProp } from "../ui/Prop";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+
+export interface SandboxConfig extends PureContainerConfig {
+   /** Binding to the object that holds sandbox data. */
+   storage: WritableProp<Record<string, any>>;
+
+   /** Key used to identify the sandbox instance within the storage. */
+   key?: StringProp;
+
+   /** Alias for `key`. */
+   accessKey?: StringProp;
+
+   /** Alias used to expose sandbox data. Default is `$page`. */
+   recordName?: string | AccessorChain<any>;
+
+   /** Alias for `recordName`. */
+   recordAlias?: string | AccessorChain<any>;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that sandbox store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export interface SandboxInstance extends Instance {
+   store: ExposedValueView;
+}
+
+export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
+   declare storage: WritableProp<Record<string, any>>;
+   declare key?: StringProp;
+   declare recordName?: string;
+   declare recordAlias?: string;
+   declare accessKey?: StringProp;
+   declare immutable?: boolean;
+   declare sealed?: boolean;
+   declare storageBinding: Binding;
+   init(): void {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.accessKey) this.key = this.accessKey;
+
+      this.storageBinding = Binding.get(this.storage);
+
+      super.init();
+   }
+
+   initInstance(context: RenderingContext, instance: SandboxInstance): void {
+      instance.store = new ExposedValueView({
+         store: instance.parentStore,
+         containerBinding: this.storageBinding,
+         key: null,
+         recordName: this.recordName,
+         immutable: this.immutable,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: SandboxInstance): void {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            storage: undefined,
+            key: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: SandboxInstance): void {
+      var { store, data } = instance;
+      if (store.getKey() !== data.key) {
+         //when navigating to a page using the same widget tree as the previous page
+         //everything needs to be reinstantiated, e.g. user/1 => user/2
+         instance.store = new ExposedValueView({
+            store: store,
+            containerBinding: this.storageBinding,
+            key: data.key,
+            recordName: this.recordName,
+            immutable: this.immutable,
+            sealed: this.sealed,
+         });
+         instance.clearChildrenCache();
+      }
+      super.prepareData(context, instance);
+   }
+}
+
+Sandbox.prototype.recordName = "$page";
+Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
+
+Widget.alias("sandbox", Sandbox);

package/src/widgets/drag-drop/DragSource.tsx

@@ -2,7 +2,7 @@
 
 import { Widget, VDOM } from "../../ui/Widget";
 import { ContainerBase, ContainerConfig, StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
-import { ddMouseDown, ddDetect, ddMouseUp, initiateDragDrop, isDragHandleEvent } from "./ops";
+import { ddMouseDown, ddDetect, ddMouseUp, initiateDragDrop, isDragHandleEvent, DragEndEvent } from "./ops";
 import { preventFocus } from "../../ui/FocusManager";
 import { parseStyle } from "../../util/parseStyle";
 import { Instance } from "../../ui/Instance";
@@ -30,7 +30,7 @@ export interface DragSourceConfig extends StyledContainerConfig {
 
    onDragStart?: (e: React.MouseEvent | React.TouchEvent, instance: Instance) => any;
 
-   onDragEnd?: (e: React.MouseEvent | React.TouchEvent, instance: Instance) => void;
+   onDragEnd?: (e: DragEndEvent, instance: Instance) => void;
 
    id?: StringProp;
 
@@ -64,7 +64,7 @@ export class DragSource extends StyledContainerBase<DragSourceConfig, DragSource
    declare cloneStyle: any;
    declare draggedStyle: any;
    declare onDragStart?: (e: React.MouseEvent | React.TouchEvent, instance: DragSourceInstance) => any;
-   declare onDragEnd?: (e: React.MouseEvent | React.TouchEvent, instance: DragSourceInstance) => void;
+   declare onDragEnd?: (e: DragEndEvent, instance: DragSourceInstance) => void;
 
    constructor(config?: DragSourceConfig) {
       super(config);

package/src/widgets/drag-drop/DropZone.tsx

@@ -3,7 +3,7 @@
 import { Widget, VDOM } from "../../ui/Widget";
 import { ContainerBase, ContainerConfig, StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
 import { parseStyle } from "../../util/parseStyle";
-import { registerDropZone, DragDropContext, DragEvent } from "./ops";
+import { registerDropZone, DragDropContext, DragEvent, DragEndEvent } from "./ops";
 import { findScrollableParent } from "../../util/findScrollableParent";
 import { isNumber } from "../../util/isNumber";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
@@ -90,8 +90,8 @@ export interface DropZoneConfig extends StyledContainerConfig {
    /** A callback method invoked when at the beginning of the drag & drop operation. */
    onDragStart?: string | ((event: DragEvent, instance: Instance) => void);
 
-   /** A callback method invoked when at the end of the drag & drop operation. */
-   onDragEnd?: string | ((event: DragEvent, instance: Instance) => void);
+   /** A callback method invoked when at the end of the drag & drop operation. `event.cancelled` is `true` when the operation was cancelled (e.g. via Esc) instead of dropped. */
+   onDragEnd?: string | ((event: DragEndEvent, instance: Instance) => void);
 
    /** Match height of the item being dragged */
    matchHeight?: boolean;
@@ -126,7 +126,7 @@ export class DropZone extends StyledContainerBase<DropZoneConfig, DropZoneInstan
    declare onDragEnter?: string | ((event?: DragEvent, instance?: Instance) => void);
    declare onDragLeave?: string | ((event?: DragEvent, instance?: Instance) => void);
    declare onDragStart?: string | ((event?: DragEvent, instance?: Instance) => void);
-   declare onDragEnd?: string | ((event?: DragEvent, instance?: Instance) => void);
+   declare onDragEnd?: string | ((event?: DragEndEvent, instance?: Instance) => void);
 
    constructor(config?: DropZoneConfig) {
       super(config);
@@ -342,7 +342,7 @@ class DropZoneComponent extends VDOM.Component<DropZoneComponentProps, DropZoneC
       if (this.state.state == "over" && widget.onDrop) instance.invoke("onDrop", e, instance);
    }
 
-   onDragEnd(e: DragEvent) {
+   onDragEnd(e: DragEndEvent) {
       this.setState({
          state: false,
          style: null,

package/src/widgets/drag-drop/ops.tsx

@@ -21,6 +21,18 @@ export interface DragEvent {
    result?: any;
 }
 
+export interface DragEndEvent {
+   type: "dragend";
+   /** The triggering pointer event, or `null` when the operation was cancelled via the keyboard. */
+   event: DragEvent["event"] | null;
+   /** Cursor position, or `null` when the operation was cancelled via the keyboard. */
+   cursor: CursorPosition | null;
+   source: DragEvent["source"];
+   /** `true` when the operation was cancelled (e.g. by pressing Esc) instead of dropped. */
+   cancelled: boolean;
+   result?: any;
+}
+
 export interface DragDropOptions {
    sourceEl?: Element | null;
    clone?: any;
@@ -38,7 +50,7 @@ export interface IDropZone {
    onDragStart?: DragEventHandler;
    onDragAway?: DragEventHandler;
    onDragNear?: DragEventHandler;
-   onDragEnd?: DragEventHandler;
+   onDragEnd?: (e: DragEndEvent) => void;
    onDragMeasure?: (
       e: DragEvent,
       operation: DragDropOperationContext,
@@ -62,7 +74,6 @@ import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingCli
 import { VDOM } from "../../ui/VDOM";
 import { Container } from "../../ui/Container";
 import { Console } from "../../util";
-import { WidgetConfig } from "../../ui";
 
 interface Puppet {
    deltaX: number;
@@ -70,7 +81,7 @@ interface Puppet {
    el: HTMLDivElement;
    clone: any;
    source: any;
-   onDragEnd?: (e?: DragEvent) => void;
+   onDragEnd?: (e?: DragEndEvent) => void;
    stop?: () => void;
 }
 
@@ -82,6 +93,7 @@ let puppet: Puppet | null = null;
 let scrollTimer: number | null = null;
 let vscrollParent: Element | null = null;
 let hscrollParent: Element | null = null;
+let releaseCapture: (() => void) | null = null;
 
 export function registerDropZone(dropZone: IDropZone): UnregisterFunction {
    dropZones.push(dropZone);
@@ -94,7 +106,7 @@ export function registerDropZone(dropZone: IDropZone): UnregisterFunction {
 export function initiateDragDrop(
    e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
    options: DragDropOptions = {},
-   onDragEnd?: (e?: DragEvent) => void,
+   onDragEnd?: (e?: DragEndEvent) => void,
 ): void {
    if (puppet) {
       //last operation didn't finish properly
@@ -187,7 +199,16 @@ export function initiateDragDrop(
 
    notifyDragMove(e, null);
 
-   captureMouseOrTouch(e, notifyDragMove, notifyDragDrop);
+   releaseCapture = captureMouseOrTouch(e, notifyDragMove, notifyDragDrop);
+   document.addEventListener("keydown", onDragKeyDown, true);
+}
+
+function onDragKeyDown(e: KeyboardEvent): void {
+   if (!puppet || e.key !== "Escape") return;
+   //cancel the operation without dropping; there is no pointer event to report
+   e.preventDefault();
+   e.stopPropagation();
+   notifyDragDrop(null, true);
 }
 
 function notifyDragMove(e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent, _captureData: any): void {
@@ -321,29 +342,50 @@ function clearScrollTimer() {
    }
 }
 
-function notifyDragDrop(e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent): void {
+function notifyDragDrop(
+   e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent | null,
+   cancelled: boolean = false,
+): void {
+   if (!puppet) return;
+
    clearScrollTimer();
+   document.removeEventListener("keydown", onDragKeyDown, true);
 
-   let event = getDragEvent(e, "dragdrop");
+   if (puppet.stop) puppet.stop();
 
-   if (puppet!.stop) puppet!.stop();
+   //a keyboard cancellation has no pointer event, so the drop and away notifications are skipped
+   let dropEvent = !cancelled && e ? getDragEvent(e, "dragdrop") : null;
 
-   if (activeZone && activeZone.onDrop) event.result = activeZone.onDrop(event);
+   let result: any;
+   if (dropEvent && activeZone && activeZone.onDrop) result = activeZone.onDrop(dropEvent);
+
+   let endEvent: DragEndEvent = {
+      type: "dragend",
+      event: e,
+      cursor: e ? getCursorPos(e) : null,
+      source: puppet.source,
+      cancelled,
+      result,
+   };
 
    dropZones.forEach((zone) => {
-      if (nearZones != null && zone.onDragAway && nearZones.has(zone)) zone.onDragAway(event);
+      if (dropEvent && nearZones != null && zone.onDragAway && nearZones.has(zone)) zone.onDragAway(dropEvent);
 
       if (!dragStartedZones!.has(zone)) return;
 
-      if (zone.onDragEnd) zone.onDragEnd(event);
+      if (zone.onDragEnd) zone.onDragEnd(endEvent);
    });
 
-   if (puppet!.onDragEnd) puppet!.onDragEnd(event);
+   if (puppet.onDragEnd) puppet.onDragEnd(endEvent);
+
+   //tear down the mouse/touch capture when cancelling; on a normal drop the capture ends itself
+   if (cancelled && releaseCapture) releaseCapture();
 
    nearZones = null;
    activeZone = null;
    puppet = null;
    dragStartedZones = null;
+   releaseCapture = null;
 }
 
 function getDragEvent(

package/src/widgets/form/ColorField.scss

@@ -1,112 +1,112 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/call-once.scss" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/deep-merge.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-@use "./ColorPicker.scss" as *;
-
-@mixin cx-colorfield(
-   $name: "colorfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
-   $width: $cx-default-input-width,
-   $icon-size: $cx-default-icon-size,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $overrides: (
-            default: (
-               font-family: $cx-default-colorfield-font-family,
-               font-size: 11px,
-               padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
-                  cx-bottom($padding)
-                  cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
-            )
-         )
-      );
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-
-      .#{$state}focus > & {
-         @include cx-add-state-rules($clear-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($clear-state-style-map, error);
-      }
-   }
-
-   .#{$element}#{$name}-right-icon {
-      @include cxe-field-button($besm, $right-icon-state-style-map);
-
-      .#{$state}focus > & {
-         @include cx-add-state-rules($right-icon-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($right-icon-state-style-map, error);
-      }
-   }
-
-   .#{$element}#{$name}-left-icon {
-      box-sizing: border-box;
-
-      @include cx-checker-background();
-
-      @include cxe-field-button(
-         $besm,
-         cx-deep-map-merge(
-            $left-icon-state-style-map,
-            (
-               default: (
-                  opacity: 1,
-                  cursor: pointer,
-               ),
-            )
-         )
-      );
-
-      div {
-         width: 100%;
-         height: 100%;
-         border-radius: inherit;
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-}
-
-@if (cx-should-include("cx/widgets/ColorField")) {
-   @include cx-colorfield();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/call-once.scss" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+@use "./ColorPicker.scss" as *;
+
+@mixin cx-colorfield(
+   $name: "colorfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
+   $width: $cx-default-input-width,
+   $icon-size: $cx-default-icon-size,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $overrides: (
+            default: (
+               font-family: $cx-default-colorfield-font-family,
+               font-size: 11px,
+               padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
+                  cx-bottom($padding)
+                  cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
+            )
+         )
+      );
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+
+      .#{$state}focus > & {
+         @include cx-add-state-rules($clear-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($clear-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-right-icon {
+      @include cxe-field-button($besm, $right-icon-state-style-map);
+
+      .#{$state}focus > & {
+         @include cx-add-state-rules($right-icon-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($right-icon-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      box-sizing: border-box;
+
+      @include cx-checker-background();
+
+      @include cxe-field-button(
+         $besm,
+         cx-deep-map-merge(
+            $left-icon-state-style-map,
+            (
+               default: (
+                  opacity: 1,
+                  cursor: pointer,
+               ),
+            )
+         )
+      );
+
+      div {
+         width: 100%;
+         height: 100%;
+         border-radius: inherit;
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include("cx/widgets/ColorField")) {
+   @include cx-colorfield();
+}