@xh/hoist 79.0.0-SNAPSHOT.1766500045639 → 79.0.0-SNAPSHOT.1766589539491

package/CHANGELOG.md

@@ -10,6 +10,10 @@
   persist "favorited" tab state across sessions. Additionally, existing static `TabSwitcher` now
   supports context-menu items. See `TabContainerConfig.switcher`.
 * Changed the icon used for the Grid autosize buttons and menu option (to 🪄).
+* DashCanvas new features:
+  * supports showing a grid background.
+  * supports 2 compacting strategies: 'vertical' or 'horizontal'
+
 
 ### 💥 Breaking Changes
 
@@ -27,6 +31,11 @@
 * Tightened the typing of `LocalDate` adjustment methods with new `LocalDateUnit` type. Some less
   common or ambiguous units (e.g. `date` or `d`) are no longer supported. Also typed the adjustment
   `value` args to `number` where applicable.
+* Your app must update `compilerOptions.moduleResolution` to "bundler" in `tsconfig.json`
+* If using the `DashCanvas` `rglOptions` prop, you might have to update it to reflect changes in
+  `react-grid-layout` v2+ (not common).
+* `DashCanvasModel.containerPadding` is now applied to the `react-grid-layout` div by RGL, not to the
+  hoist-react provided containing div.  This may affect printing layouts.
 
 ### 🐞 Bug Fixes
 
@@ -44,7 +53,11 @@
     * `RelativeTimestampProps.options` - provide directly as top-level props
 
 * Improved the efficiency and logging of MsalClient.
-*
+
+### 📚 Libraries
+
+* react-grid-layout `1.5.0 → 2.1.1`
+
 ## 78.1.4 - 2025-12-05
 
 ### 🐞 Bug Fixes

package/build/types/cmp/grid/Grid.d.ts

