@xh/hoist 71.0.0-SNAPSHOT.1735588181793 → 71.0.0-SNAPSHOT.1735657683714

package/CHANGELOG.md

@@ -53,6 +53,11 @@
 * Improved accuracy of `IconProps` interface, with use of the `IconName` and `IconPrefix` types
   provided by FontAwesome.
 * Improved accuracy of `PersistOptions.type` enum.
+* Corrected the type of `ColumnSpec.editor`.
+
+### 📚 Libraries
+
+* react-grid-layout `1.4.3 → 1.5.0`
 
 ## v70.0.0 - 2024-11-15
 

package/build/types/cmp/grid/Types.d.ts

@@ -1,4 +1,4 @@
-import { IRowNode } from '@xh/hoist/kit/ag-grid';
+import { CustomCellEditorProps } from '@ag-grid-community/react';
 import { GridFilterFieldSpecConfig } from '@xh/hoist/cmp/grid/filter/GridFilterFieldSpec';
 import { HSide, PersistOptions, Some } from '@xh/hoist/core';
 import { Store, StoreRecord, View } from '@xh/hoist/data';
@@ -6,7 +6,7 @@ import { ReactElement, ReactNode } from 'react';
 import { Column } from './columns/Column';
 import { ColumnGroup } from './columns/ColumnGroup';
 import { GridModel } from './GridModel';
-import type { CellClassParams, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, ITooltipParams, RowClassParams, ValueSetterParams } from '@xh/hoist/kit/ag-grid';
+import type { CellClassParams, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, IRowNode, ITooltipParams, RowClassParams, ValueSetterParams } from '@xh/hoist/kit/ag-grid';
 export interface ColumnState {
     colId: string;
     width: number;
@@ -220,15 +220,23 @@ export type ColumnEditableFn = (params: {
     gridModel: GridModel;
 }) => boolean;
 /**
- * Function to return one Grid cell editor.  This value will be used to create a new Component
- * whenever editing is initiated on a cell.
+ * Function to return one Grid cell editor. This function will be used to create a new
+ * Component, whenever editing is initiated on a cell.
+ * The never parameter is never provided - it is included to satisfy typescript. See
+ * discussion in https://github.com/xh/hoist-react/pull/3351.
  * @returns the react element to use as the cell editor.
  */
-export type ColumnEditorFn = (params: {
+export type ColumnEditorFn = (props: ColumnEditorProps, never?: any) => ReactElement;
+/**
+ * The object passed into the first argument of {@link ColumnSpec.editor}.
+ * Satisfies the {@link EditorProps} of an editor component.
+ */
+export type ColumnEditorProps = {
     record: StoreRecord;
     column: Column;
     gridModel: GridModel;
-}) => ReactElement;
+    agParams: CustomCellEditorProps;
+};
 /**
  * Function to update the value of a StoreRecord field after inline editing
  */

package/build/types/cmp/grid/columns/Column.d.ts

@@ -1,9 +1,8 @@
 import { HAlign, HSide, PlainObject, Some, Thunkable } from '@xh/hoist/core';
 import { CubeFieldSpec, FieldSpec, RecordAction, RecordActionSpec, StoreRecord } from '@xh/hoist/data';
-import { ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 import { GridModel } from '../GridModel';
-import { ColumnCellClassFn, ColumnCellClassRuleFn, ColumnComparator, ColumnEditableFn, ColumnEditorFn, ColumnExcelFormatFn, ColumnExportValueFn, ColumnGetValueFn, ColumnHeaderClassFn, ColumnHeaderNameFn, ColumnRenderer, ColumnSetValueFn, ColumnSortSpec, ColumnSortValueFn, ColumnTooltipFn } from '../Types';
-import { FunctionComponent } from 'react';
+import { ColumnCellClassFn, ColumnCellClassRuleFn, ColumnComparator, ColumnEditableFn, ColumnEditorFn, ColumnEditorProps, ColumnExcelFormatFn, ColumnExportValueFn, ColumnGetValueFn, ColumnHeaderClassFn, ColumnHeaderNameFn, ColumnRenderer, ColumnSetValueFn, ColumnSortSpec, ColumnSortValueFn, ColumnTooltipFn } from '../Types';
 import type { ColDef } from '@xh/hoist/kit/ag-grid';
 export interface ColumnSpec {
     /**
@@ -216,10 +215,10 @@ export interface ColumnSpec {
      */
     editable?: boolean | ColumnEditableFn;
     /**
-     * Cell editor Component or a function to create one.  Adding an editor will also
-     * install a cellClassRule and tooltip to display the validation state of the cell in question.
+     * Cell editor Component or a function to create one. Adding an editor will also install a
+     * cellClassRule and tooltip to display the validation state of the cell in question.
      */
-    editor?: FunctionComponent | ColumnEditorFn;
+    editor?: FunctionComponent<ColumnEditorProps> | ColumnEditorFn;
     /**
      * True if this cell editor should be rendered as a popup over the cell instead of within the
      * actual cell element. Popup editors will have their width set to match the cell by default.
@@ -330,7 +329,7 @@ export declare class Column {
     autosizeBufferPx: number;
     autoHeight: boolean;
     editable: boolean | ColumnEditableFn;
-    editor: FunctionComponent | ColumnEditorFn;
+    editor: FunctionComponent<ColumnEditorProps> | ColumnEditorFn;
     editorIsPopup: boolean;
     setValueFn: ColumnSetValueFn;
     getValueFn: ColumnGetValueFn;

package/build/types/desktop/cmp/dash/canvas/DashCanvasModel.d.ts

@@ -3,17 +3,23 @@ import { Persistable, PersistableState } from '@xh/hoist/core';
 import { DashCanvasViewModel, DashCanvasViewSpec, DashConfig, DashViewState, DashModel } from '../';
 import '@xh/hoist/desktop/register';
 export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCanvasItemState> {
-    /** Total number of columns (x coordinates for views correspond with column numbers). */
+    /**
+     * Total number of columns (x coordinates for views correspond with column numbers).
+     * Default `12`.
+     */
     columns?: number;
-    /** Height of each row in pixels (y coordinates for views correspond with row numbers). */
+    /**
+     * Height of each row in pixels (y coordinates for views correspond with row numbers).
+     * Default `50`.
+     */
     rowHeight?: number;
-    /** Whether views should "compact" vertically to condense vertical space. */
+    /** Whether views should "compact" vertically to condense vertical space. Default `true`. */
     compact?: boolean;
-    /** Between items [x,y] in pixels. */
+    /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
-    /** Maximum number of rows permitted for this container. */
+    /** Maximum number of rows permitted for this container. Default `Infinity`. */
     maxRows?: number;
-    /** Padding inside the container [x, y] in pixels. */
+    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     containerPadding?: [number, number];
 }
 export interface DashCanvasItemState {
@@ -47,7 +53,6 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     layout: any[];
     ref: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
     isResizing: boolean;
-    private scrollbarVisible;
     private isLoadingState;
     get rglLayout(): any[];
     constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems }: DashCanvasConfig);
@@ -96,7 +101,6 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     }>): void;
     private getLayoutFromPosition;
     private addViewInternal;
