cx 26.7.5 → 26.7.6

package/package.json

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

package/src/widgets/grid/Grid.tsx

@@ -919,10 +919,13 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
 
       let sortField = null;
 
-      if (isDefined(this.sortField) && isDefined(this.sortDirection)) {
+      // rebuild sorters from the sortField/sortDirection bindings only if a sort field
+      // is actually set; sorts identified by a value selector (columns without a field)
+      // live in data.sorters/state.sorters and cannot round-trip through a field name
+      if (isDefined(this.sortField) && isDefined(this.sortDirection) && data.sortField) {
          let sorter = {
             field: data.sortField,
-            direction: data.sortDirection,
+            direction: data.sortDirection || "ASC",
          };
          sortField = data.sortField;
          data.sorters = [sorter];
@@ -939,11 +942,11 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
       }
 
       if (sortField) {
-         for (let l = 1; l < 10; l++) {
+         for (let l = 0; l < 10; l++) {
             let line = instance.row[`line${l}`];
-            let sortColumn = line && line.columns && line.columns.find((c: any) => c.field == sortField);
+            let sortColumn = line && line.columns && line.columns.find((c: any) => (c.sortField || c.field) == sortField);
             if (sortColumn) {
-               data.sorters[0].value = sortColumn.sortValue || sortColumn.value;
+               data.sorters[0].value = isDefined(sortColumn.sortValue) ? sortColumn.sortValue : sortColumn.value;
                data.sorters[0].comparer = sortColumn.comparer;
                data.sorters[0].sortOptions = sortColumn.sortOptions;
                break;
@@ -1307,8 +1310,18 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
 
                   if (hdwidget.sortable && header.widget.allowSorting) {
                      mods.push("sortable");
-                     if (data.sorters && data.sorters[0].field == (hdwidget.sortField || hdwidget.field)) {
-                        mods.push("sorted-" + data.sorters[0].direction.toLowerCase());
+                     let sorter = data.sorters && data.sorters[0];
+                     let sortColumnField = hdwidget.sortField || hdwidget.field;
+                     let sortColumnValue = isDefined(hdwidget.sortValue) ? hdwidget.sortValue : hdwidget.value;
+                     // a sort is identified by its (field, value selector) pair, so columns
+                     // sorting by the same field through different value selectors don't both match
+                     let sorted =
+                        sorter &&
+                        !!sorter.direction &&
+                        (sortColumnField ? sorter.field == sortColumnField : !sorter.field && isDefined(sortColumnValue)) &&
+                        sorter.value === sortColumnValue;
+                     if (sorted) {
+                        mods.push("sorted-" + sorter.direction.toLowerCase());
                         sortIcon = <DropDownIcon className={CSS.element(baseClass, "column-sort-icon")} />;
                      }
                   }
@@ -1481,17 +1494,16 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
       let header = column.components[`header${headerLine + 1}`];
 
       let field = column.sortField || column.field;
-      let value = column.sortValue || column.value;
+      let value = isDefined(column.sortValue) ? column.sortValue : column.value;
       let comparer = column.comparer;
       let sortOptions = column.sortOptions;
 
-      if (header && header.allowSorting && column.sortable && (field || value || data.sortField)) {
+      if (header && header.allowSorting && column.sortable && (field || isDefined(value))) {
          let direction = column.primarySortDirection ?? "ASC";
-         if (
-            isNonEmptyArray(data.sorters) &&
-            ((!!data.sorters[0].field && data.sorters[0].field == (field || data.sortField)) ||
-               (!!value && data.sorters[0].value == value))
-         ) {
+         // the column matches the active sorter only if both the field and the value
+         // selector are the same; two columns may sort by the same field through
+         // different value selectors and represent different sorts
+         if (isNonEmptyArray(data.sorters) && data.sorters[0].field == field && data.sorters[0].value === value) {
             if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC")) direction = "DESC";
             else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC"))
                direction = "ASC";

package/src/widgets/index.ts

@@ -1,63 +1,41 @@
-import { Widget } from "../ui/Widget";
-import { Text } from "../ui/Text";
-import { StaticText } from "../ui/StaticText";
-import { PureContainer } from "../ui/PureContainer";
-import { IsolatedScope } from "../ui/IsolatedScope";
-import { DetachedScope } from "../ui/DetachedScope";
-import { Restate, PrivateStore } from "../ui/Restate";
-import { DataProxy } from "../ui/DataProxy";
-import { Content } from "../ui/layout/Content";
-import { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
-import { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
-import { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
-import { ContentResolver } from "../ui/ContentResolver";
-import { Rescope } from "../ui/Rescope";
-import { Repeater } from "../ui/Repeater";
-
-//re-export widgets defined in ui namespace
-export {
-   Widget,
-   StaticText,
-   Text,
-   PureContainer,
-   Content,
-   ContentPlaceholder,
-   ContentPlaceholderScope,
-   ContentResolver,
-   Rescope,
-   Repeater,
-   IsolatedScope,
-   DetachedScope,
-   Restate,
-   PrivateStore,
-   DataProxy,
-   LabelsTopLayout,
-   LabelsTopLayoutCell,
-   LabelsLeftLayout,
-};
-
-export * from "./cx";
-export * from "./HtmlElement";
-export * from "./Button";
-export * from "./DocumentTitle";
-export * from "./List";
-export * from "./Sandbox";
-export * from "./CxCredit";
-export * from "./Heading";
-export * from "./Section";
-export * from "./FlexBox";
-export * from "./Icon";
-export * from "./ProgressBar";
-export * from "./Resizer";
-export * from "./HighlightedSearchText";
-export * from "./autoFocus";
-export * from "./ReactElementWrapper";
-
-export * from "./icons/index";
-export * from "./overlay/index";
-export * from "./nav/index";
-export * from "./form/index";
-export * from "./grid/index";
-export * from "./drag-drop/index";
-
-export * from "./enableAllInternalDependencies";
+export { Widget } from "../ui/Widget";
+export { Text } from "../ui/Text";
+export { StaticText } from "../ui/StaticText";
+export { PureContainer } from "../ui/PureContainer";
+export { IsolatedScope } from "../ui/IsolatedScope";
+export { DetachedScope } from "../ui/DetachedScope";
+export { Restate, PrivateStore } from "../ui/Restate";
+export { DataProxy } from "../ui/DataProxy";
+export { Content } from "../ui/layout/Content";
+export { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
+export { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
+export { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
+export { ContentResolver } from "../ui/ContentResolver";
+export { Rescope } from "../ui/Rescope";
+export { Repeater } from "../ui/Repeater";
+
+export * from "./cx";
+export * from "./HtmlElement";
+export * from "./Button";
+export * from "./DocumentTitle";
+export * from "./List";
+export * from "./Sandbox";
+export * from "./CxCredit";
+export * from "./Heading";
+export * from "./Section";
+export * from "./FlexBox";
+export * from "./Icon";
+export * from "./ProgressBar";
+export * from "./Resizer";
+export * from "./HighlightedSearchText";
+export * from "./autoFocus";
+export * from "./ReactElementWrapper";
+
+export * from "./icons/index";
+export * from "./overlay/index";
+export * from "./nav/index";
+export * from "./form/index";
+export * from "./grid/index";
+export * from "./drag-drop/index";
+
+export * from "./enableAllInternalDependencies";