@@ -53,7 +53,7 @@ export declare class GridLocalModel extends HoistModel {
     onLinked(): void;
     private createDefaultAgOptions;
     getColumnDefs(): Array<ColDef | ColGroupDef>;
-    getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("@xh/hoist/kit/ag-grid").MenuItemDef<any, any>)[];
+    getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("ag-grid-community").MenuItemDef<any, any>)[];
     dataReaction(): {
         track: () => (boolean | RecordSet | import("../../data").StoreRecord[] | import("@xh/hoist/core").VSide)[];
         run: () => void;
@@ -123,7 +123,7 @@ export declare class GridLocalModel extends HoistModel {
     readFilterState(): import("ag-grid-community").FilterModel;
     writeFilterState(filterState: any): void;
     processCellForClipboard: ({ value, node, column }: ProcessCellForExportParams) => any;
-    navigateToNextCell: (agParams: any) => import("@xh/hoist/kit/ag-grid").CellPosition;
+    navigateToNextCell: (agParams: any) => import("ag-grid-community").CellPosition;
     onCellMouseDown: (evt: any) => void;
     onKeyDown: (evt: any) => void;
     onRowClicked: (evt: any) => void;

package/build/types/cmp/grid/GridModel.d.ts

@@ -413,7 +413,7 @@ export declare class GridModel extends HoistModel {
     /** True if this grid has no records to show in its store. */
     get empty(): boolean;
     get isReady(): boolean;
-    get agApi(): import("@xh/hoist/kit/ag-grid").GridApi<any>;
+    get agApi(): import("ag-grid-community").GridApi<any>;
     get sizingMode(): SizingMode;
     set sizingMode(v: SizingMode);
     setSizingMode(v: SizingMode): void;

package/build/types/core/elem.d.ts

@@ -1,6 +1,6 @@
 import { TEST_ID } from '@xh/hoist/utils/js';
 import { ComponentType, JSX, Key, 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
  * provide a well-formatted, declarative, native javascript approach to configuring Elements and
@@ -26,9 +26,9 @@ import { PlainObject, Some, Thunkable } from './types/Types';
  */
 export type ElementSpec<P> = Omit<P, 'items' | 'item' | 'omit'> & {
     /** 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>;
     /** React key for this component. */

package/build/types/desktop/cmp/dash/canvas/DashCanvas.d.ts

@@ -1,6 +1,6 @@
+import { type GridLayoutProps } from 'react-grid-layout';
 import { HoistProps, TestSupportProps } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import type { ReactGridLayoutProps } from 'react-grid-layout';
 import { DashCanvasModel } from './DashCanvasModel';
 import 'react-grid-layout/css/styles.css';
 import './DashCanvas.scss';
@@ -8,10 +8,10 @@ export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSuppor
     /**
      * Optional additional configuration options to pass through to the underlying ReactGridLayout component.
      * See the RGL documentation for details:
-     * {@link https://www.npmjs.com/package/react-grid-layout#grid-layout-props}
+     * {@link https://www.npmjs.com/package/react-grid-layout#api-reference}
      * Note that some ReactGridLayout props are managed directly by DashCanvas and will be overridden if provided here.
      */
-    rglOptions?: ReactGridLayoutProps;
+    rglOptions?: Partial<GridLayoutProps>;
 }
 /**
  * Dashboard-style container that allows users to drag-and-drop child widgets into flexible layouts.

package/build/types/desktop/cmp/dash/canvas/DashCanvasModel.d.ts

@@ -1,3 +1,4 @@
+import type { LayoutItem } from 'react-grid-layout';
 import { Persistable, PersistableState } from '@xh/hoist/core';
 import { DashCanvasViewModel, DashCanvasViewSpec, DashConfig, DashViewState, DashModel } from '../';
 import '@xh/hoist/desktop/register';
@@ -12,14 +13,22 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
      * Default `50`.
      */
     rowHeight?: number;
-    /** Whether views should "compact" vertically to condense vertical space. Default `true`. */
-    compact?: boolean;
+    /**
+     * Whether views should "compact" vertically or horizontally
+     * to condense space. Default `true` defaults to vertical compaction.
+     * See react-grid-layout docs for more information.
+     * */
+    compact?: boolean | 'vertical' | 'horizontal';
     /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
-    /** Maximum number of rows permitted for this container. Default `Infinity`. */
-    maxRows?: number;
     /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     containerPadding?: [number, number];
+    /** Maximum number of rows permitted for this container. Default `Infinity`. */
+    maxRows?: number;
+    /**
+     * Whether a grid background should be shown. Default false.
+     */
+    showGridBackground?: boolean;
 }
 export interface DashCanvasItemState {
     layout: DashCanvasItemLayout;
@@ -42,9 +51,11 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
 }> {
     columns: number;
     rowHeight: number;
-    compact: boolean;
+    compact: 'vertical' | 'horizontal';
     margin: [number, number];
     containerPadding: [number, number];
+    showGridBackground: boolean;
+    rglHeight: number;
     maxRows: number;
     /** Current number of rows in canvas */
     get rows(): number;
@@ -54,7 +65,7 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     isResizing: boolean;
     private isLoadingState;
     get rglLayout(): any[];
-    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems }: DashCanvasConfig);
+    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems, showGridBackground }: DashCanvasConfig);
     /** Removes all views from the canvas */
     clear(): void;
     /**
@@ -98,9 +109,10 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     setPersistableState(persistableState: PersistableState<{
         state: DashCanvasItemState[];
     }>): void;
+    private rglResizeObserver;
     private getLayoutFromPosition;
     private addViewInternal;
-    onRglLayoutChange(rglLayout: any): void;
+    onRglLayoutChange(rglLayout: LayoutItem[]): void;
     private setLayout;
     private loadState;
     private buildState;

package/build/types/desktop/cmp/panel/Panel.d.ts

@@ -42,12 +42,12 @@ export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'titl
      * A toolbar to be docked at the top of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
     /**
      * A toolbar to be docked at the bottom of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
-    bbar?: Some<ReactNode>;
+    bbar?: ReactNode;
     /** Title text added to the panel's header. */
     title?: ReactNode;
     /** Title to be used when the panel is collapsed. Defaults to `title`. */

package/build/types/desktop/cmp/rest/RestGrid.d.ts

