@xh/hoist 87.0.0 → 87.1.0

package/CHANGELOG.md

@@ -12,6 +12,44 @@
   3. Plain ASCII punctuation only. Use " - " for in-sentence breaks, never an em dash.
 -->
 
+## 87.1.0 - 2026-08-28
+
+### 🎁 New Features
+
+* Added new `MessageSpec.suppress` config for `XH.message()` and its `alert`, `confirm`, and
+  `prompt` variants. Set to `true` (or a config object) to offer users a "Don't show this message
+  again" checkbox. Confirmed responses are saved to browser local or session storage - optionally
+  with an expiry - and returned immediately by future calls with the same `messageKey`.
+* `FileChooser` now takes as many dropped files as its `maxFiles` limit allows, warning about only
+  the surplus rather than discarding the entire drop.
+* Added an opt-in `enforceValueInOptions` prop to the desktop and mobile `Select`, constraining the
+  value to the current `options` and dropping any selection no longer found there. Enforced once
+  `options` is non-null, so pass null while options load.
+
+### ⚙️ Technical
+
+* Upgraded `react-dropzone` to v20, which drops its UMD build and ships as an ESM + CJS package with
+  an `exports` map. Requires Node >= 22 to install.
+* Added an opt-in `enforceValueInOptions` prop to the desktop and mobile `Select`, constraining the
+  value to the current `options` and dropping any selection no longer found there. Enforced once
+  `options` is non-null, so pass null while options load.
+* Extended the package `sideEffects` declaration to cover the vendored golden-layout implementation
+  and the barrels with registration or configuration side effects on import - icon, mobx, blueprint
+  kit, golden-layout kit, and persist. Required by the tree-shaking in hoist-dev-utils v15.
+* Restructured `PersistenceProvider` provider registration to remove a base/subclass import cycle
+  that breaks under tree-shaking bundlers' re-export optimization. No API change.
+
+### ⚙️ Typescript API Adjustments
+
+* `SelectOption` now admits custom fields alongside the standard `value`/`label`, so extra data
+  carried on an option (and already passed through at runtime) can be read within `optionRenderer`,
+  `filterFn`, and friends without a cast. Annotate the callback's argument with the app's own option
+  type for fully typed access - e.g. `optionRenderer: (opt: MyOption) => ...`.
+
+### 📚 Libraries
+
+* react-dropzone `15.0 → 20.1`
+
 ## 87.0.0 - 2026-08-25
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - React 19, data layer, column chooser)

package/appcontainer/MessageModel.ts

@@ -5,9 +5,10 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {FormModel} from '@xh/hoist/cmp/form';
-import {HoistModel, XH, MessageSpec, managed} from '@xh/hoist/core';
+import {HoistModel, XH, MessageSpec, MessageSuppressSpec, managed} from '@xh/hoist/core';
 import {action, observable, makeObservable} from '@xh/hoist/mobx';
-import {warnIf} from '@xh/hoist/utils/js';
+import {DAYS, HOURS, MINUTES} from '@xh/hoist/utils/datetime';
+import {pluralize, throwIf, warnIf} from '@xh/hoist/utils/js';
 import {isEmpty} from 'lodash';
 import {ReactNode} from 'react';
 
