@xh/hoist 80.0.0-SNAPSHOT.1768251023007 → 80.0.0-SNAPSHOT.1768251400948

package/desktop/appcontainer/AppContainer.ts

@@ -27,6 +27,7 @@ import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/imp
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import {DynamicTabSwitcherModel, installDesktopImpls} from '@xh/hoist/dynamics/desktop';
 import {inspectorPanel} from '@xh/hoist/inspector/InspectorPanel';
+import {collapsibleSetButton} from '@xh/hoist/desktop/cmp/button/CollapsibleSetButton';
 import {blueprintProvider} from '@xh/hoist/kit/blueprint';
 import {consumeEvent} from '@xh/hoist/utils/js';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
@@ -46,6 +47,7 @@ import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
 
 installDesktopImpls({
+    collapsibleSetButton,
     tabContainerImpl,
     dockContainerImpl,
     storeFilterFieldImpl,

package/desktop/cmp/appbar/AppBar.scss

@@ -6,6 +6,11 @@
  */
 
 .xh-appbar {
+  // Menu button might be on left or right of appBar - add right margin when on left only.
+  .xh-app-menu-button:first-child {
+    margin-right: var(--xh-pad-px);
+  }
+
   .xh-appbar-icon {
     margin-right: var(--xh-pad-px);
   }
@@ -15,30 +20,6 @@
     font-size: var(--xh-appbar-title-font-size-px);
     margin-right: var(--xh-pad-px);
   }
-
-  .xh-app-menu-button {
-    // Menu button might be on left or right of appBar - add right margin when on left only.
-    &:first-child {
-      margin-right: var(--xh-pad-px);
-    }
-
-    &__user-profile {
-      border-radius: 50%;
-      border: var(--xh-border-solid);
-      cursor: pointer;
-      height: 32px;
-      line-height: 31px;
-      text-align: center;
-      width: 32px;
-    }
-
-    // Trigger profile-specific hover styles on parent button hover
-    &:hover .xh-app-menu-button__user-profile {
-      color: var(--xh-appbar-user-profile-hover-color);
-      border-color: var(--xh-appbar-user-profile-hover-color);
-      background-color: transparent;
-    }
-  }
 }
 
 //------------------------

package/desktop/cmp/button/AppMenuButton.ts

@@ -4,16 +4,13 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {div} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, HoistUser, MenuItemLike, XH} from '@xh/hoist/core';
+import {hoistCmp, MenuItemLike, XH} from '@xh/hoist/core';
 import {ButtonProps, button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {menu, popover} from '@xh/hoist/kit/blueprint';
 import {parseMenuItems} from '@xh/hoist/utils/impl';
 import {withDefault} from '@xh/hoist/utils/js';
-import {isFunction} from 'lodash';
-import {ReactNode} from 'react';
 
 export interface AppMenuButtonProps extends ButtonProps {
     /**
@@ -53,17 +50,8 @@ export interface AppMenuButtonProps extends ButtonProps {
 
     /** True to hide the Theme Toggle button. */
     hideThemeItem?: boolean;
-
-    /**
-     * Replace the default hamburger icon with a user profile representation. Set to true to render
-     * the user's initials from their `HoistUser.displayName`. Alternately, provide a custom
-     * function to render an alternate compact string or element for the current user.
-     */
-    renderWithUserProfile?: boolean | RenderWithUserProfileCustomFn;
 }
 
-type RenderWithUserProfileCustomFn = (user: HoistUser) => ReactNode;
-
 export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButtonProps>({
     displayName: 'AppMenuButton',
     model: false,
@@ -82,7 +70,6 @@ export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButton
             hideOptionsItem,
             hideThemeItem,
             disabled,
-            renderWithUserProfile,
             ...rest
         } = props;
 
@@ -92,8 +79,7 @@ export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButton
             position: 'bottom-right',
             minimal: true,
             item: button({
-                icon: renderWithUserProfile ? null : Icon.menu(),
-                text: renderWithUserProfile ? userProfile({renderWithUserProfile}) : null,
+                icon: Icon.menu(),
                 disabled,
                 ...rest
             }),
@@ -109,20 +95,6 @@ export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButton
 //---------------------------
 // Implementation
 //---------------------------
-const userProfile = hoistCmp.factory<
-    HoistProps & {renderWithUserProfile: true | RenderWithUserProfileCustomFn}
->({
-    model: false,
-    render({renderWithUserProfile}) {
-        return div({
-            className: 'xh-app-menu-button__user-profile',
-            item: isFunction(renderWithUserProfile)
-                ? renderWithUserProfile(XH.getUser())
-                : XH.getUserInitials()
-        });
-    }
-});
-
 function buildMenuItems(props: AppMenuButtonProps) {
     let {
         hideAboutItem,

package/desktop/cmp/button/CollapsibleSetButton.ts

@@ -0,0 +1,57 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+
+import {type ReactElement, type ReactNode, type JSX, useState} from 'react';
+import {tooltip as bpTooltip} from '@xh/hoist/kit/blueprint';
+import {hoistCmp} from '@xh/hoist/core';
+import type {Intent, HoistProps} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {legend} from '@xh/hoist/cmp/layout';
+import {Icon} from '@xh/hoist/icon/Icon';
+
+export interface CollapsibleSetButtonProps extends HoistProps {
+    icon?: ReactElement;
+    text: ReactNode;
+    tooltip?: JSX.Element | string;
+    clickHandler?: (boolean) => void;
+    intent?: Intent;
+    collapsed?: boolean;
+    disabled?: boolean;
+}
+
+export const [CollapsibleSetButton, collapsibleSetButton] =
+    hoistCmp.withFactory<CollapsibleSetButtonProps>({
+        displayName: 'CollapsibleSetButton',
+        model: false,
+        render({icon, text, tooltip, intent, clickHandler, collapsed, disabled}) {
+            const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed === true),
+                btn = button({
+                    text,
+                    icon,
+                    rightIcon: isCollapsed ? Icon.angleDown() : Icon.angleUp(),
+                    outlined: isCollapsed && !intent,
+                    minimal: !intent || (intent && !isCollapsed),
+                    intent,
+                    disabled,
+                    onClick: () => {
+                        const val = !isCollapsed;
+                        setIsCollapsed(val);
+                        clickHandler?.(val);
+                    }
+                });
+
+            return legend(
+                tooltip
+                    ? bpTooltip({
+                          item: btn,
+                          content: tooltip,
+                          intent
+                      })
+                    : btn
+            );
+        }
+    });

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

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

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

@@ -4,6 +4,7 @@
  *
  * 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';
@@ -17,6 +18,7 @@ import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     defaultsDeep,
     find,
+    omit,
     uniqBy,
     times,
     without,
@@ -41,11 +43,12 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
     rowHeight?: number;
 
     /**
-     * Whether views should "compact" vertically or horizontally
+     * Whether views should "compact" vertically, horizontally or wrap
      * 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';
+     */
+    compact?: boolean | 'vertical' | 'horizontal' | 'wrap';
 
     /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
@@ -60,6 +63,35 @@ 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 {
@@ -76,6 +108,16 @@ 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.
@@ -89,16 +131,21 @@ export class DashCanvasModel
     //------------------------------
     @bindable columns: number;
     @bindable rowHeight: number;
-    @bindable compact: 'vertical' | 'horizontal';
+    @bindable compact: 'vertical' | 'horizontal' | 'wrap';
     @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 {
@@ -118,21 +165,27 @@ export class DashCanvasModel
     private isLoadingState: boolean;
 
     get rglLayout() {
-        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
-            };
-        });
+        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);
     }
 
     constructor({
@@ -152,7 +205,11 @@ export class DashCanvasModel
         maxRows = Infinity,
         containerPadding = margin,
         extraMenuItems,
-        showGridBackground = false
+        showGridBackground = false,
+        showAddViewButtonWhenEmpty = true,
+        allowsDrop = false,
+        onDropDone,
+        onDropDragOver
     }: DashCanvasConfig) {
         super();
         makeObservable(this);
@@ -200,6 +257,10 @@ 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();
@@ -337,6 +398,59 @@ 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
     //------------------------
@@ -413,6 +527,12 @@ 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);
     }
 