@@ -1,4 +1,4 @@
-import { HoistProps, PlainObject, Some } from '@xh/hoist/core';
+import { HoistProps, PlainObject } from '@xh/hoist/core';
 import { PanelProps } from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
 import { ReactElement, ReactNode } from 'react';
@@ -14,7 +14,7 @@ export interface RestGridProps extends HoistProps<RestGridModel>, Omit<PanelProp
      * Optional components rendered adjacent to the top toolbar's action buttons.
      * See also {@link tbar} to take full control of the toolbar.
      */
-    extraToolbarItems?: Some<ReactNode> | (() => Some<ReactNode>);
+    extraToolbarItems?: ReactNode | (() => ReactNode);
     /** Classname to be passed to RestForm. */
     formClassName?: string;
     /**
@@ -28,6 +28,6 @@ export interface RestGridProps extends HoistProps<RestGridModel>, Omit<PanelProp
      * configs `toolbarActions`, `filterFields`, and `showRefreshButton`. If specified as an array,
      * will be passed as children to a Toolbar component.
      */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
 }
 export declare const RestGrid: import("react").FC<RestGridProps>, restGrid: import("@xh/hoist/core").ElementFactory<RestGridProps>;

package/build/types/kit/react-markdown/index.d.ts

@@ -1,3 +1,4 @@
-import ReactMarkdown from 'react-markdown';
+import { type ElementFactory } from '@xh/hoist/core';
+import ReactMarkdown, { type Options } from 'react-markdown';
 export { ReactMarkdown };
-export declare const reactMarkdown: import("@xh/hoist/core").ElementFactory<Readonly<import("react-markdown/lib").Options>>;
+export declare const reactMarkdown: ElementFactory<Readonly<Options>>;

package/build/types/kit/swiper/index.d.ts

@@ -5,93 +5,93 @@ export { Swiper, SwiperSlide, EffectCreative };
 export declare const swiper: import("@xh/hoist/core").ElementFactory<import("react").RefAttributes<import("swiper/react").SwiperRef> & Omit<import("react").HTMLAttributes<HTMLElement>, "onKeyPress" | "onProgress" | "onClick" | "onDoubleClick" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onScroll" | "onTransitionEnd" | "onResize"> & import("swiper/types").SwiperOptions & {
     tag?: string;
     wrapperTag?: string;
