@xh/hoist 71.0.0-SNAPSHOT.1735587357776 → 71.0.0-SNAPSHOT.1735600578743

package/CHANGELOG.md

@@ -4,35 +4,43 @@
 
 ### 💥 Breaking Changes
 
-* `ErrorMessage` is now cross-platform. Its import paths has changed from `@xh/hoist/desktop/cmp/error`
-  and `@xh/hoist/mobile/cmp/error` to `@xh/hoist/cmp/error`.
-* `Mask` is now cross-platform. Its import paths has changed from `@xh/hoist/desktop/cmp/mask`
-  and `@xh/hoist/mobile/cmp/mask` to `@xh/hoist/cmp/mask`.
-* `LoadingIndicator` is now cross-platform. Its import paths has changed from
-  `@xh/hoist/desktop/cmp/loadingindicator` and `@xh/hoist/mobile/cmp/loadingindicator` to
+* Requires `hoist-core >= 26.1` with new APIs to support `ViewManager`.
+* `ErrorMessage` is now cross-platform - update imports from `@xh/hoist/desktop/cmp/error`
+  or `@xh/hoist/mobile/cmp/error` to `@xh/hoist/cmp/error`.
+* `Mask` is now cross-platform - update imports from `@xh/hoist/desktop/cmp/mask` or
+  `@xh/hoist/mobile/cmp/mask` to `@xh/hoist/cmp/mask`.
+* `LoadingIndicator` is now cross-platform - update imports from
+  `@xh/hoist/desktop/cmp/loadingindicator` or `@xh/hoist/mobile/cmp/loadingindicator` to
   `@xh/hoist/cmp/loadingindicator`.
 * `TreeMap` and `SplitTreeMap` are now cross-platform and can be used in mobile applications.
-  Their import paths have changed from `@xh/hoist/desktop/cmp/treemap` to `@xh/hoist/cmp/treemap`.
-* The `RefreshButton` `model` prop has been renamed `target` for clarity and consistency.
+  Update imports from `@xh/hoist/desktop/cmp/treemap` to `@xh/hoist/cmp/treemap`.
+* Renamed `RefreshButton.model` prop to `target` for clarity and consistency.
 
 ### 🎁 New Features
 
-* Major Improvements to ViewManager component
-  * Support for persisting pending value.
-  * Handle delete and update collisions more gracefully.
-  * Support for `settleTime`,
-  * Improved management UI Dialog.
-  * Support for "global" views.
-* New `SessionStorageService` and associated persistence provider provides support for saving
-  tab local data across reloads.
-* Added support for `AuthZeroClientConfig.audience` to support improved configuration of Auth0 OAuth
-  clients requesting access tokens, covering cases when third-party cookies are blocked.
+* Major improvements to ViewManager component, including:
+    * A clearer, better organized view management dialog.
+    * Support for persisting a view's pending value, to avoid users losing changes when e.g. an app
+      goes into idle mode and requires a page refresh to restore.
+    * Improved handling of delete / update collisions.
+    * New `ViewManagerModel.settleTime` config, to allow persisted components such as dashboards to
+      fully resolve their rendered state before capturing a baseline for dirty checks.
+* Added `SessionStorageService` and associated persistence provider to support saving tab-local
+  data across reloads. Exact analog to `LocalStorageService`, but scoped to lifetime of current tab.
+* Added `AuthZeroClientConfig.audience` config to support improved flow for Auth0 OAuth clients that
+  request access tokens. Specify your access token audience here to allow the client to fetch both
+  ID and access tokens in a single request and to use refresh tokens to maintain access without
+  relying on third-party cookies.
+* Updated sorting on grouped grids to place ungrouped items at the bottom.
 
 ### 🐞 Bug Fixes
 
 * Fixed sizing and position of mobile `TabContainer` switcher, particularly when the switcher is
   positioned with `top` orientation.
 * Fixed styling of `ButtonGroup` in vertical orientations.
