@xh/hoist 59.2.0 → 59.3.0

package/cmp/grid/Grid.ts

@@ -7,8 +7,9 @@
 import composeRefs from '@seznam/compose-react-refs';
 import {agGrid, AgGrid} from '@xh/hoist/cmp/ag-grid';
 import {getTreeStyleClasses} from '@xh/hoist/cmp/grid';
+import {gridHScrollbar} from '@xh/hoist/cmp/grid/impl/GridHScrollbar';
 import {getAgGridMenuItems} from '@xh/hoist/cmp/grid/impl/MenuSupport';
-import {div, fragment, frame} from '@xh/hoist/cmp/layout';
+import {div, fragment, frame, vframe} from '@xh/hoist/cmp/layout';
 import {
     hoistCmp,
     HoistModel,
@@ -16,29 +17,18 @@ import {
     LayoutProps,
     lookup,
     PlainObject,
+    TestSupportProps,
     useLocalModel,
     uses,
     XH
 } from '@xh/hoist/core';
+import {RecordSet} from '@xh/hoist/data/impl/RecordSet';
 import {
     colChooser as desktopColChooser,
     gridFilterDialog,
     ModalSupportModel
 } from '@xh/hoist/dynamics/desktop';
 import {colChooser as mobileColChooser} from '@xh/hoist/dynamics/mobile';
-import {computed, observer} from '@xh/hoist/mobx';
-import {wait} from '@xh/hoist/promise';
-import {consumeEvent, isDisplayed, logDebug, logWithDebug} from '@xh/hoist/utils/js';
-import {getLayoutProps} from '@xh/hoist/utils/react';
-import classNames from 'classnames';
-import {debounce, isEmpty, isEqual, isNil, max, maxBy, merge} from 'lodash';
-import {createRef} from 'react';
-import './Grid.scss';
-import {GridModel} from './GridModel';
-import {columnGroupHeader} from './impl/ColumnGroupHeader';
-import {columnHeader} from './impl/ColumnHeader';
-import {RowKeyNavSupport} from './impl/RowKeyNavSupport';
-import {RecordSet} from '@xh/hoist/data/impl/RecordSet';
 import {Icon} from '@xh/hoist/icon';
 
 import type {
@@ -49,8 +39,19 @@ import type {
     GridReadyEvent,
     ProcessCellForExportParams
 } from '@xh/hoist/kit/ag-grid';
+import {computed, observer} from '@xh/hoist/mobx';
+import {wait} from '@xh/hoist/promise';
+import {consumeEvent, isDisplayed, logDebug, logWithDebug} from '@xh/hoist/utils/js';
+import {createObservableRef, getLayoutProps} from '@xh/hoist/utils/react';
+import classNames from 'classnames';
+import {debounce, isEmpty, isEqual, isNil, max, maxBy, merge} from 'lodash';
+import './Grid.scss';
+import {GridModel} from './GridModel';
+import {columnGroupHeader} from './impl/ColumnGroupHeader';
+import {columnHeader} from './impl/ColumnHeader';
+import {RowKeyNavSupport} from './impl/RowKeyNavSupport';
 
-export interface GridProps extends HoistProps<GridModel>, LayoutProps {
+export interface GridProps extends HoistProps<GridModel>, LayoutProps, TestSupportProps {
     /**
      * Options for ag-Grid's API.
      *
@@ -90,7 +91,7 @@ export const [Grid, grid] = hoistCmp.withFactory<GridProps>({
     model: uses(GridModel),
     className: 'xh-grid',
 
-    render({model, className, ...props}, ref) {
+    render({model, className, testId, ...props}, ref) {
         const {store, treeMode, treeStyle, highlightRowOnClick, colChooserModel, filterModel} =
                 model,
             impl = useLocalModel(GridLocalModel),
@@ -106,14 +107,24 @@ export const [Grid, grid] = hoistCmp.withFactory<GridProps>({
             highlightRowOnClick ? 'xh-grid--highlight-row-on-click' : null
         );
 
+        const {enableFullWidthScroll} = model.experimental,
+            container = enableFullWidthScroll ? vframe : frame;
+
         return fragment(
-            frame({
+            container({
                 className,
-                item: agGrid({
-                    model: model.agGridModel,
-                    ...getLayoutProps(props),
-                    ...impl.agOptions
-                }),
+                items: [
+                    agGrid({
+                        model: model.agGridModel,
+                        ...getLayoutProps(props),
+                        ...impl.agOptions
+                    }),
+                    gridHScrollbar({
+                        omit: !enableFullWidthScroll,
+                        gridLocalModel: impl
+                    })
+                ],
+                testId,
                 onKeyDown: impl.onKeyDown,
                 ref: composeRefs(impl.viewRef, ref)
             }),
@@ -123,18 +134,18 @@ export const [Grid, grid] = hoistCmp.withFactory<GridProps>({
     }
 });
 
-(Grid as any).MULTIFIELD_ROW_HEIGHT = 38;
+(Grid as any).MULTIFIELD_ROW_HEIGHT = 42;
 
 //------------------------
 // Implementation
 //------------------------
-class GridLocalModel extends HoistModel {
+export class GridLocalModel extends HoistModel {
     override xhImpl = true;
 
     @lookup(GridModel)
     private model: GridModel;
     agOptions: GridOptions;
-    viewRef = createRef<HTMLElement>();
+    viewRef = createObservableRef<HTMLElement>();
     private rowKeyNavSupport: RowKeyNavSupport;
     private prevRs: RecordSet;
 
@@ -270,6 +281,11 @@ class GridLocalModel extends HoistModel {
             };
         }
 
+        // Support for FullWidthScroll
+        if (model.experimental.enableFullWidthScroll) {
+            ret.suppressHorizontalScroll = true;
+        }
+
         return ret;
     }
 

package/cmp/grid/GridModel.ts

@@ -132,7 +132,7 @@ export interface GridConfig {
     /** Config with which to create a GridFilterModel, or `true` to enable default. Desktop only.*/
     filterModel?: GridFilterModelConfig | boolean;
 
-    /** Config with which to create aColChooserModel, or boolean `true` to enable default.*/
+    /** Config with which to create a ColChooserModel, or boolean `true` to enable default.*/
     colChooserModel?: ColChooserConfig | boolean;
 
     /**
@@ -1461,7 +1461,7 @@ export class GridModel extends HoistModel {
         if (omit) return null;
 
         if (this.isGroupSpec(config)) {
-            if (config.borders) borderedGroup = config;
+            if (config.borders !== false) borderedGroup = config;
             const children = compact(
                 config.children.map(c => this.buildColumn(c, borderedGroup))
             ) as Array<ColumnGroup | Column>;

package/cmp/grid/Types.ts

@@ -113,7 +113,7 @@ export interface GridFilterModelConfig {
     fieldSpecs?: Array<string | GridFilterFieldSpecConfig>;
 
     /** Default properties to be assigned to all fieldSpecs created by this model. */
-    fieldSpecDefaults?: GridFilterFieldSpecConfig;
+    fieldSpecDefaults?: Omit<GridFilterFieldSpecConfig, 'field'>;
 }
 
 /**

package/cmp/grid/columns/Column.ts

@@ -190,6 +190,13 @@ export interface ColumnSpec {
      */
     sortValue?: string | ColumnSortValueFn;
 
+    /**
+     * Values to match or functions to check to determine if a value should always be sorted
+     * to the bottom, regardless of sort order. If more than one entry is provided, values will be
+     * sorted according to the order they appear here.
+     */
+    sortToBottom?: Some<unknown | ((v: unknown) => boolean)>;
+
     /** Function to compare cell values for sorting.*/
     comparator?: ColumnComparator;
 
@@ -434,6 +441,7 @@ export class Column {
     sortingOrder: ColumnSortSpec[];
     absSort: boolean;
     sortValue: string | ColumnSortValueFn;
+    sortToBottom: Array<(v: unknown) => boolean>;
     comparator: ColumnComparator;
     resizable: boolean;
     sortable: boolean;
@@ -506,6 +514,7 @@ export class Column {
             absSort,
             sortingOrder,
             sortValue,
+            sortToBottom,
             comparator,
             resizable,
             movable,
@@ -600,6 +609,7 @@ export class Column {
         this.absSort = withDefault(absSort, false);
         this.sortingOrder = this.parseSortingOrder(sortingOrder);
         this.sortValue = sortValue;
+        this.sortToBottom = this.parseSortToBottom(sortToBottom);
         this.comparator = comparator;
 
         this.resizable = withDefault(resizable, true);
@@ -897,12 +907,20 @@ export class Column {
         if (this.comparator === undefined) {
             // Use default comparator with appropriate inputs
             ret.comparator = (valueA, valueB, agNodeA, agNodeB) => {
-                const recordA = agNodeA?.data,
+                const {gridModel, colId} = this,
+                    // Note: sortCfg and agNodes can be undefined if comparator called during show
+                    // of agGrid column header set filter menu.
+                    sortCfg = find(gridModel.sortBy, {colId}),
+                    sortDir = sortCfg?.sort || 'asc',
+                    recordA = agNodeA?.data,
                     recordB = agNodeB?.data;
 
                 valueA = this.getSortValue(valueA, recordA);
                 valueB = this.getSortValue(valueB, recordB);
 
+                const sortToBottom = this.sortToBottomComparator(valueA, valueB, sortDir);
+                if (sortToBottom !== 0) return sortToBottom;
+
                 return this.defaultComparator(valueA, valueB);
             };
         } else {
@@ -921,7 +939,7 @@ export class Column {
                         recordB,
                         column: this,
                         gridModel,
-                        defaultComparator: (a, b) => this.defaultComparator(a, b),
+                        defaultComparator: this.defaultComparator,
                         agNodeA,
                         agNodeB
                     };
@@ -929,6 +947,9 @@ export class Column {
                 valueA = this.getSortValue(valueA, recordA);
                 valueB = this.getSortValue(valueB, recordB);
 
+                const sortToBottom = this.sortToBottomComparator(valueA, valueB, sortDir);
+                if (sortToBottom !== 0) return sortToBottom;
+
                 return this.comparator(valueA, valueB, sortDir, abs, params);
             };
         }
@@ -979,6 +1000,23 @@ export class Column {
         return sortCfg ? sortCfg.comparator(v1, v2) : GridSorter.defaultComparator(v1, v2);
     };
 
+    private sortToBottomComparator = (v1, v2, sortDir: 'asc' | 'desc') => {
+        const {sortToBottom} = this;
+
+        if (isNil(sortToBottom)) return 0;
+
+        for (let fn of sortToBottom) {
+            const v1ToBottom = fn(v1),
+                v2ToBottom = fn(v2);
+            const isAsc = sortDir === 'asc';
+            if (v1ToBottom != v2ToBottom) {
+                return v1ToBottom ? (isAsc ? 1 : -1) : isAsc ? -1 : 1;
+            }
+        }
+
+        return 0;
+    };
+
     private defaultSetValueFn = ({value, record, store, field}) => {
         const data = {id: record.id};
         data[field] = value;
@@ -1011,6 +1049,11 @@ export class Column {
         return sortingOrder?.map(spec => (isString(spec) || spec === null ? {sort: spec} : spec));
     }
 
+    private parseSortToBottom(sortToBottom): Array<(v: unknown) => boolean> {
+        if (isNil(sortToBottom)) return null;
+        return castArray(sortToBottom).map(v => (isFunction(v) ? v : it => it === v));
+    }
+
     private parseFilterable(filterable) {
         if (!filterable) return false;
 

package/cmp/grid/impl/GridHScrollbar.ts

@@ -0,0 +1,140 @@
+import {GridLocalModel, GridModel} from '@xh/hoist/cmp/grid';
+import {div} from '@xh/hoist/cmp/layout';
+import {hoistCmp, HoistModel, HoistProps, useLocalModel} from '@xh/hoist/core';
+import {makeObservable} from '@xh/hoist/mobx';
+import {observeResize} from '@xh/hoist/utils/js';
+import {sumBy} from 'lodash';
+import {action, observable} from 'mobx';
+import {createRef, RefObject} from 'react';
+
+/**
+ * Implementation for Grid's full-width horizontal scrollbar, to span pinned columns
+ * @internal
+ */
+
+export interface GridHScrollbarProps extends HoistProps<GridModel> {
+    gridLocalModel: GridLocalModel;
+}
+
+export const gridHScrollbar = hoistCmp.factory<GridHScrollbarProps>({
+    className: 'xh-grid__grid-hscrollbar',
+    render({className}) {
+        const impl = useLocalModel(GridHScrollbarModel),
+            {scrollerRef, viewWidth, visibleColumnWidth, SCROLLBAR_SIZE} = impl;
+
+        if (viewWidth > visibleColumnWidth) return null;
+
+        return div({
+            className,
+            item: div({
+                className: `${className}__filler`,
+                style: {
+                    height: SCROLLBAR_SIZE,
+                    width: visibleColumnWidth
+                }
+            }),
+            onScroll: e => {
+                impl.scrollViewport((e.target as HTMLDivElement).scrollLeft);
+            },
+            ref: scrollerRef,
+            style: {
+                height: SCROLLBAR_SIZE, // TODO: make this a property on GridModel to apply to both scrollbars
+                overflowX: 'auto',
+                overflowY: 'hidden'
+            }
+        });
+    }
+});
+
+class GridHScrollbarModel extends HoistModel {
+    readonly SCROLLBAR_SIZE = 10;
+    readonly scrollerRef = createRef<HTMLDivElement>();
+
+    @observable viewWidth: number;
+    @observable private isVerticalScrollbarVisible = false;
+
+    /** Observe AG's viewport to detect when vertical scrollbar visibility changes */
+    private agViewportResizeObserver: ResizeObserver;
+    /** Observe overall view to detect when horizontal scrollbar is needed */
+    private viewResizeObserver: ResizeObserver;
+
+    get visibleColumnWidth(): number {
+        const {gridModel, SCROLLBAR_SIZE} = this;
+        return (
+            sumBy(gridModel.columnState, ({colId, hidden, width}) => {
+                if (hidden) return 0;
+                const minWidth = gridModel.getColumn(colId).minWidth ?? 0;
+                if (width) return Math.max(width, minWidth);
+                return minWidth;
+            }) + (this.isVerticalScrollbarVisible ? SCROLLBAR_SIZE : 0)
+        );
+    }
+
+    private get agViewport(): HTMLDivElement {
+        return this.viewRef.current.querySelector('.ag-center-cols-viewport');
+    }
+
+    private get agVerticalScrollContainer(): HTMLDivElement {
+        return this.viewRef.current.querySelector('.ag-body-vertical-scroll-container');
+    }
+
+    private get gridModel(): GridModel {
+        return this.componentProps.model as GridModel;
+    }
+
+    private get viewRef(): RefObject<HTMLElement> {
+        return this.componentProps.gridLocalModel.viewRef;
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    scrollScroller(left: number) {
+        this.scrollerRef.current.scrollLeft = left;
+    }
+
+    scrollViewport(left: number) {
+        this.agViewport.scrollLeft = left;
+    }
+
+    override afterLinked() {
+        this.addReaction({
+            when: () => this.viewRef.current && this.gridModel.isReady,
+            run: () => {
+                const {agViewport, viewRef} = this;
+                this.viewWidth = viewRef.current.clientWidth;
+                agViewport.addEventListener('scroll', e =>
+                    this.scrollScroller((e.target as HTMLDivElement).scrollLeft)
+                );
+                this.agViewportResizeObserver = observeResize(
+                    () => this.onAgViewportResized(),
+                    agViewport,
+                    {debounce: 100}
+                );
+                this.viewResizeObserver = observeResize(
+                    rect => this.onViewResized(rect),
+                    viewRef.current,
+                    {debounce: 100}
+                );
+            }
+        });
+    }
+
+    override destroy() {
+        super.destroy();
+        this.agViewportResizeObserver?.disconnect();
+        this.viewResizeObserver?.disconnect();
+    }
+
+    @action
+    private onAgViewportResized() {
+        this.isVerticalScrollbarVisible = !!this.agVerticalScrollContainer.clientHeight;
+    }
+
+    @action
+    private onViewResized({width}: DOMRect) {
+        this.viewWidth = width;
+    }
+}

package/cmp/grid/renderers/MultiFieldRenderer.ts

@@ -98,7 +98,7 @@ function renderMainField(value, renderer, context) {
 
 function renderSubField({colId, label}, context) {
     const {record, gridModel} = context,
-        column = gridModel.findColumn(gridModel.columns, colId);
+        column = gridModel.getColumn(colId);
 
     throwIf(!column, `Subfield ${colId} not found`);
 

package/cmp/input/HoistInputModel.ts

@@ -4,14 +4,14 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {DefaultHoistProps, HoistModel, HoistModelClass, useLocalModel} from '@xh/hoist/core';
 import {FieldModel} from '@xh/hoist/cmp/form';
-import {action, computed, observable, makeObservable} from '@xh/hoist/mobx';
+import {DefaultHoistProps, HoistModel, HoistModelClass, useLocalModel} from '@xh/hoist/core';
+import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {createObservableRef} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isEqual} from 'lodash';
-import {ForwardedRef, ReactElement, ReactInstance, useImperativeHandle, FocusEvent} from 'react';
+import {FocusEvent, ForwardedRef, ReactElement, ReactInstance, useImperativeHandle} from 'react';
 import {findDOMNode} from 'react-dom';
-import {createObservableRef} from '@xh/hoist/utils/react';
 import './HoistInput.scss';
 
 /**

package/cmp/input/HoistInputProps.ts

@@ -5,7 +5,9 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
-export interface HoistInputProps {
+import {TestSupportProps} from '@xh/hoist/core';
+
+export interface HoistInputProps extends TestSupportProps {
     /**
      * Field or model property name from which this component should read and write its value
      * in controlled mode. Can be set by parent FormField.

package/cmp/layout/Box.ts

@@ -4,7 +4,8 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {hoistCmp, BoxProps, HoistProps} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistProps} from '@xh/hoist/core';
+import {TEST_ID} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import {merge} from 'lodash';
 import {div} from './Tags';
@@ -31,11 +32,12 @@ export const [Box, box] = hoistCmp.withFactory<BoxComponentProps>({
         // Note `model` destructured off of non-layout props to avoid setting
         // model as a bogus DOM attribute. This low-level component may easily be passed one from
         // a parent that has not properly managed its own props.
-        let [layoutProps, {children, model, ...restProps}] = splitLayoutProps(props);
+        let [layoutProps, {children, model, testId, ...restProps}] = splitLayoutProps(props);
 
         restProps = merge(
             {style: {display: 'flex', overflow: 'hidden', position: 'relative'}},
             {style: layoutProps},
+            {[TEST_ID]: testId},
             restProps
         );