@xh/hoist 75.0.0-SNAPSHOT.1753376908830 → 75.0.0-SNAPSHOT.1753458616250

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

@@ -437,6 +437,10 @@ export declare class GridModel extends HoistModel {
     collapseAll(): void;
     /** Expand all parent rows in grouped or tree grid to the specified level. */
     expandToLevel(level: number): void;
+    /**
+     * Get the resolved level labels for the current state of the grid.
+     */
+    get resolvedLevelLabels(): string[];
     /**
      * Sort this grid.
      * This method is a no-op if provided any sorters without a corresponding column.

package/build/types/desktop/cmp/panel/impl/dragger/DraggerModel.d.ts

@@ -13,7 +13,7 @@ export declare class DraggerModel extends HoistModel {
     maxSize: any;
     throttledSetSize: any;
     onLinked(): void;
-    private addListeners;
+    private toggleListeners;
     private onDragStart;
     private onDrag;
     private onDragEnd;
@@ -24,9 +24,11 @@ export declare class DraggerModel extends HoistModel {
     private parseEventPositions;
     private isValidMouseEvent;
     private isValidTouchEvent;
+    private get isFirefox();
     /**
      * @param v - Workaround to allow dragging over iframe, which is its own
      *  separate document and cannot listen for events from main document.
      */
     setIframePointerEvents(v: 'none' | 'auto'): void;
+    destroy(): void;
 }

package/cmp/grid/GridModel.ts

@@ -92,7 +92,8 @@ import {
     min,
     omit,
     pick,
-    pull
+    pull,
+    take
 } from 'lodash';
 import {ReactNode} from 'react';
 import {GridAutosizeOptions} from './GridAutosizeOptions';