-    onSwiper?: (swiper: import("swiper/react").SwiperClass) => void;
-    onAutoplayStart?: (swiper: import("swiper/react").SwiperClass) => void;
-    onAutoplayStop?: (swiper: import("swiper/react").SwiperClass) => void;
-    onAutoplayPause?: (swiper: import("swiper/react").SwiperClass) => void;
-    onAutoplayResume?: (swiper: import("swiper/react").SwiperClass) => void;
-    onAutoplayTimeLeft?: (swiper: import("swiper/react").SwiperClass, timeLeft: number, percentage: number) => void;
-    onAutoplay?: (swiper: import("swiper/react").SwiperClass) => void;
-    onHashChange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onHashSet?: (swiper: import("swiper/react").SwiperClass) => void;
-    onKeyPress?: (swiper: import("swiper/react").SwiperClass, keyCode: string) => void;
-    onNavigationHide?: (swiper: import("swiper/react").SwiperClass) => void;
-    onNavigationShow?: (swiper: import("swiper/react").SwiperClass) => void;
-    onNavigationPrev?: (swiper: import("swiper/react").SwiperClass) => void;
-    onNavigationNext?: (swiper: import("swiper/react").SwiperClass) => void;
-    onScroll?: (swiper: import("swiper/react").SwiperClass, event: WheelEvent) => void;
-    onScrollbarDragStart?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onScrollbarDragMove?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onScrollbarDragEnd?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onPaginationRender?: (swiper: import("swiper/react").SwiperClass, paginationEl: HTMLElement) => void;
-    onPaginationUpdate?: (swiper: import("swiper/react").SwiperClass, paginationEl: HTMLElement) => void;
-    onPaginationHide?: (swiper: import("swiper/react").SwiperClass) => void;
-    onPaginationShow?: (swiper: import("swiper/react").SwiperClass) => void;
-    onZoomChange?: (swiper: import("swiper/react").SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
-    onInit?: (swiper: import("swiper/react").SwiperClass) => any;
-    onBeforeDestroy?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlidesUpdated?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlideChange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlideChangeTransitionStart?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlideChangeTransitionEnd?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlideNextTransitionStart?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlideNextTransitionEnd?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlidePrevTransitionStart?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlidePrevTransitionEnd?: (swiper: import("swiper/react").SwiperClass) => void;
-    onTransitionStart?: (swiper: import("swiper/react").SwiperClass) => void;
-    onTransitionEnd?: (swiper: import("swiper/react").SwiperClass) => void;
-    onTouchStart?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onTouchMove?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onTouchMoveOpposite?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onSliderMove?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onTouchEnd?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onClick?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onTap?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onDoubleTap?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onProgress?: (swiper: import("swiper/react").SwiperClass, progress: number) => void;
-    onReachBeginning?: (swiper: import("swiper/react").SwiperClass) => void;
-    onReachEnd?: (swiper: import("swiper/react").SwiperClass) => void;
-    onToEdge?: (swiper: import("swiper/react").SwiperClass) => void;
-    onFromEdge?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSetTranslate?: (swiper: import("swiper/react").SwiperClass, translate: number) => void;
-    onSetTransition?: (swiper: import("swiper/react").SwiperClass, transition: number) => void;
-    onResize?: (swiper: import("swiper/react").SwiperClass) => void;
-    onObserverUpdate?: (swiper: import("swiper/react").SwiperClass) => void;
-    onBeforeLoopFix?: (swiper: import("swiper/react").SwiperClass) => void;
-    onLoopFix?: (swiper: import("swiper/react").SwiperClass) => void;
-    onBreakpoint?: (swiper: import("swiper/react").SwiperClass, breakpointParams: import("swiper/types").SwiperOptions) => void;
-    _beforeBreakpoint?: (swiper: import("swiper/react").SwiperClass, breakpointParams: import("swiper/types").SwiperOptions) => void;
-    _containerClasses?: (swiper: import("swiper/react").SwiperClass, classNames: string) => void;
-    _slideClass?: (swiper: import("swiper/react").SwiperClass, slideEl: HTMLElement, classNames: string) => void;
-    _slideClasses?: (swiper: import("swiper/react").SwiperClass, slides: {
+    onSwiper?: (swiper: import("swiper/types").Swiper) => void;
+    onAutoplayStart?: (swiper: import("swiper/types").Swiper) => void;
+    onAutoplayStop?: (swiper: import("swiper/types").Swiper) => void;
+    onAutoplayPause?: (swiper: import("swiper/types").Swiper) => void;
+    onAutoplayResume?: (swiper: import("swiper/types").Swiper) => void;
+    onAutoplayTimeLeft?: (swiper: import("swiper/types").Swiper, timeLeft: number, percentage: number) => void;
+    onAutoplay?: (swiper: import("swiper/types").Swiper) => void;
+    onHashChange?: (swiper: import("swiper/types").Swiper) => void;
+    onHashSet?: (swiper: import("swiper/types").Swiper) => void;
+    onKeyPress?: (swiper: import("swiper/types").Swiper, keyCode: string) => void;
+    onNavigationHide?: (swiper: import("swiper/types").Swiper) => void;
+    onNavigationShow?: (swiper: import("swiper/types").Swiper) => void;
+    onNavigationPrev?: (swiper: import("swiper/types").Swiper) => void;
+    onNavigationNext?: (swiper: import("swiper/types").Swiper) => void;
+    onScroll?: (swiper: import("swiper/types").Swiper, event: WheelEvent) => void;
+    onScrollbarDragStart?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onScrollbarDragMove?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onScrollbarDragEnd?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onPaginationRender?: (swiper: import("swiper/types").Swiper, paginationEl: HTMLElement) => void;
+    onPaginationUpdate?: (swiper: import("swiper/types").Swiper, paginationEl: HTMLElement) => void;
+    onPaginationHide?: (swiper: import("swiper/types").Swiper) => void;
+    onPaginationShow?: (swiper: import("swiper/types").Swiper) => void;
+    onZoomChange?: (swiper: import("swiper/types").Swiper, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
+    onInit?: (swiper: import("swiper/types").Swiper) => any;
+    onBeforeDestroy?: (swiper: import("swiper/types").Swiper) => void;
+    onSlidesUpdated?: (swiper: import("swiper/types").Swiper) => void;
+    onSlideChange?: (swiper: import("swiper/types").Swiper) => void;
+    onSlideChangeTransitionStart?: (swiper: import("swiper/types").Swiper) => void;
+    onSlideChangeTransitionEnd?: (swiper: import("swiper/types").Swiper) => void;
+    onSlideNextTransitionStart?: (swiper: import("swiper/types").Swiper) => void;
+    onSlideNextTransitionEnd?: (swiper: import("swiper/types").Swiper) => void;
+    onSlidePrevTransitionStart?: (swiper: import("swiper/types").Swiper) => void;
+    onSlidePrevTransitionEnd?: (swiper: import("swiper/types").Swiper) => void;
+    onTransitionStart?: (swiper: import("swiper/types").Swiper) => void;
+    onTransitionEnd?: (swiper: import("swiper/types").Swiper) => void;
+    onTouchStart?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onTouchMove?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onTouchMoveOpposite?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onSliderMove?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onTouchEnd?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onClick?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onTap?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onDoubleTap?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onProgress?: (swiper: import("swiper/types").Swiper, progress: number) => void;
+    onReachBeginning?: (swiper: import("swiper/types").Swiper) => void;
+    onReachEnd?: (swiper: import("swiper/types").Swiper) => void;
+    onToEdge?: (swiper: import("swiper/types").Swiper) => void;
+    onFromEdge?: (swiper: import("swiper/types").Swiper) => void;
+    onSetTranslate?: (swiper: import("swiper/types").Swiper, translate: number) => void;
+    onSetTransition?: (swiper: import("swiper/types").Swiper, transition: number) => void;
+    onResize?: (swiper: import("swiper/types").Swiper) => void;
+    onObserverUpdate?: (swiper: import("swiper/types").Swiper) => void;
+    onBeforeLoopFix?: (swiper: import("swiper/types").Swiper) => void;
+    onLoopFix?: (swiper: import("swiper/types").Swiper) => void;
+    onBreakpoint?: (swiper: import("swiper/types").Swiper, breakpointParams: import("swiper/types").SwiperOptions) => void;
+    _beforeBreakpoint?: (swiper: import("swiper/types").Swiper, breakpointParams: import("swiper/types").SwiperOptions) => void;
+    _containerClasses?: (swiper: import("swiper/types").Swiper, classNames: string) => void;
+    _slideClass?: (swiper: import("swiper/types").Swiper, slideEl: HTMLElement, classNames: string) => void;
+    _slideClasses?: (swiper: import("swiper/types").Swiper, slides: {
         slideEl: HTMLElement;
         classNames: string;
         index: number;
     }[]) => void;
-    _swiper?: (swiper: import("swiper/react").SwiperClass) => void;
-    _freeModeNoMomentumRelease?: (swiper: import("swiper/react").SwiperClass) => void;
-    onActiveIndexChange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSnapIndexChange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onRealIndexChange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onAfterInit?: (swiper: import("swiper/react").SwiperClass) => void;
-    onBeforeInit?: (swiper: import("swiper/react").SwiperClass) => void;
-    onBeforeResize?: (swiper: import("swiper/react").SwiperClass) => void;
-    onBeforeSlideChangeStart?: (swiper: import("swiper/react").SwiperClass) => void;
-    onBeforeTransitionStart?: (swiper: import("swiper/react").SwiperClass, speed: number, internal: any) => void;
-    onChangeDirection?: (swiper: import("swiper/react").SwiperClass) => void;
-    onDoubleClick?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onDestroy?: (swiper: import("swiper/react").SwiperClass) => void;
-    onMomentumBounce?: (swiper: import("swiper/react").SwiperClass) => void;
-    onOrientationchange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlideResetTransitionStart?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlideResetTransitionEnd?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSliderFirstMove?: (swiper: import("swiper/react").SwiperClass, event: TouchEvent) => void;
-    onSlidesLengthChange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSlidesGridLengthChange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onSnapGridLengthChange?: (swiper: import("swiper/react").SwiperClass) => void;
-    onUpdate?: (swiper: import("swiper/react").SwiperClass) => void;
-    onLock?: (swiper: import("swiper/react").SwiperClass) => void;
-    onUnlock?: (swiper: import("swiper/react").SwiperClass) => void;
+    _swiper?: (swiper: import("swiper/types").Swiper) => void;
+    _freeModeNoMomentumRelease?: (swiper: import("swiper/types").Swiper) => void;
+    onActiveIndexChange?: (swiper: import("swiper/types").Swiper) => void;
+    onSnapIndexChange?: (swiper: import("swiper/types").Swiper) => void;
+    onRealIndexChange?: (swiper: import("swiper/types").Swiper) => void;
+    onAfterInit?: (swiper: import("swiper/types").Swiper) => void;
+    onBeforeInit?: (swiper: import("swiper/types").Swiper) => void;
+    onBeforeResize?: (swiper: import("swiper/types").Swiper) => void;
+    onBeforeSlideChangeStart?: (swiper: import("swiper/types").Swiper) => void;
+    onBeforeTransitionStart?: (swiper: import("swiper/types").Swiper, speed: number, internal: any) => void;
+    onChangeDirection?: (swiper: import("swiper/types").Swiper) => void;
+    onDoubleClick?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onDestroy?: (swiper: import("swiper/types").Swiper) => void;
+    onMomentumBounce?: (swiper: import("swiper/types").Swiper) => void;
+    onOrientationchange?: (swiper: import("swiper/types").Swiper) => void;
+    onSlideResetTransitionStart?: (swiper: import("swiper/types").Swiper) => void;
+    onSlideResetTransitionEnd?: (swiper: import("swiper/types").Swiper) => void;
+    onSliderFirstMove?: (swiper: import("swiper/types").Swiper, event: TouchEvent) => void;
+    onSlidesLengthChange?: (swiper: import("swiper/types").Swiper) => void;
+    onSlidesGridLengthChange?: (swiper: import("swiper/types").Swiper) => void;
+    onSnapGridLengthChange?: (swiper: import("swiper/types").Swiper) => void;
+    onUpdate?: (swiper: import("swiper/types").Swiper) => void;
+    onLock?: (swiper: import("swiper/types").Swiper) => void;
+    onUnlock?: (swiper: import("swiper/types").Swiper) => void;
 } & {
     children?: import("react").ReactNode | undefined;
 }>, swiperSlide: import("@xh/hoist/core").ElementFactory<import("swiper/react").SwiperSlideProps>;

package/build/types/mobile/cmp/panel/Panel.d.ts

@@ -4,7 +4,7 @@ import { ReactNode, ReactElement } from 'react';
 import './Panel.scss';
 export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
     /** A toolbar to be docked at the bottom of the panel. */
-    bbar?: Some<ReactNode>;
+    bbar?: ReactNode;
     /** CSS class name specific to the panel's header. */
     headerClassName?: string;
     /** Items to be added to the right-side of the panel's header. */
@@ -30,7 +30,7 @@ export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
     /** Allow the panel to scroll vertically */
     scrollable?: boolean;
     /** A toolbar to be docked at the top of the panel. */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
     /** Title text added to the panel's header. */
     title?: ReactNode;
 }

package/cmp/markdown/Markdown.ts

@@ -9,7 +9,7 @@ import {reactMarkdown} from '@xh/hoist/kit/react-markdown';
 import {Options} from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
-import {PluggableList} from 'unified/lib';
+import type {PluggableList} from 'unified';
 
 interface MarkdownProps extends HoistProps {
     /** Markdown formatted string to render. */

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/desktop/cmp/dash/canvas/DashCanvas.ts

@@ -4,6 +4,13 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import ReactGridLayout, {
+    type LayoutItem,
+    type GridLayoutProps,
+    useContainerWidth,
+    getCompactor
+} from 'react-grid-layout';
+import {GridBackground, type GridBackgroundProps} from 'react-grid-layout/extras';
 import {showContextMenu} from '@xh/hoist/kit/blueprint';
 import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
@@ -18,10 +25,8 @@ import {
 import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAddViewButton';
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
-import {consumeEvent, TEST_ID} from '@xh/hoist/utils/js';
+import {consumeEvent, mergeDeep, 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';
@@ -33,10 +38,10 @@ export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSuppor
     /**
      * Optional additional configuration options to pass through to the underlying ReactGridLayout component.
      * See the RGL documentation for details:
-     * {@link https://www.npmjs.com/package/react-grid-layout#grid-layout-props}
+     * {@link https://www.npmjs.com/package/react-grid-layout#api-reference}
      * Note that some ReactGridLayout props are managed directly by DashCanvas and will be overridden if provided here.
      */
-    rglOptions?: ReactGridLayoutProps;
+    rglOptions?: Partial<GridLayoutProps>;
 }
 
 /**
@@ -58,7 +63,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     render({className, model, rglOptions, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked,
-            [padX, padY] = model.containerPadding;
+            {width, containerRef, mounted} = useContainerWidth();
 
         return refreshContextView({
             model: model.refreshContextModel,
@@ -68,37 +73,51 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isDraggable ? `${className}--draggable` : null,
                     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: [
+                    gridBackgroundCells({
+                        omit: !model.showGridBackground || !mounted,
+                        width
+                    }),
                     reactGridLayout({
+                        ...mergeDeep(
+                            {
+                                gridConfig: {
+                                    cols: model.columns,
+                                    rowHeight: model.rowHeight,
+                                    margin: model.margin,
+                                    maxRows: model.maxRows,
+                                    containerPadding: model.containerPadding
+                                },
+                                dragConfig: {
+                                    enabled: isDraggable,
+                                    handle: '.xh-dash-tab.xh-panel > .xh-panel__content > .xh-panel-header',
+                                    cancel: '.xh-button',
+                                    bounded: true
+                                },
+                                resizeConfig: {
+                                    enabled: isResizable
+                                },
+                                compactor: getCompactor(model.compact, false, false),
+                                onLayoutChange: (layout: LayoutItem[]) =>
+                                    model.onRglLayoutChange(layout),
+                                onResizeStart: () => (model.isResizing = true),
+                                onResizeStop: () => (model.isResizing = false)
+                            },
+                            rglOptions
+                        ),
+                        omit: !mounted,
                         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 =>
+                        children: model.viewModels.map(vm =>
                             div({
                                 key: vm.id,
                                 item: dashCanvasView({model: vm})
                             })
                         ),
-                        ...rglOptions
+                        width
                     }),
-                    emptyContainerOverlay()
+                    emptyContainerOverlay({omit: !mounted})
                 ],
                 [TEST_ID]: testId
             })
@@ -106,6 +125,24 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     }
 });
 
+const gridBackgroundCells = hoistCmp.factory<DashCanvasModel>({
+    displayName: 'DashCanvasGridBackgroundCells',
+    model: uses(DashCanvasModel),
+    render({model, width}) {
+        return gridBackground({
+            className: 'xh-dash-canvas__grid-background',
+            width,
+            height: model.rglHeight,
+            cols: model.columns,
+            rowHeight: model.rowHeight,
+            margin: model.margin,
+            rows: 'auto',
+            color: 'var(--xh-dash-canvas-grid-cell-color)',
+            borderRadius: 0
+        });
+    }
+});
+
 const emptyContainerOverlay = hoistCmp.factory<DashCanvasModel>(({model}) => {
     const {isEmpty, emptyText} = model;
     if (!isEmpty) return null;
@@ -147,4 +184,5 @@ const onContextMenu = (e, model) => {
     }
 };
 
-const reactGridLayout = elementFactory(WidthProvider(ReactGridLayout));
+const reactGridLayout = elementFactory<GridLayoutProps>(ReactGridLayout);
+const gridBackground = elementFactory<GridBackgroundProps>(GridBackground);