@xh/hoist 79.0.0-SNAPSHOT.1765207418027 → 79.0.0-SNAPSHOT.1765207715965

package/CHANGELOG.md

@@ -10,6 +10,7 @@
 
 ### 🐞 Bug Fixes
 
+* Fixed column chooser to display columns in the same order as they appear in the grid.
 * Defaulted Highcharts font to Hoist default (--xh-font-family)
 * Tweaked `GridFindField` to forward a provided `ref` to its underlying `TextInput`.
 

package/build/types/desktop/cmp/leftrightchooser/LeftRightChooserModel.d.ts

@@ -1,5 +1,5 @@
-import { GridModel } from '@xh/hoist/cmp/grid';
-import { HoistModel, HSide } from '@xh/hoist/core';
+import { GridModel, GridSorterLike } from '@xh/hoist/cmp/grid';
+import { HoistModel, HSide, Some } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import { FilterTestFn, StoreRecord } from '@xh/hoist/data';
 export interface LeftRightChooserConfig {
@@ -14,11 +14,13 @@ export interface LeftRightChooserConfig {
     showCounts?: boolean;
     leftTitle?: string;
     leftSorted?: boolean;
+    leftSortBy?: Some<GridSorterLike>;
     leftGroupingEnabled?: boolean;
     leftGroupingExpanded?: boolean;
     leftEmptyText?: string;
     rightTitle?: string;
     rightSorted?: boolean;
+    rightSortBy?: Some<GridSorterLike>;
     rightGroupingEnabled?: boolean;
     rightGroupingExpanded?: boolean;
     rightEmptyText?: string;
@@ -39,6 +41,7 @@ export interface LeftRightChooserItem {
     /** True to prevent the user from moving the item between sides. */
     locked?: boolean;
     exclude?: boolean;
+    sortValue?: any;
 }
 /**
  * A Model for managing the state of a LeftRightChooser.
@@ -72,7 +75,7 @@ export declare class LeftRightChooserModel extends HoistModel {
     get rightValues(): any[];
     /** Currently 'selected' values on the left hand side. */
     get leftValues(): any[];
-    constructor({ data, onChange, ungroupedName, leftTitle, leftSorted, leftGroupingEnabled, leftGroupingExpanded, leftEmptyText, readonly, rightTitle, rightSorted, rightGroupingEnabled, rightGroupingExpanded, rightEmptyText, showCounts, xhImpl }: LeftRightChooserConfig);
+    constructor({ data, onChange, ungroupedName, leftTitle, leftSorted, leftSortBy, leftGroupingEnabled, leftGroupingExpanded, leftEmptyText, readonly, rightTitle, rightSorted, rightSortBy, rightGroupingEnabled, rightGroupingExpanded, rightEmptyText, showCounts, xhImpl }: LeftRightChooserConfig);
     setData(data: LeftRightChooserItem[]): void;
     moveRows(rows: StoreRecord[]): void;
     private getTextColRenderer;

package/desktop/cmp/grid/impl/colchooser/ColChooserModel.ts

@@ -8,6 +8,7 @@ import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import {LeftRightChooserModel} from '@xh/hoist/desktop/cmp/leftrightchooser';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
+import {sortBy} from 'lodash';
 
 /**
  * State management for the ColChooser component.
@@ -55,6 +56,8 @@ export class ColChooserModel extends HoistModel {
             rightTitle: 'Displayed Columns',
             rightEmptyText: 'No columns will be visible.',
             leftSorted: true,
+            leftSortBy: 'text',
+            rightSorted: true,
             rightGroupingEnabled: false,
             onChange: () => {
                 if (this.commitOnChange) this.commit();
@@ -111,19 +114,33 @@ export class ColChooserModel extends HoistModel {
     //------------------------
     syncChooserData() {
         const {gridModel, lrModel} = this,
-            columns = gridModel.getLeafColumns(),
-            hasGrouping = columns.some(it => it.chooserGroup);
+            hasGrouping = gridModel.getLeafColumns().some(it => it.chooserGroup),
+            columnState = sortBy(gridModel.columnState, it => {
+                const {pinned} = it;
+                if (pinned === 'left') {
+                    return 0;
+                }
+
+                if (pinned === 'right') {
+                    return 2;
+                }
+
+                return 1;
+            });
+
+        const data = columnState.map((it, idx) => {
+            const visible = !it.hidden,
+                col = gridModel.getColumn(it.colId);
 
-        const data = columns.map(it => {
-            const visible = gridModel.isColumnVisible(it.colId);
             return {
                 value: it.colId,
-                text: it.chooserName,
-                description: it.chooserDescription,
-                group: hasGrouping ? (it.chooserGroup ?? 'Ungrouped') : null,
-                exclude: it.excludeFromChooser,
-                locked: visible && !it.hideable,
-                side: visible ? 'right' : 'left'
+                text: col.chooserName,
+                description: col.chooserDescription,
+                group: hasGrouping ? (col.chooserGroup ?? 'Ungrouped') : null,
+                exclude: col.excludeFromChooser,
+                locked: visible && !col.hideable,
+                side: visible ? 'right' : 'left',
+                sortValue: idx
             } as const;
         });
 

package/desktop/cmp/leftrightchooser/LeftRightChooserModel.ts

@@ -4,9 +4,9 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {GridModel} from '@xh/hoist/cmp/grid';
+import {GridModel, GridSorterLike} from '@xh/hoist/cmp/grid';
 import {div} from '@xh/hoist/cmp/layout';
-import {HoistModel, HSide, managed, XH} from '@xh/hoist/core';
+import {HoistModel, HSide, managed, Some, XH} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
@@ -29,12 +29,14 @@ export interface LeftRightChooserConfig {
 
     leftTitle?: string;
     leftSorted?: boolean;
+    leftSortBy?: Some<GridSorterLike>;
     leftGroupingEnabled?: boolean;
     leftGroupingExpanded?: boolean;
     leftEmptyText?: string;
 
     rightTitle?: string;
     rightSorted?: boolean;
+    rightSortBy?: Some<GridSorterLike>;
     rightGroupingEnabled?: boolean;
     rightGroupingExpanded?: boolean;
     rightEmptyText?: string;
@@ -64,6 +66,9 @@ export interface LeftRightChooserItem {
 
     /* True to exclude the item from the chooser entirely. */
     exclude?: boolean;
+
+    /* Value to use for sorting. If unset then sort order will be based solely on the text value. */
+    sortValue?: any;
 }
 
 /**
@@ -122,12 +127,14 @@ export class LeftRightChooserModel extends HoistModel {
         ungroupedName = 'Ungrouped',
         leftTitle = 'Available',
         leftSorted = false,
+        leftSortBy = ['sortValue', 'text'],
         leftGroupingEnabled = true,
         leftGroupingExpanded = true,
         leftEmptyText = null,
         readonly = false,
         rightTitle = 'Selected',
         rightSorted = false,
+        rightSortBy = ['sortValue', 'text'],
         rightGroupingEnabled = true,
         rightGroupingExpanded = true,
         rightEmptyText = null,
@@ -154,7 +161,8 @@ export class LeftRightChooserModel extends HoistModel {
                 {name: 'group', type: 'string'},
                 {name: 'side', type: 'string'},
                 {name: 'locked', type: 'bool'},
-                {name: 'exclude', type: 'bool'}
+                {name: 'exclude', type: 'bool'},
+                {name: 'sortValue'}
             ]
         };
 
@@ -179,15 +187,19 @@ export class LeftRightChooserModel extends HoistModel {
                 field: 'group',
                 headerName: 'Group',
                 hidden: true
+            },
+            sortValueCol = {
+                field: 'sortValue',
+                hidden: true
             };
 
         this.leftModel = new GridModel({
             store,
             selModel: 'multiple',
-            sortBy: leftSorted ? 'text' : null,
+            sortBy: leftSorted ? leftSortBy : null,
             emptyText: leftEmptyText,
             onRowDoubleClicked: e => this.onRowDoubleClicked(e),
-            columns: [leftTextCol, groupCol],
+            columns: [leftTextCol, groupCol, sortValueCol],
             contextMenu: false,
             expandLevel: leftGroupingExpanded ? 1 : 0,
             xhImpl: true
@@ -196,10 +208,10 @@ export class LeftRightChooserModel extends HoistModel {
         this.rightModel = new GridModel({
             store,
             selModel: 'multiple',
-            sortBy: rightSorted ? 'text' : null,
+            sortBy: rightSorted ? rightSortBy : null,
             emptyText: rightEmptyText,
             onRowDoubleClicked: e => this.onRowDoubleClicked(e),
-            columns: [rightTextCol, groupCol],
+            columns: [rightTextCol, groupCol, sortValueCol],
             contextMenu: false,
             expandLevel: rightGroupingExpanded ? 1 : 0,
             xhImpl: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765207418027",
+  "version": "79.0.0-SNAPSHOT.1765207715965",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",