cx 26.6.0 → 26.7.1

package/src/widgets/form/Select.scss

@@ -1,104 +1,104 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-select(
-   $name: "select",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $width: $cx-default-input-width,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $tool-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-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}#{$name} {
-      @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
-
-      .#{$element}#{$name}-left-icon {
-         pointer-events: none;
-         @include cxe-field-button($besm, $left-icon-state-style-map);
-      }
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-select {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $overrides: (
-            padding: $cx-default-input-padding-top
-               calc(#{$cx-default-input-padding-right} + #{$cx-default-clear-size} - #{$cx-default-input-padding-right})
-               $cx-default-input-padding-bottom $cx-default-input-padding-left,
-            -webkit-appearance: none,
-            -moz-appearance: none,
-            -ms-appearance: none,
-            appearance: none
-         )
-      );
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
-      }
-
-      .#{$state}empty > & {
-         @include cx-add-rules($placeholder);
-      }
-
-      &::-ms-expand {
-         display: none;
-         margin: 0;
-         padding: 0;
-      }
-
-      option {
-         background-color: $cx-default-dropdown-background-color;
-         color: cx-get-state-rule($state-style-map, default, color);
-      }
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-placeholder {
-      @include cx-add-rules($placeholder);
-   }
-
-   .#{$element}#{$name}-tool {
-      pointer-events: none; //cannot call open-dropdown on native element
-      @include cxe-field-button($besm, $tool-state-style-map);
-
-      .#{$state}disabled > & {
-         border-width: 0;
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($tool-state-style-map, focus);
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-}
-
-@if (cx-should-include("cx/widgets/Select")) {
-   @include cx-select;
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-select(
+   $name: "select",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $width: $cx-default-input-width,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $tool-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-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}#{$name} {
+      @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
+
+      .#{$element}#{$name}-left-icon {
+         pointer-events: none;
+         @include cxe-field-button($besm, $left-icon-state-style-map);
+      }
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-select {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $overrides: (
+            padding: $cx-default-input-padding-top
+               calc(#{$cx-default-input-padding-right} + #{$cx-default-clear-size} - #{$cx-default-input-padding-right})
+               $cx-default-input-padding-bottom $cx-default-input-padding-left,
+            -webkit-appearance: none,
+            -moz-appearance: none,
+            -ms-appearance: none,
+            appearance: none
+         )
+      );
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
+      }
+
+      .#{$state}empty > & {
+         @include cx-add-rules($placeholder);
+      }
+
+      &::-ms-expand {
+         display: none;
+         margin: 0;
+         padding: 0;
+      }
+
+      option {
+         background-color: $cx-default-dropdown-background-color;
+         color: cx-get-state-rule($state-style-map, default, color);
+      }
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-placeholder {
+      @include cx-add-rules($placeholder);
+   }
+
+   .#{$element}#{$name}-tool {
+      pointer-events: none; //cannot call open-dropdown on native element
+      @include cxe-field-button($besm, $tool-state-style-map);
+
+      .#{$state}disabled > & {
+         border-width: 0;
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($tool-state-style-map, focus);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+}
+
+@if (cx-should-include("cx/widgets/Select")) {
+   @include cx-select;
+}

package/src/widgets/form/TextField.scss

@@ -1,66 +1,66 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-textfield(
-   $name: "textfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$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);
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
-      }
-
-      .#{$state}clear > & {
-         padding-right: cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing);
-      }
-   }
-
-   .#{$element}#{$name}-left-icon {
-      pointer-events: none;
-      @include cxe-field-button($besm, $left-icon-state-style-map);
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$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/TextField")) {
-   @include cx-textfield();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-textfield(
+   $name: "textfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$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);
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
+      }
+
+      .#{$state}clear > & {
+         padding-right: cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      pointer-events: none;
+      @include cxe-field-button($besm, $left-icon-state-style-map);
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+   }
+
+   .#{$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/TextField")) {
+   @include cx-textfield();
+}

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";
@@ -165,6 +167,15 @@ export interface GridGroupingConfig<T> {
    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 {
@@ -390,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);
@@ -502,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 {
@@ -635,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;
@@ -844,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,
               );
@@ -1903,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);
@@ -2851,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/grid/TreeNode.tsx

@@ -41,6 +41,9 @@ export interface TreeNodeConfig extends StyledContainerConfig {
   /** Icon for folder. */
   folderIcon?: StringProp;
 
+  /** Icon used for the expand/collapse arrow. Defaults to `drop-down`. */
+  arrowIcon?: StringProp;
+
   /** Set to `true` to hide the icon. */
   hideIcon?: boolean;