@xh/hoist 86.0.1 → 86.1.0

package/mobile/cmp/input/SegmentedControl.ts

@@ -0,0 +1,210 @@
+/*
+ * 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.
+ */
+import {
+    HoistInputModel,
+    HoistInputProps,
+    OptionPrimitive,
+    SegmentedControlNullOption,
+    SegmentedControlOption,
+    useHoistInputModel
+} from '@xh/hoist/cmp/input';
+import {hbox, span} from '@xh/hoist/cmp/layout';
+import {hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
+import {button} from '@xh/hoist/mobile/cmp/button';
+import '@xh/hoist/mobile/register';
+import {computed, makeObservable} from '@xh/hoist/mobx';
+import {TEST_ID} from '@xh/hoist/utils/js';
+import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
+import classNames from 'classnames';
+import {filter, isObject} from 'lodash';
+import './SegmentedControl.scss';
+
+export interface SegmentedControlProps extends HoistProps, HoistInputProps {
+    /**
+     * True (default) to render all segments at an equal width when {@link fill} is enabled,
+     * dividing the available width into equal parts regardless of label length - the conventional
+     * segmented-control appearance. Set false to instead size each segment to its content and
+     * share only the leftover space, so a longer label yields a wider segment. No effect when
+     * `fill` is false. Either way, a label too wide for its segment truncates with an ellipsis.
+     */
+    equalSegmentWidths?: boolean;
+
+    /**
+     * True (default) to stretch the control to fill available width,
+     * distributing space equally among options.
+     */
+    fill?: boolean;
+
+    /**
+     * Default visual intent applied to the selected option, and as a subtle text-color hint
+     * to options when not selected. Serves as the default for any option that does not specify
+     * its own `intent`. Defaults to `'none'`.
+     */
+    intent?: 'none' | Intent;
+
+    /**
+     * Array of available options. Each entry may be a SegmentedControlOption object
+     * with value/label/icon/disabled properties, or a primitive value used as both
+     * the value and the display label.
+     */
+    options: Array<SegmentedControlOption | SegmentedControlNullOption | OptionPrimitive>;
+
+    /**
+     * True to render with an outlined style - a border around the control tray
+     * with no inner background fill. Border color follows the current intent.
+     */
+    outlined?: boolean;
+}
+
+/**
+ * An input for selecting a single value from a small set of mutually exclusive options,
+ * rendered as a group of toggle buttons with clear visual indication of the active
+ * selection.
+ *
+ * Similar to ButtonGroupInput but driven by an `options` prop (like Select) rather than Button
+ * children, and with stronger visual differentiation between selected and unselected states.
+ * The mobile counterpart to the desktop SegmentedControl, built on Hoist's mobile Button
+ * (no Blueprint dependency).
+ */
+export const [SegmentedControl, segmentedControl] = hoistCmp.withFactory<SegmentedControlProps>({
+    displayName: 'SegmentedControl',
+    className: 'xh-segmented-control',
+    render(props, ref) {
+        return useHoistInputModel(cmp, props, ref, SegmentedControlModel);
+    }
+});
+(SegmentedControl as any).hasLayoutSupport = true;
+
+//-----------------------
+// Implementation
+//-----------------------
+interface NormalizedOption extends SegmentedControlOption {
+    label: string;
+    intent?: Intent;
+    _key: string;
+}
+
+class SegmentedControlModel extends HoistInputModel {
+    override xhImpl = true;
+
+    @computed
+    get normalizedOptions(): NormalizedOption[] {
+        const options = this.componentProps.options ?? [];
+        return options.map((o: any, idx: number) => {
+            const key = String(idx);
+            if (isObject(o)) {
+                const {label, value, icon, disabled, intent} = o as SegmentedControlOption;
+                return {
+                    value: this.toInternal(value),
+                    label: label ?? (icon ? '' : String(value)),
+                    icon,
+                    disabled,
+                    intent,
+                    _key: key
+                };
+            } else {
+                return {value: this.toInternal(o), label: String(o), _key: key};
+            }
+        });
+    }
+
+    /** Map the current render value to the string key used to identify the selected option. */
+    @computed
+    get selectedKey(): string {
+        const {renderValue, normalizedOptions} = this;
+        return normalizedOptions.find(o => o.value === renderValue)?._key;
+    }
+
+    get enabledButtons(): HTMLButtonElement[] {
+        const btns = this.domEl?.querySelectorAll('button') ?? [];
+        return filter(btns, (b: HTMLButtonElement) => !b.disabled) as HTMLButtonElement[];
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    onValueChange = (key: string) => {
+        const match = this.normalizedOptions.find(o => o._key === key);
+        if (match) this.noteValueChange(match.value);
+    };
+
+    override blur() {
+        this.enabledButtons.forEach(it => it.blur());
+    }
+
+    override focus() {
+        this.enabledButtons[0]?.focus();
+    }
+}
+
+const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props}, ref) => {
+    const {
+        // HoistInput props - consumed here or by the model, not passed to the tray
+        bind,
+        disabled,
+        onChange,
+        onCommit,
+        tabIndex,
+        value,
+        commitOnChange,
+        options,
+        // Consumed by this component
+        equalSegmentWidths = true,
+        fill = true,
+        intent,
+        outlined,
+        testId,
+        ...rest
+    } = getNonLayoutProps(props);
+
+    const {selectedKey} = model,
+        defaultIntent = intent && intent !== 'none' ? intent : null;
+
+    const buttons = model.normalizedOptions.map(opt => {
+        const optIntent = opt.intent ?? defaultIntent,
+            selected = opt._key === selectedKey;
+        // Wrap the label so it can truncate with an ellipsis when the segment is too narrow,
+        // rather than hard-clipping mid-character. Pass null for icon-only options so the Button
+        // renders the icon alone (an empty span would suppress that).
+        const label = opt.label
+            ? span({className: 'xh-segmented-control-option__label', item: opt.label})
+            : null;
+
+        return button({
+            key: opt._key,
+            text: label,
+            icon: opt.icon,
+            disabled: disabled || opt.disabled,
+            minimal: true,
+            className: classNames(
+                'xh-segmented-control-option',
+                selected && 'xh-segmented-control-option--selected',
+                optIntent && `xh-segmented-control-option--${optIntent}`
+            ),
+            onClick: () => model.onValueChange(opt._key)
+        });
+    });
+
+    return hbox({
+        className: classNames(
+            className,
+            defaultIntent && `xh-segmented-control--${defaultIntent}`,
+            outlined && 'xh-segmented-control--outlined',
+            fill && 'xh-segmented-control--fill',
+            fill && equalSegmentWidths && 'xh-segmented-control--equal-widths'
+        ),
+        ref,
+        onFocus: model.onFocus,
+        onBlur: model.onBlur,
+        ...getLayoutProps(props),
+        [TEST_ID]: testId,
+        items: buttons,
+        ...rest
+    });
+});

