@xh/hoist 80.0.0-SNAPSHOT.1767973504648 → 80.0.0-SNAPSHOT.1767974090726

package/CHANGELOG.md

@@ -11,17 +11,6 @@
       so there is no deprecated alias. Any app usages should swap to `XH.appLoadObserver`.
     * Removed additional references to deprecated `loadModel` within Hoist itself.
 
-### 🎁 New Features
-
-* DashCanvas:
-    * supports dragging and dropping widgets in from an external container.
-    * supports new compacting strategy: 'wrap'
-* new elementFactory tags: `fieldset`, `legend`
-
-### 📚 Libraries
-
-* react-grid-layout `2.1 → 2.2.2`
-
 ## 79.0.0 - 2026-01-05
 
 ### 💥 Breaking Changes

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

@@ -553,9 +553,9 @@ export declare class GridModel extends HoistModel {
     autosizeAsync(overrideOpts?: Omit<GridAutosizeOptions, 'mode'>): Promise<void>;
     /**
      * Begin an inline editing session.
-     * @param opts.record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
+     * @param record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
      *      will be used, if any, or the first overall StoreRecord in the grid.
-     * @param opts.colId - ID of column on which to start editing. If unspecified, the first
+     * @param colId - ID of column on which to start editing. If unspecified, the first
      *      editable column will be used.
      */
     beginEditAsync(opts?: {

package/build/types/cmp/layout/Tags.d.ts

@@ -10,7 +10,6 @@ export declare const a: import("@xh/hoist/core").ElementFactory<import("react").
 export declare const br: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBRElement>, HTMLBRElement>>;
 export declare const code: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>>;
 export declare const div: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const fieldset: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>>;
 export declare const form: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
 export declare const hr: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>>;
 export declare const h1: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
@@ -18,7 +17,6 @@ export declare const h2: import("@xh/hoist/core").ElementFactory<import("react")
 export declare const h3: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
 export declare const h4: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
 export declare const label: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
-export declare const legend: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>>;
 export declare const li: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
 export declare const nav: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>>;
 export declare const ol: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>>;

package/build/types/cmp/tab/TabContainerModel.d.ts

@@ -70,7 +70,7 @@ export declare class TabContainerModel extends HoistModel {
     protected lastActiveTabId: string;
     /**
      * @param config - TabContainer configuration.
-     * @param depth - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
      */
     constructor({ tabs, defaultTabId, route, track, renderMode, refreshMode, persistWith, emptyText, xhImpl, switcher }: TabContainerConfig, depth?: number);
     /** Set/replace all tabs within the container. */

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

@@ -14,12 +14,11 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
      */
     rowHeight?: number;
     /**
-     * Whether views should "compact" vertically, horizontally or wrap
+     * Whether views should "compact" vertically or horizontally
      * to condense space. Default `true` defaults to vertical compaction.
-     * Use `wrap` with caution.  It only works well if all items are 1 row high.
      * See react-grid-layout docs for more information.
-     */
-    compact?: boolean | 'vertical' | 'horizontal' | 'wrap';
+     * */
+    compact?: boolean | 'vertical' | 'horizontal';
     /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
     /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
@@ -30,31 +29,6 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
      * Whether a grid background should be shown. Default false.
      */
     showGridBackground?: boolean;
-    /**
-     * Whether the canvas should accept drag-and-drop of views from outside
-     * the canvas. Default false.
-     */
-    allowsDrop?: boolean;
-    /**
-     * Optional callback to invoke after a view is successfully dropped onto the canvas.
-     */
-    onDropDone?: (viewModel: DashCanvasViewModel) => void;
-    /**
-     * Optional callback to invoke when an item is dragged over the canvas. This may be used to
-     * customize how the size of the dropping placeholder is calculated. The callback should
-     * return an object with optional properties indicating the desired width, height (in grid units),
-     * and offset (in pixels) of the dropping placeholder.  The method's signature is the same as
-     * the `onDropDragOver` prop of ReactGridLayout.
-     * Returning `false` will prevent the dropping placeholder from being shown, and prevents a drop.
-     * Returning `void` will use the default behavior, which is to size the placeholder as per the
-     * `dropConfig.defaultItem` specification.
-     */
-    onDropDragOver?: (e: DragEvent) => OnDropDragOverResult;
-    /**
-     * Whether an overlay with an Add View button should be rendered
-     * when the canvas is empty. Default true.
-     */
-    showAddViewButtonWhenEmpty?: boolean;
 }
 export interface DashCanvasItemState {
     layout: DashCanvasItemLayout;
@@ -68,12 +42,6 @@ export interface DashCanvasItemLayout {
     w: number;
     h: number;
 }
-export type OnDropDragOverResult = {
-    w?: number;
-    h?: number;
-    dragOffsetX?: number;
-    dragOffsetY?: number;
-} | false | void;
 /**
  * Model for {@link DashCanvas}, managing all configurable options for the component and publishing
  * the observable state of its current widgets and their layout.
@@ -83,17 +51,12 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
 }> {
     columns: number;
     rowHeight: number;
-    compact: 'vertical' | 'horizontal' | 'wrap';
+    compact: 'vertical' | 'horizontal';
     margin: [number, number];
     containerPadding: [number, number];
     showGridBackground: boolean;
     rglHeight: number;
-    showAddViewButtonWhenEmpty: boolean;
-    DROPPING_ELEM_ID: string;
     maxRows: number;
-    allowsDrop: boolean;
-    onDropDone: (viewModel: DashCanvasViewModel) => void;
-    draggedInView: DashCanvasItemState;
     /** Current number of rows in canvas */
     get rows(): number;
     get isEmpty(): boolean;
@@ -102,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, showGridBackground, showAddViewButtonWhenEmpty, allowsDrop, onDropDone, onDropDragOver }: 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;
     /**
@@ -140,10 +103,6 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     renameView(id: string): void;
     /** Scrolls a DashCanvasView into view. */
     ensureViewVisible(id: string): void;
-    onDrop(rglLayout: LayoutItem[], layoutItem: LayoutItem, evt: Event): void;
-    setDraggedInView(view?: DashCanvasItemState): void;
-    onDropDragOver(evt: DragEvent): OnDropDragOverResult;
-    getViewsBySpecId(id: any): DashCanvasViewModel[];
     getPersistableState(): PersistableState<{
         state: DashCanvasItemState[];
     }>;
@@ -164,5 +123,6 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     private setViewLayout;
     private getSpec;
     private hasSpec;
+    private getViewsBySpecId;
     private getNextAvailablePosition;
 }

package/cmp/grid/GridModel.ts

@@ -1442,9 +1442,9 @@ export class GridModel extends HoistModel {
 
     /**
      * Begin an inline editing session.
-     * @param opts.record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
+     * @param record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
      *      will be used, if any, or the first overall StoreRecord in the grid.
-     * @param opts.colId - ID of column on which to start editing. If unspecified, the first
+     * @param colId - ID of column on which to start editing. If unspecified, the first
      *      editable column will be used.
      */
     async beginEditAsync(opts: {record?: StoreRecordOrId; colId?: string} = {}) {

package/cmp/layout/Tags.ts

@@ -29,7 +29,6 @@ export const a = elementFactory('a');
 export const br = elementFactory('br');
 export const code = elementFactory('code');
 export const div = elementFactory('div');
-export const fieldset = elementFactory('fieldset');
 export const form = elementFactory('form');
 export const hr = elementFactory('hr');
 export const h1 = elementFactory('h1');
@@ -37,7 +36,6 @@ export const h2 = elementFactory('h2');
 export const h3 = elementFactory('h3');
 export const h4 = elementFactory('h4');
 export const label = elementFactory('label');
-export const legend = elementFactory('legend');
 export const li = elementFactory('li');
 export const nav = elementFactory('nav');
 export const ol = elementFactory('ol');

package/cmp/tab/TabContainerModel.ts

@@ -119,7 +119,7 @@ export class TabContainerModel extends HoistModel {
 
     /**
      * @param config - TabContainer configuration.
-     * @param depth - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
      */
     constructor(
         {

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

@@ -10,7 +10,7 @@ import ReactGridLayout, {
     useContainerWidth,
     getCompactor
 } from 'react-grid-layout';
-import {GridBackground, type GridBackgroundProps, wrapCompactor} from 'react-grid-layout/extras';
+import {GridBackground, type GridBackgroundProps} from 'react-grid-layout/extras';
 import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
 import {
@@ -62,11 +62,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     render({className, model, rglOptions, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked,
-            {width, containerRef, mounted} = useContainerWidth(),
-            defaultDroppedItemDims = {
-                w: Math.floor(model.columns / 3),
-                h: Math.floor(model.columns / 3)
-            };
+            {width, containerRef, mounted} = useContainerWidth();
 
         return refreshContextView({
             model: model.refreshContextModel,
@@ -102,20 +98,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                                 resizeConfig: {
                                     enabled: isResizable
                                 },
-                                dropConfig: {
-                                    enabled: model.contentLocked ? false : model.allowsDrop,
-                                    defaultItem: defaultDroppedItemDims,
-                                    onDragOver: (evt: DragEvent) => model.onDropDragOver(evt)
-                                },
-                                onDrop: (
-                                    layout: LayoutItem[],
-                                    layoutItem: LayoutItem,
-                                    evt: Event
-                                ) => model.onDrop(layout, layoutItem, evt),
-                                compactor:
-                                    model.compact === 'wrap'
-                                        ? wrapCompactor
-                                        : getCompactor(model.compact, false, false),
+                                compactor: getCompactor(model.compact, false, false),
                                 onLayoutChange: (layout: LayoutItem[]) =>
                                     model.onRglLayoutChange(layout),
                                 onResizeStart: () => (model.isResizing = true),
@@ -133,7 +116,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                         ),
                         width
                     }),
-                    emptyContainerOverlay({omit: !mounted || !model.showAddViewButtonWhenEmpty})
+                    emptyContainerOverlay({omit: !mounted})
                 ],
                 [TEST_ID]: testId
             })

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

@@ -4,7 +4,6 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {wait} from '@xh/hoist/promise';
 import type {LayoutItem} from 'react-grid-layout';
 import {Persistable, PersistableState, PersistenceProvider, XH} from '@xh/hoist/core';
 import {required} from '@xh/hoist/data';
@@ -18,7 +17,6 @@ import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     defaultsDeep,
     find,
-    omit,
     uniqBy,
     times,
     without,
@@ -43,12 +41,11 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
     rowHeight?: number;
 
     /**
-     * Whether views should "compact" vertically, horizontally or wrap
+     * Whether views should "compact" vertically or horizontally
      * to condense space. Default `true` defaults to vertical compaction.
-     * Use `wrap` with caution.  It only works well if all items are 1 row high.
      * See react-grid-layout docs for more information.
-     */
-    compact?: boolean | 'vertical' | 'horizontal' | 'wrap';
+     * */
+    compact?: boolean | 'vertical' | 'horizontal';
 
     /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
@@ -63,35 +60,6 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
      * Whether a grid background should be shown. Default false.
      */
     showGridBackground?: boolean;
-
-    /**
-     * Whether the canvas should accept drag-and-drop of views from outside
-     * the canvas. Default false.
-     */
-    allowsDrop?: boolean;
-
-    /**
-     * Optional callback to invoke after a view is successfully dropped onto the canvas.
-     */
-    onDropDone?: (viewModel: DashCanvasViewModel) => void;
-
-    /**
-     * Optional callback to invoke when an item is dragged over the canvas. This may be used to
-     * customize how the size of the dropping placeholder is calculated. The callback should
-     * return an object with optional properties indicating the desired width, height (in grid units),
-     * and offset (in pixels) of the dropping placeholder.  The method's signature is the same as
-     * the `onDropDragOver` prop of ReactGridLayout.
-     * Returning `false` will prevent the dropping placeholder from being shown, and prevents a drop.
-     * Returning `void` will use the default behavior, which is to size the placeholder as per the
-     * `dropConfig.defaultItem` specification.
-     */
-    onDropDragOver?: (e: DragEvent) => OnDropDragOverResult;
-
-    /**
-     * Whether an overlay with an Add View button should be rendered
-     * when the canvas is empty. Default true.
-     */
-    showAddViewButtonWhenEmpty?: boolean;
 }
 
 export interface DashCanvasItemState {
@@ -108,16 +76,6 @@ export interface DashCanvasItemLayout {
     h: number;
 }
 
-export type OnDropDragOverResult =
-    | {
-          w?: number;
-          h?: number;
-          dragOffsetX?: number;
-          dragOffsetY?: number;
-      }
-    | false
-    | void;
-
 /**
  * Model for {@link DashCanvas}, managing all configurable options for the component and publishing
  * the observable state of its current widgets and their layout.
@@ -131,21 +89,16 @@ export class DashCanvasModel
     //------------------------------
     @bindable columns: number;
     @bindable rowHeight: number;
-    @bindable compact: 'vertical' | 'horizontal' | 'wrap';
+    @bindable compact: 'vertical' | 'horizontal';
     @bindable.ref margin: [number, number]; // [x, y]
     @bindable.ref containerPadding: [number, number]; // [x, y]
     @bindable showGridBackground: boolean;
     @bindable rglHeight: number;
-    @bindable showAddViewButtonWhenEmpty: boolean;
 
     //-----------------------------
     // Public properties
     //-----------------------------
-    DROPPING_ELEM_ID = '__dropping-elem__';
     maxRows: number;
-    allowsDrop: boolean;
-    onDropDone: (viewModel: DashCanvasViewModel) => void;
-    draggedInView: DashCanvasItemState;
 
     /** Current number of rows in canvas */
     get rows(): number {
@@ -165,27 +118,21 @@ export class DashCanvasModel
     private isLoadingState: boolean;
 
     get rglLayout() {
-        return this.layout
-            .map(it => {
-                const dashCanvasView = this.getView(it.i);
-
-                // `dashCanvasView` will not be found if `it` is a dropping element.
-                if (!dashCanvasView) return null;
-
-                const {autoHeight, viewSpec} = dashCanvasView;
-
-                return {
-                    ...it,
-                    resizeHandles: autoHeight
-                        ? ['w', 'e']
-                        : ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
-                    maxH: viewSpec.maxHeight,
-                    minH: viewSpec.minHeight,
-                    maxW: viewSpec.maxWidth,
-                    minW: viewSpec.minWidth
-                };
-            })
-            .filter(Boolean);
+        return this.layout.map(it => {
+            const dashCanvasView = this.getView(it.i),
+                {autoHeight, viewSpec} = dashCanvasView;
+
+            return {
+                ...it,
+                resizeHandles: autoHeight
+                    ? ['w', 'e']
+                    : ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
+                maxH: viewSpec.maxHeight,
+                minH: viewSpec.minHeight,
+                maxW: viewSpec.maxWidth,
+                minW: viewSpec.minWidth
+            };
+        });
     }
 
     constructor({
@@ -205,11 +152,7 @@ export class DashCanvasModel
         maxRows = Infinity,
         containerPadding = margin,
         extraMenuItems,
-        showGridBackground = false,
-        showAddViewButtonWhenEmpty = true,
-        allowsDrop = false,
-        onDropDone,
-        onDropDragOver
+        showGridBackground = false
     }: DashCanvasConfig) {
         super();
         makeObservable(this);
@@ -257,10 +200,6 @@ export class DashCanvasModel
         this.addViewButtonText = addViewButtonText;
         this.extraMenuItems = extraMenuItems;
         this.showGridBackground = showGridBackground;
-        this.showAddViewButtonWhenEmpty = showAddViewButtonWhenEmpty;
-        this.allowsDrop = allowsDrop;
-        this.onDropDone = onDropDone;
-        if (onDropDragOver) this.onDropDragOver = onDropDragOver;
 
         this.loadState(initialState);
         this.state = this.buildState();
@@ -398,59 +337,6 @@ export class DashCanvasModel
         this.getView(id)?.ensureVisible();
     }
 
-    onDrop(rglLayout: LayoutItem[], layoutItem: LayoutItem, evt: Event) {
-        throwIf(
-            !this.draggedInView,
-            `No draggedInView set on DashCanvasModel prior to onDrop operation.
-            Typically a developer would set this in response to dragstart events from
-             a DashViewTray or similar component.`
-        );
-
-        const droppingItem: any = rglLayout.find(it => it.i === this.DROPPING_ELEM_ID);
-        if (!droppingItem) {
-            // if `onDropDragOver` returned false, we won't have a dropping item
-            // and we cancel the drop
-            this.draggedInView = null;
-            return;
-        }
-
-        const {viewSpecId, title, state} = this.draggedInView,
-            layout = omit(layoutItem, 'i'),
-            newViewModel: DashCanvasViewModel = this.addViewInternal(viewSpecId, {
-                title,
-                state,
-                layout
-            });
-
-        // Change ID of dropping item to the new view's id
-        // so that the new view goes where the dropping item is.
-        droppingItem.i = newViewModel.id;
-
-        // must wait a tick for RGL to settle
-        wait().then(() => {
-            this.draggedInView = null;
-            this.onRglLayoutChange(rglLayout);
-            this.onDropDone?.(newViewModel);
-        });
-    }
-
-    setDraggedInView(view?: DashCanvasItemState) {
-        this.draggedInView = view;
-    }
-
-    onDropDragOver(evt: DragEvent): OnDropDragOverResult {
-        if (!this.draggedInView) return false;
-
-        return {
-            w: this.draggedInView.layout.w,
-            h: this.draggedInView.layout.h
-        };
-    }
-
-    getViewsBySpecId(id) {
-        return this.viewModels.filter(it => it.viewSpec.id === id);
-    }
-
     //------------------------
     // Persistable Interface
     //------------------------
@@ -527,12 +413,6 @@ export class DashCanvasModel
 
     onRglLayoutChange(rglLayout: LayoutItem[]) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
-
-        // Early out if RGL is changing layout as user is dragging droppable
-        // item around the canvas.  This will be called again once dragging
-        // has stopped and user has dropped the item onto the canvas.
-        if (rglLayout.some(it => it.i === this.DROPPING_ELEM_ID)) return;
-
         this.setLayout(rglLayout);
     }
 
@@ -616,6 +496,10 @@ export class DashCanvasModel
         return some(this.viewSpecs, {id});
     }
 
+    private getViewsBySpecId(id) {
+        return this.viewModels.filter(it => it.viewSpec.id === id);
+    }
+
     private getNextAvailablePosition({
         width,
         height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "80.0.0-SNAPSHOT.1767973504648",
+  "version": "80.0.0-SNAPSHOT.1767974090726",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -62,11 +62,11 @@
     "moment": "~2.30.1",
     "numbro": "~2.5.0",
     "onsenui": "~2.12.8",
-    "qs": "~6.14.1",
+    "qs": "~6.14.0",
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
     "react-dropzone": "~10.2.2",
-    "react-grid-layout": "2.2.2",
+    "react-grid-layout": "2.1.1",
     "react-markdown": "~10.1.0",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",