@@ -27,6 +28,7 @@ export class MessageModel extends HoistModel {
     messageKey;
     className;
     input;
+    suppress: MessageSuppressSpec;
     extraConfirmLabel: ReactNode;
     confirmProps;
     cancelProps;
@@ -45,6 +47,18 @@ export class MessageModel extends HoistModel {
 
     @observable isOpen = true;
 
+    /**
+     * Previously saved response for a message the user has opted to suppress, or null if no
+     * response saved, saved response expired, or suppression not enabled for this message.
+     */
+    static getSuppressedResult(spec: MessageSpec): {value: unknown} | null {
+        const {messageKey} = spec,
+            suppress = parseSuppress(spec.suppress);
+        if (!suppress || !messageKey) return null;
+        const saved = getSuppressStore(suppress).get(getSuppressKey(messageKey), null);
+        return saved && (!saved.expiry || Date.now() <= saved.expiry) ? saved : null;
+    }
+
     constructor({
         title,
         icon,
@@ -52,6 +66,7 @@ export class MessageModel extends HoistModel {
         messageKey,
         className,
         input,
+        suppress,
         extraConfirmText,
         extraConfirmLabel,
         confirmProps = {},
@@ -65,6 +80,11 @@ export class MessageModel extends HoistModel {
         super();
         makeObservable(this);
 
+        throwIf(
+            suppress && !messageKey,
+            'Must specify a "messageKey" when "suppress" is enabled for a message.'
+        );
+
         this.title = title;
         this.icon = icon;
         this.message = message;
@@ -72,6 +92,7 @@ export class MessageModel extends HoistModel {
         this.className = className;
         this.dismissable = dismissable;
         this.cancelOnDismiss = cancelOnDismiss;
+        this.suppress = parseSuppress(suppress);
 
         const fields = [];
 
@@ -89,6 +110,10 @@ export class MessageModel extends HoistModel {
             });
         }
 
+        if (this.suppress) {
+            fields.push({name: 'suppress', initialValue: !!this.suppress.initialValue});
+        }
+
         if (!isEmpty(fields)) {
             this.formModel = new FormModel({fields});
         }
@@ -109,15 +134,32 @@ export class MessageModel extends HoistModel {
         });
     }
 
+    /** Label for the suppress checkbox, as configured or an auto-generated default. */
+    get suppressLabel(): ReactNode {
+        const {suppress} = this;
+        if (!suppress) return null;
+        if (suppress.label) return suppress.label;
+        const expiryLabel = this.suppressExpiryLabel;
+        if (expiryLabel) return `Don't show this message again for ${expiryLabel}`;
+        return suppress.storage === 'session'
+            ? `Don't show this message again this session`
+            : `Don't show this message again`;
+    }
+
     @action
     async doConfirmAsync() {
         let resolvedVal = true;
 
-        if (this.formModel) {
-            await this.formModel.validateAsync();
-            if (!this.formModel.isValid) return;
-            if (this.formModel.getField('value')) {
-                resolvedVal = this.formModel.getData().value;
+        const {formModel} = this;
+        if (formModel) {
+            await formModel.validateAsync();
+            if (!formModel.isValid) return;
+            const data = formModel.getData();
+            if (formModel.getField('value')) {
+                resolvedVal = data.value;
+            }
+            if (data.suppress) {
+                this.saveSuppressedResult(resolvedVal);
             }
         }
 
@@ -168,4 +210,38 @@ export class MessageModel extends HoistModel {
         const ret = {...props, onClick: handler};
         return ret.text || ret.icon ? ret : null;
     }
+
+    private saveSuppressedResult(value: unknown) {
+        const {suppress} = this,
+            {expiry} = suppress;
+        getSuppressStore(suppress).set(getSuppressKey(this.messageKey), {
+            value,
+            expiry: expiry ? Date.now() + expiry : null
+        });
+    }
+
+    // Humanized suppress expiry duration, expressed in the largest unit that divides it evenly.
+    private get suppressExpiryLabel(): string {
+        const {expiry} = this.suppress;
+        if (!expiry) return null;
+        const units: Array<[string, number]> = [
+            ['day', DAYS],
+            ['hour', HOURS],
+            ['minute', MINUTES]
+        ];
+        for (const [unit, unitMs] of units) {
+            if (expiry >= unitMs && expiry % unitMs === 0) {
+                return pluralize(unit, expiry / unitMs, true);
+            }
+        }
+        return pluralize('minute', Math.ceil(expiry / MINUTES), true);
+    }
 }
+
+const parseSuppress = (suppress: boolean | MessageSuppressSpec): MessageSuppressSpec =>
+    suppress ? (suppress === true ? {} : suppress) : null;
+
+const getSuppressStore = (suppress: MessageSuppressSpec) =>
+    suppress.storage === 'session' ? XH.sessionStorageService : XH.localStorageService;
+
+const getSuppressKey = (messageKey: string) => `xhSuppressedMessage.${messageKey}`;

package/appcontainer/MessageSourceModel.ts

@@ -28,6 +28,14 @@ export class MessageSourceModel extends HoistModel {
     }
 
     message(config: MessageSpec) {
+        // Resolve immediately to any previously saved response the user has opted to suppress
+        // this message with - see MessageSpec.suppress.
+        const suppressed = MessageModel.getSuppressedResult(config);
+        if (suppressed) {
+            this.logDebug(`Suppressed message '${config.messageKey}'`, suppressed.value);
+            return Promise.resolve(suppressed.value);
+        }
+
         // Default autoFocus on any confirm button, if no input control and developer has made no explicit request
         const {confirmProps, cancelProps, input} = config;
 

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

@@ -1,5 +1,5 @@
 import { FormModel } from '@xh/hoist/cmp/form';
-import { HoistModel, MessageSpec } from '@xh/hoist/core';
+import { HoistModel, MessageSpec, MessageSuppressSpec } from '@xh/hoist/core';
 import { ReactNode } from 'react';
 /**
  * Model for a single instance of a modal dialog.
@@ -15,6 +15,7 @@ export declare class MessageModel extends HoistModel {
     messageKey: any;
     className: any;
     input: any;
+    suppress: MessageSuppressSpec;
     extraConfirmLabel: ReactNode;
     confirmProps: any;
     cancelProps: any;
@@ -27,11 +28,22 @@ export declare class MessageModel extends HoistModel {
     _resolver: any;
     formModel: FormModel;
     isOpen: boolean;
-    constructor({ title, icon, message, messageKey, className, input, extraConfirmText, extraConfirmLabel, confirmProps, cancelProps, cancelAlign, onConfirm, onCancel, dismissable, cancelOnDismiss }: MessageSpec);
+    /**
+     * Previously saved response for a message the user has opted to suppress, or null if no
+     * response saved, saved response expired, or suppression not enabled for this message.
+     */
+    static getSuppressedResult(spec: MessageSpec): {
+        value: unknown;
+    } | null;
+    constructor({ title, icon, message, messageKey, className, input, suppress, extraConfirmText, extraConfirmLabel, confirmProps, cancelProps, cancelAlign, onConfirm, onCancel, dismissable, cancelOnDismiss }: MessageSpec);
+    /** Label for the suppress checkbox, as configured or an auto-generated default. */
+    get suppressLabel(): ReactNode;
     doConfirmAsync(): Promise<void>;
     doCancel(): void;
     doEscape(): void;
     close(): void;
     destroy(): void;
     private parseButtonProps;
+    private saveSuppressedResult;
+    private get suppressExpiryLabel();
 }

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

@@ -331,6 +331,10 @@ export declare class XHApi {
      * button instead (e.g. for confirming risky operations), applications should specify a
      * `cancelProps` argument of the following form `cancelProps: {..., autoFocus: true}`.
      *
+     * If `suppress` is specified and the user has previously opted to suppress this message,
+     * this method will resolve immediately to their previously saved response, without showing
+     * a dialog. This also applies to the `alert`, `confirm`, and `prompt` variants below.
+     *
      * @returns true if user confirms, false if user cancels. If an input is provided, the
      * returned Promise will resolve to the input value if user confirms, false if user cancels.
      */

package/build/types/core/persist/PersistenceProvider.d.ts

@@ -1,11 +1,22 @@
 import { Class } from 'type-fest';
 import { DebounceSpec, HoistBase, Persistable, PersistableState } from '../';
-import { PersistOptions } from './';
+import { PersistenceProviderType, PersistOptions } from './PersistOptions';
 export type PersistenceProviderConfig<S = any> = {
     persistOptions: PersistOptions;
     target: Persistable<S>;
     owner?: HoistBase;
 };
+/**
+ * Provider registration metadata - see {@link PersistenceProvider.registerProviders}.
+ * @internal
+ */
+interface ProviderRegistration {
+    /** `PersistOptions.type` value that selects this provider. */
+    type: PersistenceProviderType;
+    /** `PersistOptions` keys whose presence selects this provider in shortcut (typeless) form. */
+    shortcutKeys: string[];
+    cls: Class<PersistenceProvider, [PersistenceProviderConfig]>;
+}
 /**
  * Abstract superclass for adaptor objects used by models and components to (re)store state to and
  * from a persistent location, typically a Hoist preference or key within browser local storage.
@@ -33,6 +44,15 @@ export declare abstract class PersistenceProvider<S = any> {
     private disposer;
     private lastReadState;
     private lastReadTime;
+    private static registrations;
+    /**
+     * Register concrete provider implementations for lookup by `create`. Called by this
+     * package's index.ts for the built-in providers, which must not be statically imported by
+     * this base module: they extend this class, so it must be fully initialized before any of
+     * them can be defined - importing them here would create an initialization-order cycle.
+     * @internal
+     */
+    static registerProviders(regs: ProviderRegistration[]): void;
     /**
      * Construct an instance of this class.
      *
@@ -77,3 +97,4 @@ export declare abstract class PersistenceProvider<S = any> {
     static parseProviderClass<S>(opts: PersistOptions): Class<PersistenceProvider<S>, [PersistenceProviderConfig<S>]>;
     private ensureValid;
 }
+export {};

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

@@ -140,10 +140,22 @@ export interface MessageSpec {
      * Unique key identifying the message. If subsequent messages are triggered with this key, they
      * will replace this message. Useful for usages that may be producing messages recursively, or
      * via timers, and wish to avoid generating a large stack of duplicates.
+     *
+     * Also identifies the message for suppression purposes - required if `suppress` is set.
      */
     messageKey?: string;
     /** Config for input to be displayed (as a prompt). */
     input?: MessageSpecInput;
+    /**
+     * True or config to display a "Don't show this message again" checkbox, allowing users to
+     * opt out of future copies of this message. If the user confirms the message with the
+     * checkbox checked, their response will be saved to browser storage and returned
+     * immediately by future calls with the same `messageKey` (which must also be set).
+     *
+     * Specify as a config object to customize the checkbox label, limit how long the saved
+     * response should remain in effect, or save it to session (vs. local) storage.
+     */
+    suppress?: boolean | MessageSuppressSpec;
     /** If specified, user will be required to type this text when confirming. */
     extraConfirmText?: string;
     /**
@@ -185,6 +197,25 @@ export interface MessageSpecInput {
     /** Initial value for the input. */
     initialValue?: any;
 }
+/**
+ * Config for user opt-in message suppression - see {@link MessageSpec.suppress}.
+ */
+export interface MessageSuppressSpec {
+    /**
+     * Time (in ms) for which the user's saved response should remain in effect. Specify with
+     * datetime constants, e.g. `30 * DAYS`. Default null suppresses indefinitely.
+     */
+    expiry?: number;
+    /**
+     * Browser storage in which the user's response should be saved (default 'local'). Specify
+     * 'session' to suppress only for the lifetime of the current browser tab.
+     */
+    storage?: 'local' | 'session';
+    /** Label for the suppress checkbox. Defaults to a generated label appropriate to `expiry`. */
+    label?: ReactNode;
+    /** Initial value of the suppress checkbox (default false). */
+    initialValue?: boolean;
+}
 /**
  * The base `MenuToken` type. '-' is interpreted as the standard textless divider. Components will
  * likely extend this type to support other strings like 'copyToClipboard', 'print', etc. which the
@@ -246,9 +277,16 @@ export type ContextMenuSpec<T = MenuToken, C = MenuContext> = MenuItemLike<T, C>
 export declare function isMenuItem<T, C>(item: MenuItemLike<T, C>): item is MenuItem<T, C>;
 /**
  * An option to be passed to Select controls.
+ *
+ * Additional custom fields are supported alongside the standard entries below and are passed
+ * through to callbacks such as `optionRenderer` and `filterFn`. For typed access to such fields,
+ * annotate the callback's argument with the app's own option type - e.g.
+ * `optionRenderer: (opt: MyOption) => ...`.
  */
 export interface SelectOption {
     value?: any;
     label?: string;
     options?: (SelectOption | any)[];
+    /** Custom fields, passed through to Select callbacks. */
+    [key: string]: any;
 }

package/build/types/desktop/cmp/filechooser/FileChooserModel.d.ts

@@ -69,10 +69,10 @@ export declare class FileChooserModel extends HoistModel {
     /** Open the file browser programmatically. Typically used in a button's onClick callback.*/
     openFileBrowser(): void;
     /**
-     * Add files to the selection.
+     * Add files to the selection, taking as many as the `maxFiles` limit allows.
      *
-     * Respects the `maxFiles` limit but does NOT enforce the `accept` / file-size constraints
-     * (those are applied only on drop/browse) - use with care.
+     * Does NOT enforce the `accept` / file-size constraints (those are applied only on
+     * drop/browse) - use with care.
      */
     addFiles(files: Some<File>): void;
     /** Remove a single file from the current selection. */

package/build/types/desktop/cmp/input/Select.d.ts

@@ -46,6 +46,13 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
      * Applications should use this option with care.
      */
     enableWindowed?: boolean;
+    /**
+     * True to constrain the value to the current `options` - any selected value not found there is
+     * removed whenever the value or the list changes. Enforced only once `options` is non-null, so
+     * pass null (not `[]`) while options load - `[]` means "no valid choices" and clears the value.
+     * Throws if combined with `enableCreate` or `queryFn`.
+     */
+    enforceValueInOptions?: boolean;
     /**
      * Function called to filter available options for a given query string input.
      * Used for filtering of options provided by `options` prop when `enableFilter` is true.

package/build/types/desktop/cmp/viewmanager/dialog/ManageDialogModel.d.ts

@@ -71,7 +71,7 @@ export declare class ManageDialogModel extends HoistModel {
     isDragDisabled(gridModel: GridModel): boolean;
     /**
      * Display state for `gridModel`'s top-level drop strip - rest/armed/hot/blocked, matching
-     * the in-flight drag (if it originated in this grid) or, at rest, the current selection.
+     * the in-flight drag, if it originated in this grid.
      */
     stripState(gridModel: GridModel): {
         mode: StripMode;
@@ -83,11 +83,6 @@ export declare class ManageDialogModel extends HoistModel {
      * level, so unlike the in-grid handlers above there is no target to track as the pointer moves.
      */
     getTopLevelDropZoneEvents(gridModel: GridModel): RowDropZoneEvents;
-    /**
-     * Move the grid's current selection to the top level, as clicked on its top-level strip. No-op
-     * without a draggable selection, or if the selection is already at the top level.
-     */
-    moveSelectionToTopLevelAsync(gridModel: GridModel): Promise<void>;
     private init;
     private doUpdateAsync;
     private doUpdateViewsAsync;
@@ -124,11 +119,6 @@ export declare class ManageDialogModel extends HoistModel {
      * selected rows ignored), else the deduped views across all dragged leaf rows.
      */
     private getDragPayload;
-    /**
-     * As {@link getDragPayload}, but driven by the grid's selection - for the top-level strip's
-     * click-to-move. Null when the selection is empty or undraggable.
-     */
-    private getSelectionPayload;
     /** Quoted/pluralized display name for a drag/selection payload, for the strip's hint text. */
     private dragPayloadName;
     /**

package/build/types/desktop/cmp/viewmanager/dialog/TopLevelDropStrip.d.ts

@@ -2,7 +2,7 @@ import { GridModel } from '@xh/hoist/cmp/grid';
 /**
  * Strip rendered above the tree grid within one tab of the ViewManager's Manage dialog, registered
  * with ag-Grid as an external row-drop-zone accepting drops that move a view/group out of all
- * groups. Also clickable, to move the current selection without a drag.
+ * groups.
  *
  * Deliberately not a grid row - it sits outside the grid's scrolling viewport, so it needs no
  * special-casing in the tree data and cannot be occluded by a sticky group-row header.

package/build/types/mobile/cmp/input/Select.d.ts

@@ -28,6 +28,13 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
      * will be rendered in the top half of the viewport, above the mobile keyboard.
      */
     enableFullscreen?: boolean;
+    /**
+     * True to constrain the value to the current `options` - any selected value not found there is
+     * removed whenever the value or the list changes. Enforced only once `options` is non-null, so
+     * pass null (not `[]`) while options load - `[]` means "no valid choices" and clears the value.
+     * Throws if combined with `enableCreate` or `queryFn`.
+     */
+    enforceValueInOptions?: boolean;
     /**
      * Optional override for fullscreen z-index. Useful for enabling fullscreen from
      * within components that have a higher z-index.

package/cmp/relativetimestamp/RelativeTimestamp.ts

@@ -242,7 +242,7 @@ function doFormat(timestamp: Date | number, opts: RelativeTimestampOptions): str
     }
 
     // 3) Basic timestamp, with suffix /prefix
-    let ret = '';
+    let ret: string;
     if (elapsed < 60 * SECONDS) {
         // By default, moment will show 'a few seconds' for durations of 0-45 seconds. At the higher
         // end of that range that output is a bit too inaccurate, so we replace as per below.

package/cmp/tab/TabModel.ts

@@ -184,7 +184,7 @@ export class TabModel extends HoistModel {
         if (!content) return null;
 
         // Recognize if content is a child container spec.
-        let childConfig: TabContainerConfig = null;
+        let childConfig: TabContainerConfig;
         if (isArray(content)) {
             childConfig = {tabs: content};
         } else if ('tabs' in content) {

package/core/XH.ts

@@ -663,6 +663,10 @@ export class XHApi {
      * button instead (e.g. for confirming risky operations), applications should specify a
      * `cancelProps` argument of the following form `cancelProps: {..., autoFocus: true}`.
      *
+     * If `suppress` is specified and the user has previously opted to suppress this message,
+     * this method will resolve immediately to their previously saved response, without showing
+     * a dialog. This also applies to the `alert`, `confirm`, and `prompt` variants below.
+     *
      * @returns true if user confirms, false if user cancels. If an input is provided, the
      * returned Promise will resolve to the input value if user confirms, false if user cancels.
      */

package/core/persist/PersistOptions.ts

@@ -15,12 +15,7 @@ import type {ViewManagerModel} from '@xh/hoist/cmp/viewmanager'; // Import type
  * Built-in Hoist PersistenceProviders.
  */
 export type PersistenceProviderType =
-    | 'pref'
-    | 'localStorage'
-    | 'sessionStorage'
-    | 'dashView'
-    | 'viewManager'
-    | 'custom';
+    'pref' | 'localStorage' | 'sessionStorage' | 'dashView' | 'viewManager' | 'custom';
 
 export interface PersistOptions {
     /** Dot delimited path to store state. */

package/core/persist/PersistenceProvider.ts

@@ -23,16 +23,7 @@ import {
 import {IReactionDisposer, reaction} from 'mobx';
 import {Class} from 'type-fest';
 import {DebounceSpec, HoistBase, Persistable, PersistableState} from '../';
-import {
-    CustomProvider,
-    DashViewProvider,
-    LocalStorageProvider,
-    PersistOptions,
-    persistOptions,
-    PrefProvider,
-    SessionStorageProvider,
-    ViewManagerProvider
-} from './';
+import {PersistenceProviderType, PersistOptions, persistOptions} from './PersistOptions';
 
 export type PersistenceProviderConfig<S = any> = {
     persistOptions: PersistOptions;
@@ -40,6 +31,18 @@ export type PersistenceProviderConfig<S = any> = {
     owner?: HoistBase;
 };
 
+/**
+ * Provider registration metadata - see {@link PersistenceProvider.registerProviders}.
+ * @internal
+ */
+interface ProviderRegistration {
+    /** `PersistOptions.type` value that selects this provider. */
+    type: PersistenceProviderType;
+    /** `PersistOptions` keys whose presence selects this provider in shortcut (typeless) form. */
+    shortcutKeys: string[];
+    cls: Class<PersistenceProvider, [PersistenceProviderConfig]>;
+}
+
 /**
  * Abstract superclass for adaptor objects used by models and components to (re)store state to and
  * from a persistent location, typically a Hoist preference or key within browser local storage.
@@ -70,6 +73,19 @@ export abstract class PersistenceProvider<S = any> {
     private lastReadState: PersistableState<S>;
     private lastReadTime: number;
 
+    private static registrations: ProviderRegistration[] = [];
+
+    /**
+     * Register concrete provider implementations for lookup by `create`. Called by this
+     * package's index.ts for the built-in providers, which must not be statically imported by
+     * this base module: they extend this class, so it must be fully initialized before any of
+     * them can be defined - importing them here would create an initialization-order cycle.
+     * @internal
+     */
+    static registerProviders(regs: ProviderRegistration[]) {
+        PersistenceProvider.registrations.push(...regs);
+    }
+
     /**
      * Construct an instance of this class.
      *
@@ -227,28 +243,17 @@ export abstract class PersistenceProvider<S = any> {
     static parseProviderClass<S>(
         opts: PersistOptions
     ): Class<PersistenceProvider<S>, [PersistenceProviderConfig<S>]> {
-        // 1) Recognize shortcut form
-        const {type, ...rest} = opts;
+        const {registrations} = PersistenceProvider,
+            {type, ...rest} = opts;
+
+        // 1) Recognize shortcut form - the presence of a provider-specific option key.
         if (!type) {
-            if (rest.prefKey) return PrefProvider;
-            if (rest.localStorageKey) return LocalStorageProvider;
-            if (rest.sessionStorageKey) return SessionStorageProvider;
-            if (rest.dashViewModel) return DashViewProvider;
-            if (rest.viewManagerModel) return ViewManagerProvider;
-            if (rest.getData || rest.setData) return CustomProvider;
+            const reg = registrations.find(it => it.shortcutKeys.some(key => rest[key]));
+            if (reg) return reg.cls;
         }
 
-        // 2) Map any string to known Provider Class, or return raw class
-        const ret = isString(type)
-            ? {
-                  pref: PrefProvider,
-                  localStorage: LocalStorageProvider,
-                  sessionStorage: SessionStorageProvider,
-                  dashView: DashViewProvider,
-                  viewManager: ViewManagerProvider,
-                  custom: CustomProvider
-              }[type]
-            : type;
+        // 2) Map any string to a registered Provider Class, or return raw class
+        const ret = isString(type) ? registrations.find(it => it.type === type)?.cls : type;
 
         throwIf(!ret, `Unknown Persistence Provider: ${type}`);
 

package/core/persist/index.ts

@@ -7,3 +7,26 @@ export * from './provider/DashViewProvider';
 export * from './provider/PrefProvider';
 export * from './provider/CustomProvider';
 export * from './provider/ViewManagerProvider';
+
+import {PersistenceProvider} from './PersistenceProvider';
+import {CustomProvider} from './provider/CustomProvider';
+import {DashViewProvider} from './provider/DashViewProvider';
+import {LocalStorageProvider} from './provider/LocalStorageProvider';
+import {PrefProvider} from './provider/PrefProvider';
+import {SessionStorageProvider} from './provider/SessionStorageProvider';
+import {ViewManagerProvider} from './provider/ViewManagerProvider';
+
+// Register the built-in providers for lookup by `PersistenceProvider.create`. Registration
+// lives here - in a module declared side-effectful via the package `sideEffects` entry and
+// reached whenever anything imports from this package - rather than in the base class (which
+// must not import its own subclasses - see note on `registerProviders`) or in the provider
+// modules themselves (whose registrations would be pruned by a tree-shaking bundler, as
+// nothing consumes their exports directly).
+PersistenceProvider.registerProviders([
+    {type: 'pref', shortcutKeys: ['prefKey'], cls: PrefProvider},
+    {type: 'localStorage', shortcutKeys: ['localStorageKey'], cls: LocalStorageProvider},
+    {type: 'sessionStorage', shortcutKeys: ['sessionStorageKey'], cls: SessionStorageProvider},
+    {type: 'dashView', shortcutKeys: ['dashViewModel'], cls: DashViewProvider},
+    {type: 'viewManager', shortcutKeys: ['viewManagerModel'], cls: ViewManagerProvider},
+    {type: 'custom', shortcutKeys: ['getData', 'setData'], cls: CustomProvider}
+]);

package/core/types/Interfaces.ts

@@ -184,12 +184,25 @@ export interface MessageSpec {
      * Unique key identifying the message. If subsequent messages are triggered with this key, they
      * will replace this message. Useful for usages that may be producing messages recursively, or
      * via timers, and wish to avoid generating a large stack of duplicates.
+     *
+     * Also identifies the message for suppression purposes - required if `suppress` is set.
      */
     messageKey?: string;
 
     /** Config for input to be displayed (as a prompt). */
     input?: MessageSpecInput;
 
+    /**
+     * True or config to display a "Don't show this message again" checkbox, allowing users to
+     * opt out of future copies of this message. If the user confirms the message with the
+     * checkbox checked, their response will be saved to browser storage and returned
+     * immediately by future calls with the same `messageKey` (which must also be set).
+     *
+     * Specify as a config object to customize the checkbox label, limit how long the saved
+     * response should remain in effect, or save it to session (vs. local) storage.
+     */
+    suppress?: boolean | MessageSuppressSpec;
+
     /** If specified, user will be required to type this text when confirming. */
     extraConfirmText?: string;
 
@@ -243,6 +256,29 @@ export interface MessageSpecInput {
     initialValue?: any;
 }
 
+/**
+ * Config for user opt-in message suppression - see {@link MessageSpec.suppress}.
+ */
+export interface MessageSuppressSpec {
+    /**
+     * Time (in ms) for which the user's saved response should remain in effect. Specify with
+     * datetime constants, e.g. `30 * DAYS`. Default null suppresses indefinitely.
+     */
+    expiry?: number;
+
+    /**
+     * Browser storage in which the user's response should be saved (default 'local'). Specify
+     * 'session' to suppress only for the lifetime of the current browser tab.
+     */
+    storage?: 'local' | 'session';
+
+    /** Label for the suppress checkbox. Defaults to a generated label appropriate to `expiry`. */
+    label?: ReactNode;
+
+    /** Initial value of the suppress checkbox (default false). */
+    initialValue?: boolean;
+}
+
 //------------------------
 // Menus
 //------------------------
@@ -330,9 +366,17 @@ export function isMenuItem<T, C>(item: MenuItemLike<T, C>): item is MenuItem<T,
 //------------------------
 /**
  * An option to be passed to Select controls.
+ *
+ * Additional custom fields are supported alongside the standard entries below and are passed
+ * through to callbacks such as `optionRenderer` and `filterFn`. For typed access to such fields,
+ * annotate the callback's argument with the app's own option type - e.g.
+ * `optionRenderer: (opt: MyOption) => ...`.
  */
 export interface SelectOption {
     value?: any;
     label?: string;
     options?: (SelectOption | any)[];
+
+    /** Custom fields, passed through to Select callbacks. */
+    [key: string]: any;
 }

package/desktop/appcontainer/Message.ts

@@ -10,7 +10,7 @@ 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';
-import {textInput} from '@xh/hoist/desktop/cmp/input';
+import {checkbox, textInput} from '@xh/hoist/desktop/cmp/input';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
 import {withDefault} from '@xh/hoist/utils/js';
@@ -82,6 +82,16 @@ const inputsCmp = hoistCmp.factory<MessageModel>(({model}) => {
             })
         );
     }
+    if (formModel.getField('suppress')) {
+        items.push(
+            formField({
+                field: 'suppress',
+                label: null,
+                testId: 'xh-message-suppress',
+                item: checkbox({label: model.suppressLabel})
+            })
+        );
+    }
     return form({
         model: formModel,
         fieldDefaults: {commitOnChange: true, minimal: true},

package/desktop/cmp/filechooser/FileChooserModel.ts

@@ -11,7 +11,18 @@ import {ErrorCode, FileRejection} from '@xh/hoist/kit/react-dropzone';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {pluralize, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {castArray, concat, filter, isEmpty, keys, fromPairs, map, sortBy, uniqBy} from 'lodash';
+import {
+    castArray,
+    differenceBy,
+    filter,
+    isEmpty,
+    keys,
+    fromPairs,
+    map,
+    sortBy,
+    take,
+    uniqBy
+} from 'lodash';
 import {ReactElement, ReactNode} from 'react';
 import {DropzoneRef} from 'react-dropzone';
 
@@ -120,10 +131,10 @@ export class FileChooserModel extends HoistModel {
     }
 
     /**
-     * Add files to the selection.
+     * Add files to the selection, taking as many as the `maxFiles` limit allows.
      *
-     * Respects the `maxFiles` limit but does NOT enforce the `accept` / file-size constraints
-     * (those are applied only on drop/browse) - use with care.
+     * Does NOT enforce the `accept` / file-size constraints (those are applied only on
+     * drop/browse) - use with care.
      */
     addFiles(files: Some<File>) {
         this.addFilesInternal(files);
@@ -158,33 +169,36 @@ export class FileChooserModel extends HoistModel {
             // In single-file mode, replace the current selection with the incoming file.
             if (maxFiles === 1 && accepted.length === 1) this.clear();
 
-            if (this.addFilesInternal(accepted)) {
-                this.onFileAccepted?.(accepted);
-            }
+            const added = this.addFilesInternal(accepted);
+            if (!isEmpty(added)) this.onFileAccepted?.(added);
         }
     }
 
     //------------------------
     // Implementation
     //------------------------
-    // De-dupe by name, then enforce `maxFiles` on the result. Warns and no-ops if exceeded;
-    // returns true if the selection was updated.
+    // Add incoming files, replacing any same-named file already selected and taking the rest up to
+    // the `maxFiles` limit. Warns on any surplus. Returns the files actually added.
     @action
-    private addFilesInternal(files: Some<File>): boolean {
+    private addFilesInternal(files: Some<File>): File[] {
         const {maxFiles} = this,
-            deduped = uniqBy(concat(files, this.files), 'name');
-
-        if (maxFiles != null && deduped.length > maxFiles) {
+            incoming = uniqBy(castArray(files), 'name'),
+            // Existing files the incoming batch does not replace - always retained.
+            retained = differenceBy(this.files, incoming, 'name'),
+            capacity = maxFiles != null ? Math.max(maxFiles - retained.length, 0) : incoming.length,
+            added = take(incoming, capacity),
+            surplus = incoming.length - added.length;
+
+        if (surplus) {
             XH.warningToast(
                 maxFiles === 1
                     ? 'Only one file allowed for upload.'
-                    : `File limit of ${maxFiles} exceeded.`
+                    : `File limit of ${maxFiles} reached - ${surplus} ${pluralize('file', surplus)} not added.`
             );
-            return false;
         }
 
-        this.files = deduped;
-        return true;
+        if (!isEmpty(added)) this.files = [...added, ...retained];
+        return added;
     }
 
     private defaultRejectMessage = (rejections: FileRejection[]): ReactElement => {

package/desktop/cmp/input/Select.scss

@@ -174,6 +174,10 @@
         padding: var(--xh-pad-px);
       }
 
+      &--is-disabled {
+        color: var(--xh-input-disabled-text-color);
+      }
+
       &--is-selected {
         // Suppress default highlighting - checkmark indicate selection.
         color: var(--xh-text-color);

package/desktop/cmp/input/Select.ts

@@ -91,6 +91,14 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
      */
     enableWindowed?: boolean;
 
+    /**
+     * True to constrain the value to the current `options` - any selected value not found there is
+     * removed whenever the value or the list changes. Enforced only once `options` is non-null, so
+     * pass null (not `[]`) while options load - `[]` means "no valid choices" and clears the value.
+     * Throws if combined with `enableCreate` or `queryFn`.
+     */
+    enforceValueInOptions?: boolean;
+
     /**
      * Function called to filter available options for a given query string input.
      * Used for filtering of options provided by `options` prop when `enableFilter` is true.
@@ -323,6 +331,18 @@ class SelectInputModel extends HoistInputModel {
             },
             fireImmediately: true
         });
+
+        if (this.componentProps.enforceValueInOptions) {
+            throwIf(
+                this.creatableMode || this.asyncMode,
+                '`enforceValueInOptions` is not supported with `enableCreate` or `queryFn`.'
+            );
+            this.addReaction({
+                track: () => [this.externalValue, this.internalOptions],
+                run: () => this.pruneValueToOptions(),
+                fireImmediately: true
+            });
+        }
     }
 
     reactSelectRef = createObservableRef<any>();
@@ -484,6 +504,22 @@ class SelectInputModel extends HoistInputModel {
         );
     }
 
+    // Enforce `enforceValueInOptions` - drop any current value not present in internalOptions.
+    // Null options signal that they have yet to load, and are not yet enforced against.
+    private pruneValueToOptions() {
+        const {externalValue, multiMode, emptyValue} = this;
+        if (isNil(this.componentProps.options)) return;
+        if (isNil(externalValue) || isEqual(externalValue, emptyValue)) return;
+
+        if (multiMode) {
+            const curr = castArray(externalValue),
+                keptOpts = curr.map(v => this.findOption(v, false)).filter(Boolean);
+            if (keptOpts.length !== curr.length) this.noteValueChange(keptOpts);
+        } else if (!this.findOption(externalValue, false)) {
+            this.noteValueChange(null);
+        }
+    }
+
     override toExternal(internal) {
         if (isNil(internal)) return this.emptyValue;
 

package/desktop/cmp/viewmanager/ViewManager.scss

@@ -21,6 +21,12 @@
       background-color: var(--xh-intent-primary-trans2) !important;
     }
 
+    // Grip glyph swapped in via the grid's `icons` option - see ManageDialog.ts. Muted tone to
+    // match the ColChooser's handle, over ag-Grid's own drag-handle color.
+    &__drag-handle__grip {
+      color: var(--xh-text-color-muted);
+    }
+
     // Gray out the drag handles and block drag initiation for an undraggable selection.
     &__grid--drag-disabled .ag-drag-handle {
       color: var(--xh-text-color-muted);

package/desktop/cmp/viewmanager/dialog/ManageDialog.ts

@@ -117,6 +117,15 @@ export const viewsGrid = hoistCmp.factory<GridModel>({
                                     groupContracted: Icon.folder({
                                         asHtml: true,
                                         className: 'ag-group-contracted'
+                                    }),
+                                    // Replaces ag-Grid's own grip glyph, matching the ColChooser.
+                                    // Must be set here - the row-drag comp reads only grid-level
+                                    // icons, never the column's own.
+                                    rowDrag: Icon.grip({
+                                        asHtml: true,
+                                        prefix: 'fas',
+                                        className:
+                                            'xh-view-manager__manage-dialog__drag-handle__grip'
                                     })
                                 },
                                 ...dialogModel?.getRowDragAgOptions(model)

package/desktop/cmp/viewmanager/dialog/ManageDialogModel.ts

@@ -300,19 +300,13 @@ export class ManageDialogModel extends HoistModel {
 
     /**
      * Display state for `gridModel`'s top-level drop strip - rest/armed/hot/blocked, matching
-     * the in-flight drag (if it originated in this grid) or, at rest, the current selection.
+     * the in-flight drag, if it originated in this grid.
      */
     stripState(gridModel: GridModel): {mode: StripMode; hint: string} {
         const type = this.gridTypeFor(gridModel),
             payload = this.drag?.type === type ? this.drag.payload : null;
 
-        if (!payload) {
-            const hasSelection = gridModel.hasSelection && !this.isDragDisabled(gridModel);
-            return {
-                mode: 'rest',
-                hint: hasSelection ? 'Click to move the selection to the top level' : ''
-            };
-        }
+        if (!payload) return {mode: 'rest', hint: ''};
 
         const name = this.dragPayloadName(payload);
         if (!this.isValidDrop(payload, TOP_LEVEL_TARGET)) {
@@ -342,17 +336,6 @@ export class ManageDialogModel extends HoistModel {
         };
     }
 
-    /**
-     * Move the grid's current selection to the top level, as clicked on its top-level strip. No-op
-     * without a draggable selection, or if the selection is already at the top level.
-     */
-    async moveSelectionToTopLevelAsync(gridModel: GridModel): Promise<void> {
-        const type = this.gridTypeFor(gridModel),
-            payload = this.getSelectionPayload(gridModel);
-        if (!payload || !this.isValidDrop(payload, TOP_LEVEL_TARGET)) return;
-        return this.doRowDragDropAsync(type, payload, TOP_LEVEL_TARGET);
-    }
-
     //------------------------
     // Implementation
     //------------------------
@@ -541,22 +524,6 @@ export class ManageDialogModel extends HoistModel {
         return {views: uniqBy(compact(views), 'token')};
     }
 
-    /**
-     * As {@link getDragPayload}, but driven by the grid's selection - for the top-level strip's
-     * click-to-move. Null when the selection is empty or undraggable.
-     */
-    private getSelectionPayload(gridModel: GridModel): DragPayload {
-        const recs = gridModel.selectedRecords;
-        if (!recs.length || this.isDragDisabled(gridModel)) return null;
-
-        if (recs.length === 1 && recs[0].data.isGroupRow) return {group: recs[0].data.group};
-
-        const views = recs.flatMap(r =>
-            r.data.isGroupRow ? r.descendants.map(d => d.data.view) : [r.data.view]
-        );
-        return {views: uniqBy(compact(views), 'token')};
-    }
-
     /** Quoted/pluralized display name for a drag/selection payload, for the strip's hint text. */
     private dragPayloadName(payload: DragPayload): string {
         const {group, views} = payload;
@@ -961,7 +928,9 @@ export class ManageDialogModel extends HoistModel {
             // Sort groups above loose views among siblings, then alpha by name.
             sortBy: ['isGroupRow|desc', 'name'],
             treeMode: true,
-            treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
+            // Highlights only - the tree-border style adds a second, differently colored rule on
+            // top of each level-0 row, which doubles up with the row borders below.
+            treeStyle: TreeStyle.HIGHLIGHTS,
             rowBorders: true,
             selModel: 'multiple',
             contextMenu,
@@ -992,7 +961,9 @@ export class ManageDialogModel extends HoistModel {
                     headerName: null,
                     width: 28,
                     resizable: false,
-                    align: 'center',
+                    // Left-aligned, so the cell keeps its standard left padding and the grip lands
+                    // at the same inset as the ColChooser's. Centering zeroes that padding, which
+                    // pinned the grip against the grid's left border.
                     omit: !this.dragDropEnabled(type),
                     agOptions: {rowDrag: true}
                 },

package/desktop/cmp/viewmanager/dialog/TopLevelDropStrip.ts

@@ -11,13 +11,12 @@ import {Icon} from '@xh/hoist/icon';
 import {GridApi, RowDropZoneParams} from '@xh/hoist/kit/ag-grid';
 import {createObservableRef} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {KeyboardEvent} from 'react';
 import {ManageDialogModel} from './ManageDialogModel';
 
 /**
  * Strip rendered above the tree grid within one tab of the ViewManager's Manage dialog, registered
  * with ag-Grid as an external row-drop-zone accepting drops that move a view/group out of all
- * groups. Also clickable, to move the current selection without a drag.
+ * groups.
  *
  * Deliberately not a grid row - it sits outside the grid's scrolling viewport, so it needs no
  * special-casing in the tree data and cannot be occluded by a sticky group-row header.
@@ -36,22 +35,12 @@ export const topLevelDropStrip = hoistCmp.factory<GridModel>({
 
         const {mode, hint} = dialogModel.stripState(gridModel),
             blocked = mode === 'blocked',
-            open = mode === 'armed' || mode === 'hot',
-            activate = () => dialogModel.moveSelectionToTopLevelAsync(gridModel).catchDefault();
+            open = mode === 'armed' || mode === 'hot';
 
         return div({
             ref: impl.ref,
             className: classNames(className, mode !== 'rest' ? `${className}--${mode}` : null),
-            role: 'button',
-            tabIndex: 0,
-            'aria-label': 'Move selection to top level',
             'aria-disabled': blocked,
-            onClick: activate,
-            onKeyDown: (e: KeyboardEvent) => {
-                if (e.key !== 'Enter' && e.key !== ' ') return;
-                e.preventDefault();
-                activate();
-            },
             items: [
                 open
                     ? Icon.folderOpen({className: `${className}__icon`})

package/mobile/appcontainer/Message.ts

@@ -11,7 +11,7 @@ import {hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import {dialog} from '@xh/hoist/mobile/cmp/dialog';
 import {formField} from '@xh/hoist/mobile/cmp/form';
-import {textInput} from '@xh/hoist/mobile/cmp/input';
+import {checkbox, textInput} from '@xh/hoist/mobile/cmp/input';
 import {withDefault} from '@xh/hoist/utils/js';
 import './Message.scss';
 
@@ -95,6 +95,16 @@ const inputCmp = hoistCmp.factory<MessageModel>(({model}) => {
             })
         );
     }
+    if (formModel.getField('suppress')) {
+        items.push(
+            formField({
+                label: model.suppressLabel,
+                field: 'suppress',
+                testId: 'xh-message-suppress',
+                item: checkbox()
+            })
+        );
+    }
     return form({
         fieldDefaults: {commitOnChange: true, minimal: true, label: null},
         items

package/mobile/cmp/input/Select.scss

@@ -83,6 +83,10 @@
         padding: var(--xh-pad-px);
       }
 
+      &--is-disabled {
+        color: var(--xh-input-disabled-text-color);
+      }
+
       &--is-selected {
         // Suppress default highlighting - checkmark indicate selection.
         color: var(--xh-text-color);

package/mobile/cmp/input/Select.ts

@@ -56,6 +56,14 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
      */
     enableFullscreen?: boolean;
 
+    /**
+     * True to constrain the value to the current `options` - any selected value not found there is
+     * removed whenever the value or the list changes. Enforced only once `options` is non-null, so
+     * pass null (not `[]`) while options load - `[]` means "no valid choices" and clears the value.
+     * Throws if combined with `enableCreate` or `queryFn`.
+     */
+    enforceValueInOptions?: boolean;
+
     /**
      * Optional override for fullscreen z-index. Useful for enabling fullscreen from
      * within components that have a higher z-index.
@@ -256,11 +264,31 @@ class SelectInputModel extends HoistInputModel {
             fireImmediately: true
         });
 
+        if (this.componentProps.enforceValueInOptions) {
+            throwIf(
+                this.creatableMode || this.asyncMode,
+                '`enforceValueInOptions` is not supported with `enableCreate` or `queryFn`.'
+            );
+            this.addReaction({
+                track: () => [this.externalValue, this.internalOptions],
+                run: () => this.pruneValueToOptions(),
+                fireImmediately: true
+            });
+        }
+
         if (this.fullscreenMode) {
             this.addReaction(this.fullscreenReaction());
         }
     }
 
+    // Enforce `enforceValueInOptions` - clear any current value not present in internalOptions.
+    // Null options signal that they have yet to load, and are not yet enforced against.
+    private pruneValueToOptions() {
+        const {externalValue} = this;
+        if (isNil(this.componentProps.options) || isNil(externalValue)) return;
+        if (!this.findOption(externalValue, false)) this.noteValueChange(null);
+    }
+
     reactSelectRef = createObservableRef<any>();
     get reactSelect() {
         return this.reactSelectRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "87.0.0",
+  "version": "87.1.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -19,6 +19,12 @@
     "./static/polyfills.js",
     "./desktop/register.ts",
     "./mobile/register.ts",
+    "./icon/index.ts",
+    "./mobx/index.ts",
+    "./kit/blueprint/index.ts",
+    "./kit/golden-layout/index.js",
+    "./kit/golden-layout/impl/js/**",
+    "./core/persist/index.ts",
     "**/*.scss",
     "**/*.css"
   ],
@@ -73,7 +79,7 @@
     "onsenui": "~2.12.9",
     "qs": "^6.15.3",
     "react-day-picker": "^9.14.0",
-    "react-dropzone": "~15.0.0",
+    "react-dropzone": "~20.1.1",
     "react-grid-layout": "~2.2.4",
     "react-markdown": "~10.1.0",
     "react-onsenui": "~1.13.3",
@@ -103,7 +109,7 @@
     "@types/lodash": "^4.17.25",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
-    "@xh/eslint-config": "^7.0.0",
+    "@xh/eslint-config": "^8.0.0",
     "@xh/hoist-dev-utils": "^14.0.1",
     "ag-grid-community": "^35.3.1",
     "ag-grid-react": "^35.3.1",

package/utils/js/ClipboardUtils.ts

@@ -46,7 +46,7 @@ function copyViaExecCommand(text: string): void {
     range.selectNode(span);
     selection.addRange(range);
 
-    let success = false;
+    let success: boolean;
     try {
         success = document.execCommand('copy');
     } finally {