@xh/hoist 66.0.2 → 66.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 66.1.0 - 2024-07-31
+
+### 🎁 New Features
+
+* Enhanced `markdown` component to support the underlying `components` prop from `react-markdown`.
+  Use this prop to customize markdown rendering.
+* New `mergeDeep` method provided in `@xh/hoist/utils/js` as an alternative to `lodash.merge`,
+  without lodash's surprising deep-merging of array-based properties.
+* Enhanced Roles Admin UI to support bulk category reassignment.
+
+### 🐞 Bug Fixes
+
+* Fixed `Record.descendants` and `Record.allDescendants` getters that were incorrectly returning the
+  parent record itself. Now only the descendants are returned, as expected.
+* Fixed `Grid` regression where pinned columns were automatically un-pinned when the viewport became
+  too small to accommodate them.
+* Fixed bug where `Grid` context-menus would lose focus when rendered inside `Overlay` components.
+
+### ⚙️ Technical
+
+* Enhanced beta `MsalClient` and `AuthZeroClient` OAuth implementations to support passing
+  app-specific configs directly into the constructors of their underlying client implementation.
+
 ## 66.0.2 - 2024-07-17
 
 ### 🐞 Bug Fixes

package/admin/regroup/RegroupDialog.ts

@@ -7,10 +7,10 @@
 import {filler} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
+import {select} from '@xh/hoist/desktop/cmp/input';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
-import {select} from '@xh/hoist/desktop/cmp/input';
 
 import {RegroupDialogModel} from './RegroupDialogModel';
 
