@xh/hoist 79.0.0-SNAPSHOT.1766020485210 → 79.0.0-SNAPSHOT.1766097863558

package/cmp/tab/TabContainer.ts

@@ -4,19 +4,34 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {TabSwitcherProps} from '@xh/hoist/cmp/tab/Types';
 import {BoxProps, hoistCmp, HoistProps, refreshContextView, uses, XH} from '@xh/hoist/core';
 import {tabContainerImpl as desktopTabContainerImpl} from '@xh/hoist/dynamics/desktop';
 import {tabContainerImpl as mobileTabContainerImpl} from '@xh/hoist/dynamics/mobile';
 import {TabContainerModel} from './TabContainerModel';
 
-export type TabContainerProps = HoistProps<TabContainerModel> & BoxProps;
+export interface TabContainerProps extends HoistProps<TabContainerModel>, BoxProps {
+    /**
+     * Indicates whether to include a default switcher docked within this component. Specify as a
+     * boolean or props for a TabSwitcher component. False to not include a switcher. Default true.
+     */
+    switcher?: boolean | TabSwitcherProps;
+
+    /**
+     * Props to apply to child TabContainers, if any. Specify as an object or a function
+     * that returns props based on the tabId and depth of the child container.
+     */
+    childContainerProps?:
+        | TabContainerProps
+        | ((ctx: {tabId: string; depth: number}) => TabContainerProps);
+}
 
 /**
  * Display a set of child Tabs and (optionally) a switcher control.
  *
- * By default this TabContainer will install a TabSwitcher above the Tabs to control the currently
- * displayed Tab. The 'TabContainerModel.switcher' property can be adjusted to place the switcher
- * control on alternative edges of the container.
+ * By default, this TabContainer will install a TabSwitcher above the Tabs to control the currently
+ * displayed Tab. The 'switcher' prop can be adjusted to place the switcher control on alternative
+ * edges of the container.
  *
  * If `switcher` is set to false then no TabSwitcher will be installed.  This setting
  * is useful for applications that wish to place an associated TabSwitcher elsewhere in the

package/cmp/tab/TabContainerModel.ts

@@ -4,10 +4,14 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {
+    TabSwitcherConfig,
+    IDynamicTabSwitcherModel,
+    TabContainerModelPersistOptions
+} from '@xh/hoist/cmp/tab/Types';
 import {
     HoistModel,
     managed,
-    Persistable,
     PersistableState,
     PersistenceProvider,
     PersistOptions,
@@ -16,14 +20,14 @@ import {
     RenderMode,
     XH
 } from '@xh/hoist/core';
+import {DynamicTabSwitcherModel} from '@xh/hoist/desktop/cmp/tab/dynamic/DynamicTabSwitcherModel';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {ensureUniqueBy, throwIf} from '@xh/hoist/utils/js';
-import {difference, find, findLast, isString, without} from 'lodash';
+import {difference, find, findLast, isObject, isString, without} from 'lodash';
 import {ReactNode} from 'react';
 import {TabConfig, TabModel} from './TabModel';
-import {TabSwitcherProps} from './TabSwitcherProps';
 
 export interface TabContainerConfig {
     /** Tabs to be displayed. */
