@xh/hoist 64.0.3 → 64.0.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 64.0.5 - 2024-06-14
+
+### 🐞 Bug Fixes
+
+* Added a workaround for a bug where mobile Safari auto-zooms on orientation change if the user has zoomed the page.
+
+### ⚙️ Technical
+
+* Misc. Improvements to logout behavior of `MsalClient`
+
+### 📚 Libraries
+
+* @azure/msal-browser `3.14.0 → 3.17.0
+
+## 64.0.4 - 2024-06-05
+
+### ⚙️ Technical
+
+* Typescript: Improve `ref` typing in JSX.
+
 ## 64.0.3 - 2024-05-31
 
 ### 🐞 Bug Fixes
@@ -8,7 +28,8 @@
 
 ### ⚙️ Technical
 
-* Adjustments to API of (beta) `BaseOAuthClient`, `MsaClient`, and `AuthZeroClient`.
+* Adjustments to API of (beta) `BaseOAuthClient`, `MsalClient`, and `AuthZeroClient`.
+`
 
 ## 64.0.2 - 2024-05-23
 

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

@@ -5,16 +5,16 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
-import {GridModel} from '@xh/hoist/cmp/grid';
+import {GridModel, tagsRenderer, TreeStyle} from '@xh/hoist/cmp/grid';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {RecordActionSpec} from '@xh/hoist/data';
 import {actionCol, calcActionColWidth} from '@xh/hoist/desktop/cmp/grid';
 import {fmtDate} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
