@xh/hoist 64.0.3 → 64.0.5

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/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/cmp/grid/Grid.scss

@@ -262,6 +262,11 @@
   }
 }
 
+// TODO find better place to put this
+.xh-grid-clear-background-color:not(.ag-row-selected) {
+  background-color: unset !important;
+}
+
 // Suppress default indenting when grid is in tree mode but no root records have children.
 .xh-grid--flat:not(.xh-data-view) {
   .ag-ltr .ag-row-group-leaf-indent {

package/core/HoistComponent.ts

@@ -47,15 +47,20 @@ 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;
+
+    /** Pre-processed by HoistComponent internals and passed as second argument to render. */
+    ref: never;
 };
 
 /**

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/desktop/cmp/filechooser/FileChooser.ts

@@ -37,7 +37,7 @@ export interface FileChooserProps extends HoistProps<FileChooserModel>, BoxProps
      * True (default) to display the selected file(s) in a grid alongside the dropzone. Note
      * that, if false, the component will not provide any built-in indication of its selection.
      */
-    showFileGrid: boolean;
+    showFileGrid?: boolean;
 
     /** Intro/help text to display within the dropzone target. */
     targetText?: ReactNode;

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,

package/icon/Icon.ts

@@ -19,11 +19,14 @@ export interface IconProps extends HoistProps, Partial<Omit<FontAwesomeIconProps
     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;
 

package/mobile/appcontainer/ToastSource.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {ToastModel} from '@xh/hoist/appcontainer/ToastModel';
 import {ToastSourceModel} from '@xh/hoist/appcontainer/ToastSourceModel';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {wait} from '@xh/hoist/promise';
@@ -20,7 +21,7 @@ export const toastSource = hoistCmp.factory({
     model: uses(ToastSourceModel),
 
     render({model}) {
-        const pending = model.toastModels.filter(it => it.isOpen),
+        const pending: ToastModel[] = model.toastModels.filter(it => it.isOpen),
             next = head(pending);
 
         if (!next) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "64.0.3",
+  "version": "64.0.5",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -31,9 +31,10 @@
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "~2.1.3",
-    "@azure/msal-browser": "~3.14.0",
-    "@blueprintjs/core": "^5.10.2",
-    "@blueprintjs/datetime2": "^2.3.3",
+    "@azure/msal-browser": "~3.17.0",
+    "@blueprintjs/core": "^5.10.3",
+    "@blueprintjs/datetime": "^5.3.5",
+    "@blueprintjs/datetime2": "^2.3.5",
     "@fortawesome/fontawesome-pro": "^6.2.1",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/pro-light-svg-icons": "^6.2.1",
@@ -92,7 +93,7 @@
     "@ag-grid-community/client-side-row-model": "31.x",
     "@ag-grid-community/core": "31.x",
     "@ag-grid-community/react": "31.x",
-    "@xh/hoist-dev-utils": "^9.0.0-SNAPSHOT",
+    "@xh/hoist-dev-utils": "8.x",
     "csstype": "3.x",
     "eslint": "8.x",
     "eslint-config-prettier": "9.x",

package/security/BaseOAuthClient.ts

@@ -153,8 +153,8 @@ export abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>, S> ext
      * Request a full logout from the underlying OAuth provider.
      */
     async logoutAsync(): Promise<void> {
-        this.setSelectedUsername(null);
         await this.doLogoutAsync();
+        this.setSelectedUsername(null);
     }
 
     /**

package/security/msal/MsalClient.ts

@@ -130,8 +130,9 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
         // to gain a new refreshToken (3rd party cookies required).
         const accounts = client.getAllAccounts();
         this.logDebug('Authenticated accounts available', accounts);
-        this.account = accounts.length == 1 ? accounts[0] : null;
-        if (this.account) {
+        const account = accounts.length == 1 ? accounts[0] : null;
+        if (account) {
+            this.noteUserAuthenticated(account);
             try {
                 this.initialTokenLoad = true;
                 this.logDebug('Attempting silent token load.');
@@ -230,11 +231,12 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
     }
 
     protected override async doLogoutAsync(): Promise<void> {
-        const {postLogoutRedirectUrl, client, account, loginMethod} = this;
-        await client.clearCache({account});
+        const {postLogoutRedirectUrl, client, account, loginMethod} = this,
+            opts = {account, postLogoutRedirectUri: postLogoutRedirectUrl};
+
         loginMethod == 'REDIRECT'
-            ? await client.logoutRedirect({account, postLogoutRedirectUri: postLogoutRedirectUrl})
-            : await client.logoutPopup({account});
+            ? await client.logoutRedirect(opts)
+            : await client.logoutPopup(opts);
     }
 
     //------------------------