-    onVisibleChange(visible: boolean): void;
     onRglLayoutChange(rglLayout: any): void;
     private setLayout;
     private loadState;
@@ -110,5 +114,4 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     private hasSpec;
     private getViewsBySpecId;
     private getNextAvailablePosition;
-    private fireWindowResizeEvent;
 }

package/build/types/desktop/cmp/grid/editors/EditorProps.d.ts

@@ -12,6 +12,6 @@ export interface EditorProps<InputPropsT extends HoistInputProps> extends HoistP
     /** StoreRecord being edited. */
     record: StoreRecord;
     /** Props to pass through to the underlying HoistInput component */
-    inputProps: InputPropsT;
+    inputProps?: InputPropsT;
     agParams: CustomCellEditorProps;
 }

package/cmp/grid/Types.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-import {IRowNode} from '@xh/hoist/kit/ag-grid';
+import {CustomCellEditorProps} from '@ag-grid-community/react';
 import {GridFilterFieldSpecConfig} from '@xh/hoist/cmp/grid/filter/GridFilterFieldSpec';
 import {HSide, PersistOptions, Some} from '@xh/hoist/core';
 import {Store, StoreRecord, View} from '@xh/hoist/data';
@@ -19,6 +19,7 @@ import type {
     HeaderClassParams,
     HeaderValueGetterParams,
     ICellRendererParams,
+    IRowNode,
     ITooltipParams,
     RowClassParams,
     ValueSetterParams
@@ -278,15 +279,24 @@ export type ColumnEditableFn = (params: {
 }) => boolean;
 
 /**
- * Function to return one Grid cell editor.  This value will be used to create a new Component
- * whenever editing is initiated on a cell.
+ * Function to return one Grid cell editor. This function will be used to create a new
+ * Component, whenever editing is initiated on a cell.
+ * The never parameter is never provided - it is included to satisfy typescript. See
+ * discussion in https://github.com/xh/hoist-react/pull/3351.
  * @returns the react element to use as the cell editor.
  */
-export type ColumnEditorFn = (params: {
+export type ColumnEditorFn = (props: ColumnEditorProps, never?: any) => ReactElement;
+
+/**
+ * The object passed into the first argument of {@link ColumnSpec.editor}.
+ * Satisfies the {@link EditorProps} of an editor component.
+ */
+export type ColumnEditorProps = {
     record: StoreRecord;
     column: Column;
     gridModel: GridModel;
-}) => ReactElement;
+    agParams: CustomCellEditorProps;
+};
 
 /**
  * Function to update the value of a StoreRecord field after inline editing

package/cmp/grid/columns/Column.ts

@@ -34,9 +34,9 @@ import {
     toString
 } from 'lodash';
 import {
-    Attributes,
     createElement,
     forwardRef,
+    FunctionComponent,
     isValidElement,
     ReactNode,
     useImperativeHandle,
@@ -52,6 +52,7 @@ import {
     ColumnComparator,
     ColumnEditableFn,
     ColumnEditorFn,
+    ColumnEditorProps,
     ColumnExcelFormatFn,
     ColumnExportValueFn,
     ColumnGetValueFn,
@@ -64,7 +65,6 @@ import {
     ColumnTooltipFn
 } from '../Types';
 import {ExcelFormat} from '../enums/ExcelFormat';
-import {FunctionComponent} from 'react';
 import type {
     ColDef,
     ITooltipParams,
@@ -333,10 +333,10 @@ export interface ColumnSpec {
     editable?: boolean | ColumnEditableFn;
 
     /**
-     * Cell editor Component or a function to create one.  Adding an editor will also
-     * install a cellClassRule and tooltip to display the validation state of the cell in question.
+     * Cell editor Component or a function to create one. Adding an editor will also install a
+     * cellClassRule and tooltip to display the validation state of the cell in question.
      */
-    editor?: FunctionComponent | ColumnEditorFn;
+    editor?: FunctionComponent<ColumnEditorProps> | ColumnEditorFn;
 
     /**
      * True if this cell editor should be rendered as a popup over the cell instead of within the
@@ -471,7 +471,7 @@ export class Column {
     autosizeBufferPx: number;
     autoHeight: boolean;
     editable: boolean | ColumnEditableFn;
-    editor: FunctionComponent | ColumnEditorFn;
+    editor: FunctionComponent<ColumnEditorProps> | ColumnEditorFn;
     editorIsPopup: boolean;
     setValueFn: ColumnSetValueFn;
     getValueFn: ColumnGetValueFn;
@@ -986,8 +986,7 @@ export class Column {
                     ref
                 };
                 // Can be a component or elem factory/ ad-hoc render function.
-                if ((editor as any).isHoistComponent)
-                    return createElement(editor, props as Attributes);
+                if ((editor as any).isHoistComponent) return createElement(editor, props);
                 if (isFunction(editor)) return editor(props);
                 throw XH.exception('Column editor must be a HoistComponent or a render function');
             });

package/desktop/cmp/dash/canvas/DashCanvas.ts

@@ -19,7 +19,6 @@ import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAd
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {TEST_ID} from '@xh/hoist/utils/js';
-import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
 import {DashCanvasModel} from './DashCanvasModel';
@@ -49,13 +48,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
 
     render({className, model, testId}, ref) {
         const isDraggable = !model.layoutLocked,
-            isResizable = !model.layoutLocked;
-
-        ref = composeRefs(
-            ref,
-            model.ref,
-            useOnVisibleChange(viz => model.onVisibleChange(viz))
-        );
+            isResizable = !model.layoutLocked,
+            [padX, padY] = model.containerPadding;
 
         return refreshContextView({
             model: model.refreshContextModel,
@@ -65,7 +59,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isDraggable ? `${className}--draggable` : null,
                     isResizable ? `${className}--resizable` : null
                 ),
-                ref,
+                style: {padding: `${padY}px ${padX}px`},
+                ref: composeRefs(ref, model.ref),
                 onContextMenu: e => onContextMenu(e, model),
                 items: [
                     reactGridLayout({
@@ -77,7 +72,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                         compactType: model.compact ? 'vertical' : null,
                         margin: model.margin,
                         maxRows: model.maxRows,
-                        containerPadding: model.containerPadding,
+                        containerPadding: [0, 0], // Workaround for https://github.com/react-grid-layout/react-grid-layout/issues/1990
                         autoSize: true,
                         isBounded: true,
                         draggableHandle:

package/desktop/cmp/dash/canvas/DashCanvasModel.ts

@@ -27,22 +27,28 @@ import {
 } from 'lodash';
 
 export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCanvasItemState> {
-    /** Total number of columns (x coordinates for views correspond with column numbers). */
+    /**
+     * Total number of columns (x coordinates for views correspond with column numbers).
+     * Default `12`.
+     */
     columns?: number;
 
-    /** Height of each row in pixels (y coordinates for views correspond with row numbers). */
+    /**
+     * Height of each row in pixels (y coordinates for views correspond with row numbers).
+     * Default `50`.
+     */
     rowHeight?: number;
 
-    /** Whether views should "compact" vertically to condense vertical space. */
+    /** Whether views should "compact" vertically to condense vertical space. Default `true`. */
     compact?: boolean;
 
-    /** Between items [x,y] in pixels. */
+    /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
 
-    /** Maximum number of rows permitted for this container. */
+    /** Maximum number of rows permitted for this container. Default `Infinity`. */
     maxRows?: number;
 
-    /** Padding inside the container [x, y] in pixels. */
+    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     containerPadding?: [number, number];
 }
 
