Type improvements

client-app/src/admin/tests/cube/dimensions/DimensionManager.ts

@@ -1,8 +1,8 @@
 import {grid} from '@xh/hoist/cmp/grid';
 import {filler} from '@xh/hoist/cmp/layout';
-import {hoistCmp, useLocalModel, uses} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, useLocalModel, uses, WithoutModelAndRef} from '@xh/hoist/core';
 import {groupingChooser} from '@xh/hoist/desktop/cmp/grouping';
-import {panel, PanelModel} from '@xh/hoist/desktop/cmp/panel';
+import {panel, PanelModel, PanelProps} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon/Icon';
 import {DimensionManagerModel} from './DimensionManagerModel';
 
@@ -14,7 +14,11 @@ import {DimensionManagerModel} from './DimensionManagerModel';
  * This component and its backing model are incubating in Toolbox for possible inclusion in
  * the core Hoist toolkit in some form.
  */
-export const dimensionManager = hoistCmp.factory({
+export interface DimensionManagerProps
+    extends HoistProps<DimensionManagerModel>,
+        WithoutModelAndRef<PanelProps> {}
+
+export const dimensionManager = hoistCmp.factory<DimensionManagerProps>({
     displayName: 'DimensionManager',
     model: uses(DimensionManagerModel),
     className: 'xh-dim-manager',

client-app/src/admin/tests/grids/GridTestPanel.ts

@@ -71,7 +71,7 @@ const tbar = hoistCmp.factory<GridTestModel>(({model}) =>
         toolbarSep(),
         refreshButton({
             text: 'Load Grid',
-            model
+            target: model
         }),
         button({
             text: 'Clear Grid',

client-app/src/core/cmp/WelcomeMsg.ts

@@ -1,8 +1,12 @@
-import {hoistCmp, XH} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, XH} from '@xh/hoist/core';
 import {div, img, br} from '@xh/hoist/cmp/layout';
 import './WelcomeMsg.scss';
 
-export const welcomeMsg = hoistCmp.factory(({multiline}) => {
+interface WelcomeMsgProps extends HoistProps {
+    multiline?: boolean;
+}
+
+export const welcomeMsg = hoistCmp.factory<WelcomeMsgProps>(({multiline}) => {
     const user = XH.getUser();
     return div({
         className: `tb-welcome-message ${multiline ? 'tb-welcome-message--multiline' : ''}`,

client-app/src/desktop/common/grid/SampleTreeGrid.ts

@@ -19,7 +19,7 @@ export const [SampleTreeGrid, sampleTreeGrid] = hoistCmp.withFactory({
             item: hframe(grid(), gridOptionsPanel({model: gridModel})),
             ref: model.panelRef,
             tbar: [
-                refreshButton({model}),
+                refreshButton({target: model}),
                 toolbarSep(),
                 groupingChooser(),
                 filler(),

client-app/src/desktop/common/grid/SampleTreeGridModel.ts

@@ -34,7 +34,7 @@ export class SampleTreeGridModel extends HoistModel {
     @managed
     gridModel: GridModel;
 
-    panelRef = createRef<HTMLElement>();
+    panelRef = createRef<HTMLDivElement>();
 
     get store() {
         return this.gridModel.store;

client-app/src/desktop/tabs/grids/DataViewPanel.tsx

@@ -31,7 +31,7 @@ export const dataViewPanel = hoistCmp.factory({
                 bbar: [
                     refreshButton({
                         text: 'Load new (random) records',
-                        model
+                        target: model
                     }),
                     filler(),
                     storeFilterField({store: model.dataViewModel.store})

client-app/src/desktop/tabs/layout/widgets/ChartWidget.ts

@@ -1,4 +1,4 @@
-import {creates, hoistCmp, lookup, managed} from '@xh/hoist/core';
+import {creates, hoistCmp, HoistPropsWithModel, lookup, managed} from '@xh/hoist/core';
 import {box} from '@xh/hoist/cmp/layout';
 import {panel, PanelModel} from '@xh/hoist/desktop/cmp/panel';
 import {buttonGroupInput, select} from '@xh/hoist/desktop/cmp/input';
@@ -37,8 +37,9 @@ export const chartWidget = hoistCmp.factory({
     }
 });
 
-const rangeSelector = hoistCmp.factory(() =>
+const rangeSelector = hoistCmp.factory<HoistPropsWithModel>(({model}) =>
     buttonGroupInput({
+        model,
         bind: 'range',
         items: [
             button({text: '7D', value: 7}),

client-app/src/desktop/tabs/panels/BasicPanel.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {ReactElement} from 'react';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {div, filler, p} from '@xh/hoist/cmp/layout';
 import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
@@ -99,7 +99,7 @@ export const basicPanel = hoistCmp.factory({
                             menuItem({text: 'Menu Item 2', icon: Icon.skull(), intent: 'danger'}),
                             menuItem({
                                 text: 'Menu Item 3',
-                                icon: Icon.placeholder(),
+                                icon: Icon.placeholder() as ReactElement,
                                 disabled: true
                             }),
                             menuDivider({title: 'Another Section'}),

client-app/src/examples/portfolio/GridPanel.ts

@@ -30,7 +30,7 @@ export const gridPanel = hoistCmp.factory({
                 gridCountLabel({unit: 'position'}),
                 filler(),
                 relativeTimestamp({bind: 'loadTimestamp'}),
-                refreshButton({model: XH.refreshContextModel, intent: 'success'})
+                refreshButton({target: XH.refreshContextModel, intent: 'success'})
             ]
         });
     }

client-app/src/examples/todo/TodoPanelModel.ts

@@ -29,7 +29,7 @@ export class TodoPanelModel extends HoistModel {
     @managed
     gridModel: GridModel;
 
-    panelRef = createRef<HTMLElement>();
+    panelRef = createRef<HTMLDivElement>();
 
     addAction = new RecordAction({
         icon: Icon.add(),