+* Improved handling of calls to `DashContainerModel.loadStateAsync()` when the component has yet
+  to be rendered. Requested state updates are no longer dropped, and will be applied as soon as the
+  component is ready to do so.
 
 ### ⚙️ Technical
 
@@ -46,6 +54,10 @@
   provided by FontAwesome.
 * Improved accuracy of `PersistOptions.type` enum.
 
+### 📚 Libraries
+
+* react-grid-layout `1.4.3 → 1.5.0`
+
 ## v70.0.0 - 2024-11-15
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - changes to advanced persistence APIs)

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

@@ -3,17 +3,23 @@ import { Persistable, PersistableState } from '@xh/hoist/core';
 import { DashCanvasViewModel, DashCanvasViewSpec, DashConfig, DashViewState, DashModel } from '../';
 import '@xh/hoist/desktop/register';
 export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCanvasItemState> {
-    /** Total number of columns (x coordinates for views correspond with column numbers). */
+    /**
+     * Total number of columns (x coordinates for views correspond with column numbers).
+     * Default `12`.
+     */
     columns?: number;
-    /** Height of each row in pixels (y coordinates for views correspond with row numbers). */
+    /**
+     * Height of each row in pixels (y coordinates for views correspond with row numbers).
+     * Default `50`.
+     */
     rowHeight?: number;
-    /** Whether views should "compact" vertically to condense vertical space. */
+    /** Whether views should "compact" vertically to condense vertical space. Default `true`. */
     compact?: boolean;
-    /** Between items [x,y] in pixels. */
+    /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
-    /** Maximum number of rows permitted for this container. */
+    /** Maximum number of rows permitted for this container. Default `Infinity`. */
     maxRows?: number;
-    /** Padding inside the container [x, y] in pixels. */
+    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     containerPadding?: [number, number];
 }
 export interface DashCanvasItemState {
@@ -47,7 +53,6 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     layout: any[];
     ref: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
     isResizing: boolean;
-    private scrollbarVisible;
     private isLoadingState;
     get rglLayout(): any[];
     constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems }: DashCanvasConfig);
@@ -96,7 +101,6 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     }>): void;
     private getLayoutFromPosition;
     private addViewInternal;
-    onVisibleChange(visible: boolean): void;
     onRglLayoutChange(rglLayout: any): void;
     private setLayout;
     private loadState;
@@ -110,5 +114,4 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     private hasSpec;
     private getViewsBySpecId;
     private getNextAvailablePosition;
-    private fireWindowResizeEvent;
 }

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

@@ -19,7 +19,6 @@ import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAd
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {TEST_ID} from '@xh/hoist/utils/js';
-import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
 import {DashCanvasModel} from './DashCanvasModel';
