@xh/hoist 64.0.1 → 64.0.4

package/CHANGELOG.md

@@ -1,10 +1,32 @@
 # Changelog
 
-## 65.0.0-SNAPSHOT - unreleased
+## 64.0.4 - 2024-06-05
+
+### ⚙️ Technical
+
+* Typescript: Improve `ref` typing in JSX.
+
+## 64.0.3 - 2024-05-31
+
+### 🐞 Bug Fixes
+
+* Restore disabling of Blueprint animations on popovers and tooltips (corrects regression in v63.0.0)
+
+### ⚙️ Technical
+
+* Adjustments to API of (beta) `BaseOAuthClient`, `MsaClient`, and `AuthZeroClient`.
+
+## 64.0.2 - 2024-05-23
+
+### ⚙️ Technical
+
+* Adjustments to API of (beta) `BaseOAuthClient`.
+* `FetchService.addDefaultHeaders()` now supports async functions.
 
 ## 64.0.1 - 2024-05-19
 
 ### ⚙️ Technical
+
 * Adjustments to loading of ID Tokens and API of `BaseOAuthClient`.  (Note that
   this package remains in Beta for v64 and is subject to change.)
 

package/appcontainer/AppContainerModel.ts

@@ -161,7 +161,7 @@ export class AppContainerModel extends HoistModel {
         }
 
         try {
-            await installServicesAsync([FetchService, LocalStorageService]);
+            await installServicesAsync([FetchService]);
 
             // consult (optional) pre-auth init for app
             const modelClass: any = this.appSpec.modelClass;
@@ -205,7 +205,7 @@ export class AppContainerModel extends HoistModel {
 
             // Complete initialization process
             this.setAppState('INITIALIZING');
-            await installServicesAsync([ConfigService]);
+            await installServicesAsync([ConfigService, LocalStorageService]);
             await installServicesAsync(TrackService);
             await installServicesAsync([EnvironmentService, PrefService, JsonBlobService]);
 

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

@@ -4,15 +4,11 @@ import { ForwardedRef, FC, ReactNode } from 'react';
 /**
  * Type representing props passed to a HoistComponent's render function.
  *
- * This type removes from its base type several props that are used by HoistComponent itself and
- * not provided to the render function.
+ * This type removes from its base type several properties that are pulled out by the HoistComponent itself and
+ * not provided to the render function.  `modelConfig` and `modelRef` are resolved into the `model` property.
+ * `ref` is passed as the second argument to the render function.
  */
-export type RenderPropsOf<P extends HoistProps> = P & {
-    /** Pre-processed by HoistComponent internals into a mounted model.  Never passed to render. */
-    modelConfig: never;
-    /** Pre-processed by HoistComponent internals and attached to model.  Never passed to render. */
-    modelRef: never;
-};
+export type RenderPropsOf<P extends HoistProps> = Omit<P, 'modelConfig' | 'modelRef' | 'ref'>;
 /**
  * Configuration for creating a Component.  May be specified either as a render function,
  * or an object containing a render function and associated metadata.

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

@@ -1,6 +1,6 @@
 import { HoistModel } from '@xh/hoist/core';
 import { Property } from 'csstype';
-import { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+import { CSSProperties, HTMLAttributes, LegacyRef, ReactNode, Ref } from 'react';
 /**
  * Props interface for Hoist Components.
  *
@@ -32,6 +32,8 @@ export interface HoistProps<M extends HoistModel = HoistModel> {
     className?: string;
     /** React children. */
     children?: ReactNode;
+    /** React Ref for this component. */
+    ref?: LegacyRef<any>;
 }
 /**
  * A version of Hoist props that allows dynamic keys/properties.   This is the interface that

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

@@ -1,5 +1,5 @@
 import { TEST_ID } from '@xh/hoist/utils/js';
-import { ForwardedRef, Key, ReactElement, ReactNode } from 'react';
+import { Key, ReactElement, ReactNode } from 'react';
 import { Some, Thunkable } from './types/Types';
 /**
  * Alternative format for specifying React Elements in render functions. This type is designed to
@@ -31,8 +31,6 @@ export type ElementSpec<P> = P & {
     item?: Some<ReactNode>;
     /** True to exclude the Element. */
     omit?: Thunkable<boolean>;
-    /** React Ref for this component. */
-    ref?: ForwardedRef<any>;
     /** React key for this component. */
     key?: Key;
     /**

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

@@ -15,6 +15,7 @@ export type HAlign = 'left' | 'right' | 'center';
 export type VAlign = 'top' | 'bottom' | 'center';
 /** Convenience type for common pattern of accepting a single T, or an array of Ts. */
 export type Some<T> = T | T[];
+export type NonEmptyArray<T> = [T, ...T[]];
 export type Thunkable<T> = T | (() => T);
 export type Awaitable<T> = Promise<T> | T;
 /** Convenience type for a "plain", string-keyed object holding any kind of values. */

package/build/types/desktop/cmp/appOption/AutoRefreshAppOption.d.ts

@@ -36,6 +36,7 @@ export declare const autoRefreshAppOption: ({ formFieldProps, inputProps }?: Aut
         modelRef?: import("react").Ref<import("../../../cmp/form").FieldModel>;
         className?: string;
         children?: import("react").ReactNode;
+        ref?: import("react").LegacyRef<any>;
         margin?: string | number;
         marginTop?: string | number;
         marginRight?: string | number;

package/build/types/desktop/cmp/appOption/ThemeAppOption.d.ts

@@ -34,6 +34,7 @@ export declare const themeAppOption: ({ formFieldProps, inputProps }?: ThemeAppO
         modelRef?: import("react").Ref<import("../../../cmp/form").FieldModel>;
         className?: string;
         children?: import("react").ReactNode;
+        ref?: import("react").LegacyRef<any>;
         margin?: string | number;
         marginTop?: string | number;
         marginRight?: string | number;

package/build/types/icon/Icon.d.ts

@@ -5,11 +5,14 @@ export interface IconProps extends HoistProps, Partial<Omit<FontAwesomeIconProps
     /** Name of the icon in FontAwesome. */
     iconName?: string;
     /**
-     * Prefix or weight of the icon. By default, 'far' for the standard
-     * variant of each icon. Pass a value of either 'fas' for a heavier-weight/solid variant
-     * or 'fal' for a lighter-weight variant.
+     * Prefix / weight of the icon (or "fab" if your app has imported the free-brand-icons pkg).
+     *   - far - Regular
+     *   - fas - Solid
+     *   - fal - Light
+     *   - fat - Thin (yes, unfortunate)
+     *   - fab - Brand (requires optional import, see Toolbox)
      */
-    prefix?: 'far' | 'fas' | 'fal' | 'fab';
+    prefix?: 'far' | 'fas' | 'fal' | 'fat' | 'fab';
     intent?: Intent;
     /** Optional tooltip string. */
     title?: string;

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

@@ -1,5 +1,6 @@
-import { BannerSpec, HoistBase } from '@xh/hoist/core';
-import { TokenInfo } from '@xh/hoist/security/TokenInfo';
+import { HoistBase } from '@xh/hoist/core';
+import { Token, TokenMap } from '@xh/hoist/security/Token';
+export type LoginMethod = 'REDIRECT' | 'POPUP';
 export interface BaseOAuthClientConfig<S> {
     /** Client ID (GUID) of your app registered with your Oauth provider. */
     clientId: string;
@@ -15,26 +16,31 @@ export interface BaseOAuthClientConfig<S> {
      */
     postLogoutRedirectUrl?: 'APP_BASE_URL' | string;
     /** The method used for logging in on desktop. Default is 'REDIRECT'. */
-    loginMethodDesktop?: 'REDIRECT' | 'POPUP';
+    loginMethodDesktop?: LoginMethod;
     /** The method used for logging in on mobile. Default is 'REDIRECT'. */
-    loginMethodMobile?: 'REDIRECT' | 'POPUP';
+    loginMethodMobile?: LoginMethod;
     /**
-     * Governs how frequently we attempt to refresh tokens with the API.
+     * Governs an optional refresh timer that will work to keep the tokens fresh.
      *
-     * A typical refresh will use the underlying provider cache, and should not result in network
-     * activity. However, if the token lifetime falls below`tokenSkipCacheSecs`, this client
-     * will force a call to the underlying provider to get the token.
+     * A typical refresh will use the underlying provider cache, and should not result in
+     * network activity. However, if any token lifetime falls below`autoRefreshSkipCacheSecs`,
+     * this client will force a call to the underlying provider to get the token.
      *
      * In order to allow aging tokens to be replaced in a timely manner, this value should be
      * significantly shorter than both the minimum token lifetime that will be
-     * returned by the underlying API and `tokenSkipCacheSecs`. Default is 30 secs.
+     * returned by the underlying API and `autoRefreshSkipCacheSecs`.
+     *
+     * Default is -1, disabling this behavior.
      */
-    tokenRefreshSecs?: number;
+    autoRefreshSecs?: number;
     /**
-     * When the remaining token lifetime is below this threshold, force the provider to skip the
-     * local cache and go directly to the underlying provider for a new token. Default is 180 secs.
+     * During auto-refresh, if the remaining lifetime for any token is below this threshold,
+     * force the provider to skip the local cache and go directly to the underlying provider for
+     * new tokens and refresh tokens.
+     *
+     * Default is -1, disabling this behavior.
      */
-    tokenSkipCacheSecs?: number;
+    autoRefreshSkipCacheSecs?: number;
     /**
      * Scopes to request - if any - beyond the core `['openid', 'email']` scopes, which
      * this client will always request.
@@ -51,16 +57,11 @@ export interface BaseOAuthClientConfig<S> {
      * Use this map to gain targeted access tokens for different back-end resources.
      */
     accessTokens?: Record<string, S>;
-    /**
-     * True to display a warning banner to the user if tokens expire. May be specified as a boolean
-     * or a partial banner spec. Defaults to false.
-     */
-    expiryWarning?: boolean | Partial<BannerSpec>;
 }
 /**
  * Implementations of this class coordinate OAuth-based login and token provision. Apps can use a
- * suitable concrete implementation to power a client-side OauthService - see Toolbox for an
- * example using `Auth0Client`.
+ * suitable concrete implementation to power a client-side OauthService. See `MsalClient` and
+ * `AuthZeroClient`
  *
  * Initialize such a service and this client within the `preAuthInitAsync()` lifecycle method of
  * `AppModel` to use the tokens it acquires to authenticate with the Hoist server. (Note this
@@ -71,39 +72,59 @@ 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;
-    /** Scopes */
+    /** Id Scopes */
     protected idScopes: string[];
-    protected _idToken: TokenInfo;
-    protected _accessTokens: Record<string, TokenInfo>;
+    /** Specification for Access Tokens **/
+    protected accessSpecs: Record<string, S>;
     private timer;
-    private expiryWarningDisplayed;
     private lastRefreshAttempt;
     private TIMER_INTERVAL;
-    /**
-     * ID token in JWT format. Observable.
-     */
-    get idToken(): string;
-    /**
-     * Get a configured Access token in JWT format. Observable.
-     */
-    getAccessToken(key: string): string;
     constructor(config: C);
     /**
      * Main entry point for this object.
      */
     initAsync(): Promise<void>;
+    /**
+     * Request an interactive login with the underlying OAuth provider.
+     */
+    loginAsync(method?: LoginMethod): Promise<void>;
     /**
      * Request a full logout from the underlying OAuth provider.
      */
     logoutAsync(): Promise<void>;
-    protected abstract doInitAsync(): Promise<void>;
+    /**
+     * Get an ID token.
+     */
+    getIdTokenAsync(): Promise<Token>;
+    /**
+     * Get a Access token.
+     */
+    getAccessTokenAsync(key: string): Promise<Token>;
+    /**
+     * Get all available tokens.
+     */
+    getAllTokensAsync(): Promise<TokenMap>;
+    /**
+     * The last authenticated OAuth username.
+     *
+     * 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;
+    /**
+     *  Set the last authenticated OAuth username.
+     *  See `getSelectedUsername()`.
+     */
+    setSelectedUsername(username: string): void;
+    protected abstract doInitAsync(): Promise<TokenMap>;
+    protected abstract doLoginPopupAsync(): Promise<void>;
+    protected abstract doLoginRedirectAsync(): Promise<void>;
+    protected abstract fetchIdTokenAsync(useCache: boolean): Promise<Token>;
+    protected abstract fetchAccessTokenAsync(spec: S, useCache: boolean): Promise<Token>;
     protected abstract doLogoutAsync(): Promise<void>;
-    protected abstract getIdTokenAsync(useCache: boolean): Promise<TokenInfo>;
-    protected abstract getAccessTokenAsync(spec: S, useCache: boolean): Promise<TokenInfo>;
     protected get redirectUrl(): string;
     protected get postLogoutRedirectUrl(): string;
-    protected get loginMethod(): 'REDIRECT' | 'POPUP';
-    protected get usesRedirect(): boolean;
+    protected get loginMethod(): LoginMethod;
     protected get baseUrl(): string;
     protected popupBlockerErrorMessage: String;
     protected defaultErrorMsg: String;
@@ -120,14 +141,10 @@ export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>
      * @param key - key for re-accessing this state, as round-tripped with redirect.
      */
     protected restoreRedirectState(key: string): void;
-    /**
-     * Load tokens from provider.
-     *
-     * @param useCache - true (default) to use local cache if available, or false to force a
-     *      network request to fetch a fresh token.
-     */
-    protected loadTokensAsync(useCache?: boolean): Promise<void>;
-    private getIdTokenSafeAsync;
+    protected fetchAllTokensAsync(useCache?: boolean): Promise<TokenMap>;
+    protected getLocalStorage(key: string, defaultValue?: any): any;
+    protected setLocalStorage(key: string, value: any): void;
+    private fetchIdTokenSafeAsync;
     private onTimerAsync;
-    private updateWarning;
+    private logTokensDebug;
 }

package/build/types/security/{TokenInfo.d.ts → Token.d.ts}

@@ -1,11 +1,12 @@
 import { PlainObject } from '@xh/hoist/core';
-export declare class TokenInfo {
-    readonly token: string;
+export type TokenMap = Record<string, Token>;
+export declare class Token {
+    readonly value: string;
     readonly decoded: PlainObject;
     readonly expiry: number;
-    constructor(token: string);
+    constructor(value: string);
     expiresWithin(interval: number): boolean;
     get formattedExpiry(): string;
     get forLog(): PlainObject;
-    equals(other: TokenInfo): boolean;
+    equals(other: Token): boolean;
 }

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

@@ -1,4 +1,4 @@
-import { TokenInfo } from '@xh/hoist/security/TokenInfo';
+import { Token, TokenMap } from '@xh/hoist/security/Token';
 import { BaseOAuthClient, BaseOAuthClientConfig } from '../BaseOAuthClient';
 export interface AuthZeroClientConfig extends BaseOAuthClientConfig<AuthZeroTokenSpec> {
     /** Domain of your app registered with Auth0 */
@@ -20,15 +20,20 @@ export interface AuthZeroTokenSpec {
  * via Google, GitHub, Microsoft, and various other OAuth providers *or* via a username/password
  * combo stored and managed within Auth0's own database. Supported options will depend on the
  * configuration of your Auth0 app.
+ *
+ * Note: If developing on localhost and using Access Tokens will need to configure your browser to
+ * allow third-party cookies.
  */
 export declare class AuthZeroClient extends BaseOAuthClient<AuthZeroClientConfig, AuthZeroTokenSpec> {
     private client;
-    doInitAsync(): Promise<void>;
-    getIdTokenAsync(useCache?: boolean): Promise<TokenInfo>;
-    getAccessTokenAsync(spec: AuthZeroTokenSpec, useCache?: boolean): Promise<TokenInfo>;
-    doLogoutAsync(): Promise<void>;
+    protected doInitAsync(): Promise<TokenMap>;
+    protected doLoginRedirectAsync(): Promise<void>;
+    protected doLoginPopupAsync(): Promise<void>;
+    protected fetchIdTokenAsync(useCache?: boolean): Promise<Token>;
+    protected fetchAccessTokenAsync(spec: AuthZeroTokenSpec, useCache?: boolean): Promise<Token>;
+    protected doLogoutAsync(): Promise<void>;
     private createClient;
-    private completeViaRedirectAsync;
-    private completeViaPopupAsync;
     private get loginScope();
+    private returningFromRedirect;
+    private noteUserAuthenticatedAsync;
 }

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

@@ -0,0 +1 @@
+export * from './AuthZeroClient';

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

@@ -1,5 +1,5 @@
-import { LogLevel } from '@azure/msal-common';
-import { TokenInfo } from '@xh/hoist/security/TokenInfo';
+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 */
@@ -10,27 +10,80 @@ export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
      * MSAL Browser Lib defaults authority to "https://login.microsoftonline.com/common"
      */
     authority?: string;
-    /** The log level of MSAL. Default is LogLevel.Info (2). */
+    /**
+     * 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.
+     */
+    domainHint?: string;
+    /**
+     * If specified, the client will use this value when initializing the app to enforce a minimum
+     * amount of time during which no further auth flow with the provider should be necessary.
+     *
+     * Use this argument to front-load any necessary auth flow to the apps initialization stage
+     * thereby minimizing disruption to user activity during application use.
+     *
+     * This value may be set to anything up to 86400 (24 hours), the maximum lifetime
+     * of an Azure refresh token.  Set to -1 to disable (default).
+     *
+     * Note that setting to *any* non-disabled amount will require the app to do *some* communication
+     * with the login provider at *every* app load. This may just involve loading new tokens via
+     * fetch, however, setting to higher values will increase the frequency with which
+     * a new refresh token will also need to be requested via a hidden iframe/redirect/popup. This
+     * can be time-consuming and potentially disruptive and applications should therefore use with
+     * care and typically set to some value significantly less than the max.
+     *
+     * See https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/token-lifetimes.md
+     */
+    initRefreshTokenExpirationOffsetSecs?: number;
+    /** The log level of MSAL. Default is LogLevel.Warning. */
     msalLogLevel?: LogLevel;
 }
 export interface MsalTokenSpec {
     /** Scopes for the desired access token. */
     scopes: string[];
+    /**
+     * Scopes to be added to the scopes requested during interactive and SSO logins.
+     * See the `scopes` property on  `PopupRequest`, `RedirectRequest`, and `SSORequest`
+     * for more info.
+     */
+    loginScopes?: string[];
+    /**
+     * Scopes to be added to the scopes requested during interactive and SSO login.
+     *
+     * See the `extraScopesToConsent` property on  `PopupRequest`, `RedirectRequest`, and
+     * `SSORequest` for more info.
+     */
+    extraScopesToConsent?: string[];
 }
 /**
  * Service to implement OAuth authentication via MSAL.
+ *
+ * See the following helpful information relevant to our use of this tricky API --
+ * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/
+ * 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?
  */
 export declare class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec> {
     private client;
     private account;
-    doInitAsync(): Promise<void>;
-    getIdTokenAsync(useCache?: boolean): Promise<TokenInfo>;
-    getAccessTokenAsync(spec: MsalTokenSpec, useCache?: boolean): Promise<TokenInfo>;
-    doLogoutAsync(): Promise<void>;
+    private initialTokenLoad;
+    constructor(config: MsalClientConfig);
+    protected doInitAsync(): Promise<TokenMap>;
+    protected doLoginPopupAsync(): Promise<void>;
+    protected doLoginRedirectAsync(): Promise<void>;
+    protected fetchIdTokenAsync(useCache?: boolean): Promise<Token>;
+    protected fetchAccessTokenAsync(spec: MsalTokenSpec, useCache?: boolean): Promise<Token>;
+    protected doLogoutAsync(): Promise<void>;
+    private loginSsoAsync;
     private createClientAsync;
-    private completeViaRedirectAsync;
-    private completeViaPopupAsync;
     private logFromMsal;
     private get loginScopes();
-    private get loginExtraScopes();
+    private get loginExtraScopesToConsent();
+    private get refreshOffsetArgs();
+    private noteUserAuthenticated;
 }

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

@@ -0,0 +1 @@
+export * from './MsalClient';

package/build/types/svc/FetchService.d.ts

@@ -1,4 +1,4 @@
-import { FetchResponse, HoistService, LoadSpec, PlainObject } from '@xh/hoist/core';
+import { Awaitable, FetchResponse, HoistService, LoadSpec, PlainObject } from '@xh/hoist/core';
 import { PromiseTimeoutSpec } from '@xh/hoist/promise';
 import { StatusCodes } from 'http-status-codes';
 import { IStringifyOptions } from 'qs';
@@ -26,19 +26,19 @@ export declare class FetchService extends HoistService {
     static instance: FetchService;
     NO_JSON_RESPONSES: StatusCodes[];
     private autoAborters;
-    defaultHeaders: (PlainObject | ((arg: FetchOptions) => PlainObject))[];
+    defaultHeaders: (PlainObject | ((arg: FetchOptions) => Awaitable<PlainObject>))[];
     defaultTimeout: any;
     /**
      * Set default headers to be sent with all subsequent requests.
      * @param headers - to be sent with all fetch requests, or a function to generate.
      * @deprecated use addDefaultHeaders instead.
      */
-    setDefaultHeaders(headers: PlainObject | ((arg: FetchOptions) => PlainObject)): void;
+    setDefaultHeaders(headers: PlainObject | ((arg: FetchOptions) => Awaitable<PlainObject>)): void;
     /**
      * Add default headers to be sent with all subsequent requests.
      * @param headers - to be sent with all fetch requests, or a function to generate.
      */
-    addDefaultHeaders(headers: PlainObject | ((arg: FetchOptions) => PlainObject)): void;
+    addDefaultHeaders(headers: PlainObject | ((arg: FetchOptions) => Awaitable<PlainObject>)): void;
     /**
      * Set the timeout (default 30 seconds) to be used for all requests made via this service that
      * do not themselves spec a custom timeout.
@@ -84,7 +84,7 @@ export declare class FetchService extends HoistService {
      * @returns false if no request pending for the given key.
      */
     abort(autoAbortKey: string): boolean;
-    private withDefaults;
+    private withDefaultsAsync;
     private managedFetchAsync;
     private fetchInternalAsync;
     private sendJsonInternalAsync;

package/build/types/utils/react/LayoutPropUtils.d.ts

@@ -1,4 +1,4 @@
-import { HoistProps, LayoutProps } from '@xh/hoist/core';
+import { LayoutProps, PlainObject } from '@xh/hoist/core';
 /**
  * These utils support accepting the CSS styles enumerated below as top-level props of a Component,
  * and are typically accessed via the `@LayoutSupport` mixin (for class-based components) or the
@@ -31,12 +31,12 @@ import { HoistProps, LayoutProps } from '@xh/hoist/core';
  * that afforded by the underlying flexbox styles. In particular, it accepts flex and sizing props
  * as raw numbers rather than strings.
  */
-export declare function getLayoutProps(props: HoistProps): LayoutProps;
+export declare function getLayoutProps(props: PlainObject): LayoutProps;
 /**
  * Return all non-layout related props found in props.
  */
-export declare function getNonLayoutProps<T extends HoistProps>(props: T): T;
+export declare function getNonLayoutProps<T extends PlainObject>(props: T): T;
 /**
  * Split a set of props into layout and non-layout props.
  */
-export declare function splitLayoutProps<T extends HoistProps>(props: T): [LayoutProps, T];
+export declare function splitLayoutProps<T extends PlainObject>(props: T): [LayoutProps, T];

package/core/HoistComponent.ts

@@ -47,16 +47,12 @@ import {
 /**
  * Type representing props passed to a HoistComponent's render function.
  *
- * This type removes from its base type several props that are used by HoistComponent itself and
- * not provided to the render function.
+ * This type removes from its base type several properties that are pulled out by the HoistComponent itself and
+ * not provided to the render function.  `modelConfig` and `modelRef` are resolved into the `model` property.
+ * `ref` is passed as the second argument to the render function.
  */
-export type RenderPropsOf<P extends HoistProps> = P & {
-    /** Pre-processed by HoistComponent internals into a mounted model.  Never passed to render. */
-    modelConfig: never;
 
-    /** Pre-processed by HoistComponent internals and attached to model.  Never passed to render. */
-    modelRef: never;
-};
+export type RenderPropsOf<P extends HoistProps> = Omit<P, 'modelConfig' | 'modelRef' | 'ref'>;
 
 /**
  * Configuration for creating a Component.  May be specified either as a render function,

package/core/HoistProps.ts

@@ -6,7 +6,7 @@
  */
 import {HoistModel} from '@xh/hoist/core';
 import {Property} from 'csstype';
-import {CSSProperties, HTMLAttributes, ReactNode, Ref} from 'react';
+import {CSSProperties, HTMLAttributes, LegacyRef, ReactNode, Ref} from 'react';
 
 /**
  * Props interface for Hoist Components.
@@ -43,6 +43,9 @@ export interface HoistProps<M extends HoistModel = HoistModel> {
 
     /** React children. */
     children?: ReactNode;
+
+    /** React Ref for this component. */
+    ref?: LegacyRef<any>;
 }
 
 /**

package/core/elem.ts

@@ -8,7 +8,6 @@ import {TEST_ID} from '@xh/hoist/utils/js';
 import {castArray, isFunction, isNil, isPlainObject} from 'lodash';
 import {
     createElement as reactCreateElement,
-    ForwardedRef,
     isValidElement,
     Key,
     ReactElement,
@@ -55,9 +54,6 @@ export type ElementSpec<P> = P & {
     //-----------------------------------
     // Core React attributes
     //-----------------------------------
-    /** React Ref for this component. */
-    ref?: ForwardedRef<any>;
-
     /** React key for this component. */
     key?: Key;
 

package/core/types/Types.ts

@@ -26,6 +26,7 @@ export type VAlign = 'top' | 'bottom' | 'center';
 
 /** Convenience type for common pattern of accepting a single T, or an array of Ts. */
 export type Some<T> = T | T[];
+export type NonEmptyArray<T> = [T, ...T[]];
 
 export type Thunkable<T> = T | (() => T);
 export type Awaitable<T> = Promise<T> | T;

package/desktop/cmp/input/ButtonGroupInput.ts

@@ -6,7 +6,7 @@
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {hoistCmp, HoistModel, Intent, XH} from '@xh/hoist/core';
-import {Button, buttonGroup, ButtonGroupProps} from '@xh/hoist/desktop/cmp/button';
+import {Button, buttonGroup, ButtonGroupProps, ButtonProps} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {throwIf, warnIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
@@ -130,8 +130,9 @@ const cmp = hoistCmp.factory<ButtonGroupInputModel>(({model, className, ...props
             throw XH.exception('ButtonGroupInput child must be a Button.');
         }
 
-        const {value, intent: btnIntent} = button.props,
-            btnDisabled = disabled || button.props.disabled;
+        const props = button.props as ButtonProps,
+            {value, intent: btnIntent} = props,
+            btnDisabled = disabled || props.disabled;
 
         throwIf(
             (enableClear || enableMulti) && value == null,