Overall type improvements

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## 67.0.0-SNAPSHOT - unreleased
 
+### 💥 Breaking Changes (upgrade difficulty: 🟢 TRIVIAL - renamed component prop)
+
+* `RefreshButton` component `model` prop renamed to `target`.
+
 ### 🎁 New Features
 
 * Added support for Correlation IDs across fetch requests and error / activity tracking:
@@ -23,10 +27,14 @@
 ### 🐞 Bug Fixes
 
 * Fixed `SelectEditor` to ensure new value is flushed before editing stops.
+* Fix bug where `model` passed to `RelativeTimestamp` was being ignored.
 
 ### ⚙️ Technical
 
 * Remove context menus from column choosers.
+* Typescript: Overall type improvements and cleanup. Note: `AppConfigs` with `model: false` will
+  need to specify a `null` model type in the generic argument to `hoistCmp`, `hoistCmp.factory` or
+  `hoistCmp.withFactory` to avoid a type error.
 
 ### 📚 Libraries
 

admin/tabs/cluster/logs/LogViewerModel.ts

@@ -23,7 +23,7 @@ import {LogDisplayModel} from './LogDisplayModel';
 export class LogViewerModel extends BaseInstanceModel {
     @observable file: string = null;
 
-    viewRef = createRef<HTMLElement>();
+    viewRef = createRef<HTMLDivElement>();
 
     @managed
     logDisplayModel = new LogDisplayModel(this);

admin/tabs/cluster/websocket/WebSocketModel.ts

@@ -23,7 +23,7 @@ import {RecordActionSpec} from '@xh/hoist/data';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 
 export class WebSocketModel extends BaseInstanceModel {
-    viewRef = createRef<HTMLElement>();
+    viewRef = createRef<HTMLDivElement>();
 
     @observable
     lastRefresh: number;

cmp/ag-grid/AgGrid.ts

@@ -26,7 +26,7 @@ import './AgGrid.scss';
 import {AgGridModel} from './AgGridModel';
 
 export interface AgGridProps
-    extends HoistProps<AgGridModel>,
+    extends HoistProps<AgGridModel, HTMLDivElement>,
         GridOptions,
         LayoutProps,
         TestSupportProps {}

cmp/badge/Badge.ts

@@ -5,13 +5,13 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {div} from '@xh/hoist/cmp/layout';
-import {BoxProps, hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistPropsWithRef, Intent} from '@xh/hoist/core';
 import {TEST_ID, mergeDeep} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import './Badge.scss';
 
-export interface BadgeProps extends HoistProps, BoxProps {
+export interface BadgeProps extends HoistPropsWithRef<HTMLDivElement>, BoxProps {
     /** Sets fontsize to half that of parent element (default false). */
     compact?: boolean;
 

cmp/chart/Chart.ts

@@ -41,7 +41,10 @@ import {LightTheme} from './theme/Light';
 installZoomoutGesture(Highcharts);
 installCopyToClipboard(Highcharts);
 
-export interface ChartProps extends HoistProps<ChartModel>, LayoutProps, TestSupportProps {
+export interface ChartProps
+    extends HoistProps<ChartModel, HTMLDivElement>,
+        LayoutProps,
+        TestSupportProps {
     /**
      * Ratio of width-to-height of displayed chart.  If defined and greater than 0, the chart will
      * respect this ratio within the available space.  Otherwise, the chart will stretch on both

cmp/clock/Clock.ts

@@ -9,7 +9,7 @@ import {
     BoxProps,
     hoistCmp,
     HoistModel,
-    HoistProps,
+    HoistPropsWithRef,
     managed,
     useLocalModel,
     XH
@@ -21,7 +21,7 @@ import {MINUTES, ONE_SECOND} from '@xh/hoist/utils/datetime';
 import {isNumber} from 'lodash';
 import {getLayoutProps} from '../../utils/react';
 
-export interface ClockProps extends HoistProps, BoxProps {
+export interface ClockProps extends HoistPropsWithRef<HTMLDivElement>, BoxProps {
     /** String to display if the timezone is invalid or an offset cannot be fetched. */
     errorString?: string;
 

cmp/dataview/DataView.ts

@@ -24,7 +24,10 @@ import './DataView.scss';
 import {DataViewModel} from './DataViewModel';
 import {mergeDeep} from '@xh/hoist/utils/js';
 
-export interface DataViewProps extends HoistProps<DataViewModel>, LayoutProps, TestSupportProps {
+export interface DataViewProps
+    extends HoistProps<DataViewModel, HTMLDivElement>,
+        LayoutProps,
+        TestSupportProps {
     /**
      * Options for ag-Grid's API.
      *

cmp/filter/FilterChooserModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {HoistInputModel} from '@xh/hoist/cmp/input';
 import {
     HoistModel,
     managed,
@@ -145,7 +146,7 @@ export class FilterChooserModel extends HoistModel {
     @observable.ref selectValue: string[];
     @observable favoritesIsOpen = false;
     @observable unsupportedFilter = false;
-    inputRef = createObservableRef<HTMLElement>();
+    inputRef = createObservableRef<HoistInputModel<null>>();
 
     constructor({
         fieldSpecs,

cmp/form/BaseFormFieldProps.ts

@@ -9,7 +9,7 @@ import {BoxProps, HoistProps} from '@xh/hoist/core';
 import {ReactNode} from 'react';
 import {FieldModel} from './field/FieldModel';
 
-export interface BaseFormFieldProps extends HoistProps<FieldModel>, BoxProps {
+export interface BaseFormFieldProps extends HoistProps<FieldModel, HTMLDivElement>, BoxProps {
     /**
      * CommitOnChange property for underlying HoistInput (for inputs that support).
      * Defaulted from containing Form.

cmp/form/Form.ts

@@ -5,10 +5,10 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {
-    DefaultHoistProps,
     elementFactory,
     hoistCmp,
     HoistProps,
+    PlainObject,
     TestSupportProps,
     uses
 } from '@xh/hoist/core';
@@ -21,7 +21,7 @@ import {FormModel} from './FormModel';
 /** @internal */
 export interface FormContextType {
     /** Defaults props to be applied to contained fields. */
-    fieldDefaults?: Partial<BaseFormFieldProps> & DefaultHoistProps;
+    fieldDefaults?: Partial<BaseFormFieldProps> & PlainObject;
 
     /** Reference to associated FormModel. */
     model?: FormModel;
@@ -44,7 +44,7 @@ export interface FormProps extends HoistProps<FormModel>, TestSupportProps {
      * Defaults for certain props on child/nested FormFields.
      * @see FormField (note there are both desktop and mobile implementations).
      */
-    fieldDefaults?: Partial<BaseFormFieldProps> & DefaultHoistProps;
+    fieldDefaults?: Partial<BaseFormFieldProps> & PlainObject;
 }
 
 /**

cmp/grid/Grid.ts

@@ -51,7 +51,10 @@ import {columnGroupHeader} from './impl/ColumnGroupHeader';
 import {columnHeader} from './impl/ColumnHeader';
 import {RowKeyNavSupport} from './impl/RowKeyNavSupport';
 
-export interface GridProps extends HoistProps<GridModel>, LayoutProps, TestSupportProps {
+export interface GridProps
+    extends HoistProps<GridModel, HTMLDivElement>,
+        LayoutProps,
+        TestSupportProps {
     /**
      * Options for ag-Grid's API.
      *
@@ -145,7 +148,7 @@ export class GridLocalModel extends HoistModel {
     @lookup(GridModel)
     private model: GridModel;
     agOptions: GridOptions;
-    viewRef = createObservableRef<HTMLElement>();
+    viewRef = createObservableRef<HTMLDivElement>();
     private rowKeyNavSupport: RowKeyNavSupport;
     private prevRs: RecordSet;
 

cmp/grid/filter/GridFilterFieldSpec.ts

@@ -29,7 +29,7 @@ export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
      * Props to pass through to the HoistInput components used on the custom filter tab.
      * Note that the HoistInput component used is decided by fieldType.
      */
-    inputProps?: HoistInputProps;
+    inputProps?: HoistInputProps<unknown>;
 
     /** Default operator displayed in custom filter tab. */
     defaultOp?: FieldFilterOperator;

cmp/grid/helpers/GridCountLabel.ts

@@ -5,12 +5,12 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {box} from '@xh/hoist/cmp/layout';
-import {BoxProps, hoistCmp, HoistProps, useContextModel} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistPropsWithRef, useContextModel} from '@xh/hoist/core';
 import {fmtNumber} from '@xh/hoist/format';
 import {logError, pluralize, singularize, withDefault} from '@xh/hoist/utils/js';
 import {GridModel} from '../GridModel';
 
-export interface GridCountLabelProps extends HoistProps, BoxProps {
+export interface GridCountLabelProps extends HoistPropsWithRef<HTMLDivElement>, BoxProps {
     /** GridModel to which this component should bind. */
     gridModel?: GridModel;
 
@@ -39,13 +39,16 @@ export const [GridCountLabel, gridCountLabel] = hoistCmp.withFactory<GridCountLa
     displayName: 'GridCountLabel',
     className: 'xh-grid-count-label',
 
-    render({
-        gridModel,
-        includeChildren = false,
-        showSelectionCount = 'auto',
-        unit = 'record',
-        ...props
-    }) {
+    render(
+        {
+            gridModel,
+            includeChildren = false,
+            showSelectionCount = 'auto',
+            unit = 'record',
+            ...props
+        },
+        ref
+    ) {
         gridModel = withDefault(gridModel, useContextModel(GridModel));
 
         if (!gridModel) {
@@ -77,7 +80,8 @@ export const [GridCountLabel, gridCountLabel] = hoistCmp.withFactory<GridCountLa
 
         return box({
             ...props,
-            item: `${recCountString()} ${selCountString()}`
+            item: `${recCountString()} ${selCountString()}`,
+            ref
         });
     }
 });

cmp/input/HoistInputModel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {FieldModel} from '@xh/hoist/cmp/form';
-import {DefaultHoistProps, HoistModel, HoistModelClass, useLocalModel} from '@xh/hoist/core';
+import {HoistModel, HoistModelClass, PlainObject, 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';
@@ -51,10 +51,13 @@ import './HoistInput.scss';
  * element of the rendered input via its `domEl` property, as well as `focus()`, `blur()`, and
  * `select()`.
  *
+ * @typeparam R - the type of HoistInputModel.inputRef (if any) - used to specify the type of the
+ * ref passed to the component.
+ *
  * To create an instance of an Input component using this model use the hook
  * {@link useHoistInputModel}.
  */
-export class HoistInputModel extends HoistModel {
+export class HoistInputModel<R> extends HoistModel {
     /** Does this input have the focus? */
     @observable hasFocus: boolean = false;
 
@@ -102,7 +105,7 @@ export class HoistInputModel extends HoistModel {
     // Implementation State
     //------------------------
     @observable.ref internalValue: any = null; // Cached internal value
-    inputRef = createObservableRef<HTMLElement>(); // ref to internal <input> element, if any
+    inputRef = createObservableRef<R>(); // ref to internal <input> element, if any
     domRef = createObservableRef<HTMLElement>(); // ref to outermost element, or class Component.
     isDirty: boolean = false;
 
@@ -326,13 +329,13 @@ export class HoistInputModel extends HoistModel {
  * @param ref - forwardRef passed to containing component
  * @param modelSpec - specify to use particular subclass of HoistInputModel
  */
-export function useHoistInputModel(
+export function useHoistInputModel<R>(
     component: any,
-    props: DefaultHoistProps,
-    ref: ForwardedRef<any>,
-    modelSpec?: HoistModelClass<HoistInputModel>
+    props: PlainObject,
+    ref: ForwardedRef<HoistInputModel<R>>,
+    modelSpec?: HoistModelClass<HoistInputModel<R>>
 ): ReactElement {
-    const inputModel = useLocalModel<HoistInputModel>(modelSpec ?? HoistInputModel);
+    const inputModel = useLocalModel<HoistInputModel<R>>(modelSpec ?? HoistInputModel);
 
     useImperativeHandle(ref, () => inputModel);
 

cmp/input/HoistInputProps.ts

@@ -5,9 +5,17 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {TestSupportProps} from '@xh/hoist/core';
+import {HoistInputModel} from '@xh/hoist/cmp/input/HoistInputModel';
+import {HoistModel, HoistProps, TestSupportProps} from '@xh/hoist/core';
+import {CSSProperties} from 'react';
 
-export interface HoistInputProps extends TestSupportProps {
+/**
+ * Props for HoistInput components.
+ * @typeparam R - the type of HoistInputModel.inputRef (if any) for this component.
+ */
+export interface HoistInputProps<R>
+    extends TestSupportProps,
+        HoistProps<HoistModel, HoistInputModel<R>> {
     /**
      * Field or model property name from which this component should read and write its value
      * in controlled mode. Can be set by parent FormField.
@@ -26,6 +34,9 @@ export interface HoistInputProps extends TestSupportProps {
     /** Called when value is committed to backing model - passed new and prior values. */
     onCommit?: (value: any, oldValue: any) => void;
 
+    /** CSS style attributes for the input element. */
+    style?: CSSProperties;
+
     /** Tab order for focus control, or -1 to skip. If unset, browser layout-based order. */
     tabIndex?: number;
 

cmp/layout/Box.ts

@@ -4,12 +4,12 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {BoxProps, hoistCmp, HoistProps} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistPropsWithRef} from '@xh/hoist/core';
 import {TEST_ID, mergeDeep} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import {div} from './Tags';
 
-export interface BoxComponentProps extends HoistProps, BoxProps {}
+export interface BoxComponentProps extends HoistPropsWithRef<HTMLDivElement>, BoxProps {}
 
 /**
  * A Component that supports flexbox-based layout of its contents.

cmp/layout/Frame.ts

@@ -4,10 +4,10 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {hoistCmp, BoxProps, HoistProps} from '@xh/hoist/core';
+import {hoistCmp, BoxProps, HoistPropsWithRef} from '@xh/hoist/core';
 import {box} from './Box';
 
-export interface FrameProps extends HoistProps, BoxProps {}
+export interface FrameProps extends HoistPropsWithRef<HTMLDivElement>, BoxProps {}
 
 /**
  * A Box class that flexes to grow and stretch within its *own* parent via flex:'auto', useful for

cmp/layout/Placeholder.ts

@@ -4,11 +4,11 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {hoistCmp, BoxProps, setCmpErrorDisplay, HoistProps} from '@xh/hoist/core';
+import {hoistCmp, BoxProps, setCmpErrorDisplay, HoistPropsWithRef} from '@xh/hoist/core';
 import {box} from '@xh/hoist/cmp/layout';
 import './Placeholder.scss';
 
-export interface PlaceholderProps extends HoistProps, BoxProps {}
+export interface PlaceholderProps extends HoistPropsWithRef<HTMLDivElement>, BoxProps {}
 
 /**
  * A thin wrapper around `Box` with standardized, muted styling.

cmp/layout/Spacer.ts

@@ -4,10 +4,10 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {hoistCmp, BoxProps, HoistProps} from '@xh/hoist/core';
+import {hoistCmp, BoxProps, HoistPropsWithRef, HoistProps} from '@xh/hoist/core';
 import {box} from './Box';
 
-export interface SpacerProps extends HoistProps, BoxProps {}
+export interface SpacerProps extends HoistPropsWithRef<HTMLDivElement>, BoxProps {}
 
 /**
  * A component for inserting a fixed-sized spacer along the main axis of its parent container.
@@ -31,7 +31,7 @@ export const [Spacer, spacer] = hoistCmp.withFactory<SpacerProps>({
 /**
  * A component that stretches to soak up space along the main axis of its parent container.
  */
-export const [Filler, filler] = hoistCmp.withFactory<BoxProps>({
+export const [Filler, filler] = hoistCmp.withFactory<BoxProps & HoistProps>({
     displayName: 'Filler',
     model: false,
     observer: false,