@xh/hoist 56.3.0 → 56.5.0

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {box, div, filler, fragment, hbox, vbox} from '@xh/hoist/cmp/layout';
@@ -12,7 +12,7 @@ import {select, MENU_PORTAL_ID} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
-import {menu, menuDivider, menuItem, popover, Position} from '@xh/hoist/kit/blueprint';
+import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
@@ -26,8 +26,8 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
     /** Min height in pixels of the popover menu itself. */
     popoverMinHeight?: number;
 
-    /** Position for chooser popover, as per Blueprint docs. */
-    popoverPosition?: Position;
+    /** Position of popover relative to target button. */
+    popoverPosition?: 'bottom' | 'top';
 
     /** Title for popover (default "GROUP BY") or null to suppress. */
     popoverTitle?: string;
@@ -74,12 +74,11 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             item: popover({
                 isOpen,
                 popoverRef: model.popoverRef,
-                popoverClassName: classNames(
-                    'xh-grouping-chooser-popover',
-                    editorIsOpen ? 'xh-popup--framed' : null
-                ),
-                position: favoritesIsOpen ? 'bottom-right' : popoverPosition,
-                minimal: favoritesIsOpen,
+                popoverClassName: 'xh-grouping-chooser-popover xh-popup--framed',
+                // right align favorites popover to match star icon
+                // left align editor to keep in place when button changing size when commitOnChange: true
+                position: favoritesIsOpen ? `${popoverPosition}-right` : `${popoverPosition}-left`,
+                minimal: styleButtonAsInput,
                 target: fragment(
                     button({
                         text: label,
@@ -92,23 +91,23 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                         ),
                         minimal: styleButtonAsInput,
                         ...buttonProps,
-                        onClick: () => model.showEditor()
+                        onClick: () => model.toggleEditor()
                     }),
                     favoritesIcon()
                 ),
                 content: favoritesIsOpen
                     ? favoritesMenu()
-                    : editor({popoverWidth, popoverMinHeight, popoverTitle, emptyText}),
+                    : editorIsOpen
+                    ? editor({popoverWidth, popoverMinHeight, popoverTitle, emptyText})
+                    : null,
                 onInteraction: (nextOpenState, e) => {
-                    if (isOpen && nextOpenState === false) {
-                        // Prevent clicks with Select controls from closing popover
-                        const id = MENU_PORTAL_ID,
-                            selectPortal = document.getElementById(id)?.contains(e?.target),
-                            selectClick = e?.target?.classList.contains('xh-select__single-value');
-
-                        if (!selectPortal && !selectClick) {
-                            model.commitPendingValueAndClose();
-                        }
+                    if (
+                        isOpen &&
+                        nextOpenState === false &&
+                        e?.target &&
+                        !targetIsControlButtonOrPortal(e.target)
+                    ) {
+                        model.commitPendingValueAndClose();
                     }
                 }
             })