@@ -23,7 +23,7 @@ export const regroupDialog = hoistCmp.factory({
 
         return dialog({
             title: 'Change Group',
-            icon: Icon.grip(),
+            icon: Icon.folder(),
             style: {width: 300},
             isOpen: true,
             isCloseButtonShown: false,

package/admin/regroup/RegroupDialogModel.ts

@@ -4,38 +4,38 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {uniq} from 'lodash';
 import {HoistModel, XH} from '@xh/hoist/core';
-import {action, bindable, observable, makeObservable} from '@xh/hoist/mobx';
 import {Icon} from '@xh/hoist/icon/Icon';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
+import {uniq} from 'lodash';
 
 export class RegroupDialogModel extends HoistModel {
-    _parent;
+    private parent;
 
     @bindable groupName = null;
     @observable isOpen = false;
 
     regroupAction = {
         text: 'Change Group',
-        icon: Icon.grip(),
+        icon: Icon.folder(),
         recordsRequired: true,
         actionFn: () => this.open(),
-        displayFn: () => ({hidden: this._parent.gridModel.readonly})
+        displayFn: () => ({hidden: this.parent.gridModel.readonly})
     };
 
     get options() {
-        return uniq(this._parent.gridModel.store.allRecords.map(it => it.data.groupName)).sort();
+        return uniq(this.parent.gridModel.store.allRecords.map(it => it.data.groupName)).sort();
     }
 
     constructor(parent) {
         super();
         makeObservable(this);
-        this._parent = parent;
+        this.parent = parent;
     }
 
     async saveAsync() {
-        const {_parent, groupName} = this,
-            {selectedRecords, store} = _parent.gridModel,
+        const {parent, groupName} = this,
+            {selectedRecords, store} = parent.gridModel,
             ids = selectedRecords.map(it => it.id),
             resp = await store.bulkUpdateRecordsAsync(ids, {groupName}),
             failuresPresent = resp.fail > 0,

package/admin/tabs/userData/roles/RoleModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {RecategorizeDialogModel} from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {GridModel, tagsRenderer, TreeStyle} from '@xh/hoist/cmp/grid';
 import * as Col from '@xh/hoist/cmp/grid/columns';
@@ -34,6 +35,7 @@ export class RoleModel extends HoistModel {
     @managed gridModel: GridModel;
     @managed filterChooserModel: FilterChooserModel;
     @managed readonly roleEditorModel = new RoleEditorModel(this);
+    @managed recategorizeDialogModel = new RecategorizeDialogModel(this);
 
     @observable.ref allRoles: HoistRole[] = [];
     @observable.ref moduleConfig: RoleModuleConfig;
@@ -75,7 +77,9 @@ export class RoleModel extends HoistModel {
             const {data} = await XH.fetchJson({url: 'roleAdmin/list', loadSpec});
             if (loadSpec.isStale) return;
 
-            runInAction(() => (this.allRoles = this.processRolesFromServer(data)));
+            runInAction(() => {
+                this.allRoles = this.processRolesFromServer(data);
+            });
             this.displayRoles();
             await this.gridModel.preSelectFirstAsync();
         } catch (e) {
@@ -158,7 +162,7 @@ export class RoleModel extends HoistModel {
                 disabled: !record || record.data.isGroupRow
             }),
             actionFn: ({record}) => this.editAsync(record.data as HoistRole),
-            recordsRequired: true
+            recordsRequired: 1
         };
     }
 
@@ -170,7 +174,7 @@ export class RoleModel extends HoistModel {
                 disabled: !record || record.data.isGroupRow
             }),
             actionFn: ({record}) => this.createAsync(record.data as HoistRole),
-            recordsRequired: true
+            recordsRequired: 1
         };
     }
 
@@ -186,7 +190,7 @@ export class RoleModel extends HoistModel {
                 this.deleteAsync(record.data as HoistRole)
                     .catchDefault()
                     .linkTo(this.loadModel),
-            recordsRequired: true
+            recordsRequired: 1
         };
     }
 
@@ -269,6 +273,7 @@ export class RoleModel extends HoistModel {
             treeMode: true,
             treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
             autosizeOptions: {mode: 'managed'},
+            selModel: 'multiple',
             emptyText: 'No roles found.',
             colChooserModel: true,
             sortBy: 'name',
@@ -334,17 +339,7 @@ export class RoleModel extends HoistModel {
                 {field: {name: 'lastUpdatedBy', type: 'string'}, hidden: true},
                 {field: {name: 'notes', type: 'string'}, filterable: false, flex: 1}
             ],
-            contextMenu: this.readonly
-                ? [this.groupByAction(), ...GridModel.defaultContextMenu]
-                : [
-                      this.addAction(),
-                      this.editAction(),
-                      this.cloneAction(),
-                      this.deleteAction(),
-                      '-',
-                      this.groupByAction(),
-                      ...GridModel.defaultContextMenu
-                  ],
+            contextMenu: () => this.getContextMenuItems(),
             onRowDoubleClicked: ({data: record}) => {
                 if (record && !record.data.isGroupRow) {
                     this.editAsync(record.data as HoistRole);
@@ -353,6 +348,21 @@ export class RoleModel extends HoistModel {
         });
     }
 
+    private getContextMenuItems() {
+        return this.readonly
+            ? [this.groupByAction(), ...GridModel.defaultContextMenu]
+            : [
+                  this.addAction(),
+                  this.editAction(),
+                  this.cloneAction(),
+                  this.deleteAction(),
+                  this.recategorizeDialogModel.recategorizeAction(),
+                  '-',
+                  this.groupByAction(),
+                  ...GridModel.defaultContextMenu
+              ];
+    }
+
     private createFilterChooserModel(): FilterChooserModel {
         const config = this.moduleConfig;
         return new FilterChooserModel({

package/admin/tabs/userData/roles/RolePanel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {recategorizeDialog} from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialog';
 import {grid} from '@xh/hoist/cmp/grid';
 import {fragment, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
@@ -48,7 +49,8 @@ export const rolePanel = hoistCmp.factory({
                 ],
                 item: hframe(vframe(grid(), roleGraph()), detailsPanel())
             }),
-            roleEditor()
+            roleEditor(),
+            recategorizeDialog()
         );
     }
 });

package/admin/tabs/userData/roles/recategorize/RecategorizeDialog.ts

@@ -0,0 +1,59 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {RecategorizeDialogModel} from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel';
+import {filler} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {select} from '@xh/hoist/desktop/cmp/input';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {Icon} from '@xh/hoist/icon';
+import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
+
+export const recategorizeDialog = hoistCmp.factory({
+    model: uses(RecategorizeDialogModel),
+
+    render({model}) {
+        const {isOpen} = model;
+        if (!isOpen) return null;
+
+        return dialog({
+            title: `Change Category (${model.selectedRecords.length} roles)`,
+            icon: Icon.folder(),
+            style: {width: 300},
+            isOpen: true,
+            isCloseButtonShown: false,
+            items: [
+                dialogBody(
+                    select({
+                        bind: 'categoryName',
+                        enableCreate: true,
+                        options: model.options,
+                        width: 260
+                    })
+                ),
+                tbar()
+            ]
+        });
+    }
+});
+
+const tbar = hoistCmp.factory<RecategorizeDialogModel>(({model}) => {
+    return toolbar(
+        filler(),
+        button({
+            text: 'Cancel',
+            onClick: () => model.close()
+        }),
+        button({
+            text: 'Save',
+            icon: Icon.check(),
+            intent: 'success',
+            disabled: model.categoryName == null,
+            onClick: () => model.saveAsync()
+        })
+    );
+});

package/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel.ts

@@ -0,0 +1,83 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {RoleModel} from '@xh/hoist/admin/tabs/userData/roles/RoleModel';
+import {HoistModel, XH} from '@xh/hoist/core';
+import {StoreRecord} from '@xh/hoist/data';
+import {Icon} from '@xh/hoist/icon/Icon';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
+import {compact, every, filter, map, uniq} from 'lodash';
+
+export class RecategorizeDialogModel extends HoistModel {
+    private parent: RoleModel;
+    selectedRecords: StoreRecord[];
+
+    @bindable categoryName = null;
+    @observable isOpen = false;
+
+    recategorizeAction() {
+        return {
+            text: 'Change Category',
+            icon: Icon.folder(),
+            recordsRequired: true,
+            actionFn: ({selectedRecords}) => this.open(selectedRecords),
+            displayFn: ({selectedRecords}) => {
+                return {
+                    hidden: this.parent.readonly,
+                    disabled: every(selectedRecords, it => it.data?.isGroupRow)
+                };
+            }
+        };
+    }
+
+    get options() {
+        return [
+            ...compact(uniq(this.parent.allRoles.map(it => it.category))).sort(),
+            {value: '_CLEAR_ROLES_', label: '[Clear Existing Category]'}
+        ];
+    }
+
+    constructor(parent) {
+        super();
+        makeObservable(this);
+        this.parent = parent;
+    }
+
+    async saveAsync() {
+        if (this.parent.readonly) return;
+        const roleSpec = filter(
+            this.selectedRecords.map(it => it.data),
+            it => !it.isGroupRow
+        );
+        const roles: string[] = map(roleSpec, it => it.name);
+        await XH.fetchService
+            .postJson({
+                url: 'roleAdmin/bulkCategoryUpdate',
+                body: {
+                    roles,
+                    category: this.categoryName === '_CLEAR_ROLES_' ? null : this.categoryName
+                }
+            })
+            .catchDefault();
+        await this.parent.refreshAsync();
+        this.close();
+    }
+
+    //-----------------
+    // Actions
+    //-----------------
+    @action
+    close() {
+        this.categoryName = null;
+        this.isOpen = false;
+    }
+
+    @action
+    open(selectedRecords) {
+        this.selectedRecords = selectedRecords;
+        this.isOpen = true;
+    }
+}

package/appcontainer/RouterModel.ts

@@ -6,7 +6,7 @@
  */
 import {HoistModel} from '../core';
 import {action, observable, makeObservable} from '@xh/hoist/mobx';
-import {merge} from 'lodash';
+import {mergeDeep} from '@xh/hoist/utils/js';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {createRouter, Router, State} from 'router5';
 import browserPlugin from 'router5-plugin-browser';
@@ -51,7 +51,7 @@ export class RouterModel extends HoistModel {
      */
     appendRoute(routeName: string, newParams: object = {}) {
         const {name, params} = this.currentState;
-        return this.router.navigate(`${name}.${routeName}`, merge({}, params, newParams));
+        return this.router.navigate(`${name}.${routeName}`, mergeDeep({}, params, newParams));
     }
 
     /**

package/build/types/admin/regroup/RegroupDialogModel.d.ts

@@ -1,6 +1,6 @@
 import { HoistModel } from '@xh/hoist/core';
 export declare class RegroupDialogModel extends HoistModel {
-    _parent: any;
+    private parent;
     groupName: any;
     isOpen: boolean;
     regroupAction: {

package/build/types/admin/tabs/userData/roles/RoleModel.d.ts

@@ -1,3 +1,4 @@
+import { RecategorizeDialogModel } from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel';
 import { FilterChooserModel } from '@xh/hoist/cmp/filter';
 import { GridModel } from '@xh/hoist/cmp/grid';
 import { HoistModel, LoadSpec } from '@xh/hoist/core';
@@ -15,6 +16,7 @@ export declare class RoleModel extends HoistModel {
     gridModel: GridModel;
     filterChooserModel: FilterChooserModel;
     readonly roleEditorModel: RoleEditorModel;
+    recategorizeDialogModel: RecategorizeDialogModel;
     allRoles: HoistRole[];
     moduleConfig: RoleModuleConfig;
     showInGroups: boolean;
@@ -37,5 +39,6 @@ export declare class RoleModel extends HoistModel {
     private processRolesFromServer;
     private processRolesForTreeGrid;
     private createGridModel;
+    private getContextMenuItems;
     private createFilterChooserModel;
 }

package/build/types/admin/tabs/userData/roles/recategorize/RecategorizeDialog.d.ts

@@ -0,0 +1,2 @@
+import { RecategorizeDialogModel } from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel';
+export declare const recategorizeDialog: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<RecategorizeDialogModel>>;

package/build/types/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel.d.ts

@@ -0,0 +1,30 @@
+import { HoistModel } from '@xh/hoist/core';
+import { StoreRecord } from '@xh/hoist/data';
+export declare class RecategorizeDialogModel extends HoistModel {
+    private parent;
+    selectedRecords: StoreRecord[];
+    categoryName: any;
+    isOpen: boolean;
+    recategorizeAction(): {
+        text: string;
+        icon: any;
+        recordsRequired: boolean;
+        actionFn: ({ selectedRecords }: {
+            selectedRecords: any;
+        }) => void;
+        displayFn: ({ selectedRecords }: {
+            selectedRecords: any;
+        }) => {
+            hidden: boolean;
+            disabled: boolean;
+        };
+    };
+    get options(): (string | {
+        value: string;
+        label: string;
+    })[];
+    constructor(parent: any);
+    saveAsync(): Promise<void>;
+    close(): void;
+    open(selectedRecords: any): void;
+}

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

@@ -49,6 +49,7 @@ export declare class GridLocalModel extends HoistModel {
     /** @returns true if any root-level records have children */
     get isHierarchical(): boolean;
     get emptyText(): import("react").ReactNode;
+    constructor();
     onLinked(): void;
     private createDefaultAgOptions;
     getColumnDefs(): Array<ColDef | ColGroupDef>;
@@ -130,4 +131,11 @@ export declare class GridLocalModel extends HoistModel {
     onKeyDown: (evt: any) => void;
     onRowClicked: (evt: any) => void;
     onRowDoubleClicked: (evt: any) => void;
+    /**
+     * When a `Grid` context menu is open at the same time as a BP `Overlay2` with `enforceFocus`,
+     * the context menu will lose focus, causing menu items not to highlight on hover. Prevent this
+     * by conditionally stopping the focus event from propagating.
+     */
+    private static didAddFocusFixListener;
+    static addFocusFixListener(): void;
 }

package/build/types/cmp/markdown/Markdown.d.ts

@@ -1,8 +1,15 @@
 /// <reference types="react" />
 import { HoistProps } from '@xh/hoist/core';
+import { Components } from 'react-markdown';
 interface MarkdownProps extends HoistProps {
     /** Markdown formatted string to render. */
     content: string;
+    /**
+     * Map of html tag to tag or functional component to control rendering of standard html
+     * elements. See https://www.npmjs.com/package/react-markdown/v/8.0.6#appendix-b-components
+     * for details.
+     */
+    components?: Components;
     /** True (default) to render new lines with <br/> tags. */
     lineBreaks?: boolean;
 }

package/build/types/data/cube/row/LeafRow.d.ts

@@ -1,11 +1,20 @@
 import { PlainObject } from '@xh/hoist/core';
-import { StoreRecord } from '../../StoreRecord';
+import { StoreRecord, StoreRecordId } from '@xh/hoist/data';
 import { View } from '../View';
 import { BaseRow } from './BaseRow';
 /**
- * Object used to track leaf rows in a View
+ * Represents a leaf row returned by a {@link View} or call to {@link Cube.executeQuery}.
+ *
+ * These rows are 1-1 with the source records loaded into the Cube's internal store - i.e. they are
+ * not computed aggregates - although the data they contain is a shallow copy of the original and
+ * limited to the fields requested by the View / Query that produced them.
  */
 export declare class LeafRow extends BaseRow {
+    /**
+     * Id of the StoreRecord within the Cube that was used to construct this leaf row.
+     * Useful if you need to update this leaf's data via {@link Cube.updateDataAsync}.
+     */
+    readonly cubeRecordId: StoreRecordId;
     get isLeaf(): boolean;
     constructor(view: View, id: string, rawRecord: StoreRecord);
     applyLeafDataUpdate(newRec: StoreRecord, updatedRowDatas: Set<PlainObject>): void;

package/build/types/security/authzero/AuthZeroClient.d.ts

@@ -1,8 +1,15 @@
+import { Auth0ClientOptions } from '@auth0/auth0-spa-js';
 import { Token, TokenMap } from '@xh/hoist/security/Token';
 import { BaseOAuthClient, BaseOAuthClientConfig } from '../BaseOAuthClient';
 export interface AuthZeroClientConfig extends BaseOAuthClientConfig<AuthZeroTokenSpec> {
     /** Domain of your app registered with Auth0 */
     domain: string;
+    /**
+     * Additional options for the Auth0Client ctor. Will be deep merged with defaults, with options
+     * supplied here taking precedence. Use with care, as overriding defaults may have unintended
+     * consequences or fail to work with Hoist's expected usage of the client library.
+     */
+    authZeroClientOptions?: Partial<Auth0ClientOptions>;
 }
 export interface AuthZeroTokenSpec {
     /** Scopes for the desired access token.*/

package/build/types/security/msal/MsalClient.d.ts

@@ -1,3 +1,4 @@
+import * as msal from '@azure/msal-browser';
 import { LogLevel } from '@azure/msal-browser';
 import { Token, TokenMap } from '@xh/hoist/security/Token';
 import { BaseOAuthClient, BaseOAuthClientConfig } from '../BaseOAuthClient';
@@ -36,6 +37,12 @@ export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
     initRefreshTokenExpirationOffsetSecs?: number;
     /** The log level of MSAL. Default is LogLevel.Warning. */
     msalLogLevel?: LogLevel;
+    /**
+     * Additional options for the MSAL client ctor. Will be deep merged with defaults, with options
+     * supplied here taking precedence. Use with care, as overriding defaults may have unintended
+     * consequences or fail to work with Hoist's expected usage of the client library.
+     */
+    msalClientOptions?: Partial<msal.Configuration>;
 }
 export interface MsalTokenSpec {
     /** Scopes for the desired access token. */

package/build/types/utils/js/LangUtils.d.ts

@@ -121,3 +121,16 @@ export declare function intersperse<T>(arr: T[], separator: T): T[];
  * Return value passed or the result of executing it, if it is a function.
  */
 export declare function executeIfFunction<T>(v: Thunkable<T>): T;
+/**
+ * Merge objects deeply.
+ *
+ * Use this for merging properties from various sources into a target object.
+ * The target value will be mutated and returned.
+ *
+ * Note that this method has the same semantics as Lodash merge, with the important exception
+ * that properties containing arrays will *not* be merged deeply.
+ */
+export declare function mergeDeep<T, S>(object: T, source: S): T & S;
+export declare function mergeDeep<T, S1, S2>(object: T, source1: S1, source2: S2): T & S1 & S2;
+export declare function mergeDeep<T, S1, S2, S3>(object: T, source1: S1, source2: S2, source3: S3): T & S1 & S2 & S3;
+export declare function mergeDeep<T, S>(target: T, ...sources: S[]): T & S;

package/cmp/badge/Badge.ts

@@ -6,10 +6,9 @@
  */
 import {div} from '@xh/hoist/cmp/layout';
 import {BoxProps, hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
-import {TEST_ID} from '@xh/hoist/utils/js';
+import {TEST_ID, mergeDeep} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {merge} from 'lodash';
 import './Badge.scss';
 
 export interface BadgeProps extends HoistProps, BoxProps {
@@ -42,7 +41,7 @@ export const [Badge, badge] = hoistCmp.withFactory<BadgeProps>({
             classes.push('xh-badge--compact');
         }
 
-        const divProps = merge(
+        const divProps = mergeDeep(
             {className: classNames(className, classes)},
             {style: layoutProps},
             {[TEST_ID]: testId},

package/cmp/chart/Chart.ts

@@ -22,14 +22,14 @@ import {useContextMenu} from '@xh/hoist/dynamics/desktop';
 import {Icon} from '@xh/hoist/icon';
 import {Highcharts} from '@xh/hoist/kit/highcharts';
 import {runInAction} from '@xh/hoist/mobx';
-import {logError} from '@xh/hoist/utils/js';
+import {logError, mergeDeep} from '@xh/hoist/utils/js';
 import {
     createObservableRef,
     getLayoutProps,
     useOnResize,
     useOnVisibleChange
 } from '@xh/hoist/utils/react';
-import {assign, castArray, cloneDeep, forOwn, isEqual, isPlainObject, merge, omit} from 'lodash';
+import {assign, castArray, cloneDeep, forOwn, isEqual, isPlainObject, omit} from 'lodash';
 import {placeholder} from '../layout';
 import './Chart.scss';
 import {ChartModel} from './ChartModel';
@@ -252,7 +252,7 @@ class ChartLocalModel extends HoistModel {
             defaultConf = this.getDefaultConfig();
 
         this.mergeAxisConfigs(themeConf, propsConf);
-        return merge(defaultConf, themeConf, propsConf);
+        return mergeDeep(defaultConf, themeConf, propsConf);
     }
 
     getDefaultConfig() {
@@ -336,7 +336,7 @@ class ChartLocalModel extends HoistModel {
                 arr = castArray(conf[axis] || {}),
                 defaultAxisConfig = this.getDefaultAxisConfig(axis);
 
-            conf[axis] = arr.map(it => merge({}, defaultAxisConfig, theme[axis], it));
+            conf[axis] = arr.map(it => mergeDeep({}, defaultAxisConfig, theme[axis], it));
             theme[axis] = null;
         });
     }

package/cmp/chart/ChartModel.ts

@@ -6,7 +6,8 @@
  */
 import {HoistModel, PlainObject, Some} from '@xh/hoist/core';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, cloneDeep, merge} from 'lodash';
+import {castArray, cloneDeep} from 'lodash';
+import {mergeDeep} from '@xh/hoist/utils/js';
 
 interface ChartConfig {
     /** The initial highchartsConfig for this chart. */
@@ -81,7 +82,7 @@ export class ChartModel extends HoistModel {
      */
     @action
     updateHighchartsConfig(update: any) {
-        this.highchartsConfig = merge(cloneDeep(this.highchartsConfig), update);
+        this.highchartsConfig = mergeDeep(cloneDeep(this.highchartsConfig), update);
     }
 
     /** @param series - one or more data series to be charted. */

package/cmp/chart/impl/copyToClipboard.ts

@@ -5,7 +5,6 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {XH} from '@xh/hoist/core';
-import {merge} from 'lodash';
 
 /**
  * Copy the chart in it's current state to the clipboard.
@@ -45,7 +44,7 @@ export function installCopyToClipboard(Highcharts) {
 async function convertChartToPngAsync(chart) {
     const svg = await new Promise((resolve, reject) =>
             chart.getSVGForLocalExport(
-                merge(chart.options.exporting),
+                chart.options.exporting,
                 {},
                 () => reject('Cannot fallback to export server'),
                 svg => resolve(svg)