@xh/hoist 71.0.0-SNAPSHOT.1735600578743 → 71.0.0-SNAPSHOT.1735658425894

package/CHANGELOG.md

@@ -32,6 +32,7 @@
   ID and access tokens in a single request and to use refresh tokens to maintain access without
   relying on third-party cookies.
 * Updated sorting on grouped grids to place ungrouped items at the bottom.
+* `DashCanvas` views can now be resized left and up in addition to right and down.
 
 ### 🐞 Bug Fixes
 
@@ -53,6 +54,7 @@
 * 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
 

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/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.scss

@@ -1,3 +1,32 @@
+@mixin resize-handle-ew {
+  height: 100%;
+  top: 0;
+  transform: rotate(0);
+  width: 8px;
+}
+
+@mixin resize-handle-ns {
+  height: 8px;
+  left: 0;
+  transform: rotate(0);
+  width: 100%;
+}
+
+@mixin resize-handle-corner {
+  height: 16px;
+  width: 16px;
+}
+
+@mixin resize-handle-se-sw {
+  @include resize-handle-corner;
+  bottom: -8px;
+}
+
+@mixin resize-handle-ne-nw {
+  @include resize-handle-corner;
+  top: -8px;
+}
+
 .xh-dash-canvas {
   width: 100%;
   height: 100%;
@@ -21,27 +50,44 @@
 
     > .react-resizable-handle {
       // Make the resize handles fill the entire side
+      &.react-resizable-handle-n {
+        @include resize-handle-ns;
+        top: -4px;
+      }
+
       &.react-resizable-handle-s {
+        @include resize-handle-ns;
         bottom: -4px;
-        height: 8px;
-        left: 0;
-        transform: rotate(0);
-        width: 100%;
       }
 
       &.react-resizable-handle-e {
-        height: 100%;
+        @include resize-handle-ew;
         right: -4px;
-        top: 0;
-        transform: rotate(0);
-        width: 8px;
+      }
+
+      &.react-resizable-handle-w {
+        @include resize-handle-ew;
+        left: -4px;
+      }
+
+      &.react-resizable-handle-ne {
+        @include resize-handle-ne-nw;
+        right: -8px;
+      }
+
+      &.react-resizable-handle-nw {
+        @include resize-handle-ne-nw;
+        left: -8px;
       }
 
       &.react-resizable-handle-se {
-        bottom: -8px;
-        height: 16px;
+        @include resize-handle-se-sw;
         right: -8px;
-        width: 16px;
+      }
+
+      &.react-resizable-handle-sw {
+        @include resize-handle-se-sw;
+        left: -8px;
       }
 
       // Hide the resize handles

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

@@ -112,7 +112,9 @@ export class DashCanvasModel
 
             return {
                 ...it,
-                resizeHandles: autoHeight ? ['e'] : ['e', 's', 'se'],
+                resizeHandles: autoHeight
+                    ? ['w', 'e']
+                    : ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
                 maxH: viewSpec.maxHeight,
                 minH: viewSpec.minHeight,
                 maxW: viewSpec.maxWidth,

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.1735600578743",
+  "version": "71.0.0-SNAPSHOT.1735658425894",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",