cx 26.5.1 → 26.7.0

package/src/widgets/grid/Grid.tsx

@@ -23,6 +23,7 @@ import {
    NumberProp,
    Prop,
    RecordAlias,
+   Sorter,
    SortDirection,
    SortersProp,
    StringProp,
@@ -62,6 +63,7 @@ import {
    ddMouseDown,
    DragDropOperationContext,
    DragEvent,
+   DragEndEvent,
    initiateDragDrop,
    registerDropZone,
 } from "../drag-drop/ops";
@@ -156,10 +158,24 @@ export interface GridGroupingConfig<T> {
    showCaption?: boolean;
    showFooter?: boolean;
    showHeader?: boolean;
+   /**
+    * Restart automatic row numbers (`cxe-grid-row-number`) from 1 at the beginning of each group
+    * at this grouping level instead of counting continuously across the whole grid. Defaults to `false`.
+    */
+   resetRowNumbers?: boolean;
    caption?: StringProp;
    name?: StringProp;
    text?: StringProp;
    comparer?: (a: GroupingResult<T>, b: GroupingResult<T>) => number;
+   /**
+    * Sort groups by a single field resolved against the group's key, aggregates and name.
+    * Use an aggregate alias to sort by an aggregate, or a key field to sort by key.
+    */
+   sortField?: string;
+   /** Sort direction used together with `sortField`. Defaults to `"ASC"`. */
+   sortDirection?: SortDirection;
+   /** Multi-field group sorting. Each sorter's `field` is resolved against the group's key, aggregates and name. */
+   sorters?: Sorter[];
 }
 
 export interface GridColumnHeaderConfig {
@@ -385,7 +401,7 @@ export interface GridConfig<T = any> extends StyledContainerConfig {
    onDrop?: string | ((e: GridDragEvent<T>, instance: Instance) => void);
    onDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
    onDragStart?: string | ((e: DragEvent, instance: Instance) => void);
-   onDragEnd?: string | ((e: DragEvent, instance: Instance) => void);
+   onDragEnd?: string | ((e: DragEndEvent, instance: Instance) => void);
    onDragOver?: string | ((e: GridDragEvent<T>, instance: Instance) => void | boolean);
 
    onRowDropTest?: string | ((e: DragEvent, instance: Instance) => boolean);
@@ -497,6 +513,13 @@ export interface GridConfig<T = any> extends StyledContainerConfig {
 
    /** When enabled, groups are shown in the same order as the source records. */
    preserveGroupOrder?: boolean;
+
+   /**
+    * When enabled, sorting by a column header also reorders groups. The active sort field is resolved
+    * against each group's key fields, aggregates and name, so it works for both grouping columns and
+    * aggregate columns. Ignored when `preserveGroupOrder` is set.
+    */
+   sortGroups?: boolean;
 }
 
 export interface GridCellInfo {
@@ -630,6 +653,7 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
    declare onCreateIsRecordDraggable?: any;
    declare onRef?: any;
    declare preserveGroupOrder: boolean;
+   declare sortGroups: boolean;
    declare styled: boolean;
    declare selectable?: boolean;
    declare recordsAccessor: any;
@@ -839,6 +863,7 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
                     sortOptions: this.sortOptions,
                     groupings: grouping,
                     preserveOrder: this.preserveGroupOrder,
+                    sortGroupsBySorters: this.sortGroups,
                  },
                  this.dataAdapter,
               );
@@ -1510,12 +1535,13 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
    ) {
       let { CSS, baseClass } = this;
       let data = store.getData();
+      let resetRowNumbers = g.resetRowNumbers ? "reset-row-numbers" : null;
       if (g.caption) {
          let caption = g.caption(data);
          return (
             <tbody
                key={`g-${level}-${group.$key}`}
-               className={CSS.element(baseClass, "group-caption", ["level-" + level])}
+               className={CSS.element(baseClass, "group-caption", ["level-" + level, resetRowNumbers])}
                data-group-key={group.$key}
                data-group-element={`group-caption-${level}`}
             >
@@ -1598,7 +1624,7 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
          return (
             <tbody
                key={"c" + group.$key}
-               className={CSS.element(baseClass, "group-caption", ["level-" + level])}
+               className={CSS.element(baseClass, "group-caption", ["level-" + level, resetRowNumbers])}
                data-group-key={group.$key}
                data-group-element={`group-caption-${level}`}
             >
@@ -1897,6 +1923,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);
@@ -2845,7 +2872,7 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
       return (grid || row || column) && { grid, row, column };
    }
 
-   onDragEnd(e: DragEvent) {
+   onDragEnd(e: DragEndEvent) {
       this.setState({
          dropTarget: null,
          dropInsertionIndex: null,

package/src/widgets/overlay/captureMouse.ts

@@ -31,7 +31,7 @@ interface CaptureMouseOptions {
 export function captureMouse2(
    e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
    options: CaptureMouseOptions,
-): void {
+): () => void {
    let surface = document.createElement("div");
    surface.className = "cxb-mousecapture";
    surface.style.cursor = options.cursor || getComputedStyle(e.currentTarget as Element).cursor;
@@ -67,6 +67,8 @@ export function captureMouse2(
 
    e.stopPropagation();
 
+   return tear;
+
    function move(e: Event) {
       if (!active) {
          tear();
@@ -110,7 +112,7 @@ export function captureMouse2(
 export function captureMouseOrTouch2(
    e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
    options: CaptureMouseOptions,
-): void {
+): () => void {
    if (e.type.indexOf("touch") == 0) {
       let el = e.currentTarget as HTMLElement;
 
@@ -136,7 +138,12 @@ export function captureMouseOrTouch2(
       el.addEventListener("touchend", end);
 
       e.stopPropagation();
-   } else captureMouse2(e, options);
+
+      return () => {
+         el.removeEventListener("touchmove", move);
+         el.removeEventListener("touchend", end);
+      };
+   } else return captureMouse2(e, options);
 }
 
 /**
@@ -153,8 +160,8 @@ export function captureMouse(
    onMouseUp?: (e: MouseEvent | TouchEvent, captureData?: any) => void,
    captureData?: any,
    cursor?: string,
-): void {
-   captureMouse2(e, {
+): () => void {
+   return captureMouse2(e, {
       onMouseMove,
       onMouseUp,
       captureData,
@@ -176,8 +183,8 @@ export function captureMouseOrTouch(
    onMouseUp?: (e: MouseEvent, captureData?: any) => void,
    captureData?: any,
    cursor?: string,
-): void {
-   captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
+): () => void {
+   return captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
 }
 
 /**