@xh/hoist 66.0.0 → 66.0.2

package/CHANGELOG.md

@@ -1,19 +1,38 @@
 # Changelog
 
+## 66.0.2 - 2024-07-17
+
+### 🐞 Bug Fixes
+
+* Improved redirect handling within beta `MsalClient` to use Hoist-provided blank URL (an empty,
+  static page) for all iFrame-based "silent" token requests, as per MS recommendations. Intended to
+  avoid potential race conditions triggered by redirecting to the base app URL in these cases.
+* Fixed bug where `ContextMenu` items could be improperly positioned.
+    * ⚠️Note that `MenuItems` inside a desktop `ContextMenu` are now rendered in a portal, outside
+      the normal component hierarchy, to ensures that menu items are positioned properly relative to
+      their parent. It should not affect most apps, but could impact menu style customizations that
+      rely on specific CSS selectors targeting the previous DOM structure.
+
+## 66.0.1 - 2024-07-10
+
+### 🐞 Bug Fixes
+
+* Fixed bug where inline grid edit of `NumberInput` was lost after quick navigation.
+
 ## 66.0.0 - 2024-07-09
 
-### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - minor adjustments to client-side auth)
+### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - minor adjustments to client-side auth)
 
 * New `HoistAuthModel` exposes the client-side authentication lifecycle via a newly consolidated,
   overridable API. This new API provides more easy customization of auth across all client-side
   apps by being easily overrideable and specified via the `AppSpec` passed to `XH.renderApp()`.
-    * In most cases, upgrading should be a simple matter of moving code
-      from `HoistAppModel.preAuthInitAsync()` and `logoutAsync()` (both removed) to new overrides
-      of `HoistAuthModel.completeAuthAsync()` and `logoutAsync()`.
+    * In most cases, upgrading should be a simple matter of moving code from `HoistAppModel` methods
+      `preAuthInitAsync()` and `logoutAsync()` (removed by this change) to new `HoistAuthModel`
+      methods `completeAuthAsync()` and `logoutAsync()`.
 
 ### 🎁 New Features
 
-* New option for `XH.reloadApp` to reload specific app path.
+* Added option to `XH.reloadApp()` to reload specific app path.
 * Added `headerTooltip` prop to `ColumnGroup`.
 
 ### 🐞 Bug Fixes
@@ -23,7 +42,7 @@
   an unexpected gap across the bottom of the screen. Includes fallback for secure client browsers
   that don't support dynamic viewport units.
 * Updated mobile `TabContainer` to flex properly within flexbox containers.
-* Fixed timing issue with missing validation for records added immediately to new store.
+* Fixed timing issue with missing validation for records added immediately to a new `Store`.
 * Fixed CSS bug in which date picker dates wrapped when `dateEditor` used in a grid in a dialog.
 
 ## 65.0.0 - 2024-06-26
@@ -269,13 +288,24 @@ details.
 There are some common breaking changes that most/many apps will need to address:
 
 * CSS rules with the `bp4-` prefix should be updated to use the `bp5-` prefix.