@@ -125,7 +124,7 @@ const editor = hoistCmp.factory<GroupingChooserModel>({
             width: popoverWidth,
             minHeight: popoverMinHeight,
             items: [
-                div({className: 'xh-popup__title', item: popoverTitle}),
+                div({className: 'xh-popup__title', item: popoverTitle, omit: !popoverTitle}),
                 dimensionList({emptyText}),
                 addDimensionControl(),
                 filler()
@@ -293,6 +292,23 @@ function getDimOptions(dims, model) {
     return sortBy(ret, 'label');
 }
 
+function targetIsControlButtonOrPortal(target) {
+    const selectPortal = document.getElementById(MENU_PORTAL_ID)?.contains(target),
+        selectClick = targetWithin(target, 'xh-select__single-value'),
+        editorClick = targetWithin(target, 'xh-grouping-chooser-button--with-favorites');
+    return selectPortal || selectClick || editorClick;
+}
+
+/**
+ * Determines whether any of the target's parents have a specific class name
+ */
+function targetWithin(target, className): boolean {
+    for (let elem = target; elem; elem = elem.parentElement) {
+        if (elem.classList.contains(className)) return true;
+    }
+    return false;
+}
+
 //------------------
 // Favorites
 //------------------
@@ -303,7 +319,7 @@ const favoritesIcon = hoistCmp.factory<GroupingChooserModel>({
             item: Icon.favorite(),
             className: 'xh-grouping-chooser__favorite-icon',
             onClick: e => {
-                model.openFavoritesMenu();
+                model.toggleFavoritesMenu();
                 e.stopPropagation();
             }
         });

package/desktop/cmp/input/ButtonGroupInput.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {hoistCmp, HoistModel, Intent, XH} from '@xh/hoist/core';

package/desktop/cmp/input/Checkbox.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {hoistCmp, StyleProps, HoistProps, HSide} from '@xh/hoist/core';

package/desktop/cmp/input/CodeInput.scss

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 .xh-app .xh-input {
   .CodeMirror {

package/desktop/cmp/input/CodeInput.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {box, div, filler, fragment, frame, hbox, label, span, vbox} from '@xh/hoist/cmp/layout';
@@ -83,7 +83,7 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
      */
     readonly?: boolean;
 
-    /** True to display a copy button at bottom-right of input. */
+    /** True (default) to display a copy button at bottom-right of input. */
     showCopyButton?: boolean;
 
     /**
@@ -148,7 +148,7 @@ class CodeInputModel extends HoistInputModel {
     }
 
     get showCopyButton(): boolean {
-        return withDefault(this.componentProps.showCopyButton, false);
+        return withDefault(this.componentProps.showCopyButton, true);
     }
 
     get showFullscreenButton(): boolean {
@@ -182,14 +182,14 @@ class CodeInputModel extends HoistInputModel {
     }
 
     get actionButtons(): ReactElement[] {
-        const {showCopyButton, showFormatButton, showFullscreenButton, editor} = this;
+        const {showCopyButton, showFormatButton, showFullscreenButton} = this;
         return compact([
             showCopyButton
                 ? clipboardButton({
                       text: null,
                       title: 'Copy to clipboard',
                       successMessage: 'Contents copied to clipboard',
-                      getCopyText: () => editor.getValue()
+                      getCopyText: () => this.internalValue
                   })
                 : null,
             showFormatButton

package/desktop/cmp/input/DateInput.scss

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 .xh-date-input {

package/desktop/cmp/input/DateInput.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {div} from '@xh/hoist/cmp/layout';

package/desktop/cmp/input/JsonInput.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {hoistCmp} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';

package/desktop/cmp/input/NumberInput.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';

package/desktop/cmp/input/RadioInput.scss

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 .xh-radio-input {

package/desktop/cmp/input/RadioInput.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {hoistCmp, HoistProps, HSide} from '@xh/hoist/core';

package/desktop/cmp/input/Select.scss

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 // Host div for Select option menu portal.
@@ -105,6 +105,14 @@
         }
       }
     }
+
+    &__tooltip {
+      &__target {
+        // Required to override tooltip styling applied by Blueprint, which was breaking the
+        // react-select styles that elide overly-long values.
+        display: inherit;
+      }
+    }
   }
 }
 

package/desktop/cmp/input/Select.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {box, div, fragment, hbox, span} from '@xh/hoist/cmp/layout';
@@ -18,6 +18,7 @@ import {
 } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
+import {tooltip} from '@xh/hoist/kit/blueprint';
 import {
     reactAsyncCreatableSelect,
     reactAsyncSelect,
@@ -75,6 +76,12 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
     /** True to allow entry/selection of multiple values - "tag picker" style. */
     enableMulti?: boolean;
 
+    /**
+     * True to enable tooltips on selected values. Enable when the space
+     * available to the select component might not support showing the value's full text.
+     */
+    enableTooltips?: boolean;
+
     /**
      * True to use react-windowed-select for improved performance on large option lists.
      * See https://github.com/jacobworrel/react-windowed-select/.
@@ -362,7 +369,7 @@ class SelectInputModel extends HoistInputModel {
         super.noteFocused();
     }
 
-    selectText() {
+    private selectText() {
         const {reactSelect} = this;
         if (!reactSelect) return;
 
@@ -430,7 +437,7 @@ class SelectInputModel extends HoistInputModel {
         return this.findOption(external, !isNil(external));
     }
 
-    findOption(value, createIfNotFound, options = this.internalOptions) {
+    private findOption(value, createIfNotFound, options = this.internalOptions) {
         // Do a depth-first search of options
         for (const option of options) {
             if (option.options) {
@@ -455,7 +462,7 @@ class SelectInputModel extends HoistInputModel {
         return internal.value;
     }
 
-    normalizeOptions(options, depth = 0) {
+    private normalizeOptions(options, depth = 0) {
         throwIf(depth > 1, 'Grouped select options support only one-deep nesting.');
 
         options = options || [];
@@ -465,11 +472,11 @@ class SelectInputModel extends HoistInputModel {
     // Normalize / clone a single source value into a normalized option object. Supports Strings
     // and Objects. Objects are validated/defaulted to ensure a label+value or label+options sublist,
     // with other fields brought along to support Selects emitting value objects with ad hoc properties.
-    toOption(src, depth) {
+    private toOption(src, depth) {
         return isPlainObject(src) ? this.objectToOption(src, depth) : this.valueToOption(src);
     }
 
-    objectToOption(src, depth) {
+    private objectToOption(src, depth) {
         const {componentProps} = this,
             labelField = withDefault(componentProps.labelField, 'label'),
             valueField = withDefault(componentProps.valueField, 'value');
@@ -492,7 +499,7 @@ class SelectInputModel extends HoistInputModel {
               };
     }
 
-    valueToOption(src) {
+    private valueToOption(src) {
         return {label: src != null ? src.toString() : '-null-', value: src};
     }
 
@@ -542,7 +549,7 @@ class SelectInputModel extends HoistInputModel {
         return optionRenderer(opt);
     };
 
-    optionRenderer = opt => {
+    private optionRenderer = opt => {
         if (this.hideSelectedOptionCheck) {
             return div(opt.label);
         }
@@ -609,6 +616,24 @@ class SelectInputModel extends HoistInputModel {
         };
     }
 
+    getMultiValueLabelCmp() {
+        return this.componentProps.enableTooltips
+            ? props => {
+                  props = this.withTooltip(props, 'xh-select__tooltip__target');
+                  return createElement(components.MultiValueLabel, props);
+              }
+            : components.MultiValueLabel;
+    }
+
+    getSingleValueCmp() {
+        return this.componentProps.enableTooltips
+            ? props => {
+                  props = this.withTooltip(props, 'xh-select__tooltip__target');
+                  return createElement(components.SingleValue, props);
+              }
+            : components.SingleValue;
+    }
+
     noOptionsMessageFn = params => {
         // account for bug in react-windowed-select https://github.com/jacobworrel/react-windowed-select/issues/19
         if (!params) return '';
@@ -635,6 +660,17 @@ class SelectInputModel extends HoistInputModel {
         }
         return portal;
     }
+
+    private withTooltip(props: PlainObject, targetClassName: string): PlainObject {
+        return {
+            ...props,
+            children: tooltip({
+                targetClassName,
+                content: props.children,
+                target: props.children
+            })
+        };
+    }
 }
 
 const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, ref) => {
@@ -663,7 +699,9 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
                 DropdownIndicator: model.getDropdownIndicatorCmp(),
                 ClearIndicator: model.getClearIndicatorCmp(),
                 IndicatorSeparator: () => null,
-                ValueContainer: model.getValueContainerCmp()
+                ValueContainer: model.getValueContainerCmp(),
+                MultiValueLabel: model.getMultiValueLabelCmp(),
+                SingleValue: model.getSingleValueCmp()
             },
 
             // A shared div is created lazily here as needed, appended to the body, and assigned

package/desktop/cmp/input/Slider.scss

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 .xh-slider {

package/desktop/cmp/input/Slider.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {box} from '@xh/hoist/cmp/layout';

package/desktop/cmp/input/SwitchInput.scss

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 .xh-switch-input.xh-input-invalid {

package/desktop/cmp/input/SwitchInput.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {hoistCmp, HoistProps, HSide, StyleProps} from '@xh/hoist/core';

package/desktop/cmp/input/TextArea.scss

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 .xh-text-area {

package/desktop/cmp/input/TextArea.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';

package/desktop/cmp/input/TextInput.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';

package/desktop/cmp/leftrightchooser/LeftRightChooser.scss

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 .xh-lr-chooser {

package/desktop/cmp/leftrightchooser/LeftRightChooser.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {grid, GridProps} from '@xh/hoist/cmp/grid';
 import {hframe, vbox} from '@xh/hoist/cmp/layout';

package/desktop/cmp/leftrightchooser/LeftRightChooserFilter.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {hoistCmp, HoistModel, HoistProps, lookup, useLocalModel, uses} from '@xh/hoist/core';
 import {textInput} from '@xh/hoist/desktop/cmp/input';

package/desktop/cmp/leftrightchooser/LeftRightChooserModel.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {div} from '@xh/hoist/cmp/layout';

package/desktop/cmp/leftrightchooser/impl/ChooserToolbar.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {vspacer} from '@xh/hoist/cmp/layout';
 import {hoistCmp} from '@xh/hoist/core';

package/desktop/cmp/leftrightchooser/impl/Description.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {hoistCmp} from '@xh/hoist/core';
 import {callout} from '@xh/hoist/kit/blueprint';

package/desktop/cmp/loadingindicator/LoadingIndicator.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {hbox} from '@xh/hoist/cmp/layout';
 import {div} from '@xh/hoist/cmp/layout/Tags';

package/desktop/cmp/loadingindicator/index.ts

@@ -2,6 +2,6 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 export * from './LoadingIndicator';

package/desktop/cmp/mask/Mask.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {box, vbox, vspacer} from '@xh/hoist/cmp/layout';
 import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';

package/desktop/cmp/mask/index.ts

@@ -2,6 +2,6 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 export * from './Mask';

package/desktop/cmp/modalsupport/ModalSupport.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 import {box, fragment} from '@xh/hoist/cmp/layout';
@@ -67,15 +67,15 @@ const inlineContainer = hoistCmp.factory<ModalSupportModel>({
 // Dialog cmp, inside which to place the child cmp when `model.isModal = true`
 const modalContainer = hoistCmp.factory<ModalSupportModel>({
     render({model}) {
-        if (!model.isModal) return null;
-
-        const {width, height, canOutsideClickClose} = model;
+        const {isModal, width, height, canOutsideClickClose} = model;
         return dialog({
             className: 'xh-modal-support__modal',
             style: {width, height},
             canOutsideClickClose,
-            isOpen: true,
+            isOpen: isModal,
             onClose: () => model.toggleIsModal(),
+            // Creates the dialog's portal immediately and keeps it around, to preserve correct ordering relative to any internal popups.
+            lazy: false,
             item: box({
                 ref: model.modalRef,
                 flexDirection: 'column',

package/desktop/cmp/modalsupport/ModalSupportModel.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
 import {HoistModel} from '@xh/hoist/core';

package/desktop/cmp/modalsupport/index.ts

@@ -2,7 +2,7 @@
  * This file belongs to Hoist, an application development toolkit
  * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
  *
- * Copyright © 2022 Extremely Heavy Industries Inc.
+ * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 export * from './ModalSupport';
 export * from './ModalSupportModel';