@xh/hoist 86.2.0 → 86.3.0

package/mobile/cmp/input/Select.ts

@@ -21,7 +21,7 @@ import {action, bindable, makeObservable, observable, override} from '@xh/hoist/
 import {debouncePromise, wait} from '@xh/hoist/promise';
 import {throwIf, withDefault, mergeDeep} from '@xh/hoist/utils/js';
 import {createObservableRef, getLayoutProps} from '@xh/hoist/utils/react';
-import {escapeRegExp, isEqual, isNil, isPlainObject, keyBy} from 'lodash';
+import {escapeRegExp, isEqual, isNil, isPlainObject, unionWith} from 'lodash';
 import {Children, ReactNode, ReactPortal} from 'react';
 import ReactDom from 'react-dom';
 import './Select.scss';
@@ -157,6 +157,15 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
 
     /** Field on provided options for sourcing each option's value (default `value`). */
     valueField?: string;
+
+    /**
+     * Function to generate a `SelectOption` for a (non-null) selected value not present in the
+     * current options list. Return null to fall back to the default value-as-label behavior.
+     *
+     * Useful with queryFn-based selects, readonly forms, or any case where options may not be
+     * loaded when a value is set, ensuring the value renders with its proper label.
+     */
+    generateOptionFn?: (value: any) => SelectOption;
 }
 
 /**
@@ -377,7 +386,8 @@ class SelectInputModel extends HoistInputModel {
 
     // Convert external value into option object(s). Options created if missing - this takes the
     // external value from the model, and we will respect that even if we don't know about it.
-    // (Exception for a null value, which we will only accept if explicitly present in options.)
+    // (Exception for a null value, which is never synthesized - accepted only if provided via
+    // options.)
     override toInternal(external) {
         return this.findOption(external, !isNil(external));
     }
@@ -393,7 +403,10 @@ class SelectInputModel extends HoistInputModel {
             }
         }
 
-        return createIfNotFound ? this.valueToOption(value) : null;
+        if (!createIfNotFound) return null;
+
+        // Value not among options - let the app generate an option for it, else synthesize one.
+        return this.componentProps.generateOptionFn?.(value) ?? this.valueToOption(value);
     }
 
     override toExternal(internal) {
@@ -453,15 +466,9 @@ class SelectInputModel extends HoistInputModel {
 
                 // Carry forward and add to any existing internalOpts to allow our value
                 // converters to continue all selected values in multiMode.
-                const matchesByVal = keyBy(matchOpts, 'value'),
-                    newOpts = [...matchOpts];
-
-                this.internalOptions.forEach(currOpt => {
-                    const matchOpt = matchesByVal[currOpt.value];
-                    if (!matchOpt) newOpts.push(currOpt); // avoiding dupes
-                });
-
-                this.internalOptions = newOpts;
+                this.internalOptions = unionWith(matchOpts, this.internalOptions, (a, b) =>
+                    isEqual(a.value, b.value)
+                );
 
                 // But only return the matching options back to the combo.
                 return matchOpts;
@@ -484,8 +491,7 @@ class SelectInputModel extends HoistInputModel {
     // Option Rendering
     //----------------------
     formatOptionLabel = (opt, params) => {
-        // Always display the standard label string in the value container (context == 'value').
-        // If we need to expose customization here, we could consider a dedicated prop.
+        // Display the standard label string in the value container (context == 'value').
         if (params.context !== 'menu') {
             return opt.label;
         }
@@ -501,7 +507,7 @@ class SelectInputModel extends HoistInputModel {
             return div(opt.label);
         }
 
-        return this.externalValue === opt.value
+        return isEqual(this.externalValue, opt.value)
             ? hbox({
                   items: [
                       div({

package/mobx/README.md

@@ -45,7 +45,8 @@ The following are re-exported from MobX and mobx-react-lite:
 
 The package configures MobX with `enforceActions: 'observed'`, meaning any modification to
 an observable property that is currently being observed must occur inside an `@action` method,
-`runInAction()` block, or `@bindable` setter. MobX logs a warning if this rule is violated.
+`runInAction()` block, `@bindable` setter, or a `reaction`/`when` run callback (MobX
+auto-wraps these in an action). MobX logs a warning if this rule is violated.
 
 This enforcement prevents accidental state mutations and makes data flow predictable.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "86.2.0",
+  "version": "86.3.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -38,8 +38,8 @@
     ]
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "~2.21.1",
-    "@azure/msal-browser": "~5.14.0",
+    "@auth0/auth0-spa-js": "~2.23.0",
+    "@azure/msal-browser": "~5.16.0",
     "@blueprintjs/core": "^6.3.2",
     "@blueprintjs/datetime": "^6.0.6",
     "@codemirror/commands": "^6.10.3",
@@ -90,7 +90,7 @@
     "semver": "~7.8.0",
     "short-unique-id": "~5.3.2",
     "store2": "~2.14.3",
-    "swiper": "^12.1.2",
+    "swiper": "^14.0.0",
     "ts-morph": "^27.0.2",
     "tsx": "^4.21.0",
     "ua-parser-js": "~2.0.4",
@@ -118,7 +118,7 @@
     "react-dom": "~18.2.0",
     "stylelint": "17.x",
     "stylelint-config-standard-scss": "17.x",
-    "type-fest": "4.x",
+    "type-fest": "5.x",
     "typescript": "~5.9.3"
   },
   "resolutions": {

package/desktop/cmp/filter/PopoverFilterChooser.scss

@@ -1,42 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2026 Extremely Heavy Industries Inc.
- */
-.xh-popover-filter-chooser {
-  & > .bp6-popover-target {
-    display: flex;
-    flex: 1;
-  }
-
-  // Extra class names required to override the default styles of the popover
-  &__popover.bp6-popover.bp6-minimal {
-    margin-top: -15px !important;
-    box-shadow: none;
-
-    .bp6-popover-content {
-      background: transparent;
-    }
-
-    .xh-select__value-container--is-multi {
-      height: unset;
-      line-height: unset;
-    }
-  }
-
-  &__filter-chooser {
-    .xh-select__value-container--is-multi {
-      overflow-y: hidden !important;
-    }
-
-    .xh-select {
-      .xh-select__control--is-disabled {
-        background: var(--xh-input-bg);
-      }
-      .xh-select__multi-value--is-disabled .xh-select__multi-value__label {
-        color: unset;
-      }
-    }
-  }
-}