@@ -552,7 +553,7 @@ export class GridModel extends HoistModel {
 
         this.xhImpl = xhImpl;
 
-        this._defaultState = {columns, sortBy, groupBy};
+        this._defaultState = {columns, sortBy, groupBy, expandLevel};
 
         this.treeMode = treeMode;
         this.treeStyle = treeStyle;
@@ -679,10 +680,11 @@ export class GridModel extends HoistModel {
             if (!confirmed) return false;
         }
 
-        const {columns, sortBy, groupBy, filter} = this._defaultState;
+        const {columns, sortBy, groupBy, filter, expandLevel} = this._defaultState;
         this.setColumns(columns);
         this.setSortBy(sortBy);
         this.setGroupBy(groupBy);
+        this.expandToLevel(expandLevel);
 
         this.filterModel?.setFilter(filter);
 
@@ -1043,6 +1045,19 @@ export class GridModel extends HoistModel {
         this.expandLevel = level;
     }
 
+    /**
+     * Get the resolved level labels for the current state of the grid.
+     */
+    get resolvedLevelLabels(): string[] {
+        const {maxDepth, levelLabels} = this,
+            ret = executeIfFunction(levelLabels);
+        if (ret && ret.length < maxDepth + 1) {
+            this.logError('Value produced by `GridModel.levelLabels` has insufficient length.');
+            return null;
+        }
+        return ret ? take(ret, maxDepth + 1) : null;
+    }
+
     /**
      * Sort this grid.
      * This method is a no-op if provided any sorters without a corresponding column.

package/cmp/grid/impl/MenuSupport.ts

@@ -9,7 +9,6 @@ import {Column, GridModel} from '@xh/hoist/cmp/grid';
 import {RecordAction, Store, StoreRecord} from '@xh/hoist/data';
 import {convertIconToHtml, Icon} from '@xh/hoist/icon';
 import {filterConsecutiveMenuSeparators} from '@xh/hoist/utils/impl';
-import {executeIfFunction} from '@xh/hoist/utils/js';
 import copy from 'clipboard-copy';
 import {isEmpty, isFunction, isNil, isString, uniq} from 'lodash';
 import {isValidElement} from 'react';
@@ -282,26 +281,15 @@ function levelExpandAction(gridModel: GridModel): RecordAction {
     return new RecordAction({
         text: 'Expand to ...',
         displayFn: () => {
-            // Don't show for degenerate shallow grid models, or if we don't have labels
-            const {maxDepth, expandLevel} = gridModel;
-            if (maxDepth <= 1) return {hidden: true};
+            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
 
-            // Validate level labels.
-            const levelLabels = executeIfFunction(gridModel.levelLabels);
-            if (!levelLabels) {
-                return {hidden: true};
-            }
-            if (levelLabels.length < maxDepth + 1) {
-                gridModel.logDebug(
-                    'Value produced by `GridModel.levelLabels` has insufficient length. No menu items shown.'
-                );
-                return {hidden: true};
-            }
+            // Don't show for flat grid models or if we don't have labels
+            if (!maxDepth || !resolvedLevelLabels) return {hidden: true};
 
-            const items = levelLabels.map((label, idx) => {
+            const items = resolvedLevelLabels.map((label, idx) => {
                 const isCurrLevel =
                     expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === levelLabels.length - 1);
+                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : null,

package/desktop/cmp/button/grid/ExpandToLevelButton.ts

@@ -11,7 +11,7 @@ import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {menu, popover, Position} from '@xh/hoist/kit/blueprint';
 import {parseMenuItems} from '@xh/hoist/utils/impl';
-import {executeIfFunction, logDebug, logError, withDefault} from '@xh/hoist/utils/js';
+import {logError, withDefault} from '@xh/hoist/utils/js';
 import {ReactNode} from 'react';
 import {button, ButtonProps} from '../Button';
 
@@ -52,25 +52,14 @@ export const [ExpandToLevelButton, expandToLevelButton] =
                 return disabledButton();
             }
 
-            // Render a disabled button if requested or if we have a flat grid.
-            const {maxDepth, expandLevel} = gridModel;
-            if (disabled || !maxDepth) return disabledButton();
+            // Render a disabled button if requested, if we have a flat grid, or no level labels
+            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            if (disabled || !maxDepth || !resolvedLevelLabels) return disabledButton();
 
-            // Validate level labels - disable quietly if unspecified or w/log if mismatched to grid depth.
-            const levelLabels = executeIfFunction(gridModel.levelLabels);
-            if (!levelLabels) return disabledButton();
-            if (levelLabels.length < maxDepth + 1) {
-                logDebug(
-                    'Value produced by `GridModel.levelLabels` has insufficient length - button will be disabled.',
-                    ExpandToLevelButton
-                );
-                return disabledButton();
-            }
-
-            const menuItems: MenuItemLike[] = levelLabels.map((label, idx) => {
+            const menuItems: MenuItemLike[] = resolvedLevelLabels.map((label, idx) => {
                 const isCurrLevel =
                     expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === levelLabels.length - 1);
+                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : Icon.placeholder(),

package/desktop/cmp/panel/impl/dragger/DraggerModel.ts

@@ -30,25 +30,34 @@ export class DraggerModel extends HoistModel {
     override onLinked() {
         this.throttledSetSize = throttle(size => (this.panelModel.size = size), 50);
 
-        // Add listeners to el to ensure we can get non-passive handlers than can preventDefault()
+        // maintain listeners on el to ensure we can get non-passive handlers than can preventDefault()
         // React synthetic touch events on certain browsers (e.g. airwatch) don't yield that
         this.addReaction({
             track: () => this.ref.current,
-            run: current => {
-                if (current) this.addListeners(current);
+            run: (current, old) => {
+                this.toggleListeners(old, false);
+                this.toggleListeners(current, true);
             }
         });
     }
 
-    private addListeners(el) {
+    private toggleListeners(el, add: boolean) {
+        if (!el) return;
+        const fn = (element, event, handler, options = undefined) => {
+            add
+                ? element.addEventListener(event, handler, options)
+                : element.removeEventListener(event, handler, options);
+        };
         if (XH.isDesktop) {
-            el.addEventListener('dragstart', this.onDragStart);
-            el.addEventListener('drag', this.onDrag);
-            el.addEventListener('dragend', this.onDragEnd);
+            fn(el, 'dragstart', this.onDragStart);
+            fn(el, 'dragend', this.onDragEnd);
+            this.isFirefox // drag co-ordinates not impl in firefox -- use 'dragover' on doc
+                ? fn(document, `dragover`, this.onDrag)
+                : fn(el, 'drag', this.onDrag);
         } else {
-            el.addEventListener('touchstart', this.onDragStart);
-            el.addEventListener('touchmove', this.onDrag, {passive: false});
-            el.addEventListener('touchend', this.onDragEnd);
+            fn(el, 'touchstart', this.onDragStart);
+            fn(el, 'touchmove', this.onDrag, {passive: false});
+            fn(el, 'touchend', this.onDragEnd);
         }
     }
 
@@ -263,6 +272,10 @@ export class DraggerModel extends HoistModel {
         return e.touches && e.touches.length > 0;
     }
 
+    private get isFirefox(): boolean {
+        return navigator.userAgent.toLowerCase().includes('firefox');
+    }
+
     /**
      * @param v - Workaround to allow dragging over iframe, which is its own
      *  separate document and cannot listen for events from main document.
@@ -272,4 +285,9 @@ export class DraggerModel extends HoistModel {
             el.style['pointer-events'] = v;
         }
     }
+
+    override destroy() {
+        this.toggleListeners(this.ref.current, false);
+        super.destroy();
+    }
 }

package/mobile/cmp/button/grid/ExpandToLevelButton.ts

@@ -8,7 +8,7 @@ import {GridModel} from '@xh/hoist/cmp/grid';
 import {hoistCmp, MenuItemLike, useContextModel} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import '@xh/hoist/mobile/register';
-import {executeIfFunction, logDebug, logError, withDefault} from '@xh/hoist/utils/js';
+import {logError, withDefault} from '@xh/hoist/utils/js';
 import {menuButton, MenuButtonProps} from '../../menu';
 
 export interface ExpandToLevelButtonProps extends MenuButtonProps {
@@ -29,7 +29,7 @@ export const [ExpandToLevelButton, expandToLevelButton] =
         className: 'xh-expand-to-level-button',
         model: false,
 
-        render({gridModel, className, icon, ...rest}) {
+        render({gridModel, className, icon, disabled, ...rest}) {
             gridModel = withDefault(gridModel, useContextModel(GridModel));
             icon = withDefault(icon, Icon.treeList());
 
@@ -50,28 +50,14 @@ export const [ExpandToLevelButton, expandToLevelButton] =
                 return disabledButton();
             }
 
-            // Disable for flat grids. Still show for grids with a single grouping level, although
-            // in this case we're effectively a less efficient way to expand/collapse all.
-            const {maxDepth, expandLevel} = gridModel;
-            if (!maxDepth) return disabledButton();
+            // Render a disabled button if requested or if we have a flat grid, or no level labels
+            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            if (disabled || !maxDepth || !resolvedLevelLabels) return disabledButton();
 
-            // Validate level labels - disable if unspecified or mismatched to grid depth.
-            const levelLabels = executeIfFunction(gridModel.levelLabels);
-            if (!levelLabels) {
-                return disabledButton();
-            }
-            if (levelLabels.length < maxDepth + 1) {
-                logDebug(
-                    'Value produced by `GridModel.levelLabels` has insufficient length. No menu items shown.',
-                    ExpandToLevelButton
-                );
-                return disabledButton();
-            }
-
-            const menuItems: MenuItemLike[] = levelLabels.map((label, idx) => {
+            const menuItems: MenuItemLike[] = resolvedLevelLabels.map((label, idx) => {
                 const isCurrLevel =
                     expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === levelLabels.length - 1);
+                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : Icon.placeholder(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "75.0.0-SNAPSHOT.1753376908830",
+  "version": "75.0.0-SNAPSHOT.1753458616250",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",