Fixed ColumnSpec.editor type

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 * Added `xh-bg-intent-xxx` CSS classes, for intent-coloring the `background-color` of elements.
 
+### ⚙️ Typescript API Adjustments
+
+* Corrected the type of `ColumnSpec.editor`.
+
 ## 59.5.0 - 2023-12-11
 
 ### 🎁 New Features

cmp/grid/Types.ts

@@ -5,7 +5,7 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
-import {IRowNode} from '@xh/hoist/kit/ag-grid';
+import {ICellEditorParams} from '@ag-grid-community/core';
 import {GridFilterFieldSpecConfig} from '@xh/hoist/cmp/grid/filter/GridFilterFieldSpec';
 import {HSide, PersistOptions, SizingMode, 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
@@ -292,15 +293,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: ICellEditorParams;
+};
 
 /**
  * Function to update the value of a StoreRecord field after inline editing

cmp/grid/columns/Column.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {ICellEditorParams} from '@ag-grid-community/core';
 import {div, li, span, ul} from '@xh/hoist/cmp/layout';
 import {HAlign, HSide, PlainObject, Some, XH, Thunkable} from '@xh/hoist/core';
 import {
@@ -33,9 +34,9 @@ import {
     toString
 } from 'lodash';
 import {
-    Attributes,
     createElement,
     forwardRef,
+    FunctionComponent,
     isValidElement,
     ReactNode,
     useImperativeHandle
@@ -49,6 +50,7 @@ import {
     ColumnComparator,
     ColumnEditableFn,
     ColumnEditorFn,
+    ColumnEditorProps,
     ColumnExcelFormatFn,
     ColumnExportValueFn,
     ColumnGetValueFn,
@@ -60,8 +62,7 @@ import {
     ColumnSortValueFn,
     ColumnTooltipFn
 } from '../Types';
-import {ExcelFormat} from '../enums/ExcelFormat';
-import {FunctionComponent} from 'react';
+import {ExcelFormat} from '@xh/hoist/cmp/grid';
 import {ColumnGroup} from './ColumnGroup';
 import type {
     ColDef,
@@ -332,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
@@ -470,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;
@@ -960,7 +961,7 @@ export class Column {
         }
 
         if (editor) {
-            ret.cellEditor = forwardRef((agParams: PlainObject, ref) => {
+            ret.cellEditor = forwardRef((agParams: ICellEditorParams, ref) => {
                 const props = {
                     record: agParams.data as StoreRecord,
                     gridModel,
@@ -969,8 +970,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');
             });

desktop/cmp/grid/editors/EditorProps.ts

@@ -23,7 +23,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: ICellEditorParams;
 }

inspector/instances/InstancesModel.ts

@@ -369,8 +369,8 @@ export class InstancesModel extends HoistModel {
                     const displayGroup = inst.isHoistService
                         ? 'Services'
                         : inst.isStore
-                          ? 'Stores'
-                          : 'Models';
+                        ? 'Stores'
+                        : 'Models';
                     data.push({...inst, displayGroup});
                 });
 
@@ -464,8 +464,8 @@ export class InstancesModel extends HoistModel {
             isGetter && !isLoadedGetter
                 ? 'get(?)'
                 : isProxy
-                  ? 'Proxy'
-                  : v?.constructor?.name ?? typeof v;
+                ? 'Proxy'
+                : v?.constructor?.name ?? typeof v;
 
         return {
             id: `${xhId}-${property}${fromWatchlistItem ? '-wl' : ''}`,
@@ -479,8 +479,8 @@ export class InstancesModel extends HoistModel {
                 isHoistModel || isHoistService || isStore
                     ? v.xhId
                     : isProxy
-                      ? '[cannot render]'
-                      : v,
+                    ? '[cannot render]'
+                    : v,
             valueType,
             isOwnProperty,
             isObservable,

mobile/cmp/input/Select.ts

@@ -272,8 +272,8 @@ class SelectInputModel extends HoistInputModel {
                 ? reactAsyncCreatableSelect
                 : reactAsyncSelect
             : creatableMode
-              ? reactCreatableSelect
-              : reactSelect;
+            ? reactCreatableSelect
+            : reactSelect;
     }
 
     @action