cx 26.6.0 → 26.7.1

package/dist/ui.js

@@ -2094,6 +2094,30 @@ class LinkedListsNode {
 	}
 }
 
+// Optional guard (opt in per-instance via the `limitSyncBursts` prop) against React's "Maximum update depth
+// exceeded" during very large synchronous render bursts. On the initial render of a large document the store
+// can be mutated thousands of times within a single React commit: every Instance.setState wraps store.notify()
+// in batchUpdates(), so isBatchingUpdates() stays true and a subscribed Cx takes its *synchronous* setState
+// branch on each notification. React counts those as nested render-phase updates and aborts past ~50
+// (surfacing as the recoverable "error during concurrent rendering"). When a Cx opts in, once back-to-back
+// updates exceed the limit it falls back to the coalesced setTimeout branch, which renders the latest store
+// data on the next tick. The counter is global (it mirrors React's global nested-update counter) and resets
+// after any idle gap. It is advanced on every update() of an opted-in Cx -- counting only the synchronous
+// branch would let the window reset whenever a deferred update lands between two synchronous ones, so the
+// counter would never reach the limit. performance.now() gives sub-ms resolution (Date.now() is the fallback;
+// Timing.now() can't be used here because it returns 0 in production).
+const SYNC_UPDATE_BURST_LIMIT = 30;
+const SYNC_UPDATE_BURST_RESET_MS = 10;
+const syncUpdateBurstNow =
+	typeof performance !== "undefined" && performance.now ? () => performance.now() : () => Date.now();
+let syncUpdateBurstCount = 0;
+let syncUpdateBurstLastAt = 0;
+function trackSyncUpdateBurst() {
+	let t = syncUpdateBurstNow();
+	if (t - syncUpdateBurstLastAt > SYNC_UPDATE_BURST_RESET_MS) syncUpdateBurstCount = 0;
+	syncUpdateBurstLastAt = t;
+	return ++syncUpdateBurstCount > SYNC_UPDATE_BURST_LIMIT;
+}
 class Cx extends VDOM.Component {
 	widget;
 	store;
@@ -2192,7 +2216,11 @@ class Cx extends VDOM.Component {
 		let data = this.store.getData();
 		debug(appDataFlag, data);
 		if (this.flags.preparing) this.flags.dirty = true;
-		else if (isBatchingUpdates() || this.props.immediate) {
+		// `immediate` always renders synchronously (its contract). Otherwise, while batching, a Cx that opts in
+		// via `limitSyncBursts` defers once a synchronous burst gets too deep (avoids React's max-update-depth).
+		// Without the flag the condition is unchanged -- trackSyncUpdateBurst() is never even called, so the
+		// guard has zero effect on instances that don't opt in.
+		else if (this.props.immediate || (isBatchingUpdates() && !(this.props.limitSyncBursts && trackSyncUpdateBurst()))) {
 			notifyBatchedUpdateStarting();
 			this.setState(
 				{
@@ -2201,14 +2229,17 @@ class Cx extends VDOM.Component {
 				notifyBatchedUpdateCompleted,
 			);
 		} else {
-			//in standard mode sequential store commands are batched
+			//in standard mode sequential store commands are batched -- as is any update that exceeds the
+			//synchronous burst limit above, which falls through here to avoid React's max-update-depth abort
 			if (!this.pendingUpdateTimer) {
 				notifyBatchedUpdateStarting();
 				this.pendingUpdateTimer = setTimeout(() => {
 					delete this.pendingUpdateTimer;
+					//for opted-in instances read fresh data at fire time so a deferred (coalesced) update isn't
+					//left stale after a burst; otherwise keep the original captured-data behavior unchanged
 					this.setState(
 						{
-							data: data,
+							data: this.props.limitSyncBursts ? this.store.getData() : data,
 						},
 						notifyBatchedUpdateCompleted,
 					);
@@ -2662,6 +2693,7 @@ class Restate extends PureContainerBase {
 				deferredUntilIdle: instance.data.deferredUntilIdle,
 				idleTimeout: instance.data.idleTimeout,
 				immediate: this.immediate,
+				limitSyncBursts: this.limitSyncBursts,
 				cultureInfo: instance.cultureInfo,
 			},
 			key,
@@ -2671,6 +2703,7 @@ class Restate extends PureContainerBase {
 Restate.prototype.detached = false;
 Restate.prototype.waitForIdle = false;
 Restate.prototype.immediate = false;
+Restate.prototype.limitSyncBursts = false;
 Restate.prototype.culture = null;
 const PrivateStore = Restate;
 class RestateStore extends Store {
@@ -3829,9 +3862,38 @@ function startHotAppLoop(appModule, element, store, widgets, options = {}) {
 }
 
 class GroupAdapter extends ArrayAdapter {
+	/**
+	 * Per-level comparer derived from the active record sorters, used to reorder groups when
+	 * `sortGroupsBySorters` is set. A level's entry is `null` when no active sorter maps to that
+	 * level's key/aggregate, so the grouping's own configured order is kept.
+	 */
+	groupSortComparers;
 	constructor(config) {
 		super(config);
 	}
+	sort(sorters) {
+		super.sort(sorters);
+		// When enabled, derive a group comparer from the active record sorters so that interactive
+		// column sorting also reorders the groups. A column only reorders groups at levels where its
+		// field is a group key or aggregate; other levels keep their configured order. The record-level
+		// value selector is ignored — the field is resolved against the group's key/aggregates/name.
+		if (this.sortGroupsBySorters && this.groupings) {
+			const cultureComparer = this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined;
+			const colSorters = isNonEmptyArray(sorters)
+				? sorters.map((s) => ({
+						field: s.field,
+						direction: s.direction,
+						comparer: s.comparer,
+					}))
+				: [];
+			this.groupSortComparers = this.groupings.map((g) => {
+				if (colSorters.length === 0) return null;
+				const fields = groupFieldNames(g, this.aggregates);
+				const applicable = colSorters.filter((s) => s.field && fields.has(s.field));
+				return applicable.length > 0 ? buildGroupComparer(applicable, cultureComparer) : null;
+			});
+		}
+	}
 	init() {
 		super.init();
 		if (this.groupRecordsAlias) {
@@ -3866,8 +3928,12 @@ class GroupAdapter extends ArrayAdapter {
 		grouper.reset();
 		grouper.processAll(records);
 		let results = grouper.getResults();
-		if (grouping.comparer && !this.preserveOrder) {
-			results.sort(grouping.comparer);
+		// An active column sort that maps to this level's key/aggregate (when `sortGroupsBySorters` is
+		// enabled) takes over; otherwise the grouping's configured comparer (or implicit key order) applies.
+		const dynamicComparer = this.sortGroupsBySorters ? this.groupSortComparers?.[level] : undefined;
+		const comparer = dynamicComparer ?? grouping.comparer;
+		if (comparer && !this.preserveOrder) {
+			results.sort(comparer);
 		}
 		results.forEach((gr) => {
 			keys.push(gr.key);
@@ -3949,15 +4015,26 @@ class GroupAdapter extends ArrayAdapter {
 					(r) => r.store.getData(),
 					g.text,
 				);
+				const cultureComparer = this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined;
+				// Sort groups by an aggregate/key/name through `sortField`/`sortDirection` or a `sorters` array.
+				let sortSorters = null;
+				if (isNonEmptyArray(g.sorters)) sortSorters = g.sorters;
+				else if (g.sortField)
+					sortSorters = [
+						{
+							field: g.sortField,
+							direction: g.sortDirection ?? "ASC",
+						},
+					];
+				// `comparer`, `sortField`/`sorters` and the implicit key order are equivalent alternatives; an
+				// explicit `comparer` wins, then declarative sorters, then sorting by key in declaration order.
 				const comparer =
 					g.comparer ??
-					(groupSorters.length > 0
-						? getComparer(
-								groupSorters,
-								(x) => x.key,
-								this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined,
-							)
-						: null);
+					(sortSorters
+						? buildGroupComparer(sortSorters, cultureComparer)
+						: groupSorters.length > 0
+							? getComparer(groupSorters, (x) => x.key, cultureComparer)
+							: null);
 				return {
 					...g,
 					key: resolvedKey,
@@ -3972,6 +4049,47 @@ class GroupAdapter extends ArrayAdapter {
 }
 GroupAdapter.prototype.groupName = "$group";
 GroupAdapter.prototype.preserveOrder = false;
+GroupAdapter.prototype.sortGroupsBySorters = false;
+// The set of fields a group can be sorted by at a given level: its key fields, its aggregate aliases
+// and the group name. Used to decide whether an active column sort applies to that grouping level.
+function groupFieldNames(grouping, adapterAggregates) {
+	const names = new Set();
+	for (const k of grouping.grouper.keys) names.add(k.name);
+	const aggregates = {
+		...adapterAggregates,
+		...grouping.aggregates,
+	};
+	for (const a in aggregates) names.add(a);
+	names.add("name");
+	names.add("$name");
+	return names;
+}
+// Reads a sort field straight from the GroupResult — first its key fields, then its aggregates, then
+// its name. Returns a plain selector so groups can be sorted without cloning the result per comparison.
+function groupFieldSelector(field) {
+	if (field === "name" || field === "$name") return (gr) => gr?.name;
+	return (gr) => {
+		if (gr?.key && field in gr.key) return gr.key[field];
+		if (gr?.aggregates && field in gr.aggregates) return gr.aggregates[field];
+		return undefined;
+	};
+}
+// Builds a group comparer from a list of sorters. Each sorter resolves by its explicit `value`
+// selector, or by `field` looked up against the group's key/aggregates/name.
+function buildGroupComparer(sorters, cultureComparer) {
+	return getComparer(
+		sorters.map((s) =>
+			isDefined(s.value) || !s.field
+				? s
+				: {
+						...s,
+						value: groupFieldSelector(s.field),
+					},
+		),
+		undefined,
+		cultureComparer,
+	);
+}
 function serializeKey(data) {
 	if (isDataRecord(data)) {
 		return Object.keys(data)

package/dist/widgets.css

@@ -1086,6 +1086,10 @@
   padding-left: 26px;
 }
 
+.cxs-clear > .cxe-numberfield-input {
+  padding-right: 22px;
+}
+
 .cxe-numberfield-tool {
   pointer-events: none;
   display: block;

package/dist/widgets.js

@@ -1124,6 +1124,7 @@ class DocumentTitle extends Widget {
 		super.explore(context, instance);
 	}
 	prepare(context, instance) {
+		if (typeof document == "undefined") return;
 		if (context.documentTitle.activeInstance == instance) document.title = context.documentTitle.title;
 	}
 	render() {
@@ -2050,6 +2051,7 @@ function captureMouse2(e, options) {
 		}
 	}
 	e.stopPropagation();
+	return tear;
 	function move(e) {
 		if (!active) {
 			tear();
@@ -2105,7 +2107,11 @@ function captureMouseOrTouch2(e, options) {
 		el.addEventListener("touchmove", move);
 		el.addEventListener("touchend", end);
 		e.stopPropagation();
-	} else captureMouse2(e, options);
+		return () => {
+			el.removeEventListener("touchmove", move);
+			el.removeEventListener("touchend", end);
+		};
+	} else return captureMouse2(e, options);
 }
 /**
  * Legacy function for capturing mouse events with individual parameters
@@ -2116,7 +2122,7 @@ function captureMouseOrTouch2(e, options) {
  * @param cursor - CSS cursor style for the capture surface
  */
 function captureMouse(e, onMouseMove, onMouseUp, captureData, cursor) {
-	captureMouse2(e, {
+	return captureMouse2(e, {
 		onMouseMove,
 		onMouseUp,
 		captureData,
@@ -2132,7 +2138,7 @@ function captureMouse(e, onMouseMove, onMouseUp, captureData, cursor) {
  * @param cursor - CSS cursor style for the capture surface
  */
 function captureMouseOrTouch(e, onMouseMove, onMouseUp, captureData, cursor) {
-	captureMouseOrTouch2(e, {
+	return captureMouseOrTouch2(e, {
 		onMouseMove,
 		onMouseUp,
 		captureData,
@@ -2403,6 +2409,7 @@ let puppet = null;
 let scrollTimer = null;
 let vscrollParent = null;
 let hscrollParent = null;
+let releaseCapture = null;
 function registerDropZone(dropZone) {
 	dropZones.push(dropZone);
 	return () => {
@@ -2488,7 +2495,15 @@ function initiateDragDrop(e, options = {}, onDragEnd) {
 		dragStartedZones.set(zone, true);
 	});
 	notifyDragMove(e);
-	captureMouseOrTouch(e, notifyDragMove, notifyDragDrop);
+	releaseCapture = captureMouseOrTouch(e, notifyDragMove, notifyDragDrop);
+	document.addEventListener("keydown", onDragKeyDown, true);
+}
+function onDragKeyDown(e) {
+	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, _captureData) {
 	let event = getDragEvent(e, "dragmove");
@@ -2613,21 +2628,36 @@ function clearScrollTimer() {
 		scrollTimer = null;
 	}
 }
-function notifyDragDrop(e) {
+function notifyDragDrop(e, cancelled = false) {
+	if (!puppet) return;
 	clearScrollTimer();
-	let event = getDragEvent(e, "dragdrop");
+	document.removeEventListener("keydown", onDragKeyDown, true);
 	if (puppet.stop) puppet.stop();
-	if (activeZone && activeZone.onDrop) event.result = activeZone.onDrop(event);
+	//a keyboard cancellation has no pointer event, so the drop and away notifications are skipped
+	let dropEvent = !cancelled && e ? getDragEvent(e, "dragdrop") : null;
+	let result;
+	if (dropEvent && activeZone && activeZone.onDrop) result = activeZone.onDrop(dropEvent);
+	let endEvent = {
+		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(event, type) {
 	return {
@@ -9790,6 +9820,7 @@ let Input$1 = class Input extends VDOM.Component {
 					visited: state.visited,
 					focus: this.state.focus,
 					icon: !!icon,
+					clear: insideButton != null,
 					empty: empty && !data.placeholder,
 					error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
 				}),
@@ -15038,6 +15069,7 @@ class Grid extends ContainerBase {
 							sortOptions: this.sortOptions,
 							groupings: grouping,
 							preserveOrder: this.preserveGroupOrder,
+							sortGroupsBySorters: this.sortGroups,
 						},
 						this.dataAdapter,
 					);
@@ -15983,6 +16015,7 @@ Grid.prototype.hoverChannel = "default";
 Grid.prototype.focusable = null; // automatically resolved
 Grid.prototype.allowsFileDrops = false;
 Grid.prototype.preserveGroupOrder = false;
+Grid.prototype.sortGroups = false;
 Widget.alias("grid", Grid);
 Localization.registerPrototype("cx/widgets/Grid", Grid);
 class GridComponent extends VDOM.Component {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.6.0",
+  "version": "26.7.1",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/data/ExposedValueView.spec.ts

@@ -0,0 +1,57 @@
+import assert from "assert";
+
+import { Binding } from "./Binding";
+import { Store } from "./Store";
+import { ExposedValueView } from "./ExposedValueView";
+
+describe("ExposedValueView", () => {
+   // Mirrors how Sandbox wires it: a `storage` object keyed by a slot `key`,
+   // exposed to children under `recordName` (e.g. "$page").
+   const getView = (key = "~/ordering/new") => {
+      let store = new Store({
+         data: {
+            pages: {
+               "~/ordering/new": { description: "draft order", count: 3 },
+            },
+         },
+      });
+
+      let view = new ExposedValueView({
+         store,
+         containerBinding: Binding.get("pages"),
+         key,
+         recordName: "$page",
+      });
+
+      return { store, view };
+   };
+
+   it("exposes the keyed slot under the record name", () => {
+      let { view } = getView();
+      assert.equal(view.get("$page.description"), "draft order");
+      assert.equal(view.get("$page.count"), 3);
+   });
+
+   it("writes back to the keyed slot on set", () => {
+      let { store, view } = getView();
+      view.set("$page.description", "edited");
+      assert.equal(store.get("pages")["~/ordering/new"].description, "edited");
+   });
+
+   it("deletes a property within the exposed record", () => {
+      let { store, view } = getView();
+      view.delete("$page.count");
+      assert.equal(view.get("$page.count"), undefined);
+      assert.ok(!store.get("pages")["~/ordering/new"].hasOwnProperty("count"));
+   });
+
+   it("deletes the entire exposed record (removes the keyed slot)", () => {
+      let { store, view } = getView();
+      view.delete("$page");
+      assert.equal(view.get("$page"), undefined);
+      assert.ok(
+         !store.get("pages").hasOwnProperty("~/ordering/new"),
+         "the keyed storage slot should be removed"
+      );
+   });
+});

package/src/data/ExposedValueView.ts

@@ -67,7 +67,7 @@ export class ExposedValueView extends View {
       if (path == this.recordName) {
          data = this.getData();
          container = this.containerBinding.value(data);
-         if (!container || !container.hasOwnProperty(path)) return false;
+         if (!container || !container.hasOwnProperty(this.key)) return false;
          newContainer = Object.assign({}, container);
          delete newContainer[this.key];
          this.store.set(this.containerBinding.path, newContainer);

package/src/data/comparer.ts

@@ -1,17 +1,16 @@
 import { getSelector } from "./getSelector";
 import { isDefined } from "../util/isDefined";
 import { defaultCompare } from "./defaultCompare";
+import type { CollatorOptions, Sorter } from "../ui/Prop";
 
-interface Sorter {
-   value?: any;
-   field?: string;
-   direction?: string;
+export interface ExtendedSorter extends Sorter {
    comparer?: (a: any, b: any) => number;
    compare?: (a: any, b: any) => number;
+   sortOptions?: CollatorOptions;
 }
 
 export function getComparer(
-   sorters: Sorter[],
+   sorters: ExtendedSorter[],
    dataAccessor?: (x: any) => any,
    comparer?: (a: any, b: any) => number,
 ): (a: any, b: any) => number {
@@ -51,7 +50,7 @@ export function getComparer(
 }
 
 export function indexSorter(
-   sorters: Sorter[],
+   sorters: ExtendedSorter[],
    dataAccessor?: (x: any) => any,
    compare?: (a: any, b: any) => number,
 ): (data: any[]) => number[] {
@@ -64,7 +63,7 @@ export function indexSorter(
 }
 
 export function sorter(
-   sorters: Sorter[],
+   sorters: ExtendedSorter[],
    dataAccessor?: (x: any) => any,
    compare?: (a: any, b: any) => number,
 ): (data: any[]) => any[] {

package/src/ui/Cx.tsx

@@ -21,6 +21,11 @@ export interface CxProps {
    parentInstance?: Instance;
    subscribe?: boolean;
    immediate?: boolean;
+   /** Cap re-entrant synchronous updates: while batching, once a burst of back-to-back updates gets too
+    *  deep, defer the excess to the coalesced (setTimeout) branch instead of updating synchronously. Avoids
+    *  React's "Maximum update depth exceeded" on very large synchronous render bursts (e.g. the initial
+    *  render of a huge document). Off by default; has no effect on instances that don't set it. */
+   limitSyncBursts?: boolean;
    deferredUntilIdle?: boolean;
    idleTimeout?: number;
    options?: any;
@@ -35,6 +40,32 @@ export interface CxState {
    data?: any;
 }
 
+// Optional guard (opt in per-instance via the `limitSyncBursts` prop) against React's "Maximum update depth
+// exceeded" during very large synchronous render bursts. On the initial render of a large document the store
+// can be mutated thousands of times within a single React commit: every Instance.setState wraps store.notify()
+// in batchUpdates(), so isBatchingUpdates() stays true and a subscribed Cx takes its *synchronous* setState
+// branch on each notification. React counts those as nested render-phase updates and aborts past ~50
+// (surfacing as the recoverable "error during concurrent rendering"). When a Cx opts in, once back-to-back
+// updates exceed the limit it falls back to the coalesced setTimeout branch, which renders the latest store
+// data on the next tick. The counter is global (it mirrors React's global nested-update counter) and resets
+// after any idle gap. It is advanced on every update() of an opted-in Cx -- counting only the synchronous
+// branch would let the window reset whenever a deferred update lands between two synchronous ones, so the
+// counter would never reach the limit. performance.now() gives sub-ms resolution (Date.now() is the fallback;
+// Timing.now() can't be used here because it returns 0 in production).
+const SYNC_UPDATE_BURST_LIMIT = 30;
+const SYNC_UPDATE_BURST_RESET_MS = 10;
+const syncUpdateBurstNow: () => number =
+   typeof performance !== "undefined" && performance.now ? () => performance.now() : () => Date.now();
+let syncUpdateBurstCount = 0;
+let syncUpdateBurstLastAt = 0;
+
+function trackSyncUpdateBurst(): boolean {
+   let t = syncUpdateBurstNow();
+   if (t - syncUpdateBurstLastAt > SYNC_UPDATE_BURST_RESET_MS) syncUpdateBurstCount = 0;
+   syncUpdateBurstLastAt = t;
+   return ++syncUpdateBurstCount > SYNC_UPDATE_BURST_LIMIT;
+}
+
 export class Cx extends VDOM.Component<CxProps, CxState> {
    widget: Widget;
    store: View;
@@ -160,16 +191,26 @@ export class Cx extends VDOM.Component<CxProps, CxState> {
       let data = this.store.getData();
       debug(appDataFlag, data);
       if (this.flags.preparing) this.flags.dirty = true;
-      else if (isBatchingUpdates() || this.props.immediate) {
+      // `immediate` always renders synchronously (its contract). Otherwise, while batching, a Cx that opts in
+      // via `limitSyncBursts` defers once a synchronous burst gets too deep (avoids React's max-update-depth).
+      // Without the flag the condition is unchanged -- trackSyncUpdateBurst() is never even called, so the
+      // guard has zero effect on instances that don't opt in.
+      else if (this.props.immediate || (isBatchingUpdates() && !(this.props.limitSyncBursts && trackSyncUpdateBurst()))) {
          notifyBatchedUpdateStarting();
          this.setState({ data: data }, notifyBatchedUpdateCompleted);
       } else {
-         //in standard mode sequential store commands are batched
+         //in standard mode sequential store commands are batched -- as is any update that exceeds the
+         //synchronous burst limit above, which falls through here to avoid React's max-update-depth abort
          if (!this.pendingUpdateTimer) {
             notifyBatchedUpdateStarting();
             this.pendingUpdateTimer = setTimeout(() => {
                delete this.pendingUpdateTimer;
-               this.setState({ data: data }, notifyBatchedUpdateCompleted);
+               //for opted-in instances read fresh data at fire time so a deferred (coalesced) update isn't
+               //left stale after a burst; otherwise keep the original captured-data behavior unchanged
+               this.setState(
+                  { data: this.props.limitSyncBursts ? this.store.getData() : data },
+                  notifyBatchedUpdateCompleted,
+               );
             }, 0);
          }
       }

package/src/ui/DataProxy.ts

@@ -1,55 +1,55 @@
-import { AccessorChain } from "../data";
-import { NestedDataView } from "../data/NestedDataView";
-import { StructuredProp, WritableProp } from "./Prop";
-import { PureContainerBase, PureContainerConfig } from "./PureContainer";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-
-export interface DataProxyConfig extends PureContainerConfig {
-   /** Data object with computed values to be exposed in the local store. */
-   data?: StructuredProp;
-
-   /** Binding to a value to be exposed under the `alias` name. */
-   value?: WritableProp<any>;
-
-   /** Alias name under which `value` is exposed in the local store. */
-   alias?: string | AccessorChain<any>;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that local store data should not be mutated. */
-   sealed?: boolean;
-}
-
-export class DataProxy extends PureContainerBase<DataProxyConfig> {
-   declare data?: any;
-   declare alias?: string;
-   declare value?: any;
-   declare immutable: boolean;
-   declare sealed: boolean;
-
-   init() {
-      if (!this.data) this.data = {};
-
-      if (this.alias) this.data[this.alias] = this.value;
-
-      super.init();
-   }
-
-   initInstance(context: any, instance: any) {
-      instance.store = new NestedDataView({
-         store: instance.parentStore,
-         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
-         immutable: this.immutable,
-         sealed: this.sealed,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: any) {
-      instance.store.setStore(instance.parentStore);
-   }
-}
-
-DataProxy.prototype.immutable = false;
-DataProxy.prototype.sealed = false;
+import { AccessorChain } from "../data";
+import { NestedDataView } from "../data/NestedDataView";
+import { StructuredProp, WritableProp } from "./Prop";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+
+export interface DataProxyConfig extends PureContainerConfig {
+   /** Data object with computed values to be exposed in the local store. */
+   data?: StructuredProp;
+
+   /** Binding to a value to be exposed under the `alias` name. */
+   value?: WritableProp<any>;
+
+   /** Alias name under which `value` is exposed in the local store. */
+   alias?: string | AccessorChain<any>;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that local store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export class DataProxy extends PureContainerBase<DataProxyConfig> {
+   declare data?: any;
+   declare alias?: string;
+   declare value?: any;
+   declare immutable: boolean;
+   declare sealed: boolean;
+
+   init() {
+      if (!this.data) this.data = {};
+
+      if (this.alias) this.data[this.alias] = this.value;
+
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new NestedDataView({
+         store: instance.parentStore,
+         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
+         immutable: this.immutable,
+         sealed: this.sealed,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+DataProxy.prototype.immutable = false;
+DataProxy.prototype.sealed = false;

package/src/ui/Prop.ts

@@ -127,7 +127,7 @@ export type SortDirection = "ASC" | "DESC";
 
 export interface Sorter {
    field?: string;
-   value?: (record: DataRecord) => any;
+   value?: Prop<any>;
    direction: SortDirection;
 }