@xh/hoist 59.2.0 → 59.3.0

package/desktop/cmp/tab/impl/Tab.ts

@@ -26,7 +26,7 @@ export const tab = hoistCmp.factory({
     className: 'xh-tab',
     model: uses(TabModel, {publishMode: 'limited'}),
 
-    render({model, className}) {
+    render({model, className, testId}) {
         let {content, isActive, renderMode, refreshContextModel} = model,
             wasActivated = useRef(false);
 
@@ -42,6 +42,7 @@ export const tab = hoistCmp.factory({
         return frame({
             display: isActive ? 'flex' : 'none',
             className,
+            testId,
             item: refreshContextView({
                 model: refreshContextModel,
                 item: errorBoundary(elementFromContent(content, {flex: 1}))

package/desktop/cmp/tab/impl/TabContainer.ts

@@ -5,18 +5,19 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {div, hbox, placeholder, vbox} from '@xh/hoist/cmp/layout';
+import {TabContainerModel, TabContainerProps} from '@xh/hoist/cmp/tab';
+import {getTestId} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
 import '../Tabs.scss';
 import {tabSwitcher} from '../TabSwitcher';
 import {tab} from './Tab';
-import {TabContainerModel, TabContainerProps} from '@xh/hoist/cmp/tab';
 
 /**
  * Desktop implementation of TabContainer.
  * @internal
  */
-export function tabContainerImpl({model, className, ...props}: TabContainerProps) {
+export function tabContainerImpl({model, className, testId, ...props}: TabContainerProps) {
     const layoutProps = getLayoutProps(props),
         vertical = ['left', 'right'].includes(model.switcher?.orientation),
         container = vertical ? hbox : vbox;
@@ -29,24 +30,26 @@ export function tabContainerImpl({model, className, ...props}: TabContainerProps
     return container({
         ...layoutProps,
         className,
-        item: getChildren(model)
+        testId,
+        item: getChildren(model, testId)
     });
 }
 
-function getChildren(model: TabContainerModel) {
-    const {tabs, activeTabId, switcher} = model,
-        switcherBefore = ['left', 'top'].includes(switcher?.orientation),
-        switcherAfter = ['right', 'bottom'].includes(switcher?.orientation);
-
+function getChildren(model: TabContainerModel, testId: string) {
+    const {tabs} = model;
     if (isEmpty(tabs)) {
-        return div({
-            className: 'xh-tab-wrapper',
-            item: placeholder(model.emptyText)
-        });
+        return div({className: 'xh-tab-wrapper', item: placeholder(model.emptyText)});
     }
 
+    const {activeTabId, switcher} = model,
+        switcherBefore = ['left', 'top'].includes(switcher?.orientation),
+        switcherAfter = ['right', 'bottom'].includes(switcher?.orientation),
+        switcherCmp = switcher
+            ? tabSwitcher({key: 'switcher', testId: getTestId(testId, 'switcher'), ...switcher})
+            : null;
+
     return [
-        switcherBefore ? tabSwitcher({key: 'switcher', ...switcher}) : null,
+        switcherBefore ? switcherCmp : null,
         ...tabs.map(tabModel => {
             const tabId = tabModel.id,
                 style = activeTabId !== tabId ? hideStyle : undefined;
@@ -55,10 +58,10 @@ function getChildren(model: TabContainerModel) {
                 className: 'xh-tab-wrapper',
                 style,
                 key: tabId,
-                item: tab({model: tabModel})
+                item: tab({model: tabModel, testId: getTestId(testId, tabId)})
             });
         }),
-        switcherAfter ? tabSwitcher({key: 'switcher', ...switcher}) : null
+        switcherAfter ? switcherCmp : null
     ];
 }
 

package/desktop/cmp/toolbar/Toolbar.ts

@@ -5,7 +5,7 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {filler, fragment, hbox, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, BoxProps, HoistProps} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistProps} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
@@ -65,6 +65,7 @@ export const [Toolbar, toolbar] = hoistCmp.withFactory<ToolbarProps>({
             enableOverflowMenu = false,
             collapseFrom = 'end',
             minVisibleItems,
+            testId,
             ...rest
         },
         ref
@@ -83,6 +84,7 @@ export const [Toolbar, toolbar] = hoistCmp.withFactory<ToolbarProps>({
 
         return container({
             ref,
+            testId,
             ...rest,
             className: classNames(
                 className,

package/desktop/cmp/treemap/SplitTreeMap.ts

@@ -28,12 +28,13 @@ export const [SplitTreeMap, splitTreeMap] = hoistCmp.withFactory<SplitTreeMapPro
     model: uses(SplitTreeMapModel),
     className: 'xh-split-treemap',
 
-    render({model, className, ...props}, ref) {
+    render({model, className, testId, ...props}, ref) {
         const {primaryMapModel, secondaryMapModel, orientation} = model,
             errors = uniq(compact([primaryMapModel.error, secondaryMapModel.error])),
             container = orientation === 'horizontal' ? hframe : vframe;
 
         return container({
+            testId,
             ref,
             className,
             items: errors.length ? errorPanel({errors}) : childMaps(),

package/desktop/cmp/treemap/TreeMap.ts

@@ -9,9 +9,10 @@ import {box, div, placeholder} from '@xh/hoist/cmp/layout';
 import {
     hoistCmp,
     HoistModel,
-    LayoutProps,
     HoistProps,
+    LayoutProps,
     lookup,
+    TestSupportProps,
     useLocalModel,
     uses,
     XH
@@ -35,7 +36,7 @@ import {assign, cloneDeep, debounce, isFunction, merge, omit} from 'lodash';
 import './TreeMap.scss';
 import {TreeMapModel} from './TreeMapModel';
 
-export interface TreeMapProps extends HoistProps<TreeMapModel>, LayoutProps {}
+export interface TreeMapProps extends HoistProps<TreeMapModel>, LayoutProps, TestSupportProps {}
 
 /**
  * Component for rendering a TreeMap.
@@ -50,7 +51,7 @@ export const [TreeMap, treeMap] = hoistCmp.withFactory<TreeMapProps>({
     model: uses(TreeMapModel),
     className: 'xh-treemap',
 
-    render({model, className, ...props}, ref) {
+    render({model, className, testId, ...props}, ref) {
         if (!Highcharts) {
             console.error(
                 'Highcharts has not been imported in to this application. Please import and ' +
@@ -99,6 +100,7 @@ export const [TreeMap, treeMap] = hoistCmp.withFactory<TreeMapProps>({
             ...layoutProps,
             className: classNames(className, `xh-treemap--${impl.theme}`),
             ref,
+            testId,
             items
         });
     }

package/desktop/cmp/zoneGrid/impl/ZoneMapper.scss

@@ -0,0 +1,71 @@
+.xh-zone-mapper {
+  width: 350px;
+  height: 500px;
+
+  &__zone-picker {
+    padding: var(--xh-pad-px);
+    background: var(--xh-bg-alt);
+    border-bottom: var(--xh-border-solid);
+
+    &__zone-cell {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      flex: 1;
+      min-height: 30px;
+      white-space: nowrap;
+      padding: var(--xh-pad-half-px);
+      background: var(--xh-bg);
+      border: var(--xh-border-solid);
+      cursor: pointer;
+
+      & > span:not(:last-child) {
+        margin-right: 3px;
+      }
+
+      &--selected {
+        box-shadow: var(--xh-form-field-focused-box-shadow);
+        background: var(--xh-grid-tree-group-bg);
+      }
+
+      &.tl {
+        font-size: var(--xh-grid-multifield-top-font-size-px);
+        border-radius: var(--xh-border-radius-px) 0 0 0;
+      }
+
+      &.tr {
+        justify-content: flex-end;
+        margin: 0 0 0 -1px;
+        font-size: var(--xh-grid-multifield-top-font-size-px);
+        border-radius: 0 var(--xh-border-radius-px) 0 0;
+      }
+
+      &.bl {
+        margin: -1px 0 0 0;
+        font-size: var(--xh-grid-multifield-bottom-font-size-px);
+        border-radius: 0 0 0 var(--xh-border-radius-px);
+      }
+
+      &.br {
+        justify-content: flex-end;
+        margin: -1px 0 0 -1px;
+        font-size: var(--xh-grid-multifield-bottom-font-size-px);
+        border-radius: 0 0 var(--xh-border-radius-px);
+      }
+    }
+  }
+
+  &__sort-picker {
+    flex: none !important;
+    border-top: var(--xh-border-solid);
+
+    .xh-panel__content .xh-hframe {
+      padding: var(--xh-pad-px);
+      align-items: center;
+
+      & > *:not(:last-child) {
+        margin-right: var(--xh-pad-px);
+      }
+    }
+  }
+}

package/desktop/cmp/zoneGrid/impl/ZoneMapper.ts

@@ -0,0 +1,232 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2023 Extremely Heavy Industries Inc.
+ */
+import '@xh/hoist/desktop/register';
+import {hoistCmp, HoistModel, lookup, managed, useLocalModel, uses} from '@xh/hoist/core';
+import {div, filler, hbox, hframe, span, vbox} from '@xh/hoist/cmp/layout';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {grid, GridModel} from '@xh/hoist/cmp/grid';
+import {checkbox} from '@xh/hoist/desktop/cmp/input';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {select} from '@xh/hoist/desktop/cmp/input';
+import {Icon} from '@xh/hoist/icon';
+import {intersperse} from '@xh/hoist/utils/js';
+import {isEmpty} from 'lodash';
+import classNames from 'classnames';
+import './ZoneMapper.scss';
+import {ZoneMapperModel} from '@xh/hoist/cmp/zoneGrid/impl/ZoneMapperModel';
+
+/**
+ * Hoist UI for user selection and discovery of available ZoneGrid columns, enabled via the
+ * `ZoneGridModel.zoneMapperModel` config option.
+ *
+ * This component displays an example of each of the four zones, with the available columns for
+ * the currently selected zone displayed in a list below. Users can toggle column visibility
+ * and labels for each zone to construct a custom layout for the grid rows.
+ *
+ * It is not necessary to manually create instances of this component within an application.
+ *
+ * @internal
+ */
+export const [ZoneMapper, zoneMapper] = hoistCmp.withFactory<ZoneMapperModel>({
+    displayName: 'ZoneMapper',
+    model: uses(ZoneMapperModel),
+    className: 'xh-zone-mapper',
+    render({model, className}) {
+        const {showRestoreDefaults, isDirty} = model,
+            impl = useLocalModel(ZoneMapperLocalModel);
+
+        return panel({
+            className,
+            items: [zonePicker(), grid({model: impl.gridModel}), sortPicker()],
+            bbar: [
+                button({
+                    omit: !showRestoreDefaults,
+                    text: 'Restore Defaults',
+                    icon: Icon.undo({className: 'xh-red'}),
+                    onClick: () => model.restoreDefaultsAsync()
+                }),
+                filler(),
+                button({
+                    text: 'Cancel',
+                    onClick: () => model.close()
+                }),
+                button({
+                    text: 'Save',
+                    icon: Icon.check(),
+                    intent: 'success',
+                    disabled: !isDirty,
+                    onClick: () => {
+                        model.commit();
+                        model.close();
+                    }
+                })
+            ]
+        });
+    }
+});
+
+const zonePicker = hoistCmp.factory<ZoneMapperModel>({
+    render({model}) {
+        const {leftFlex, rightFlex} = model,
+            className = 'xh-zone-mapper__zone-picker';
+
+        return vbox({
+            className,
+            items: [
+                hbox({
+                    className: `${className}__top`,
+                    items: [
+                        zoneCell({zone: 'tl', flex: leftFlex}),
+                        zoneCell({zone: 'tr', flex: rightFlex})
+                    ]
+                }),
+                hbox({
+                    className: `${className}__bottom`,
+                    items: [
+                        zoneCell({zone: 'bl', flex: leftFlex}),
+                        zoneCell({zone: 'br', flex: rightFlex})
+                    ]
+                })
+            ]
+        });
+    }
+});
+
+const zoneCell = hoistCmp.factory<ZoneMapperModel>({
+    render({model, zone, flex}) {
+        const {selectedZone, delimiter} = model,
+            className = 'xh-zone-mapper__zone-picker__zone-cell',
+            samples = model.getSamplesForZone(zone);
+
+        return div({
+            className: classNames(
+                className,
+                zone,
+                selectedZone === zone ? `${className}--selected` : null
+            ),
+            style: {flex},
+            onClick: () => (model.selectedZone = zone),
+            items: intersperse(samples, span(delimiter))
+        });
+    }
+});
+
+const sortPicker = hoistCmp.factory<ZoneMapperModel>({
+    render({model}) {
+        return panel({
+            className: 'xh-zone-mapper__sort-picker',
+            title: 'Sorting',
+            icon: Icon.list(),
+            compactHeader: true,
+            items: hframe(
+                select({
+                    bind: 'sortByColId',
+                    enableFilter: true,
+                    flex: 1,
+                    options: model.sortByOptions
+                }),
+                button({
+                    text: model.getSortLabel(),
+                    icon: model.getSortIcon(),
+                    width: 80,
+                    minimal: false,
+                    onClick: () => model.setNextSortBy()
+                })
+            )
+        });
+    }
+});
+
+class ZoneMapperLocalModel extends HoistModel {
+    override xhImpl = true;
+    @lookup(ZoneMapperModel) model: ZoneMapperModel;
+
+    @managed
+    gridModel: GridModel;
+
+    override onLinked() {
+        super.onLinked();
+
+        this.gridModel = this.createGridModel();
+
+        this.addReaction({
+            track: () => [
+                this.model.isOpen,
+                this.model.isPopoverOpen,
+                this.model.mappings,
+                this.model.selectedZone
+            ],
+            run: () => this.syncGrid(),
+            fireImmediately: true
+        });
+    }
+
+    private createGridModel(): GridModel {
+        const {model} = this,
+            {groupColumns, fields} = model,
+            hasGrouping = groupColumns && fields.some(it => it.chooserGroup);
+
+        return new GridModel({
+            store: {idSpec: 'field'},
+            groupBy: hasGrouping ? 'chooserGroup' : null,
+            colDefaults: {movable: false, resizable: false, sortable: false},
+            selModel: 'disabled',
+            columns: [
+                {
+                    field: 'displayName',
+                    headerName: 'Field',
+                    flex: 1
+                },
+                {
+                    field: 'show',
+                    align: 'center',
+                    renderer: (value, {record}) => {
+                        const {field} = record.data;
+                        return checkbox({value, onChange: () => model.toggleShown(field)});
+                    }
+                },
+                {
+                    field: 'showLabel',
+                    headerName: 'Label',
+                    align: 'center',
+                    renderer: (value, {record}) => {
+                        const {label, field} = record.data;
+                        if (!label) return null;
+                        return checkbox({value, onChange: () => model.toggleShowLabel(field)});
+                    }
+                },
+                // Hidden
+                {field: 'field', hidden: true},
+                {field: 'label', hidden: true},
+                {field: 'chooserGroup', hidden: true}
+            ]
+        });
+    }
+
+    private syncGrid() {
+        const {fields, mappings, limits, selectedZone} = this.model,
+            mapping = mappings[selectedZone],
+            limit = limits?.[selectedZone],
+            data = [];
+
+        // 1) Determine which fields are shown and labeled for the zone
+        const allowedFields = !isEmpty(limit?.only)
+            ? fields.filter(it => limit.only.includes(it.field))
+            : fields;
+
+        allowedFields.forEach(f => {
+            const fieldMapping = mapping.find(it => f.field === it.field),
+                show = !!fieldMapping,
+                showLabel = fieldMapping?.showLabel ?? false;
+
+            data.push({...f, show, showLabel});
+        });
+
+        // 2) Load into display grid
+        this.gridModel.loadData(data);
+    }
+}

package/desktop/cmp/zoneGrid/impl/ZoneMapperDialog.ts

@@ -0,0 +1,35 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2023 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {Icon} from '@xh/hoist/icon';
+import {dialog} from '@xh/hoist/kit/blueprint';
+import {ZoneMapperModel} from '@xh/hoist/cmp/zoneGrid/impl/ZoneMapperModel';
+import {zoneMapper} from './ZoneMapper';
+
+export const zoneMapperDialog = hoistCmp.factory({
+    model: uses(ZoneMapperModel),
+    className: 'xh-zone-mapper-dialog',
+
+    render({model, className}) {
+        const {isOpen} = model;
+        if (!isOpen) return null;
+
+        return dialog({
+            className,
+            icon: Icon.gridLarge(),
+            title: 'Customize Fields',
+            isOpen: true,
+            onClose: () => model.close(),
+            item: zoneMapper({model}),
+            // Size determined by inner component
+            style: {
+                width: 'unset',
+                height: 'unset'
+            }
+        });
+    }
+});

package/dynamics/desktop.ts

@@ -19,6 +19,7 @@ export let ColChooserModel = null;
 export let ColumnHeaderFilterModel = null;
 export let ModalSupportModel = null;
 export let colChooser = null;
+export let zoneMapper = null;
 export let columnHeaderFilter = null;
 export let dockContainerImpl = null;
 export let errorMessage = null;
@@ -38,6 +39,7 @@ export function installDesktopImpls(impls) {
     ColumnHeaderFilterModel = impls.ColumnHeaderFilterModel;
     ModalSupportModel = impls.ModalSupportModel;
     colChooser = impls.colChooser;
+    zoneMapper = impls.zoneMapper;
     columnHeaderFilter = impls.columnHeaderFilter;
     dockContainerImpl = impls.dockContainerImpl;
     errorMessage = impls.errorMessage;

package/dynamics/mobile.ts

@@ -17,6 +17,7 @@
  */
 export let ColChooserModel = null;
 export let colChooser = null;
+export let zoneMapper = null;
 export let errorMessage = null;
 export let pinPadImpl = null;
 export let storeFilterFieldImpl = null;
@@ -30,6 +31,7 @@ export let tabContainerImpl = null;
 export function installMobileImpls(impls) {
     ColChooserModel = impls.ColChooserModel;
     colChooser = impls.colChooser;
+    zoneMapper = impls.zoneMapper;
     errorMessage = impls.errorMessage;
     pinPadImpl = impls.pinPadImpl;
     storeFilterFieldImpl = impls.storeFilterFieldImpl;

package/inspector/instances/InstancesModel.ts

@@ -32,7 +32,7 @@ export class InstancesModel extends HoistModel {
     instancesPanelModel: PanelModel;
 
     get statsModel(): StatsModel {
-        return XH.getActiveModels(StatsModel)[0] as StatsModel;
+        return XH.getModels(StatsModel)[0] as StatsModel;
     }
 
     get selectedSyncRun() {
@@ -170,7 +170,7 @@ export class InstancesModel extends HoistModel {
     getInstance(xhId: string): HoistBase {
         if (!xhId) return null;
         return (
-            head(XH.getActiveModels(it => it.xhId === xhId)) ??
+            head(XH.getModels(it => it.xhId === xhId)) ??
             XH.getServices().find(it => it.xhId === xhId) ??
             XH.getStores().find(it => it.xhId === xhId)
         );

package/mobile/appcontainer/AppContainer.ts

@@ -11,6 +11,7 @@ import {createElement, hoistCmp, refreshContextView, uses, XH} from '@xh/hoist/c
 import {installMobileImpls} from '@xh/hoist/dynamics/mobile';
 import {colChooser} from '@xh/hoist/mobile/cmp/grid/impl/ColChooser';
 import {ColChooserModel} from '@xh/hoist/mobile/cmp/grid/impl/ColChooserModel';
+import {zoneMapper} from '@xh/hoist/mobile/cmp/zoneGrid/impl/ZoneMapper';
 import {mask} from '@xh/hoist/mobile/cmp/mask';
 import {storeFilterFieldImpl} from '@xh/hoist/mobile/cmp/store/impl/StoreFilterField';
 import {tabContainerImpl} from '@xh/hoist/mobile/cmp/tab/impl/TabContainer';
@@ -38,6 +39,7 @@ installMobileImpls({
     pinPadImpl,
     colChooser,
     ColChooserModel,
+    zoneMapper,
     errorMessage
 });
 

package/mobile/cmp/button/ZoneMapperButton.ts

@@ -0,0 +1,41 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2023 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp, useContextModel} from '@xh/hoist/core';
+import {ZoneGridModel} from '../../../cmp/zoneGrid';
+import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
+import {Icon} from '@xh/hoist/icon';
+import {withDefault} from '@xh/hoist/utils/js';
+import '@xh/hoist/mobile/register';
+
+export interface ZoneMapperButtonProps extends ButtonProps {
+    /** ZoneGridModel of the grid for which this button should show a chooser. */
+    zoneGridModel?: ZoneGridModel;
+}
+
+/**
+ * A convenience button to trigger the display of a ZoneMapper UI for ZoneGrid configuration.
+ *
+ * Requires a `ZoneGridModel.zoneMapperModel` config option, set to true for default implementation.
+ */
+export const [ZoneMapperButton, zoneMapperButton] = hoistCmp.withFactory<ZoneMapperButtonProps>({
+    displayName: 'ZoneMapperButton',
+    model: false,
+    render({zoneGridModel, icon = Icon.gridLarge(), onClick, ...props}) {
+        zoneGridModel = withDefault(zoneGridModel, useContextModel(ZoneGridModel));
+
+        if (!zoneGridModel) {
+            console.error(
+                "No ZoneGridModel available to ZoneMapperButton. Provide via a 'zoneGridModel' prop, or context."
+            );
+            return button({icon, disabled: true, ...props});
+        }
+
+        onClick = onClick ?? (() => zoneGridModel.showMapper());
+
+        return button({icon, onClick, ...props});
+    }
+});

package/mobile/cmp/button/index.ts

@@ -15,3 +15,4 @@ export * from './LogoutButton';
 export * from './RefreshButton';
 export * from './RestoreDefaultsButton';
 export * from './NavigatorBackButton';
+export * from './ZoneMapperButton';

package/mobile/cmp/error/ErrorMessage.ts

@@ -77,17 +77,17 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
         if (!message) {
             if (isString(error)) {
                 message = error;
-            } else if (error.message) {
-                message = error.message;
+            } else {
+                message = error.message || error.name || 'Unknown Error';
             }
         }
 
         if (actionFn) {
-            actionButtonProps = {...actionButtonProps, onClick: error => actionFn(error)};
+            actionButtonProps = {...actionButtonProps, onClick: () => actionFn(error)};
         }
 
         if (detailsFn) {
-            detailsButtonProps = {...detailsButtonProps, onClick: error => detailsFn(error)};
+            detailsButtonProps = {...detailsButtonProps, onClick: () => detailsFn(error)};
         }
 
         let buttons = [],

package/mobile/cmp/input/Select.scss

@@ -107,6 +107,7 @@
 
     &__fullscreen-wrapper {
       position: absolute !important;
+      z-index: inherit;
       top: 0;
       left: 0;
       right: 0;

package/mobile/cmp/input/Select.ts

@@ -57,6 +57,12 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
      */
     enableFullscreen?: boolean;
 
+    /**
+     * Optional override for fullscreen z-index. Useful for enabling fullscreen from
+     * within components that have a higher z-index.
+     */
+    fullScreenZIndex?: number;
+
     /**
      * 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.
@@ -531,6 +537,7 @@ class SelectInputModel extends HoistInputModel {
             portal.id = FULLSCREEN_PORTAL_ID;
             document.body.appendChild(portal);
         }
+        portal.style.zIndex = withDefault(this.componentProps.fullScreenZIndex, null);
         return portal;
     }