@@ -97,7 +103,6 @@ export class DashCanvasModel
     @observable.ref layout: any[] = [];
     ref = createObservableRef<HTMLElement>();
     isResizing: boolean;
-    private scrollbarVisible: boolean;
     private isLoadingState: boolean;
 
     get rglLayout() {
@@ -131,7 +136,7 @@ export class DashCanvasModel
         compact = true,
         margin = [10, 10],
         maxRows = Infinity,
-        containerPadding = null,
+        containerPadding = margin,
         extraMenuItems
     }: DashCanvasConfig) {
         super();
@@ -194,19 +199,10 @@ export class DashCanvasModel
             });
         }
 
-        this.addReaction(
-            {
-                track: () => this.viewState,
-                run: () => (this.state = this.buildState())
-            },
-            {
-                when: () => !!this.ref.current,
-                run: () => {
-                    const {current: node} = this.ref;
-                    this.scrollbarVisible = node.offsetWidth > node.clientWidth;
-                }
-            }
-        );
+        this.addReaction({
+            track: () => this.viewState,
+            run: () => (this.state = this.buildState())
+        });
     }
 
     /** Removes all views from the canvas */
@@ -385,12 +381,6 @@ export class DashCanvasModel
         return model;
     }
 
-    // Trigger window resize event when component becomes visible to ensure layout adjusted to
-    // current window size - fixes https://github.com/xh/hoist-react/issues/3215
-    onVisibleChange(visible: boolean) {
-        if (visible) this.fireWindowResizeEvent();
-    }
-
     onRglLayoutChange(rglLayout) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
         this.setLayout(rglLayout);