-* For `popover` and `tooltip` components, replace `target` with `item` if using elementFactory.
-  If using JSX, replace `target` prop with a child element. Also applies to the mobile `popover`.
-* Popovers no longer have a popover-wrapper element - remove/replace any CSS rules
-  targeting `bp4-popover-wrapper`.
-* All components which render popovers now depend
-  on [`popper.js v2.x`](https://popper.js.org/docs/v2/). Complex customizations to popovers may
-  need to be reworked.
+* Popovers
+    * For `popover` and `tooltip` components, replace `target` with `item` if using elementFactory.
+      If using JSX, replace `target` prop with a child element. Also applies to the
+      mobile `popover`.
+    * Popovers no longer have a popover-wrapper element - remove/replace any CSS rules
+      targeting `bp4-popover-wrapper`.
+    * All components which render popovers now depend
+      on [`popper.js v2.x`](https://popper.js.org/docs/v2/). Complex customizations to popovers may
+      need to be reworked.
+    * A breaking change to `Popover` in BP5 was splitting the `boundary` prop into `rootBoundary`
+      and `boundary`:
+      Popovers were frequently set up with `boundary: 'viewport'`, which is no longer valid since
+      "viewport" can be assigned to the `rootBoundary` but not to the `boundary`.
+      However, viewport is the DEFAULT value for `rootBoundary`
+      per [popper.js docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary),
+      so `boundary: 'viewport'` should be safe to remove entirely.
+        * [see Blueprint's Popover2 migration guide](https://github.com/palantir/blueprint/wiki/Popover2-migration)
+        * [see Popover2's `boundary` & `rootBoundary` docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary)
 * Where applicable, the former `elementRef` prop has been replaced by the simpler, more
   straightforward `ref` prop using `React.forwardRef()` - e.g. Hoist's `button.elementRef` prop
   becomes just `ref`. Review your app for uses of `elementRef`.

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

@@ -17,7 +17,7 @@ import {wait} from '@xh/hoist/promise';
 import {compact, groupBy, mapValues} from 'lodash';
 import moment from 'moment/moment';
 import {RoleEditorModel} from './editor/RoleEditorModel';
-import {HoistRole, RoleMemberType, RoleModuleConfig} from './Types';
+import {HoistRole, RoleModuleConfig} from './Types';
 
 export class RoleModel extends HoistModel {
     static PERSIST_WITH = {localStorageKey: 'xhAdminRolesState'};
@@ -100,7 +100,26 @@ export class RoleModel extends HoistModel {
         this.gridModel.clear();
     }
 
+    async createAsync(roleSpec?: HoistRole): Promise<void> {
+        if (this.readonly) return;
+
+        const addedRole = await this.roleEditorModel.createAsync(roleSpec);
+        if (!addedRole) return;
+        await this.refreshAsync();
+        await this.gridModel.selectAsync(addedRole.name);
+    }
+
+    async editAsync(role: HoistRole): Promise<void> {
+        if (this.readonly) return;
+
+        const updatedRole = await this.roleEditorModel.editAsync(role);
+        if (!updatedRole) return;
+        await this.refreshAsync();
+    }
+
     async deleteAsync(role: HoistRole): Promise<boolean> {
+        if (this.readonly) return false;
+
         const confirm = await XH.confirm({
             icon: Icon.warning(),
             title: 'Confirm delete?',
@@ -108,17 +127,18 @@ export class RoleModel extends HoistModel {
             confirmProps: {intent: 'danger', text: 'Confirm Delete'}
         });
         if (!confirm) return false;
+
         await XH.fetchJson({
             url: `roleAdmin/delete/${role.name}`,
             method: 'DELETE'
         });
-        this.refreshAsync();
+        await this.refreshAsync();
         return true;
     }
 
-    // -------------------------------
+    //------------------
     // Actions
-    // -------------------------------
+    //------------------
     addAction(): RecordActionSpec {
         return {
             text: 'Add',
@@ -142,7 +162,7 @@ export class RoleModel extends HoistModel {
         };
     }
 
-    cloneAction(): RecordActionSpec {
+    private cloneAction(): RecordActionSpec {
         return {
             text: 'Clone',
             icon: Icon.copy(),
@@ -154,7 +174,7 @@ export class RoleModel extends HoistModel {
         };
     }
 
-    deleteAction(): RecordActionSpec {
+    private deleteAction(): RecordActionSpec {
         return {
             text: 'Delete',
             icon: Icon.delete(),
@@ -181,16 +201,10 @@ export class RoleModel extends HoistModel {
             }
         };
     }
-    async editAsync(role: HoistRole): Promise<void> {
-        const updatedRole = await this.roleEditorModel.editAsync(role);
-        if (!updatedRole) return;
-        await this.refreshAsync();
-    }
 
-    // -------------------------------
+    //------------------
     // Implementation
-    // -------------------------------
-
+    //------------------
     private displayRoles() {
         const {gridModel} = this,
             gridData = this.showInGroups
@@ -250,13 +264,6 @@ export class RoleModel extends HoistModel {
         return root;
     }
 
-    private async createAsync(roleSpec?: HoistRole): Promise<void> {
-        const addedRole = await this.roleEditorModel.createAsync(roleSpec);
-        if (!addedRole) return;
-        await this.refreshAsync();
-        await this.gridModel.selectAsync(addedRole.name);
-    }
-
     private createGridModel(): GridModel {
         return new GridModel({
             treeMode: true,
@@ -272,13 +279,6 @@ export class RoleModel extends HoistModel {
                 'xh-grid-clear-background-color': ({data}) => !data.data.isGroupRow
             },
             headerMenuDisplay: 'hover',
-            onRowDoubleClicked: ({data: record}) => {
-                if (!this.readonly && record && record.data.isGroupRow) {
-                    this.roleEditorModel
-                        .editAsync(record.data)
-                        .then(role => role && this.refreshAsync());
-                }
-            },
             persistWith: {...this.persistWith, path: 'mainGrid'},
             store: {
                 idSpec: ({id, name}) => {
@@ -344,7 +344,12 @@ export class RoleModel extends HoistModel {
                       '-',
                       this.groupByAction(),
                       ...GridModel.defaultContextMenu
-                  ]
+                  ],
+            onRowDoubleClicked: ({data: record}) => {
+                if (record && !record.data.isGroupRow) {
+                    this.editAsync(record.data as HoistRole);
+                }
+            }
         });
     }
 
@@ -384,15 +389,4 @@ export class RoleModel extends HoistModel {
             persistWith: {...RoleModel.PERSIST_WITH, path: 'mainFilterChooser'}
         });
     }
-
-    private getFieldForMemberType(type: RoleMemberType, effective: boolean): string {
-        switch (type) {
-            case 'USER':
-                return effective ? 'effectiveUserNames' : 'users';
-            case 'DIRECTORY_GROUP':
-                return effective ? 'effectiveDirectoryGroupNames' : 'directoryGroups';
-            case 'ROLE':
-                return effective ? 'effectiveRoleNames' : 'roles';
-        }
-    }
 }

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

@@ -24,19 +24,18 @@ export declare class RoleModel extends HoistModel {
     doLoadAsync(loadSpec: LoadSpec): Promise<void>;
     selectRoleAsync(name: string): Promise<void>;
     clear(): void;
+    createAsync(roleSpec?: HoistRole): Promise<void>;
+    editAsync(role: HoistRole): Promise<void>;
     deleteAsync(role: HoistRole): Promise<boolean>;
     addAction(): RecordActionSpec;
     editAction(): RecordActionSpec;
-    cloneAction(): RecordActionSpec;
-    deleteAction(): RecordActionSpec;
+    private cloneAction;
+    private deleteAction;
     private groupByAction;
-    editAsync(role: HoistRole): Promise<void>;
     private displayRoles;
     private ensureInitializedAsync;
     private processRolesFromServer;
     private processRolesForTreeGrid;
-    private createAsync;
     private createGridModel;
     private createFilterChooserModel;
-    private getFieldForMemberType;
 }

package/build/types/desktop/cmp/contextmenu/ContextMenu.d.ts

@@ -2,7 +2,7 @@ import { HoistProps, MenuItemLike } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import { ReactElement } from 'react';
 /**
- * A context menu is specified as  an array of items, a function to generate one from a click, or
+ * A context menu is specified as an array of items, a function to generate one from a click, or
  * a full element representing a contextMenu Component.
  */
 export type ContextMenuSpec = MenuItemLike[] | ((e: MouseEvent) => MenuItemLike[]) | ReactElement;
@@ -10,12 +10,11 @@ export interface ContextMenuProps extends HoistProps {
     menuItems: MenuItemLike[];
 }
 /**
- * ContextMenu
+ * Component for a right-click context menu. Not typically used directly by applications - use
+ * the {@link useContextMenu} hook to add a context menu to an app component, or leverage Panel's
+ * built-in support via {@link PanelProps.contextMenu}.
  *
- * Not typically used directly by applications.  To add a Context Menu to an application
- * see ContextMenuHost, or the `contextMenu` prop on panel.
- *
- * See {@link GridContextMenu} to specify a context menu on Grid and DataView components.
+ * See {@link GridContextMenuSpec} to specify a context menu on `Grid` and `DataView` components.
  * That API will receive specific information about the current selection
  */
 export declare const ContextMenu: import("react").FC<ContextMenuProps>, contextMenu: import("@xh/hoist/core").ElementFactory<ContextMenuProps>;

package/build/types/desktop/cmp/panel/Panel.d.ts

@@ -16,7 +16,7 @@ export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'titl
     icon?: ReactElement;
     /** Icon to be used when the panel is collapsed. Defaults to `icon`. */
     collapsedIcon?: ReactElement;
-    /** Context Menu to show on context clicking this panel. */
+    /** Context menu to show on a right-click within this panel. */
     contextMenu?: ContextMenuSpec;
     /**
      * Specification of hotkeys as prescribed by blueprint.

package/build/types/desktop/hooks/UseContextMenu.d.ts

@@ -1,11 +1,11 @@
 import { ContextMenuSpec } from '@xh/hoist/desktop/cmp/contextmenu/ContextMenu';
 import { ReactElement } from 'react';
 /**
- * Hook to add context menu support to a component.
+ * Hook to add a right-click context menu to a component.
  *
- * @param child - element to be given context menu support. Must specify Component
- *      that takes react context menu event as a prop (e.g. boxes, panel, div, etc).
- * @param spec - Context Menu to be shown. If null, or the number of items is empty,
- *      no menu will be rendered, and the event will be consumed.
+ * @param child - element to be given context menu support. Must specify a component that takes
+ *      the React `onContextMenu` event as a prop (e.g. boxes, panel, div, etc.)
+ * @param spec - spec the menu to be shown. If null, or the number of items is empty, no menu will
+ *      be rendered and the event will be consumed.
  */
 export declare function useContextMenu(child?: ReactElement, spec?: ContextMenuSpec): ReactElement;

package/build/types/security/BaseOAuthClient.d.ts

@@ -5,13 +5,13 @@ export interface BaseOAuthClientConfig<S> {
     /** Client ID (GUID) of your app registered with your Oauth provider. */
     clientId: string;
     /**
-     * The redirect URL where authentication responses can be received by your application.
+     * Redirect URL where authentication responses can be received by your application.
      * It must exactly match one of the redirect URIs registered in the relevant OAuth authority.
      * Default is 'APP_BASE_URL' which will be replaced with the current app's base URL.
      */
     redirectUrl?: 'APP_BASE_URL' | string;
     /**
-     * The redirect URL after a successful logout.
+     * Redirect URL after a successful logout.
      * Default is 'APP_BASE_URL' which will be replaced with the current app's base URL.
      */
     postLogoutRedirectUrl?: 'APP_BASE_URL' | string;
@@ -72,7 +72,7 @@ export interface BaseOAuthClientConfig<S> {
 export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>, S> extends HoistBase {
     /** Config loaded from UI server + init method. */
     protected config: C;
-    /** Id Scopes */
+    /** ID Scopes */
     protected idScopes: string[];
     /** Specification for Access Tokens **/
     protected accessSpecs: Record<string, S>;
@@ -97,7 +97,7 @@ export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>
      */
     getIdTokenAsync(): Promise<Token>;
     /**
-     * Get a Access token.
+     * Get an Access token.
      */
     getAccessTokenAsync(key: string): Promise<Token>;
     /**
@@ -107,7 +107,7 @@ export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>
     /**
      * The last authenticated OAuth username.
      *
-     * Provided to facilitate more efficient re-login via SSO or otherwise.  Cleared on logout.
+     * Provided to facilitate more efficient re-login via SSO or otherwise. Cleared on logout.
      * Note: not necessarily a currently authenticated user, and not necessarily the Hoist username.
      */
     getSelectedUsername(): string;

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

@@ -2,14 +2,13 @@ import { LogLevel } from '@azure/msal-browser';
 import { Token, TokenMap } from '@xh/hoist/security/Token';
 import { BaseOAuthClient, BaseOAuthClientConfig } from '../BaseOAuthClient';
 export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
-    /** Tenant ID (GUID) of your organization */
-    tenantId: string;
     /**
-     * You can use a specific authority, like "https://login.microsoftonline.com/[tenantId]".
-     * Enterprise apps will most likely use a specific authority.
-     * MSAL Browser Lib defaults authority to "https://login.microsoftonline.com/common"
+     * Authority for your organization's tenant: `https://login.microsoftonline.com/[tenantId]`.
+     * MSAL defaults to their "common" tenant (https://login.microsoftonline.com/common") to support
+     * auth with personal MS accounts, but enterprise/Hoist apps will almost certainly use a
+     * specific authority to point to their own private/corporate tenant.
      */
-    authority?: string;
+    authority: string;
     /**
      * A hint about the tenant or domain that the user should use to sign in.
      * The value of the domain hint is a registered domain for the tenant.
@@ -63,10 +62,13 @@ export interface MsalTokenSpec {
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/token-lifetimes.md
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md
  *
- *  TODO: The handling of `ssoSilent` and `initRefreshTokenExpirationOffsetSecs` in this library
- * require 3rd party cookies to be enabled in the browser so that MSAL can load contact in a
- * hidden iFrame  If its *not* enabled, we may be doing extra work.  Consider checking 3rd party
- * cookie support and adding conditional behavior?
+ * Also see this doc re. use of blankUrl as redirectUri for all "silent" token requests:
+ * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/errors.md#issues-caused-by-the-redirecturi-page
+ *
+ * TODO: The handling of `ssoSilent` and `initRefreshTokenExpirationOffsetSecs` in this library
+ *   require 3rd party cookies to be enabled in the browser so that MSAL can load contact in a
+ *   hidden iFrame  If its *not* enabled, we may be doing extra work.  Consider checking 3rd party
+ *   cookie support and adding conditional behavior?
  */
 export declare class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec> {
     private client;

package/desktop/cmp/contextmenu/ContextMenu.ts

@@ -13,7 +13,7 @@ import {clone, isEmpty, isString} from 'lodash';
 import {isValidElement, ReactElement, ReactNode} from 'react';
 
 /**
- * A context menu is specified as  an array of items, a function to generate one from a click, or
+ * A context menu is specified as an array of items, a function to generate one from a click, or
  * a full element representing a contextMenu Component.
  */
 export type ContextMenuSpec = MenuItemLike[] | ((e: MouseEvent) => MenuItemLike[]) | ReactElement;
@@ -23,12 +23,11 @@ export interface ContextMenuProps extends HoistProps {
 }
 
 /**
- * ContextMenu
+ * Component for a right-click context menu. Not typically used directly by applications - use
+ * the {@link useContextMenu} hook to add a context menu to an app component, or leverage Panel's
+ * built-in support via {@link PanelProps.contextMenu}.
  *
- * Not typically used directly by applications.  To add a Context Menu to an application
- * see ContextMenuHost, or the `contextMenu` prop on panel.
- *
- * See {@link GridContextMenu} to specify a context menu on Grid and DataView components.
+ * See {@link GridContextMenuSpec} to specify a context menu on `Grid` and `DataView` components.
  * That API will receive specific information about the current selection
  */
 export const [ContextMenu, contextMenu] = hoistCmp.withFactory<ContextMenuProps>({
@@ -72,6 +71,7 @@ function parseItems(items: MenuItemLike[]): ReactNode[] {
                 intent: item.intent,
                 className: item.className,
                 onClick: item.actionFn ? () => wait().then(item.actionFn) : null, // do async to allow menu to close
+                popoverProps: {usePortal: true},
                 disabled: item.disabled,
                 items
             });

package/desktop/cmp/grid/editors/NumberEditor.ts

@@ -4,6 +4,8 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {withDefault} from '@xh/hoist/utils/js';
+import {isNil} from 'lodash';
 import {useCallback, useEffect} from 'react';
 import {CustomCellEditorProps, useGridCellEditor} from '@ag-grid-community/react';
 import {hoistCmp} from '@xh/hoist/core';
@@ -22,6 +24,16 @@ export const [NumberEditor, numberEditor] = hoistCmp.withFactory<NumberEditorPro
     observer: false,
     render(props, ref) {
         useNumberGuard(props.agParams);
+
+        // Make sure to override the NumberEditor debounce to 0 to prevent a bug where rapid changes are not saved.
+        if (isNil(props.inputProps)) props.inputProps = {};
+        // @ts-ignore
+        props.inputProps.commitOnChangeDebounce = withDefault(
+            // @ts-ignore
+            props.inputProps.commitOnChangeDebounce,
+            0
+        );
+
         return useInlineEditorModel(numberInput, props, ref);
     }
 });

package/desktop/cmp/input/NumberInput.ts

@@ -11,9 +11,9 @@ import '@xh/hoist/desktop/register';
 import {fmtNumber, parseNumber} from '@xh/hoist/format';
 import {numericInput} from '@xh/hoist/kit/blueprint';
 import {wait} from '@xh/hoist/promise';
-import {debounced, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
+import {TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
-import {isNaN, isNil, isNumber, round} from 'lodash';
+import {debounce, isNaN, isNil, isNumber, round} from 'lodash';
 import {KeyboardEventHandler, ReactElement, ReactNode, Ref, useLayoutEffect} from 'react';
 
 export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, HoistInputProps {
@@ -145,9 +145,12 @@ class NumberInputModel extends HoistInputModel {
         this.noteValueChange(valAsString);
     };
 
-    @debounced(250)
+    /** TODO: Completely remove the debounce, or find and verify a reason why we need it set to 250. */
     override doCommitOnChangeInternal() {
-        super.doCommitOnChangeInternal();
+        debounce(
+            () => super.doCommitOnChangeInternal(),
+            withDefault(this.componentProps.commitOnChangeDebounce, 250)
+        )();
     }
 
     override toInternal(val: number): number {

package/desktop/cmp/panel/Panel.ts

@@ -50,7 +50,7 @@ export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'titl
     /** Icon to be used when the panel is collapsed. Defaults to `icon`. */
     collapsedIcon?: ReactElement;
 
-    /** Context Menu to show on context clicking this panel. */
+    /** Context menu to show on a right-click within this panel. */
     contextMenu?: ContextMenuSpec;
 
     /**

package/desktop/hooks/UseContextMenu.ts

@@ -6,17 +6,17 @@
  */
 import {contextMenu, ContextMenuSpec} from '@xh/hoist/desktop/cmp/contextmenu/ContextMenu';
 import {showContextMenu} from '@xh/hoist/kit/blueprint';
-import {isArray, isFunction, isUndefined, isEmpty} from 'lodash';
-import {ReactElement} from 'react';
-import {cloneElement, isValidElement} from 'react';
+import {logError} from '@xh/hoist/utils/js';
+import {isArray, isEmpty, isFunction, isUndefined} from 'lodash';
+import {cloneElement, isValidElement, ReactElement} from 'react';
 
 /**
- * Hook to add context menu support to a component.
+ * Hook to add a right-click context menu to a component.
  *
- * @param child - element to be given context menu support. Must specify Component
- *      that takes react context menu event as a prop (e.g. boxes, panel, div, etc).
- * @param spec - Context Menu to be shown. If null, or the number of items is empty,
- *      no menu will be rendered, and the event will be consumed.
+ * @param child - element to be given context menu support. Must specify a component that takes
+ *      the React `onContextMenu` event as a prop (e.g. boxes, panel, div, etc.)
+ * @param spec - spec the menu to be shown. If null, or the number of items is empty, no menu will
+ *      be rendered and the event will be consumed.
  */
 export function useContextMenu(child?: ReactElement, spec?: ContextMenuSpec): ReactElement {
     if (!child || isUndefined(spec)) return child;
@@ -24,11 +24,11 @@ export function useContextMenu(child?: ReactElement, spec?: ContextMenuSpec): Re
     const onContextMenu = (e: MouseEvent) => {
         let contextMenuOutput: any = spec;
 
-        // 0) Skip if already consumed, otherwise consume (Adapted from Blueprint 'ContextMenuTarget')
+        // 0) Skip if already consumed, otherwise consume (adapted from BP `ContextMenuTarget`).
         if (e.defaultPrevented) return;
         e.preventDefault();
 
-        // 1) Pre-process to an element (potentially via item list) or null
+        // 1) Pre-process to an element (potentially via item list) or null.
         if (isFunction(contextMenuOutput)) {
             contextMenuOutput = contextMenuOutput(e);
         }
@@ -38,11 +38,11 @@ export function useContextMenu(child?: ReactElement, spec?: ContextMenuSpec): Re
                 : null;
         }
         if (contextMenuOutput && !isValidElement(contextMenuOutput)) {
-            console.error("Incorrect specification of 'contextMenu' arg in useContextMenu()");
+            logError(`Incorrect specification of 'contextMenu' arg in useContextMenu()`);
             contextMenuOutput = null;
         }
 
-        // 2) Render via blueprint!
+        // 2) Render via blueprint.
         if (contextMenuOutput) {
             showContextMenu(contextMenuOutput, {left: e.clientX, top: e.clientY});
         }

package/mobile/cmp/input/NumberInput.ts

@@ -10,9 +10,9 @@ import {fmtNumber} from '@xh/hoist/format';
 import {input} from '@xh/hoist/kit/onsen';
 import '@xh/hoist/mobile/register';
 import {wait} from '@xh/hoist/promise';
-import {debounced, throwIf, withDefault} from '@xh/hoist/utils/js';
+import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
-import {isNaN, isNil, isNumber, round} from 'lodash';
+import {debounce, isNaN, isNil, isNumber, round} from 'lodash';
 import './NumberInput.scss';
 
 export interface NumberInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
@@ -123,9 +123,12 @@ class NumberInputModel extends HoistInputModel {
         this.noteValueChange(ev.target.value);
     };
 
-    @debounced(250)
+    /** TODO: Completely remove the debounce, or find and verify a reason why we need it set to 250. */
     override doCommitOnChangeInternal() {
-        super.doCommitOnChangeInternal();
+        debounce(
+            () => super.doCommitOnChangeInternal(),
+            withDefault(this.componentProps.commitOnChangeDebounce, 250)
+        )();
     }
 
     override toInternal(val) {

package/package.json

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