@@ -49,13 +48,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
 
     render({className, model, testId}, ref) {
         const isDraggable = !model.layoutLocked,
-            isResizable = !model.layoutLocked;
-
-        ref = composeRefs(
-            ref,
-            model.ref,
-            useOnVisibleChange(viz => model.onVisibleChange(viz))
-        );
+            isResizable = !model.layoutLocked,
+            [padX, padY] = model.containerPadding;
 
         return refreshContextView({
             model: model.refreshContextModel,
@@ -65,7 +59,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isDraggable ? `${className}--draggable` : null,
                     isResizable ? `${className}--resizable` : null
                 ),
-                ref,
+                style: {padding: `${padY}px ${padX}px`},
+                ref: composeRefs(ref, model.ref),
                 onContextMenu: e => onContextMenu(e, model),
                 items: [
                     reactGridLayout({
@@ -77,7 +72,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                         compactType: model.compact ? 'vertical' : null,
                         margin: model.margin,
                         maxRows: model.maxRows,
-                        containerPadding: model.containerPadding,
+                        containerPadding: [0, 0], // Workaround for https://github.com/react-grid-layout/react-grid-layout/issues/1990
                         autoSize: true,
                         isBounded: true,
                         draggableHandle:

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

@@ -27,22 +27,28 @@ import {
 } from 'lodash';
 
 export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCanvasItemState> {
-    /** Total number of columns (x coordinates for views correspond with column numbers). */
+    /**
+     * Total number of columns (x coordinates for views correspond with column numbers).
+     * Default `12`.
+     */
     columns?: number;
 
-    /** Height of each row in pixels (y coordinates for views correspond with row numbers). */
+    /**
+     * Height of each row in pixels (y coordinates for views correspond with row numbers).
+     * Default `50`.
+     */
     rowHeight?: number;
 
-    /** Whether views should "compact" vertically to condense vertical space. */
+    /** Whether views should "compact" vertically to condense vertical space. Default `true`. */
     compact?: boolean;
 
-    /** Between items [x,y] in pixels. */
+    /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
 
-    /** Maximum number of rows permitted for this container. */
+    /** Maximum number of rows permitted for this container. Default `Infinity`. */
     maxRows?: number;
 
-    /** Padding inside the container [x, y] in pixels. */
+    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     containerPadding?: [number, number];
 }
 
@@ -97,7 +103,6 @@ export class DashCanvasModel
     @observable.ref layout: any[] = [];
     ref = createObservableRef<HTMLElement>();
     isResizing: boolean;
-    private scrollbarVisible: boolean;
     private isLoadingState: boolean;
 
     get rglLayout() {
@@ -131,7 +136,7 @@ export class DashCanvasModel
         compact = true,
         margin = [10, 10],
         maxRows = Infinity,
-        containerPadding = null,
+        containerPadding = margin,
         extraMenuItems
     }: DashCanvasConfig) {
         super();
@@ -194,19 +199,10 @@ export class DashCanvasModel
             });
         }
 
-        this.addReaction(
-            {
-                track: () => this.viewState,
-                run: () => (this.state = this.buildState())
-            },
-            {
-                when: () => !!this.ref.current,
-                run: () => {
-                    const {current: node} = this.ref;
-                    this.scrollbarVisible = node.offsetWidth > node.clientWidth;
-                }
-            }
-        );
+        this.addReaction({
+            track: () => this.viewState,
+            run: () => (this.state = this.buildState())
+        });
     }
 
     /** Removes all views from the canvas */
@@ -385,12 +381,6 @@ export class DashCanvasModel
         return model;
     }
 
-    // Trigger window resize event when component becomes visible to ensure layout adjusted to
-    // current window size - fixes https://github.com/xh/hoist-react/issues/3215
-    onVisibleChange(visible: boolean) {
-        if (visible) this.fireWindowResizeEvent();
-    }
-
     onRglLayoutChange(rglLayout) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
         this.setLayout(rglLayout);
@@ -404,15 +394,6 @@ export class DashCanvasModel
 
         this.layout = layout;
         if (!this.isLoadingState) this.state = this.buildState();
-
-        // Check if scrollbar visibility has changed, and force resize event if so
-        const node = this.ref.current;
-        if (!node) return;
-        const scrollbarVisible = node.offsetWidth > node.clientWidth;
-        if (scrollbarVisible !== this.scrollbarVisible) {
-            this.fireWindowResizeEvent();
-            this.scrollbarVisible = scrollbarVisible;
-        }
     }
 
     @action
@@ -530,8 +511,4 @@ export class DashCanvasModel
 
         return {x: defaultX, y: endY ?? rows};
     }
-
-    private fireWindowResizeEvent() {
-        window.dispatchEvent(new Event('resize'));
-    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "71.0.0-SNAPSHOT.1735587357776",
+  "version": "71.0.0-SNAPSHOT.1735600578743",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -69,7 +69,7 @@
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
     "react-dropzone": "~10.2.2",
-    "react-grid-layout": "1.4.3",
+    "react-grid-layout": "1.5.0",
     "react-markdown": "~9.0.1",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",