package/mobile/cmp/input/SwitchInput.ts

@@ -12,7 +12,7 @@ import {TEST_ID} from '@xh/hoist/utils/js';
 import './SwitchInput.scss';
 
 export interface SwitchInputProps extends HoistProps, HoistInputProps, StyleProps {
-    value?: string;
+    value?: boolean;
 
     /** Onsen modifier string */
     modifier?: string;

package/mobile/cmp/input/TextInput.scss

@@ -11,6 +11,13 @@
     flex: 1;
   }
 
+  &__left-icon {
+    display: flex;
+    align-items: center;
+    padding-left: var(--xh-pad-px);
+    color: var(--xh-text-color-muted);
+  }
+
   &__clear-button {
     padding-right: 8px;
     padding-left: 0;

package/mobile/cmp/input/TextInput.ts

@@ -5,7 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hbox} from '@xh/hoist/cmp/layout';
+import {box, hbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {input} from '@xh/hoist/kit/onsen';
@@ -15,6 +15,7 @@ import {getTestId, TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import type {Property} from 'csstype';
 import {isEmpty} from 'lodash';
+import {ReactElement} from 'react';
 import './TextInput.scss';
 
 export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
@@ -46,6 +47,9 @@ export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps,
     /** True to show a "clear" button aligned to the right of the control. Defaults to false. */
     enableClear?: boolean;
 
+    /** Icon to display inline on the left side of the input. */
+    leftIcon?: ReactElement;
+
     /** Onsen modifier string */
     modifier?: string;
 
@@ -123,6 +127,7 @@ const cmp = hoistCmp.factory<TextInputModel>(({model, className, ...props}, ref)
             width: withDefault(width, null)
         },
         items: [
+            leftIcon(),
             input({
                 value: model.renderValue || '',
 
@@ -151,6 +156,11 @@ const cmp = hoistCmp.factory<TextInputModel>(({model, className, ...props}, ref)
     });
 });
 
+const leftIcon = hoistCmp.factory<TextInputModel>(({model}) => {
+    const {leftIcon} = model.componentProps;
+    return leftIcon ? box({className: 'xh-text-input__left-icon', item: leftIcon}) : null;
+});
+
 const clearButton = hoistCmp.factory<TextInputModel>(({model}) =>
     button({
         className: 'xh-text-input__clear-button',

package/mobile/cmp/input/index.ts

@@ -11,6 +11,7 @@ export * from './CheckboxButton';
 export * from './DateInput';
 export * from './NumberInput';
 export * from './SearchInput';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './SwitchInput';
 export * from './TextInput';

package/mobile/cmp/tab/impl/Tabs.scss

@@ -25,6 +25,14 @@
   transform: translateX(0);
 }
 
+// Theme the page backdrop. Onsen renders an opaque, light-by-default `.page__background` behind
+// each page's content, and the content itself is forced transparent (so the app background shows
+// through). That leaves the light backdrop visible for tab content that is not itself a panel,
+// rendering themed text unreadable in dark mode - so paint the backdrop with the app background.
+.xh-tab-page .page__background {
+  background-color: var(--xh-bg);
+}
+
 .xh-tab-container {
   // Override Onsen's tabbar height CSS var
   --tabbar-height: var(--xh-tbar-min-size-px);

package/mobile/cmp/toolbar/Toolbar.scss

@@ -5,6 +5,14 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 .xh-toolbar {
+  // Toolbars are the compact-button special case: keep buttons short and tight-cornered so they
+  // fit dense bars, overriding the taller / rounder defaults used for buttons in body content
+  // (see vars.scss). Derive the button height from the bar size so a single token
+  // (--xh-tbar-min-size) drives both - subtracting the bar's vertical padding so buttons fit a
+  // horizontal bar. The same height is reused for vertical bars to keep buttons consistent.
+  --xh-button-height: calc(var(--xh-tbar-min-size-px) - 2 * var(--xh-pad-half-px));
+  --xh-button-border-radius-px: var(--xh-border-radius-px);
+
   padding: var(--xh-pad-half-px) var(--xh-pad-px);
   color: var(--xh-tbar-text-color);
   background-color: var(--xh-tbar-bg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "86.0.1",
+  "version": "86.1.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "~2.21.1",
-    "@azure/msal-browser": "~5.13.0",
+    "@azure/msal-browser": "~5.14.0",
     "@blueprintjs/core": "^6.3.2",
     "@blueprintjs/datetime": "^6.0.6",
     "@codemirror/commands": "~6.10.3",

package/styles/vars.scss

@@ -344,7 +344,12 @@ body {
     --xh-button-active-text-color: var(--button-active-text-color, white);
     --xh-button-bg: var(--button-bg, #{mc('blue-grey', '600')});
     --xh-button-text-color: var(--button-text-color, white);
-    --xh-button-height: var(--button-height, 28px);
+    // Default to a comfortable touch height for buttons in body content - a bit more compact than
+    // the 44px toolbar/touch-target max, which reads as oversized for XH's denser style. Toolbars
+    // derive their own slightly smaller button height from the bar size (see Toolbar.scss).
+    --xh-button-height: var(--button-height, 40px);
+    // Slightly rounder corners to suit the taller mobile button (the desktop default is tighter).
+    --xh-button-border-radius-px: var(--button-border-radius-px, 8px);
     --xh-toolbar-button-bg: var(--toolbar-button-bg, var(--xh-button-bg));
 
     // Light theme pressed bg for 'minimal' / 'outlined'

package/svc/JsonBlobService.ts

@@ -52,8 +52,8 @@ export class JsonBlobService extends HoistService {
     static instance: JsonBlobService;
 
     /** Retrieve a single JSONBlob by its unique token. */
-    async getAsync(token: string): Promise<JsonBlob> {
-        return this.runner().span('get').fetchJson({
+    async getAsync(token: string, ctx?: CallContextLike): Promise<JsonBlob> {
+        return this.runner(ctx).span('get').fetchJson({
             url: 'xh/getJsonBlob',
             params: {token}
         });
@@ -63,7 +63,7 @@ export class JsonBlobService extends HoistService {
     async listAsync(spec: {
         type: string;
         includeValue?: boolean;
-        ctx: CallContextLike;
+        ctx?: CallContextLike;
     }): Promise<JsonBlob[]> {
         const {type, includeValue, ctx} = spec;
         return this.runner(ctx)
@@ -72,15 +72,11 @@ export class JsonBlobService extends HoistService {
     }
 
     /** Persist a new JSONBlob back to the server. */
-    async createAsync({
-        acl,
-        description,
-        type,
-        meta,
-        name,
-        value
-    }: Partial<JsonBlob>): Promise<JsonBlob> {
-        return this.runner()
+    async createAsync(
+        {acl, description, type, meta, name, value}: Partial<JsonBlob>,
+        ctx?: CallContextLike
+    ): Promise<JsonBlob> {
+        return this.runner(ctx)
             .span('create')
             .fetchJson({
                 url: 'xh/createJsonBlob',
@@ -91,8 +87,12 @@ export class JsonBlobService extends HoistService {
     }
 
     /** Modify mutable properties of an existing JSONBlob, as identified by its unique token. */
-    async updateAsync(token: string, update: Partial<JsonBlob>): Promise<JsonBlob> {
-        return this.runner()
+    async updateAsync(
+        token: string,
+        update: Partial<JsonBlob>,
+        ctx?: CallContextLike
+    ): Promise<JsonBlob> {
+        return this.runner(ctx)
             .span('update')
             .run(async ctx => {
                 update = pick(update, ['acl', 'description', 'meta', 'name', 'owner', 'value']);
@@ -110,9 +110,10 @@ export class JsonBlobService extends HoistService {
     async createOrUpdateAsync(
         type: string,
         name: string,
-        data: Partial<JsonBlob>
+        data: Partial<JsonBlob>,
+        ctx?: CallContextLike
     ): Promise<JsonBlob> {
-        return this.runner()
+        return this.runner(ctx)
             .span('createOrUpdate')
             .run(async ctx => {
                 const update = pick(data, ['acl', 'description', 'meta', 'value']);
@@ -127,16 +128,16 @@ export class JsonBlobService extends HoistService {
     }
 
     /** Find a blob owned by this user with a specific type and name.  If none exists, return null.  */
-    async findAsync(type: string, name: string): Promise<JsonBlob> {
-        return this.runner().span('find').fetchJson({
+    async findAsync(type: string, name: string, ctx?: CallContextLike): Promise<JsonBlob> {
+        return this.runner(ctx).span('find').fetchJson({
             url: 'xh/findJsonBlob',
             params: {type, name}
         });
     }
 
     /** Archive (soft-delete) an existing JSONBlob, as identified by its unique token. */
-    async archiveAsync(token: string): Promise<JsonBlob> {
-        return this.runner().span('archive').fetchJson({
+    async archiveAsync(token: string, ctx?: CallContextLike): Promise<JsonBlob> {
+        return this.runner(ctx).span('archive').fetchJson({
             url: 'xh/archiveJsonBlob',
             params: {token}
         });