@@ -42,11 +46,10 @@ export interface TabContainerConfig {
     route?: string;
 
     /**
-     * Indicates whether to include a default switcher docked within this component. Specify as a
-     * boolean or an object containing props for a TabSwitcher component. Set to false to not
-     * include a switcher. Defaults to true.
+     * Specification for type of switcher. Specify `dynamic` or config for user-configurable tabs.
+     * Default `{mode: 'static'}` for simple, static switcher.
      */
-    switcher?: boolean | TabSwitcherProps;
+    switcher?: TabSwitcherConfig;
 
     /**
      * True to enable activity tracking of tab views (default false).  Viewing of each tab will
@@ -87,7 +90,7 @@ export interface TabContainerConfig {
  *
  * Note: Routing is currently enabled for desktop applications only.
  */
-export class TabContainerModel extends HoistModel implements Persistable<{activeTabId: string}> {
+export class TabContainerModel extends HoistModel {
     declare config: TabContainerConfig;
 
     @managed
@@ -97,42 +100,47 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
     @observable
     activeTabId: string;
 
+    depth: number; // Depth in hierarchy of nested TabContainerModels
     route: string;
     defaultTabId: string;
-    switcher: TabSwitcherProps;
     track: boolean;
     renderMode: RenderMode;
     refreshMode: RefreshMode;
     emptyText: ReactNode;
+    switcherConfig: TabSwitcherConfig;
 
     @managed
     refreshContextModel: RefreshContextModel;
 
+    @managed
+    dynamicTabSwitcherModel: IDynamicTabSwitcherModel;
+
     protected lastActiveTabId: string;
 
-    constructor({
-        tabs = [],
-        defaultTabId = null,
-        route = null,
-        switcher = true,
-        track = false,
-        renderMode = 'lazy',
-        refreshMode = 'onShowLazy',
-        persistWith,
-        emptyText = 'No tabs to display.',
-        xhImpl = false
-    }: TabContainerConfig) {
+    /**
+     * @param config - TabContainer configuration.
+     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     */
+    constructor(
+        {
+            tabs = [],
+            defaultTabId = null,
+            route = null,
+            track = false,
+            renderMode = 'lazy',
+            refreshMode = 'onShowLazy',
+            persistWith,
+            emptyText = 'No tabs to display.',
+            xhImpl = false,
+            switcher = {mode: 'static'}
+        }: TabContainerConfig,
+        depth = 0
+    ) {
         super();
         makeObservable(this);
         this.xhImpl = xhImpl;
 
-        throwIf(route && persistWith, '"persistWith" and "route" cannot both be specified.');
-
-        // Create default switcher props
-        if (switcher === true) switcher = {orientation: XH.isMobileApp ? 'bottom' : 'top'};
-        if (switcher === false) switcher = null;
-
-        this.switcher = switcher as TabSwitcherProps;
+        this.depth = depth;
         this.renderMode = renderMode;
         this.refreshMode = refreshMode;
         this.defaultTabId = defaultTabId;
@@ -142,6 +150,8 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         this.setTabs(tabs);
         this.refreshContextModel = new RefreshContextModel();
         this.refreshContextModel.xhImpl = xhImpl;
+        this.switcherConfig = switcher;
+        this.dynamicTabSwitcherModel = this.parseSwitcher(switcher);
 
         if (route) {
             if (XH.isMobileApp) {
@@ -156,17 +166,10 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
             wait().then(() => this.syncWithRouter());
 
             this.forwardRouterToTab(this.activeTabId);
-        } else if (persistWith) {
-            ((this.persistWith = {
-                path: 'tabContainer',
-                ...persistWith
-            }),
-                PersistenceProvider.create({
-                    persistOptions: this.persistWith,
-                    target: this
-                }));
         }
 
+        if (persistWith) this.initPersist(persistWith);
+
         if (track) {
             this.addReaction({
                 track: () => this.activeTab,
@@ -269,16 +272,18 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         return this.findTab(this.activeTabId);
     }
 
-    /** The tab immediately before the active tab in the model's tab list. */
+    /** The visitable tab immediately before the active tab in the model's tab list. */
     get prevTab(): TabModel {
-        const activeTabIdx = this.tabs.indexOf(this.activeTab);
-        return activeTabIdx > 0 ? this.tabs[activeTabIdx - 1] : null;
+        const tabs = this.tabs.filter(t => !t.disabled || t === this.activeTab),
+            activeTabIdx = tabs.indexOf(this.activeTab);
+        return activeTabIdx > 0 ? tabs[activeTabIdx - 1] : null;
     }
 
-    /** The tab immediately after the active tab in the model's tab list. */
+    /** The visitable tab immediately after the active tab in the model's tab list. */
     get nextTab(): TabModel {
-        const activeTabIdx = this.tabs.indexOf(this.activeTab);
-        return activeTabIdx < this.tabs.length - 1 ? this.tabs[activeTabIdx + 1] : null;
+        const tabs = this.tabs.filter(t => !t.disabled || t === this.activeTab),
+            activeTabIdx = tabs.indexOf(this.activeTab);
+        return activeTabIdx < tabs.length - 1 ? tabs[activeTabIdx + 1] : null;
     }
 
     /**
@@ -330,17 +335,6 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         if (target) this.activateTab(target);
     }
 
-    //-------------------------
-    // Persistable Interface
-    //-------------------------
-    getPersistableState(): PersistableState<{activeTabId: string}> {
-        return new PersistableState({activeTabId: this.activeTabId});
-    }
-
-    setPersistableState(state: PersistableState<{activeTabId: string}>): void {
-        this.activateTab(state.value.activeTabId);
-    }
-
     //-------------------------
     // Implementation
     //-------------------------
@@ -395,6 +389,71 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
 
         return null;
     }
+
+    private parseSwitcher(switcher: TabContainerConfig['switcher']): IDynamicTabSwitcherModel {
+        if (!switcher || switcher.mode === 'static') return null;
+        throwIf(XH.isMobileApp, 'DynamicTabSwitcherModel not supported for mobile TabContainer.');
+
+        return this.markManaged(new DynamicTabSwitcherModel(switcher, this));
+    }
+
+    private initPersist({
+        persistActiveTabId = !this.route,
+        persistFavoriteTabIds = !!this.dynamicTabSwitcherModel,
+        path = 'tabContainer',
+        ...rootPersistWith
+    }: TabContainerModelPersistOptions) {
+        if (persistActiveTabId) {
+            if (this.route) {
+                this.logWarn('persistActiveTabId and route cannot both be specified.');
+            } else {
+                const persistWith = isObject(persistActiveTabId)
+                    ? PersistenceProvider.mergePersistOptions(rootPersistWith, persistActiveTabId)
+                    : rootPersistWith;
+                PersistenceProvider.create({
+                    persistOptions: {
+                        path: `${path}.activeTabId`,
+                        ...persistWith
+                    },
+                    target: {
+                        getPersistableState: () => new PersistableState(this.activeTabId),
+                        setPersistableState: ({value}) => this.activateTab(value)
+                    },
+                    owner: this
+                });
+            }
+        }
+
+        if (persistFavoriteTabIds) {
+            const {dynamicTabSwitcherModel} = this;
+            if (!dynamicTabSwitcherModel) {
+                this.logWarn(
+                    'persistFavoriteTabIds is set but no DynamicTabSwitcherModel is present.'
+                );
+            } else {
+                const persistWith = isObject(persistFavoriteTabIds)
+                    ? PersistenceProvider.mergePersistOptions(
+                          rootPersistWith,
+                          persistFavoriteTabIds
+                      )
+                    : rootPersistWith;
+                PersistenceProvider.create({
+                    persistOptions: {
+                        path: `${path}.favoriteTabIds`,
+                        ...persistWith
+                    },
+                    target: {
+                        getPersistableState: () =>
+                            new PersistableState(dynamicTabSwitcherModel.favoriteTabIds),
+                        setPersistableState: ({value}) => {
+                            dynamicTabSwitcherModel.setFavoriteTabIds(value);
+                        }
+                    },
+                    owner: this
+                });
+            }
+        }
+    }
 }
 
 export interface AddTabOptions {

package/cmp/tab/TabModel.ts

@@ -196,7 +196,6 @@ export class TabModel extends HoistModel {
             renderMode: parent.renderMode,
             refreshMode: parent.refreshMode,
             emptyText: parent.emptyText,
-            switcher: parent.switcher,
             track: parent.track,
             ...childConfig
         };
@@ -211,7 +210,7 @@ export class TabModel extends HoistModel {
             };
         }
 
-        this.childContainerModel = new TabContainerModel(childConfig);
+        this.childContainerModel = new TabContainerModel(childConfig, parent.depth + 1);
         return tabContainer({model: this.childContainerModel});
     }
 }

package/cmp/tab/Types.ts

@@ -0,0 +1,80 @@
+import {TabContainerModel} from '@xh/hoist/cmp/tab/TabContainerModel';
+import {TabModel} from '@xh/hoist/cmp/tab/TabModel';
+import {
+    BoxProps,
+    HoistModel,
+    HoistProps,
+    MenuContext,
+    MenuItemLike,
+    MenuToken,
+    PersistOptions,
+    Side
+} from '@xh/hoist/core';
+
+export interface TabSwitcherProps extends HoistProps<TabContainerModel>, BoxProps {
+    /** Relative position within the parent TabContainer. Defaults to 'top'. */
+    orientation?: Side;
+
+    /**
+     * True to animate the indicator when switching tabs. False (default) to change instantly.
+     * Not supported by DynamicTabSwitcher.
+     */
+    animate?: boolean;
+
+    /**
+     * Enable scrolling and place tabs that overflow into a menu. Default to false.
+     * Not supported by DynamicTabSwitcher.
+     */
+    enableOverflow?: boolean;
+
+    /** Width (in px) to render tabs. Only applies to horizontal orientations */
+    tabWidth?: number;
+
+    /** Minimum width (in px) to render tabs. Only applies to horizontal orientations */
+    tabMinWidth?: number;
+
+    /** Maximum width (in px) to render tabs. Only applies to horizontal orientations */
+    tabMaxWidth?: number;
+}
+
+export interface TabSwitcherConfig {
+    /** Specification for type of switcher. Specify `dynamic`for user-configurable tabs */
+    mode: 'static' | 'dynamic';
+    /** Additional menu items to include in tab context menus. Only supported on desktop */
+    extraMenuItems?: Array<MenuItemLike<MenuToken, TabSwitcherMenuContext>>;
+    /** IDs of favorite tabs to display by default (in order). Only for `dynamic` switchers */
+    initialFavorites?: string[];
+}
+
+export interface TabContainerModelPersistOptions extends PersistOptions {
+    /** True (default) to persist the active tab ID or provide custom PersistOptions. */
+    persistActiveTabId?: boolean;
+    /** True (default) to persist favorite tab IDs or provide custom PersistOptions. */
+    persistFavoriteTabIds?: boolean;
+}
+
+export interface TabSwitcherMenuContext extends MenuContext {
+    tab: TabModel;
+}
+
+/** Cross-platform interface for desktop and mobile (TBA) DynamicTabSwitcherModels. */
+export interface IDynamicTabSwitcherModel extends HoistModel {
+    /** IDs of favorite tabs, in order. */
+    get favoriteTabIds(): string[];
+    /** Tabs displayed in switcher, in order. */
+    get visibleTabs(): TabModel[];
+    /** Enabled tabs displayed in switcher, in order. */
+    get enabledVisibleTabs(): TabModel[];
+    /** Whether the specified tab is currently active in the TabContainer. */
+    isTabActive(tabId: string): boolean;
+    /** Whether the specified tab is currently marked as a favorite. */
+    isTabFavorite(tabId: string): boolean;
+    /** Toggle the favorite status of the specified tab. */
+    toggleTabFavorite(tabId: string): void;
+    /** Activate the specified tab in the TabContainer. */
+    activate(tabId: string): void;
+    /** Remove the specified tab from the switcher. */
+    hide(tabId: string): void;
+    /** Set the IDs of all favorite tabs, in order. */
+    setFavoriteTabIds(tabIds: string[]): void;
+}

package/cmp/tab/index.ts

@@ -1,4 +1,4 @@
 export * from './TabModel';
 export * from './TabContainer';
 export * from './TabContainerModel';
-export * from './TabSwitcherProps';
+export * from './Types';

package/core/elem.ts

@@ -15,7 +15,7 @@ import {
     ReactElement,
     ReactNode
 } from 'react';
-import {PlainObject, Some, Thunkable} from './types/Types';
+import {PlainObject, Thunkable} from './types/Types';
 
 /**
  * Alternative format for specifying React Elements in render functions. This type is designed to
@@ -45,10 +45,10 @@ export type ElementSpec<P> = Omit<P, 'items' | 'item' | 'omit'> & {
     // Enhanced attributes to support element factory
     //---------------------------------------------
     /** Child Element(s). Equivalent provided as Rest Arguments to React.createElement.*/
-    items?: Some<ReactNode>;
+    items?: ReactNode;
 
     /**  Equivalent to `items`, offered for code clarity when only one child is needed. */
-    item?: Some<ReactNode>;
+    item?: ReactNode;
 
     /** True to exclude the Element. */
     omit?: Thunkable<boolean>;
@@ -126,7 +126,7 @@ export function elementFactory<C extends ReactComponent>(component: C): ElementF
 export function elementFactory<P extends PlainObject>(component: ReactComponent): ElementFactory<P>;
 export function elementFactory(component: ReactComponent): ElementFactory {
     const ret = function (...args) {
-        return createElement(component, normalizeArgs(args, component));
+        return createElement(component, normalizeArgs(args));
     };
     ret.isElementFactory = true;
     return ret;
@@ -135,7 +135,7 @@ export function elementFactory(component: ReactComponent): ElementFactory {
 //------------------------
 // Implementation
 //------------------------
-function normalizeArgs(args: any[], type: any) {
+function normalizeArgs(args: any[]) {
     const len = args.length;
     if (len === 0) return {};
     if (len === 1) {

package/data/RecordAction.ts

@@ -33,7 +33,10 @@ export interface RecordActionSpec extends TestSupportProps {
     /** Function called on action execution. */
     actionFn?: (data: ActionFnData) => void;
 
-    /** Function called prior to showing this item. */
+    /**
+     * Function called to append / override display properties prior to each render. This function
+     * allows dynamic control over display properties.
+     * */
     displayFn?: (data: ActionFnData) => RecordActionSpec;
 
     /** Sub-actions for this action. */

package/desktop/appcontainer/AppContainer.ts

@@ -25,7 +25,7 @@ import {storeFilterFieldImpl} from '@xh/hoist/desktop/cmp/store/impl/StoreFilter
 import {tabContainerImpl} from '@xh/hoist/desktop/cmp/tab/impl/TabContainer';
 import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapperDialog';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
-import {installDesktopImpls} from '@xh/hoist/dynamics/desktop';
+import {DynamicTabSwitcherModel, installDesktopImpls} from '@xh/hoist/dynamics/desktop';
 import {inspectorPanel} from '@xh/hoist/inspector/InspectorPanel';
 import {blueprintProvider} from '@xh/hoist/kit/blueprint';
 import {consumeEvent} from '@xh/hoist/utils/js';
@@ -59,7 +59,8 @@ installDesktopImpls({
     useContextMenu,
     ModalSupportModel,
     errorMessageImpl,
-    maskImpl
+    maskImpl,
+    DynamicTabSwitcherModel
 });
 /**
  * Top-level wrapper for Desktop applications.

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

@@ -4,6 +4,15 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {DragEvent} from 'react';
+import ReactGridLayout, {
+    type LayoutItem,
+    type GridLayoutProps,
+    useContainerWidth,
+    noCompactor,
+    verticalCompactor
+} from 'react-grid-layout';
+
 import {showContextMenu} from '@xh/hoist/kit/blueprint';
 import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
@@ -20,13 +29,12 @@ import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {consumeEvent, TEST_ID} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
-import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
-import type {ReactGridLayoutProps} from 'react-grid-layout';
 import {DashCanvasModel} from './DashCanvasModel';
 import {dashCanvasContextMenu} from './impl/DashCanvasContextMenu';
 import {dashCanvasView} from './impl/DashCanvasView';
 
 import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
 import './DashCanvas.scss';
 
 export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSupportProps {
@@ -36,7 +44,7 @@ export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSuppor
      * {@link https://www.npmjs.com/package/react-grid-layout#grid-layout-props}
      * Note that some ReactGridLayout props are managed directly by DashCanvas and will be overridden if provided here.
      */
-    rglOptions?: ReactGridLayoutProps;
+    rglOptions?: GridLayoutProps;
 }
 
 /**
@@ -59,7 +67,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked,
             [padX, padY] = model.containerPadding;
-
+        const {width, containerRef, mounted} = useContainerWidth();
         return refreshContextView({
             model: model.refreshContextModel,
             item: div({
@@ -69,37 +77,51 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isResizable ? `${className}--resizable` : null
                 ),
                 style: {padding: `${padY}px ${padX}px`},
-                ref: composeRefs(ref, model.ref),
+                ref: composeRefs(ref, model.ref, containerRef),
                 onContextMenu: e => onContextMenu(e, model),
-                items: [
-                    reactGridLayout({
-                        layout: model.rglLayout,
-                        cols: model.columns,
-                        rowHeight: model.rowHeight,
-                        isDraggable,
-                        isResizable,
-                        compactType: model.compact ? 'vertical' : null,
-                        margin: model.margin,
-                        maxRows: model.maxRows,
-                        containerPadding: [0, 0], // Workaround for https://github.com/react-grid-layout/react-grid-layout/issues/1990
-                        autoSize: true,
-                        isBounded: true,
-                        draggableHandle:
-                            '.xh-dash-tab.xh-panel > .xh-panel__content > .xh-panel-header',
-                        draggableCancel: '.xh-button',
-                        onLayoutChange: layout => model.onRglLayoutChange(layout),
-                        onResizeStart: () => (model.isResizing = true),
-                        onResizeStop: () => (model.isResizing = false),
-                        items: model.viewModels.map(vm =>
-                            div({
-                                key: vm.id,
-                                item: dashCanvasView({model: vm})
-                            })
-                        ),
-                        ...rglOptions
-                    }),
-                    emptyContainerOverlay()
-                ],
+                items: mounted
+                    ? [
+                          reactGridLayout({
+                              layout: model.rglLayout,
+                              width,
+                              gridConfig: {
+                                  cols: model.columns,
+                                  rowHeight: model.rowHeight,
+                                  margin: model.margin,
+                                  maxRows: model.maxRows
+                              },
+                              dragConfig: {
+                                  enabled: isDraggable,
+                                  handle: '.xh-dash-tab.xh-panel > .xh-panel__content > .xh-panel-header',
+                                  cancel: '.xh-button',
+                                  bounded: true
+                              },
+                              resizeConfig: {
+                                  enabled: isResizable
+                              },
+                              dropConfig: {
+                                  enabled: model.contentLocked ? false : model.droppable,
+                                  defaultItem: {w: 6, h: 6}
+                              },
+                              compactor: model.compact ? verticalCompactor : noCompactor,
+                              onLayoutChange: (layout: LayoutItem[]) =>
+                                  model.onRglLayoutChange(layout),
+                              onResizeStart: () => (model.isResizing = true),
+                              onResizeStop: () => (model.isResizing = false),
+                              items: model.viewModels.map(vm =>
+                                  div({
+                                      key: vm.id,
+                                      item: dashCanvasView({model: vm})
+                                  })
+                              ),
+                              onDropDragOver: (evt: DragEvent) => model.onDropDragOver(evt),
+                              onDrop: (layout: LayoutItem[], layoutItem: LayoutItem, evt: Event) =>
+                                  model.onDrop(layout, layoutItem, evt),
+                              ...rglOptions
+                          }),
+                          emptyContainerOverlay({omit: !model.showAddViewButtonWhenEmpty})
+                      ]
+                    : [],
                 [TEST_ID]: testId
             })
         });
@@ -147,4 +169,4 @@ const onContextMenu = (e, model) => {
     }
 };
 
-const reactGridLayout = elementFactory(WidthProvider(ReactGridLayout));
+const reactGridLayout = elementFactory<GridLayoutProps>(ReactGridLayout);