cx 26.2.1 → 26.2.3

package/src/ui/HoverSync.tsx

@@ -19,170 +19,202 @@ import { Prop, StyleProp, ClassProp } from "./Prop";
 export interface HoverSyncConfig extends PureContainerConfig {}
 
 export class HoverSync extends PureContainerBase<HoverSyncConfig, Instance> {
-   constructor(config?: HoverSyncConfig) {
-      super(config);
-   }
-   initInstance(context: any, instance: any) {
-      let channels: any = {};
-      instance.hoverSync = {
-         report: (channel: string, hoverId: any, active: boolean) => {
-            let ch = channels[channel];
-            if (!ch) return;
-            let state = active && hoverId != null;
-            if (ch.state !== state && (ch.state === hoverId || active)) {
-               ch.state = state;
-               ch.subscribers.notify(state);
-            }
-         },
-         subscribe: (channel: string, callback: (state: any) => void) => {
-            let ch = channels[channel];
-            if (!ch)
-               ch = channels[channel] = {
-                  subscribers: new SubscriberList(),
-                  state: false,
-               };
-            return ch.subscribers.subscribe(callback);
-         },
-      };
-   }
-
-   explore(context: any, instance: any) {
-      context.push("hoverSync", instance.hoverSync);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: any, instance: any) {
-      context.pop("hoverSync");
-   }
+  constructor(config?: HoverSyncConfig) {
+    super(config);
+  }
+  initInstance(context: any, instance: any) {
+    let channels: any = {};
+    instance.hoverSync = {
+      report: (channel: string, hoverId: any, active: boolean) => {
+        let ch = channels[channel];
+        if (!ch) return;
+        let state = active && hoverId != null ? hoverId : false;
+        if (ch.state !== state && (ch.state === hoverId || active)) {
+          ch.state = state;
+          ch.subscribers.notify(state);
+        }
+      },
+      subscribe: (channel: string, callback: (state: any) => void) => {
+        let ch = channels[channel];
+        if (!ch)
+          ch = channels[channel] = {
+            subscribers: new SubscriberList(),
+            state: false,
+          };
+        return ch.subscribers.subscribe(callback);
+      },
+    };
+  }
+
+  explore(context: any, instance: any) {
+    context.push("hoverSync", instance.hoverSync);
+    super.explore(context, instance);
+  }
+
+  exploreCleanup(context: any, instance: any) {
+    context.pop("hoverSync");
+  }
 }
 
 interface HoverSyncChildProps {
-   hoverSync: any;
-   hoverChannel: string;
-   hoverId: any;
-   render: (props: any) => any;
+  hoverSync: any;
+  hoverChannel: string;
+  hoverId: any;
+  render: (props: any) => any;
 }
 
 interface HoverSyncChildState {
-   hover: boolean;
+  hover: boolean;
 }
 