-import {action, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
+import {action, bindable, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
-import {compact, groupBy, isEmpty, mapValues} from 'lodash';
+import {compact, groupBy, mapValues} from 'lodash';
 import moment from 'moment/moment';
 import {RoleEditorModel} from './editor/RoleEditorModel';
 import {HoistRole, RoleMemberType, RoleModuleConfig} from './Types';
@@ -38,17 +38,33 @@ export class RoleModel extends HoistModel {
     @observable.ref allRoles: HoistRole[] = [];
     @observable.ref moduleConfig: RoleModuleConfig;
 
+    @bindable showInGroups = true;
+
     get readonly() {
         return !XH.getUser().isHoistRoleManager;
     }
 
     get selectedRole(): HoistRole {
-        return this.gridModel.selectedRecord?.data as HoistRole;
+        const selected = this.gridModel.selectedRecord?.data;
+        if (selected && !selected.isGroupRow) return selected as HoistRole;
+        return null;
     }
 
     constructor() {
         super();
         makeObservable(this);
+        this.addReaction({
+            track: () => this.showInGroups,
+            run: showInGroups => {
+                const {gridModel} = this;
+                if (showInGroups) {
+                    gridModel.hideColumn('category');
+                } else {
+                    gridModel.showColumn('category');
+                }
+                this.displayRoles();
+            }
+        });
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
@@ -59,7 +75,8 @@ export class RoleModel extends HoistModel {
             const {data} = await XH.fetchJson({url: 'roleAdmin/list', loadSpec});
             if (loadSpec.isStale) return;
 
-            this.setRoles(this.processRolesFromServer(data));
+            this.allRoles = this.processRolesFromServer(data);
+            this.displayRoles();
             await this.gridModel.preSelectFirstAsync();
         } catch (e) {
             if (loadSpec.isStale) return;
@@ -77,12 +94,6 @@ export class RoleModel extends HoistModel {
         return gridModel.selectAsync(name);
     }
 
-    @action
-    setRoles(roles: HoistRole[]) {
-        this.allRoles = roles;
-        this.gridModel.loadData(roles);
-    }
-
     @action
     clear() {
         this.allRoles = [];
@@ -129,6 +140,9 @@ export class RoleModel extends HoistModel {
             tooltip: 'Add or remove users from this role.',
             icon: Icon.edit(),
             intent: 'primary',
+            displayFn: ({record}) => ({
+                disabled: !record || record.data.isGroupRow
+            }),
             actionFn: ({record}) => this.editAsync(record.data as HoistRole),
             recordsRequired: true
         };
@@ -138,6 +152,9 @@ export class RoleModel extends HoistModel {
         return {
             text: 'Clone',
             icon: Icon.copy(),
+            displayFn: ({record}) => ({
+                disabled: !record || record.data.isGroupRow
+            }),
             actionFn: ({record}) => this.createAsync(record.data as HoistRole),
             recordsRequired: true
         };
@@ -148,6 +165,9 @@ export class RoleModel extends HoistModel {
             text: 'Delete',
             icon: Icon.delete(),
             intent: 'danger',
+            displayFn: ({record}) => ({
+                disabled: !record || record.data.isGroupRow
+            }),
             actionFn: ({record}) =>
                 this.deleteAsync(record.data as HoistRole)
                     .catchDefault()
@@ -159,18 +179,11 @@ export class RoleModel extends HoistModel {
     private groupByAction(): RecordActionSpec {
         return {
             text: 'Group By Category',
-            displayFn: ({gridModel}) => ({
-                icon: isEmpty(gridModel.groupBy) ? Icon.circle() : Icon.checkCircle()
+            displayFn: () => ({
+                icon: this.showInGroups ? Icon.checkCircle() : Icon.circle()
             }),
-            actionFn: ({gridModel}) => {
-                if (isEmpty(gridModel.groupBy)) {
-                    gridModel.setGroupBy('category');
-                    gridModel.hideColumn('category');
-                } else {
-                    gridModel.setGroupBy(null);
-                    gridModel.showColumn('category');
-                    gridModel.autosizeAsync();
-                }
+            actionFn: () => {
+                this.showInGroups = !this.showInGroups;
             }
         };
     }
@@ -183,6 +196,17 @@ export class RoleModel extends HoistModel {
     // -------------------------------
     // Implementation
     // -------------------------------
+
+    private displayRoles() {
+        const {gridModel} = this,
+            gridData = this.showInGroups
+                ? this.processRolesForTreeGrid(this.allRoles)
+                : this.allRoles;
+        gridModel.loadData(gridData);
+        gridModel.expandAll();
+        gridModel.autosizeAsync({includeCollapsedChildren: true});
+    }
+
     private async ensureInitializedAsync() {
         if (!this.moduleConfig) {
             const config = await XH.fetchJson({url: 'roleAdmin/config'});
@@ -196,9 +220,7 @@ export class RoleModel extends HoistModel {
         }
     }
 
-    private processRolesFromServer(
-        roles: Omit<HoistRole, 'users' | 'directoryGroups' | 'roles'>[]
-    ): HoistRole[] {
+    private processRolesFromServer(roles: Partial<HoistRole>[]): HoistRole[] {
         return roles.map(role => {
             const membersByType = mapValues(groupBy(role.members, 'type'), members =>
                 members.map(member => member.name)
@@ -208,8 +230,30 @@ export class RoleModel extends HoistModel {
                 users: membersByType['USER'] ?? [],
                 directoryGroups: membersByType['DIRECTORY_GROUP'] ?? [],
                 roles: membersByType['ROLE'] ?? []
-            };
+            } as HoistRole;
+        });
+    }
+
+    private processRolesForTreeGrid(roles: HoistRole[]) {
+        const root = [];
+        roles.forEach(role => {
+            const categories = role.category ? role.category.split('\\') : ['Uncategorized'];
+
+            let children = root,
+                id = '';
+            categories.forEach(category => {
+                let currCat = children.find(it => it.name === category && it.isGroupRow);
+                if (!currCat) {
+                    currCat = {name: category, children: [], isGroupRow: true};
+                    currCat.id = `${id}-${currCat.name}`;
+                    children.push(currCat);
+                }
+                children = currCat.children;
+                id = currCat.id;
+            });
+            children.push(role);
         });
+        return root;
     }
 
     private async createAsync(roleSpec?: HoistRole): Promise<void> {
@@ -221,25 +265,31 @@ export class RoleModel extends HoistModel {
 
     private createGridModel(): GridModel {
         return new GridModel({
+            treeMode: true,
+            treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
             autosizeOptions: {mode: 'managed'},
             emptyText: 'No roles found.',
             colChooserModel: true,
-            sortBy: 'name|asc',
+            sortBy: 'name',
             enableExport: true,
             exportOptions: {filename: 'roles'},
             filterModel: true,
-            groupBy: 'category',
-            groupRowRenderer: ({value}) => (!value ? 'Uncategorized' : value),
+            rowClassRules: {
+                'xh-grid-clear-background-color': ({data}) => !data.data.isGroupRow
+            },
             headerMenuDisplay: 'hover',
-            onRowDoubleClicked: ({data: record}) =>
-                !this.readonly &&
-                record &&
-                this.roleEditorModel
-                    .editAsync(record.data)
-                    .then(role => role && this.refreshAsync()),
+            onRowDoubleClicked: ({data: record}) => {
+                if (!this.readonly && record && record.data.isGroupRow) {
+                    this.roleEditorModel
+                        .editAsync(record.data)
+                        .then(role => role && this.refreshAsync());
+                }
+            },
             persistWith: {...this.persistWith, path: 'mainGrid'},
             store: {
-                idSpec: 'name',
+                idSpec: ({id, name}) => {
+                    return id ?? name;
+                },
                 fields: [
                     {name: 'users', displayName: 'Assigned Users', type: 'tags'},
                     {name: 'directoryGroups', displayName: 'Assigned Groups', type: 'tags'},
@@ -250,6 +300,7 @@ export class RoleModel extends HoistModel {
                     {name: 'effectiveRoles', type: 'json'},
                     {name: 'errors', type: 'json'},
                     {name: 'inheritedRoleNames', displayName: 'Inherited Roles', type: 'tags'},
+                    {name: 'isGroupRow', type: 'bool'},
                     {name: 'effectiveUserNames', displayName: 'Users', type: 'tags'},
                     {
                         name: 'effectiveDirectoryGroupNames',
@@ -261,10 +312,11 @@ export class RoleModel extends HoistModel {
                 ],
                 processRawData: raw => ({
                     ...raw,
-                    effectiveUserNames: raw.effectiveUsers.map(it => it.name),
-                    effectiveDirectoryGroupNames: raw.effectiveDirectoryGroups.map(it => it.name),
-                    effectiveRoleNames: raw.effectiveRoles.map(it => it.name),
-                    inheritedRoleNames: raw.inheritedRoles.map(it => it.name)
+                    effectiveUserNames: raw.effectiveUsers?.map(it => it.name),
+                    effectiveDirectoryGroupNames: raw.effectiveDirectoryGroups?.map(it => it.name),
+                    effectiveRoleNames: raw.effectiveRoles?.map(it => it.name),
+                    inheritedRoleNames: raw.inheritedRoles?.map(it => it.name),
+                    isGroupRow: !!raw.isGroupRow
                 })
             },
             colDefaults: {
@@ -278,14 +330,18 @@ export class RoleModel extends HoistModel {
                     actions: [this.editAction()],
                     omit: this.readonly
                 },
-                {field: {name: 'name', type: 'string'}},
-                {field: {name: 'category', type: 'string'}, hidden: true},
+                {field: {name: 'name', type: 'string'}, isTreeColumn: true},
+                {
+                    field: {name: 'category', type: 'string'},
+                    hidden: true,
+                    renderer: v => tagsRenderer(v?.split('\\'))
+                },
                 {field: {name: 'lastUpdated', type: 'date'}, ...Col.dateTime, hidden: true},
                 {field: {name: 'lastUpdatedBy', type: 'string'}, hidden: true},
                 {field: {name: 'notes', type: 'string'}, filterable: false, flex: 1}
             ],
             contextMenu: this.readonly
-                ? GridModel.defaultContextMenu
+                ? [this.groupByAction(), ...GridModel.defaultContextMenu]
                 : [
                       this.addAction(),
                       this.editAction(),

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

@@ -10,6 +10,7 @@ import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {errorMessage} from '@xh/hoist/desktop/cmp/error';
 import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
+import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
 import {Icon} from '@xh/hoist/icon';
@@ -42,7 +43,8 @@ export const rolePanel = hoistCmp.factory({
                         selModel: gridModel.selModel
                     }),
                     '-',
-                    filterChooser({flex: 1})
+                    filterChooser({flex: 1}),
+                    switchInput({bind: 'showInGroups', label: 'Show in Groups', labelSide: 'left'})
                 ],
                 item: hframe(vframe(grid(), roleGraph()), detailsPanel())
             }),

package/admin/tabs/userData/roles/graph/RoleGraph.ts

@@ -5,10 +5,11 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {chart} from '@xh/hoist/cmp/chart';
+import {errorBoundary} from '@xh/hoist/cmp/error';
 import {div, hspacer, placeholder} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
-import {buttonGroupInput, slider} from '@xh/hoist/desktop/cmp/input';
+import {buttonGroupInput, slider, switchInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
@@ -31,7 +32,7 @@ export const roleGraph = hoistCmp.factory({
             item: div({
                 item: div({
                     style: {margin: 'auto'},
-                    item: content()
+                    item: errorBoundary(content())
                 }),
                 style: {
                     display: 'flex',
@@ -78,6 +79,10 @@ export const roleGraph = hoistCmp.factory({
                         max: 2,
                         stepSize: 0.005,
                         labelRenderer: false
+                    }),
+                    'Limit to one level',
+                    switchInput({
+                        bind: 'limitToOneLevel'
                     })
                 ],
                 omit: !role

package/admin/tabs/userData/roles/graph/RoleGraphModel.ts

@@ -8,7 +8,7 @@ import {ChartModel} from '@xh/hoist/cmp/chart';
 import {HoistModel, lookup, managed, PlainObject} from '@xh/hoist/core';
 import {bindable, computed} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
-import {isEmpty, isMatch, sortBy, sumBy} from 'lodash';
+import {compact, isEmpty, isMatch, sortBy, sumBy} from 'lodash';
 import {RoleModel} from '../RoleModel';
 import {EffectiveRoleMember, HoistRole} from '../Types';
 
@@ -22,6 +22,8 @@ export class RoleGraphModel extends HoistModel {
 
     @bindable widthScale: number = 1.0;
 
+    @bindable limitToOneLevel: boolean = true;
+
     get relatedRoles(): EffectiveRoleMember[] {
         const {role, relationship} = this;
         if (!role) return [];
@@ -35,7 +37,7 @@ export class RoleGraphModel extends HoistModel {
 
     @computed
     get size() {
-        const {inverted, maxDepth, leafCount, widthScale} = this;
+        const {inverted, leafCount, maxDepth, widthScale} = this;
         if (inverted) {
             const AVG_WIDTH = 150,
                 AVG_HEIGHT = 26;
@@ -57,7 +59,7 @@ export class RoleGraphModel extends HoistModel {
         const {chartModel} = this;
         this.addReaction(
             {
-                track: () => [this.role, this.relationship],
+                track: () => [this.role, this.relationship, this.limitToOneLevel],
                 run: async ([role]) => {
                     chartModel.clear(); //  avoid HC rendering glitches
                     await wait();
@@ -86,15 +88,15 @@ export class RoleGraphModel extends HoistModel {
     // Implementation
     // -------------------------------
     private getSeriesData(): PlainObject[] {
-        const {role, relatedRoles} = this,
-            {name} = role;
+        const {role, relatedRoles, limitToOneLevel} = this,
+            {name: rootName} = role;
         if (isEmpty(relatedRoles)) return [];
         const alreadyAdded = new Set<string>();
         return [
             {
-                id: name,
+                id: rootName,
                 // Replace spaces with non-breaking spaces to prevent wrapping.
-                name: name.replaceAll(' ', '&nbsp'),
+                name: rootName.replaceAll(' ', '&nbsp'),
                 dataLabels: {
                     style: {
                         fontWeight: 600
@@ -105,24 +107,28 @@ export class RoleGraphModel extends HoistModel {
                     fillColor: 'var(--xh-bg-alt)'
                 }
             },
-            ...sortBy(relatedRoles, 'name').flatMap(({name, sourceRoles}) =>
-                [...sourceRoles]
-                    .sort((a, b) => {
-                        if (a === role.name) return -1;
-                        if (b === role.name) return 1;
-                        return a > b ? 1 : -1;
-                    })
-                    .map(source => {
-                        // Adds a space to the id to differentiate subsequent nodes from the single expanded one.
-                        const id = alreadyAdded.has(name) ? `${name} ` : name;
-                        alreadyAdded.add(name);
-                        return {
-                            id,
-                            // Replace spaces with non-breaking spaces to prevent wrapping.
-                            name: name.replaceAll(' ', '&nbsp'),
-                            parent: source
-                        };
-                    })
+            ...compact(
+                sortBy(relatedRoles, 'name').flatMap(({name, sourceRoles}) =>
+                    [...sourceRoles]
+                        .sort((a, b) => {
+                            if (a === role.name) return -1;
+                            if (b === role.name) return 1;
+                            return a > b ? 1 : -1;
+                        })
+                        .map(source => {
+                            // Omit all non-root nodes if limitToOneLevel is true
+                            if (limitToOneLevel && source !== rootName) return null;
+                            // Adds a space to the id to differentiate subsequent nodes from the single expanded one.
+                            const id = alreadyAdded.has(name) ? `${name} ` : name;
+                            alreadyAdded.add(name);
+                            return {
+                                id,
+                                // Replace spaces with non-breaking spaces to prevent wrapping.
+                                name: name.replaceAll(' ', '&nbsp'),
+                                parent: source
+                            };
+                        })
+                )
             )
         ];
     }
@@ -184,7 +190,11 @@ export class RoleGraphModel extends HoistModel {
 
     @computed
     private get leafCount(): number {
-        const {relatedRoles} = this;
+        const {relatedRoles, limitToOneLevel, role} = this;
+        // Limit to one level means that we only show the direct children of the root role.
+        if (limitToOneLevel)
+            return sumBy(relatedRoles, it => (it.sourceRoles.includes(role.name) ? 1 : 0));
+
         return sumBy(relatedRoles, it => {
             const hasChildren = relatedRoles.some(other => other.sourceRoles.includes(it.name)),
                 parentCount = it.sourceRoles.length;
@@ -195,8 +205,11 @@ export class RoleGraphModel extends HoistModel {
 
     @computed
     private get maxDepth(): number {
-        const {role: root, relatedRoles} = this;
+        const {role: root, relatedRoles, limitToOneLevel} = this;
+        // Only the root node.
         if (isEmpty(relatedRoles)) return 1;
+        // Limit to one level means that we only show two levels.
+        if (limitToOneLevel) return 2;
 
         const maxDepthRecursive = (roleName: string) => {
             if (roleName === root.name) return 1;

package/appcontainer/AppContainerModel.ts

@@ -154,10 +154,20 @@ export class AppContainerModel extends HoistModel {
             // (e.g. `env(safe-area-inset-top)`). This allows us to avoid overlap with OS-level
             // controls like the iOS tab switcher, as well as to more easily set the background
             // color of the (effectively) unusable portions of the screen via
-            const vp = document.querySelector('meta[name=viewport]'),
-                content = vp.getAttribute('content');
-
-            vp.setAttribute('content', content + ', viewport-fit=cover');
+            this.setViewportContent(this.getViewportContent() + ', viewport-fit=cover');
+
+            // Temporarily set maximum-scale=1 on orientation change to force reset Safari iOS
+            // zoom level, and then remove to restore user zooming. This is a workaround for a bug
+            // where Safari full-screen re-zooms on orientation change if user has *ever* zoomed.
+            window.addEventListener(
+                'orientationchange',
+                () => {
+                    const content = this.getViewportContent();
+                    this.setViewportContent(content + ', maximum-scale=1');
+                    setTimeout(() => this.setViewportContent(content), 0);
+                },
+                false
+            );
         }
 
         try {
@@ -358,4 +368,14 @@ export class AppContainerModel extends HoistModel {
             loadingPromise = mobxWhen(() => terminalStates.includes(this.appStateModel.state));
         loadingPromise.linkTo(this.appLoadModel);
     }
+
+    private setViewportContent(content: string) {
+        const vp = document.querySelector('meta[name=viewport]');
+        vp?.setAttribute('content', content);
+    }
+
+    private getViewportContent(): string {
+        const vp = document.querySelector('meta[name=viewport]');
+        return vp ? vp.getAttribute('content') : '';
+    }
 }

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

@@ -17,12 +17,12 @@ export declare class RoleModel extends HoistModel {
     readonly roleEditorModel: RoleEditorModel;
     allRoles: HoistRole[];
     moduleConfig: RoleModuleConfig;
+    showInGroups: boolean;
     get readonly(): boolean;
     get selectedRole(): HoistRole;
     constructor();
     doLoadAsync(loadSpec: LoadSpec): Promise<void>;
     selectRoleAsync(name: string): Promise<void>;
-    setRoles(roles: HoistRole[]): void;
     clear(): void;
     applyMemberFilter(name: string, type: RoleMemberType, includeEffective: boolean): void;
     deleteAsync(role: HoistRole): Promise<boolean>;
@@ -32,8 +32,10 @@ export declare class RoleModel extends HoistModel {
     deleteAction(): RecordActionSpec;
     private groupByAction;
     editAsync(role: HoistRole): Promise<void>;
+    private displayRoles;
     private ensureInitializedAsync;
     private processRolesFromServer;
+    private processRolesForTreeGrid;
     private createAsync;
     private createGridModel;
     private createFilterChooserModel;

package/build/types/admin/tabs/userData/roles/graph/RoleGraphModel.d.ts

@@ -8,6 +8,7 @@ export declare class RoleGraphModel extends HoistModel {
     relationship: 'effective' | 'inherited';
     inverted: boolean;
     widthScale: number;
+    limitToOneLevel: boolean;
     get relatedRoles(): EffectiveRoleMember[];
     get role(): HoistRole;
     get size(): {

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

@@ -69,4 +69,6 @@ export declare class AppContainerModel extends HoistModel {
     private startOptionsDialog;
     private setAppState;
     private bindInitSequenceToAppLoadModel;
+    private setViewportContent;
+    private getViewportContent;
 }

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

@@ -4,14 +4,17 @@ 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;
+    /** Pre-processed by HoistComponent internals and passed as second argument to render. */
+    ref: never;
 };
 /**
  * Configuration for creating a Component.  May be specified either as a render function,

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

@@ -21,7 +21,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;
 }