@xh/hoist 76.0.0-SNAPSHOT.1754920978016 → 76.0.0-SNAPSHOT.1755111169547

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 76.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+* Added new `extraConfirmText`, `extraConfirmLabel` properties to `MessageOptions`.  Use this option
+  to require the specified text to be re-typed by a user when confirming a potentially destructive or disruptive action.
+
 ## 75.0.1 - 2025-08-11
 
 ### 🎁 New Features
@@ -32,6 +37,7 @@
   which can be activated via the `Query.provideLeaves` property.
 
 ### 🐞 Bug Fixes
+
 * Fixed bugs where `Store.modifyRecords`, `Store.revertRecords` and `Store.revert` were not properly
   handling changes to `SummaryRecords`.
 * Fixed minor `DashCanvas` issues with `allowAdd: false`, ensuring it does not block additions made

package/admin/tabs/cluster/instances/InstancesTabModel.ts

@@ -212,7 +212,8 @@ export class InstancesTabModel extends HoistModel {
     private async shutdownInstanceAsync(instance: PlainObject) {
         if (
             !(await XH.confirm({
-                message: `Are you sure you wish to immediately terminate instance ${instance.name}?`,
+                message: `Are you sure you want to immediately terminate instance ${instance.name}?`,
+                extraConfirmText: instance.name,
                 confirmProps: {
                     icon: Icon.skull(),
                     text: 'Yes, kill the instance',

package/admin/tabs/general/alertBanner/AlertBannerModel.ts

@@ -135,7 +135,7 @@ export class AlertBannerModel extends HoistModel {
     @action
     removePreset(preset: PlainObject) {
         XH.confirm({
-            message: 'Are you sure you wish to delete this preset?',
+            message: 'Are you sure you want to delete this preset?',
             confirmProps: {
                 text: 'Remove',
                 intent: 'danger',
@@ -252,7 +252,7 @@ export class AlertBannerModel extends HoistModel {
             const finalConfirm = await XH.confirm({
                 message: fragment(
                     p('This change will modify a live banner for all users of this application.'),
-                    p('Are you sure you wish to do this?')
+                    p('Are you sure you want to do this?')
                 ),
                 confirmProps: {
                     text: 'Yes, modify the banner',

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

@@ -8,6 +8,7 @@ import {RecategorizeDialogModel} from '@xh/hoist/admin/tabs/userData/roles/recat
 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';
+import {fragment, p} from '@xh/hoist/cmp/layout';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {RecordActionSpec} from '@xh/hoist/data';
 import {actionCol, calcActionColWidth} from '@xh/hoist/desktop/cmp/grid';
@@ -125,10 +126,15 @@ export class RoleModel extends HoistModel {
         if (this.readonly) return false;
 
         const confirm = await XH.confirm({
-            message: `Are you sure you want to delete "${role.name}"? This may affect access to this application.`,
+            message: fragment(
+                p(`Are you sure you want to delete the ${role.name} role?`),
+                p(`This may impact access to this application.`)
+            ),
+            extraConfirmText: role.name,
             confirmProps: {
-                text: 'Yes, delete role',
+                text: 'Delete role',
                 intent: 'danger',
+                outlined: true,
                 autoFocus: false
             }
         });

package/admin/tabs/userData/roles/editor/RoleEditorModel.ts

@@ -77,13 +77,14 @@ export class RoleEditorModel extends HoistModel {
             this.doCancel();
         } else {
             XH.confirm({
-                message: 'You have unsaved changes. Are you sure you wish to proceed?',
+                message: 'You have unsaved changes. Are you sure you want to proceed?',
                 cancelProps: {
                     text: 'Keep editing'
                 },
                 confirmProps: {
                     text: 'Discard Changes',
-                    intent: 'danger'
+                    intent: 'danger',
+                    outlined: true
                 },
                 onConfirm: () => this.doCancel()
             });

package/appcontainer/MessageModel.ts

@@ -9,6 +9,7 @@ import {HoistModel, XH, MessageSpec, managed} from '@xh/hoist/core';
 import {action, observable, makeObservable} from '@xh/hoist/mobx';
 import {warnIf} from '@xh/hoist/utils/js';
 import {isEmpty} from 'lodash';
+import {ReactNode} from 'react';
 
 /**
  * Model for a single instance of a modal dialog.
@@ -26,6 +27,7 @@ export class MessageModel extends HoistModel {
     messageKey;
     className;
     input;
+    extraConfirmLabel: ReactNode;
     confirmProps;
     cancelProps;
     cancelAlign;
@@ -50,6 +52,8 @@ export class MessageModel extends HoistModel {
         messageKey,
         className,
         input,
+        extraConfirmText,
+        extraConfirmLabel,
         confirmProps = {},
         cancelProps = {},
         cancelAlign = 'right',
@@ -69,10 +73,24 @@ export class MessageModel extends HoistModel {
         this.dismissable = dismissable;
         this.cancelOnDismiss = cancelOnDismiss;
 
+        const fields = [];
+
         if (input) {
             this.input = input;
             const {initialValue, rules} = input;
-            this.formModel = new FormModel({fields: [{name: 'value', initialValue, rules}]});
+            fields.push({name: 'value', initialValue, rules});
+        }
+
+        if (extraConfirmText) {
+            this.extraConfirmLabel = extraConfirmLabel ?? `Enter '${extraConfirmText}' to confirm:`;
+            fields.push({
+                name: 'extraConfirm',
+                rules: [({value}) => (value === extraConfirmText ? null : `Confirmation required`)]
+            });
+        }
+
+        if (!isEmpty(fields)) {
+            this.formModel = new FormModel({fields});
         }
 
         this.confirmProps = this.parseButtonProps(confirmProps, () => this.doConfirmAsync());
@@ -98,7 +116,9 @@ export class MessageModel extends HoistModel {
         if (this.formModel) {
             await this.formModel.validateAsync();
             if (!this.formModel.isValid) return;
-            resolvedVal = this.formModel.getData().value;
+            if (this.formModel.getField('value')) {
+                resolvedVal = this.formModel.getData().value;
+            }
         }
 
         this.onConfirm?.();

package/build/types/appcontainer/MessageModel.d.ts

@@ -1,5 +1,6 @@
 import { FormModel } from '@xh/hoist/cmp/form';
 import { HoistModel, MessageSpec } from '@xh/hoist/core';
+import { ReactNode } from 'react';
 /**
  * Model for a single instance of a modal dialog.
  * Not intended for direct application use.
@@ -14,6 +15,7 @@ export declare class MessageModel extends HoistModel {
     messageKey: any;
     className: any;
     input: any;
+    extraConfirmLabel: ReactNode;
     confirmProps: any;
     cancelProps: any;
     cancelAlign: any;
@@ -25,7 +27,7 @@ export declare class MessageModel extends HoistModel {
     _resolver: any;
     formModel: FormModel;
     isOpen: boolean;
-    constructor({ title, icon, message, messageKey, className, input, confirmProps, cancelProps, cancelAlign, onConfirm, onCancel, dismissable, cancelOnDismiss }: MessageSpec);
+    constructor({ title, icon, message, messageKey, className, input, extraConfirmText, extraConfirmLabel, confirmProps, cancelProps, cancelAlign, onConfirm, onCancel, dismissable, cancelOnDismiss }: MessageSpec);
     doConfirmAsync(): Promise<void>;
     doCancel(): void;
     doEscape(): void;

package/build/types/core/types/Interfaces.d.ts

@@ -72,14 +72,15 @@ export interface MessageSpec {
      */
     messageKey?: string;
     /** Config for input to be displayed (as a prompt). */
-    input?: {
-        /** An element specifying a HoistInput, defaults to a platform appropriate TextInput. */
-        item?: ReactElement;
-        /** Validation constraints to apply. */
-        rules?: RuleLike[];
-        /** Initial value for the input. */
-        initialValue?: any;
-    };
+    input?: MessageSpecInput;
+    /** If specified, user will be required to type this text when confirming. */
+    extraConfirmText?: string;
+    /**
+     * Text/label to inform the user of the text required to confirm.
+     * Only used if extraConfirmText is specified.
+     * Defaults to `Type '${extraConfirmText}' to confirm:`.
+     */
+    extraConfirmLabel?: ReactNode;
     /**
      * Props for primary confirm button.
      * Must provide either text or icon for button to be displayed, or use a preconfigured
@@ -106,6 +107,14 @@ export interface MessageSpec {
     /** Flag to specify whether onCancel is executed when clicking out of or escaping a popup. */
     cancelOnDismiss?: boolean;
 }
+export interface MessageSpecInput {
+    /** An element specifying a HoistInput, defaults to a platform appropriate TextInput. */
+    item?: ReactElement;
+    /** Validation constraints to apply. */
+    rules?: RuleLike[];
+    /** Initial value for the input. */
+    initialValue?: any;
+}
 /**
  * Configuration object for an app-wide banner.
  */

package/core/types/Interfaces.ts

@@ -91,16 +91,17 @@ export interface MessageSpec {
     messageKey?: string;
 
     /** Config for input to be displayed (as a prompt). */
-    input?: {
-        /** An element specifying a HoistInput, defaults to a platform appropriate TextInput. */
-        item?: ReactElement;
+    input?: MessageSpecInput;
 
-        /** Validation constraints to apply. */
-        rules?: RuleLike[];
+    /** If specified, user will be required to type this text when confirming. */
+    extraConfirmText?: string;
 
-        /** Initial value for the input. */
-        initialValue?: any;
-    };
+    /**
+     * Text/label to inform the user of the text required to confirm.
+     * Only used if extraConfirmText is specified.
+     * Defaults to `Type '${extraConfirmText}' to confirm:`.
+     */
+    extraConfirmLabel?: ReactNode;
 
     /**
      * Props for primary confirm button.
@@ -135,6 +136,17 @@ export interface MessageSpec {
     cancelOnDismiss?: boolean;
 }
 
+export interface MessageSpecInput {
+    /** An element specifying a HoistInput, defaults to a platform appropriate TextInput. */
+    item?: ReactElement;
+
+    /** Validation constraints to apply. */
+    rules?: RuleLike[];
+
+    /** Initial value for the input. */
+    initialValue?: any;
+}
+
 /**
  * Configuration object for an app-wide banner.
  */

package/data/cube/row/BaseRow.ts

@@ -96,12 +96,14 @@ export abstract class BaseRow {
     }
 
     private getChildrenDatas(): ViewRowData[] {
-        let {children, view} = this;
+        let {children, view} = this,
+            {query} = view;
 
-        if (!children) return null;
+        if (!children || (children[0].isLeaf && !query.includeLeaves && !query.provideLeaves))
+            return null;
 
         // Skip all children in a locked node
-        if (view.query.lockFn?.(this as any)) {
+        if (query.lockFn?.(this as any)) {
             this.locked = true;
             return null;
         }

package/desktop/appcontainer/Message.ts

@@ -6,7 +6,7 @@
  */
 import {MessageModel} from '@xh/hoist/appcontainer/MessageModel';
 import {form} from '@xh/hoist/cmp/form';
-import {filler} from '@xh/hoist/cmp/layout';
+import {div, filler} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
@@ -35,31 +35,57 @@ export const message = hoistCmp.factory({
             title: model.title,
             icon: model.icon,
             className: classNames(className, model.className),
-            items: [dialogBody(model.message, inputCmp()), bbar()],
+            items: [dialogBody(model.message, inputsCmp()), bbar()],
             onClose: () => model.doEscape(),
             ...props
         });
     }
 });
 
-const inputCmp = hoistCmp.factory<MessageModel>(({model}) => {
-    const {formModel, input} = model;
+const inputsCmp = hoistCmp.factory<MessageModel>(({model}) => {
+    const {formModel, input, extraConfirmLabel} = model;
     if (!formModel) return null;
-    return form({
-        model: formModel,
-        fieldDefaults: {commitOnChange: true, minimal: true, label: null},
-        item: formField({
-            field: 'value',
-            item: withDefault(
-                input.item,
-                textInput({
+
+    const items = [];
+    if (formModel.getField('value')) {
+        items.push(
+            formField({
+                field: 'value',
+                label: null,
+                item: withDefault(
+                    input.item,
+                    textInput({
+                        autoFocus: true,
+                        selectOnFocus: true,
+                        onKeyDown: evt => {
+                            if (evt.key === 'Enter') model.doConfirmAsync();
+                        }
+                    })
+                )
+            })
+        );
+    }
+    if (formModel.getField('extraConfirm')) {
+        items.push(
+            formField({
+                label: extraConfirmLabel,
+                field: 'extraConfirm',
+                item: textInput({
                     autoFocus: true,
                     selectOnFocus: true,
                     onKeyDown: evt => {
                         if (evt.key === 'Enter') model.doConfirmAsync();
                     }
                 })
-            )
+            })
+        );
+    }
+    return form({
+        model: formModel,
+        fieldDefaults: {commitOnChange: true, minimal: true},
+        item: div({
+            className: 'xh-pad',
+            items
         })
     });
 });

package/mobile/appcontainer/Message.ts

@@ -68,13 +68,29 @@ export const message = hoistCmp.factory({
 });
 
 const inputCmp = hoistCmp.factory<MessageModel>(({model}) => {
-    const {formModel, input} = model;
+    const {formModel, input, extraConfirmLabel} = model;
     if (!formModel) return null;
+
+    const items = [];
+    if (formModel.getField('value')) {
+        items.push(
+            formField({
+                field: 'value',
+                item: withDefault(input.item, textInput())
+            })
+        );
+    }
+    if (formModel.getField('extraConfirm')) {
+        items.push(
+            formField({
+                label: extraConfirmLabel,
+                field: 'extraConfirm',
+                item: textInput()
+            })
+        );
+    }
     return form({
         fieldDefaults: {commitOnChange: true, minimal: true, label: null},
-        item: formField({
-            field: 'value',
-            item: withDefault(input.item, textInput())
-        })
+        items
     });
 });

package/package.json

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