-class HoverSyncChild extends VDOM.Component<HoverSyncChildProps, HoverSyncChildState> {
-   declare unsubscribe: any;
-
-   constructor(props: HoverSyncChildProps) {
-      super(props);
-      this.state = { hover: false };
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onMouseLeave = this.onMouseLeave.bind(this);
-   }
-
-   onMouseMove() {
-      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, true);
-   }
-
-   onMouseLeave() {
-      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, false);
-   }
-
-   componentWillUnmount() {
-      this.unsubscribe();
-   }
-
-   componentDidMount() {
-      this.unsubscribe = this.props.hoverSync.subscribe(this.props.hoverChannel, (hoverId: any) => {
-         let hover = hoverId === this.props.hoverId;
-         if (hover !== this.state.hover) this.setState({ hover });
-      });
-   }
-
-   render() {
-      return this.props.render({
-         hover: this.state.hover,
-         onMouseLeave: this.onMouseLeave,
-         onMouseMove: this.onMouseMove,
-         key: "child",
-      });
-   }
+class HoverSyncChild extends VDOM.Component<
+  HoverSyncChildProps,
+  HoverSyncChildState
+> {
+  declare unsubscribe: any;
+
+  constructor(props: HoverSyncChildProps) {
+    super(props);
+    this.state = { hover: false };
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseLeave = this.onMouseLeave.bind(this);
+  }
+
+  onMouseMove() {
+    this.props.hoverSync.report(
+      this.props.hoverChannel,
+      this.props.hoverId,
+      true,
+    );
+  }
+
+  onMouseLeave() {
+    this.props.hoverSync.report(
+      this.props.hoverChannel,
+      this.props.hoverId,
+      false,
+    );
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
+
+  componentDidMount() {
+    this.unsubscribe = this.props.hoverSync.subscribe(
+      this.props.hoverChannel,
+      (hoverId: any) => {
+        let hover = hoverId === this.props.hoverId;
+        if (hover !== this.state.hover) this.setState({ hover });
+      },
+    );
+  }
+
+  render() {
+    return this.props.render({
+      hover: this.state.hover,
+      onMouseLeave: this.onMouseLeave,
+      onMouseMove: this.onMouseMove,
+      key: "child",
+    });
+  }
 }
 
 export function withHoverSync(
-   key: string | number,
-   hoverSync: any,
-   hoverChannel: string | undefined,
-   hoverId: any,
-   render: (props: any) => any,
+  key: string | number,
+  hoverSync: any,
+  hoverChannel: string | undefined,
+  hoverId: any,
+  render: (props: any) => any,
 ) {
-   if (!hoverSync || !hoverChannel || hoverId == null)
-      return render({ key, hover: false, onMouseLeave: dummyCallback, onMouseMove: dummyCallback });
-   return (
-      <HoverSyncChild key={key} hoverSync={hoverSync} hoverChannel={hoverChannel} hoverId={hoverId} render={render} />
-   );
+  if (!hoverSync || !hoverChannel || hoverId == null)
+    return render({
+      key,
+      hover: false,
+      onMouseLeave: dummyCallback,
+      onMouseMove: dummyCallback,
+    });
+  return (
+    <HoverSyncChild
+      key={key}
+      hoverSync={hoverSync}
+      hoverChannel={hoverChannel}
+      hoverId={hoverId}
+      render={render}
+    />
+  );
 }
 
 export interface HoverSyncElementConfig extends StyledContainerConfig {
-   hoverChannel?: string;
-   hoverId?: Prop<any>;
-   hoverClass?: ClassProp;
-   hoverStyle?: StyleProp;
+  hoverChannel?: string;
+  hoverId?: Prop<any>;
+  hoverClass?: ClassProp;
+  hoverStyle?: StyleProp;
 }
 
-export class HoverSyncElement extends StyledContainerBase<HoverSyncElementConfig, Instance> {
-   declare hoverChannel: string;
-   declare hoverId?: Prop<any>;
-   declare hoverClass?: ClassProp;
-   declare hoverStyle?: StyleProp;
-
-   constructor(config?: HoverSyncElementConfig) {
-      super(config);
-   }
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         hoverId: undefined,
-         hoverClass: { structured: true },
-         hoverStyle: { structured: true },
-      });
-   }
-
-   prepareData(context: any, instance: any) {
-      instance.hoverSync = context.hoverSync;
-      instance.inSvg = !!context.inSvg;
-      let { data } = instance;
-      data.hoverStyle = parseStyle(data.hoverStyle);
-      super.prepareData(context, instance);
-   }
-
-   render(context: any, instance: any, key: string) {
-      let { data, inSvg } = instance;
-      let { CSS } = this;
-      let children = this.renderChildren(context, instance);
-      let eventHandlers = instance.getJsxEventProps();
-      return withHoverSync(
-         key,
-         instance.hoverSync,
-         this.hoverChannel,
-         data.hoverId,
-         ({ hover, onMouseMove, onMouseLeave, key }: any) => {
-            let style = {
-               ...data.style,
-               ...(hover && data.hoverStyle),
-            };
-            return VDOM.createElement(
-               inSvg ? "g" : "div",
-               {
-                  key,
-                  className: CSS.expand(data.classNames, CSS.state({ hover }), hover && data.hoverClass),
-                  style,
-                  ...eventHandlers,
-                  onMouseLeave,
-                  onMouseMove,
-               },
-               children,
-            );
-         },
-      );
-   }
+export class HoverSyncElement extends StyledContainerBase<
+  HoverSyncElementConfig,
+  Instance
+> {
+  declare hoverChannel: string;
+  declare hoverId?: Prop<any>;
+  declare hoverClass?: ClassProp;
+  declare hoverStyle?: StyleProp;
+
+  constructor(config?: HoverSyncElementConfig) {
+    super(config);
+  }
+
+  declareData(...args: any[]) {
+    super.declareData(...args, {
+      hoverId: undefined,
+      hoverClass: { structured: true },
+      hoverStyle: { structured: true },
+    });
+  }
+
+  prepareData(context: any, instance: any) {
+    instance.hoverSync = context.hoverSync;
+    instance.inSvg = !!context.inSvg;
+    let { data } = instance;
+    data.hoverStyle = parseStyle(data.hoverStyle);
+    super.prepareData(context, instance);
+  }
+
+  render(context: any, instance: any, key: string) {
+    let { data, inSvg } = instance;
+    let { CSS } = this;
+    let children = this.renderChildren(context, instance);
+    let eventHandlers = instance.getJsxEventProps();
+    return withHoverSync(
+      key,
+      instance.hoverSync,
+      this.hoverChannel,
+      data.hoverId,
+      ({ hover, onMouseMove, onMouseLeave, key }: any) => {
+        let style = {
+          ...data.style,
+          ...(hover && data.hoverStyle),
+        };
+        return VDOM.createElement(
+          inSvg ? "g" : "div",
+          {
+            key,
+            className: CSS.expand(
+              data.classNames,
+              CSS.state({ hover }),
+              hover && data.hoverClass,
+            ),
+            style,
+            ...eventHandlers,
+            onMouseLeave,
+            onMouseMove,
+          },
+          children,
+        );
+      },
+    );
+  }
 }
 
 HoverSyncElement.prototype.baseClass = "hoversyncelement";