@@ -404,15 +394,6 @@ export class DashCanvasModel
 
         this.layout = layout;
         if (!this.isLoadingState) this.state = this.buildState();
-
-        // Check if scrollbar visibility has changed, and force resize event if so
-        const node = this.ref.current;
-        if (!node) return;
-        const scrollbarVisible = node.offsetWidth > node.clientWidth;
-        if (scrollbarVisible !== this.scrollbarVisible) {
-            this.fireWindowResizeEvent();
-            this.scrollbarVisible = scrollbarVisible;
-        }
     }
 
     @action
@@ -530,8 +511,4 @@ export class DashCanvasModel
 
         return {x: defaultX, y: endY ?? rows};
     }
-
-    private fireWindowResizeEvent() {
-        window.dispatchEvent(new Event('resize'));
-    }
 }

package/desktop/cmp/grid/editors/EditorProps.ts

@@ -22,7 +22,7 @@ export interface EditorProps<InputPropsT extends HoistInputProps> extends HoistP
     record: StoreRecord;
 
     /** Props to pass through to the underlying HoistInput component */
-    inputProps: InputPropsT;
+    inputProps?: InputPropsT;
 
     agParams: CustomCellEditorProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "71.0.0-SNAPSHOT.1735588181793",
+  "version": "71.0.0-SNAPSHOT.1735657683714",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -69,7 +69,7 @@
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
     "react-dropzone": "~10.2.2",
-    "react-grid-layout": "1.4.3",
+    "react-grid-layout": "1.5.0",
     "react-markdown": "~9.0.1",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",