@@ -496,10 +616,6 @@ 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/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWell.scss

@@ -0,0 +1,34 @@
+.xh-dash-canvas-widget-well {
+  padding: 0 var(--xh-pad-half-px);
+
+  .xh-collapsible-set {
+    padding: 0 var(--xh-pad-half-px) var(--xh-pad-half-px) var(--xh-pad-half-px);
+    margin: var(--xh-pad-half-px);
+  }
+
+  .xh-dash-canvas-draggable-widget {
+    border: var(--xh-border-dotted);
+    background-color: var(--xh-bg-alt);
+    padding: var(--xh-pad-half-px);
+    margin: var(--xh-pad-half-px);
+    text-wrap-mode: nowrap;
+    cursor: grab;
+
+    &.is-dragging {
+      cursor: grabbing;
+      // lighten background color of left behind placeholder
+      // when dragging
+      opacity: 0.25;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &--row {
+    .xh-dash-canvas-draggable-widget {
+      align-self: flex-start;
+    }
+  }
+}

package/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWell.ts

@@ -0,0 +1,135 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+
+import {uniqBy} from 'lodash';
+import classNames from 'classnames';
+import type {ReactElement} from 'react';
+import {div, frame} from '@xh/hoist/cmp/layout';
+import {creates, hoistCmp, HoistProps, TestSupportProps, uses} from '@xh/hoist/core';
+import {DashCanvasModel, DashCanvasViewSpec} from '@xh/hoist/desktop/cmp/dash';
+import {DashCanvasWidgetWellModel} from '@xh/hoist/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWellModel';
+import {collapsibleSet} from '@xh/hoist/cmp/layout/CollapsibleSet';
+
+import './DashCanvasWidgetWell.scss';
+
+export interface DashCanvasWidgetWellProps extends HoistProps, TestSupportProps {
+    /** DashCanvasModel for which this widget well should allow the user to add views from. */
+    dashCanvasModel?: DashCanvasModel;
+    /** Defaults to `column` */
+    flexDirection?: 'row' | 'column';
+}
+
+/**
+ * Widget Well from which to add items to a DashCanvas by drag-and-drop.
+ *
+ * Available view specs are listed in their defined order,
+ * grouped by their 'groupName' property if present.
+ *
+ * Typically, an app developer would place this inside a collapsible panel to the side of
+ * a DashCanvas.
+ */
+export const [DashCanvasWidgetWell, dashCanvasWidgetWell] =
+    hoistCmp.withFactory<DashCanvasWidgetWellProps>({
+        displayName: 'DashCanvasWidgetWell',
+        model: creates(DashCanvasWidgetWellModel),
+        className: 'xh-dash-canvas-widget-well',
+        render({dashCanvasModel, flexDirection, className, testId}) {
+            if (!dashCanvasModel) return;
+
+            const classes = [];
+            if (flexDirection === 'row') classes.push('xh-dash-canvas-widget-well--row');
+
+            return frame({
+                className: classNames(className, classes),
+                overflowY: 'auto',
+                flexDirection: flexDirection || 'column',
+                flexWrap: flexDirection === 'row' ? 'wrap' : 'nowrap',
+                items: createDraggableItems(dashCanvasModel, flexDirection),
+                testId
+            });
+        }
+    });
+
+//---------------------------
+// Implementation
+//---------------------------
+const draggableWidget = hoistCmp.factory<DashCanvasWidgetWellModel>({
+    displayName: 'DraggableWidget',
+    model: uses(DashCanvasWidgetWellModel),
+    render({model, viewSpec}) {
+        const {id, icon, title} = viewSpec as DashCanvasViewSpec;
+        return div({
+            id: `draggableFor-${id}`,
+            className: 'xh-dash-canvas-draggable-widget',
+            draggable: true,
+            unselectable: 'on',
+            onDragStart: e => model.onDragStart(e),
+            onDragEnd: e => model.onDragEnd(e),
+            items: [icon, ' ', title]
+        });
+    }
+});
+
+/**
+ * Used to create draggable items (for adding views)
+ * @internal
+ */
+function createDraggableItems(dashCanvasModel: DashCanvasModel, flexDirection): any[] {
+    if (!dashCanvasModel.ref.current) return [];
+
+    const groupedItems = {},
+        ungroupedItems = [];
+
+    const addToGroup = (item, icon, groupName) => {
+        const group = groupedItems[groupName];
+        if (group) {
+            group.push({item, icon});
+        } else {
+            groupedItems[groupName] = [{item, icon}];
+        }
+    };
+
+    dashCanvasModel.viewSpecs
+        .filter(viewSpec => {
+            return (
+                viewSpec.allowAdd &&
+                (!viewSpec.unique || !dashCanvasModel.getViewsBySpecId(viewSpec.id).length)
+            );
+        })
+        .forEach(viewSpec => {
+            const {groupName} = viewSpec,
+                item = draggableWidget({viewSpec});
+
+            if (groupName) {
+                addToGroup(item, viewSpec.icon, groupName);
+            } else {
+                ungroupedItems.push(item);
+            }
+        });
+
+    return [
+        ...Object.keys(groupedItems).map(group => {
+            const label = group,
+                items = groupedItems[group],
+                sameIcons =
+                    uniqBy<{item: ReactElement; icon: ReactElement}>(
+                        items,
+                        it => it.icon.props.iconName
+                    ).length === 1,
+                icon = sameIcons ? items[0].icon : null;
+
+            return collapsibleSet({
+                icon,
+                collapsed: false,
+                label,
+                flexDirection,
+                items: items.map(it => it.item)
+            });
+        }),
+        ...ungroupedItems
+    ];
+}