package/src/ui/Prop.ts

@@ -116,7 +116,7 @@ export type StyleProp = Prop<string | React.CSSProperties> | StructuredProp;
 export type NumberProp = Prop<number>;
 export type BooleanProp = Prop<boolean>;
 export type ClassProp = Prop<string> | StructuredProp;
-export type RecordsProp = Prop<DataRecord[]>;
+export type RecordsProp<T = any> = Prop<T[]>;
 export type SortersProp = Prop<Sorter[]>;
 export type UnknownProp = Prop<unknown>;
 export type ModProp = StringProp | StructuredProp;

package/src/ui/Text.ts

@@ -1,9 +1,9 @@
-import { Widget, WidgetConfig } from './Widget';
-import { StringProp } from './Prop';
+import { Widget, WidgetConfig } from "./Widget";
+import { NumberProp, StringProp } from "./Prop";
 
 export interface TextConfig extends WidgetConfig {
    /** The value to be rendered as text. */
-   value?: StringProp;
+   value?: StringProp | NumberProp;
 
    /** Template string for the text value. */
    tpl?: string;
@@ -30,20 +30,23 @@ export class Text extends Widget<TextConfig> {
          this.value = {
             tpl: this.tpl,
             expr: this.expr,
-            bind: this.bind
+            bind: this.bind,
          };
       super.init();
    }
 
    declareData(...args: any[]) {
-      super.declareData({
-         value: undefined
-      }, ...args);
+      super.declareData(
+         {
+            value: undefined,
+         },
+         ...args,
+      );
    }
 
    render(context: any, { data }: any, key: string) {
-      return data.value != null ? data.value : '';
+      return data.value != null ? data.value : "";
    }
 }
 
-Widget.alias('text', Text)
+Widget.alias("text", Text);

package/src/ui/adapter/GroupAdapter.spec.ts

@@ -0,0 +1,42 @@
+import assert from "assert";
+import { Store } from "../../data";
+import { GroupAdapter, GroupingConfig } from "./GroupAdapter";
+
+function collectKeys(
+   obj: any,
+   path = "",
+   result: Record<string, boolean> = {},
+   seen = new WeakSet(),
+): Record<string, boolean> {
+   if (!obj || typeof obj !== "object" || seen.has(obj)) return result;
+   seen.add(obj);
+   for (const key of Object.keys(obj)) {
+      const fullPath = path ? `${path}.${key}` : key;
+      result[fullPath] = true;
+      collectKeys(obj[key], fullPath, result, seen);
+   }
+   return result;
+}
+
+describe("GroupAdapter", () => {
+   it("should not mutate grouping config during groupBy", () => {
+      const groupingConfig: GroupingConfig[] = [
+         {
+            key: { city: { bind: "$record.city" } },
+            aggregates: {
+               count: { type: "count", value: 1 },
+            },
+         },
+      ];
+
+      const keysBefore = collectKeys(groupingConfig);
+
+      const adapter = new GroupAdapter();
+      adapter.groupBy(groupingConfig);
+
+      const keysAfter = collectKeys(groupingConfig);
+      const newKeys = Object.keys(keysAfter).filter((k) => !keysBefore[k]);
+
+      assert.deepStrictEqual(newKeys, [], `Grouping config was mutated. New keys: ${newKeys.join(", ")}`);
+   });
+});

package/src/ui/adapter/GroupAdapter.ts

@@ -180,39 +180,50 @@ export class GroupAdapter<T = any> extends ArrayAdapter<T> {
       if (!groupings) {
          this.groupings = null;
       } else if (isArray(groupings)) {
-         this.groupings = groupings as unknown as ResolvedGrouping[];
-         this.groupings.forEach((g) => {
+         // Clone groupings to avoid mutating the original config
+         this.groupings = groupings.map((g) => {
             const groupSorters: Sorter[] = [];
             const key: Record<string, Prop<any>> = {};
+            const resolvedKey: Record<string, { value: Prop<any>; direction: SortDirection }> = {};
 
             for (const name in g.key) {
                const keyConfig = g.key[name];
                if (!keyConfig || typeof keyConfig !== "object" || !("value" in keyConfig)) {
-                  g.key[name] = { value: keyConfig as Prop<any>, direction: "ASC" };
+                  resolvedKey[name] = { value: keyConfig as Prop<any>, direction: "ASC" };
+               } else {
+                  resolvedKey[name] = keyConfig as { value: Prop<any>; direction: SortDirection };
                }
 
-               const resolvedKey = g.key[name] as { value: Prop<any>; direction: SortDirection };
-               key[name] = resolvedKey.value;
+               key[name] = resolvedKey[name].value;
                groupSorters.push({
                   field: name,
-                  direction: resolvedKey.direction,
+                  direction: resolvedKey[name].direction,
                });
             }
 
-            g.grouper = new Grouper(
+            const grouper = new Grouper(
                key,
                { ...this.aggregates, ...g.aggregates },
                (r: DataAdapterRecord<T>) => r.store.getData(),
                g.text,
             );
 
-            if (g.comparer == null && groupSorters.length > 0) {
-               g.comparer = getComparer(
-                  groupSorters,
-                  (x: any) => x.key,
-                  this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined,
-               );
-            }
+            const comparer =
+               g.comparer ??
+               (groupSorters.length > 0
+                  ? getComparer(
+                       groupSorters,
+                       (x: any) => x.key,
+                       this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined,
+                    )
+                  : null);
+
+            return {
+               ...g,
+               key: resolvedKey,
+               grouper,
+               comparer,
+            } as ResolvedGrouping;
          });
       } else {
          throw new Error("Invalid grouping provided.");

package/src/ui/app/History.ts

@@ -88,7 +88,7 @@ export class History {
    ): boolean {
       url = Url.resolve(url);
 
-      if (!window.history.pushState || reload) {
+      if (!window.history.pushState || reload || !this.store) {
          window.location[replace ? "replace" : "assign"](url);
          return true;
       }

package/src/ui/index.scss

@@ -1,2 +1,2 @@
 
-@import 'layout/index';
+@use 'layout/index';

package/src/ui/layout/LabelsLeftLayout.scss

@@ -1,10 +1,8 @@
+@use "../../util/scss/besm.scss" as *;
 
 @use "sass:map";
 
-@mixin cx-labelsleftlayout(
-   $name: 'labelsleftlayout',
-   $besm: $cx-besm
-) {
+@mixin cx-labelsleftlayout($name: "labelsleftlayout", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -42,6 +40,6 @@
    }
 }
 
-@if (cx-should-include('cx/ui/LabelsLeftLayout')) {
-  @include cx-labelsleftlayout();
-}
+@if (cx-should-include("cx/ui/LabelsLeftLayout")) {
+   @include cx-labelsleftlayout();
+}

package/src/ui/layout/LabelsTopLayout.scss

@@ -1,9 +1,7 @@
 @use "sass:map";
+@use "../../util/scss/besm.scss" as *;
 
-@mixin cx-labelstoplayout(
-   $name: 'labelstoplayout',
-   $besm: $cx-besm
-) {
+@mixin cx-labelstoplayout($name: "labelstoplayout", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -60,6 +58,6 @@
    }
 }
 
-@if (cx-should-include('cx/ui/LabelsTopLayout')) {
+@if (cx-should-include("cx/ui/LabelsTopLayout")) {
    @include cx-labelstoplayout();
-}
+}

package/src/ui/layout/index.scss

@@ -1,3 +1,2 @@
-
-@import "LabelsLeftLayout";
-@import "LabelsTopLayout";
+@use "LabelsLeftLayout";
+@use "LabelsTopLayout";

package/src/ui/variables.scss

@@ -1,2 +1 @@
-
-@import "layout/variables";
+@forward "layout/variables";

package/src/util/index.scss

@@ -1,3 +1,5 @@
+@use "./scss/index.scss" as *;
+
 .cx-text-left.cx-text-left {
    text-align: left;
 }
@@ -6,6 +8,6 @@
    text-align: right;
 }
 
-.cx-text-center.cx-text-center  {
+.cx-text-center.cx-text-center {
    text-align: center;
-}
+}

package/src/util/maps.scss

@@ -0,0 +1 @@
+@forward "./scss/maps.scss";

package/src/util/scss/besm.scss

@@ -0,0 +1,15 @@
+//
+// BESM
+//
+// B - block - top level HTML element
+// E - element - part of the component (block)
+// S - state - indicator of the component state which affects the appearance
+// M - mod - user supplied instruction which overrides default appearance
+//
+
+$cx-besm: (
+   block: "cxb-",
+   element: "cxe-",
+   state: "cxs-",
+   mod: "cxm-",
+) !default;