@xh/hoist 86.0.1 → 86.2.0

package/desktop/cmp/grid/impl/filter/GridFilterDialog.ts

@@ -55,7 +55,7 @@ const filterForm = hoistCmp.factory(({impl}) => {
         fieldDefaults: {label: null, minimal: true},
         item: formField({
             field: 'filter',
-            item: jsonInput()
+            item: jsonInput({autoFormat: true})
         })
     });
 });
@@ -147,7 +147,7 @@ class GridFilterDialogLocalModel extends HoistModel {
     loadForm() {
         const filter = this.model.filter?.removeFunctionFilters();
         this.formModel.init({
-            filter: JSON.stringify(filter?.toJSON() ?? null, undefined, 2)
+            filter: JSON.stringify(filter ?? null)
         });
     }
 

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.ts

@@ -98,10 +98,15 @@ export class HeaderFilterModel extends HoistModel {
 
     @computed
     get isCustomFilter() {
-        const {columnCompoundFilter, columnFilters} = this;
+        const {columnCompoundFilter, columnFilters, fieldType} = this;
         if (columnCompoundFilter) return true;
         if (isEmpty(columnFilters)) return false;
-        return columnFilters.some(it => !['=', '!=', 'includes'].includes(it.op));
+        return columnFilters.some(it => {
+            const isValuesTabOp = ['=', '!=', 'includes'].includes(it.op),
+                isTagsBlank =
+                    fieldType === 'tags' && ['=', '!='].includes(it.op) && it.value == null;
+            return !isValuesTabOp || isTagsBlank;
+        });
     }
 
     get commitOnChange() {
@@ -170,8 +175,8 @@ export class HeaderFilterModel extends HoistModel {
         if (close) {
             this.parent.close();
         } else {
-            // We must wait before resetting as GridFilterModel.setFilter() is async
-            wait().then(() => this.resetTabModels());
+            // Wait as setFilter is async.
+            wait().then(() => this.syncWithFilter());
         }
     }
 

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomRowModel.ts

@@ -8,7 +8,7 @@ import {HoistModel} from '@xh/hoist/core';
 import {FieldFilterOperator, FieldFilterSpec} from '@xh/hoist/data';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
-import {isArray, isNil} from 'lodash';
+import {isArray, isEmpty, isNil} from 'lodash';
 import {CustomTabModel} from './CustomTabModel';
 
 type OperatorOptionValue = 'blank' | 'not blank' | FieldFilterOperator;
@@ -39,7 +39,7 @@ export class CustomRowModel extends HoistModel {
         } else if (op === 'not blank') {
             op = '!=';
             value = null;
-        } else if (isNil(value)) {
+        } else if (isNil(value) || (isArray(value) && isEmpty(value))) {
             return null;
         }
 

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.ts

@@ -4,13 +4,28 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {GridFilterModel, GridModel} from '@xh/hoist/cmp/grid';
+import {
+    GridFilterModel,
+    GridFilterRenderer,
+    GridFilterSortValueFn,
+    GridModel
+} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import type {FieldFilterOperator, FieldFilterSpec} from '@xh/hoist/data';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, difference, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
+import {
+    castArray,
+    difference,
+    flatten,
+    isEmpty,
+    isFunction,
+    map,
+    partition,
+    uniq,
+    without
+} from 'lodash';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 
 export class ValuesTabModel extends HoistModel {
@@ -281,8 +296,18 @@ export class ValuesTabModel extends HoistModel {
     private createGridModel() {
         const {BLANK_PLACEHOLDER} = GridFilterModel,
             {headerFilterModel, fieldSpec} = this,
-            {fieldType, column} = headerFilterModel,
-            renderer = fieldSpec.renderer ?? (fieldType !== 'tags' ? column.renderer : null);
+            {fieldType, column} = headerFilterModel;
+
+        // Default to the column's renderer/sortValue, but only where they apply to a bare value -
+        // we call them with the value alone (see below), so treat them as pure value transforms.
+        const renderer =
+                fieldSpec.renderer ??
+                (fieldType !== 'tags' ? (column.renderer as GridFilterRenderer) : null),
+            sortValue =
+                fieldSpec.sortValue ??
+                (fieldType !== 'tags' && isFunction(column.sortValue)
+                    ? (column.sortValue as GridFilterSortValueFn)
+                    : null);
 
         return new GridModel({
             store: {
@@ -340,9 +365,23 @@ export class ValuesTabModel extends HoistModel {
                         if (v2 === BLANK_PLACEHOLDER) return -1 * mul;
                         return defaultComparator(v1, v2);
                     },
-                    renderer: (value, context) => {
-                        if (value === BLANK_PLACEHOLDER) return value;
-                        return renderer ? renderer(value, context) : value;
+                    // Apply renderer/sortValue as pure value transforms - pass no context, skip the
+                    // blank placeholder, and fall back to the raw value if either throws.
+                    sortValue: v => {
+                        if (v === BLANK_PLACEHOLDER || !sortValue) return v;
+                        try {
+                            return sortValue(v);
+                        } catch {
+                            return v;
+                        }
+                    },
+                    renderer: v => {
+                        if (v === BLANK_PLACEHOLDER || !renderer) return v;
+                        try {
+                            return renderer(v);
+                        } catch {
+                            return v;
+                        }
                     }
                 }
             ],

package/desktop/cmp/input/CheckboxButton.ts

@@ -47,7 +47,27 @@ class CheckboxButtonInputModel extends HoistInputModel {
 // Implementation
 //----------------------------------
 const cmp = hoistCmp.factory<CheckboxButtonInputModel>(
-    ({model, text, icon, rightIcon, checkedIcon, uncheckedIcon, iconSide, ...props}, ref) => {
+    (
+        {
+            // HoistInput props - exclude from passthrough to BP
+            bind,
+            value,
+            commitOnChange,
+            onChange,
+            onCommit,
+            // Consumed by this component
+            model,
+            text,
+            icon,
+            rightIcon,
+            checkedIcon,
+            uncheckedIcon,
+            iconSide,
+            // Remainder passed to hoist button & BP button
+            ...props
+        },
+        ref
+    ) => {
         const checked = !!model.renderValue,
             toggleIcon = checked
                 ? withDefault(checkedIcon, Icon.checkSquare({prefix: 'fas', intent: 'primary'}))

package/desktop/cmp/input/CodeInput.ts

@@ -62,6 +62,14 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
     /** True to focus the control on render. */
     autoFocus?: boolean;
 
+    /**
+     * True to automatically format content for display using the configured `formatter`.
+     * Defaults to true for `readonly` inputs - set false to opt out. May also be enabled on
+     * editable inputs, in which case content is formatted on blur (never mid-edit, so user
+     * edits and cursor position are preserved while typing).
+     */
+    autoFormat?: boolean;
+
     /** False to not commit on every change/keystroke, default true. */
     commitOnChange?: boolean;
 
@@ -224,7 +232,7 @@ class CodeInputModel extends HoistInputModel {
                 ? button({
                       icon: Icon.magic(),
                       title: 'Auto-format',
-                      onClick: () => this.onAutoFormat()
+                      onClick: () => this.formatAndSetEditorValue()
                   })
                 : null,
             showFullscreenButton
@@ -321,7 +329,16 @@ class CodeInputModel extends HoistInputModel {
         this.editor = new EditorView({state, parent: container});
     };
 
-    onAutoFormat() {
+    get autoFormat(): boolean {
+        const {autoFormat, readonly} = this.componentProps;
+        return withDefault(autoFormat, !!readonly);
+    }
+
+    override toInternal(val: any) {
+        return this.autoFormat ? this.tryPrettyPrint(val) : val;
+    }
+
+    private formatAndSetEditorValue() {
         if (!this.editor) return;
         const val = this.tryPrettyPrint(this.editor.state.doc.toString());
         this.editor.dispatch({changes: {from: 0, to: this.editor.state.doc.length, insert: val}});
@@ -443,7 +460,7 @@ class CodeInputModel extends HoistInputModel {
                     {
                         key: 'Mod-p',
                         run: () => {
-                            this.onAutoFormat();
+                            this.formatAndSetEditorValue();
                             return true;
                         }
                     }

package/desktop/cmp/input/NumberInput.ts

@@ -61,7 +61,7 @@ export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, H
     /** Text to display when control is empty. */
     placeholder?: string;
 
-    /** Max decimal precision of the value, defaults to 4. */
+    /** Max decimal precision of the value, defaults to 4. Set to null for full, unrestricted precision. */
     precision?: NumericPrecision;
 
     /** Element to display inline on the right side of the input. */

package/desktop/cmp/input/SegmentedControl.ts

@@ -4,22 +4,25 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
+import {
+    HoistInputModel,
+    HoistInputProps,
+    OptionPrimitive,
+    SegmentedControlNullOption,
+    SegmentedControlOption,
+    useHoistInputModel
+} from '@xh/hoist/cmp/input';
 import {div} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {bpSegmentedControl} from '@xh/hoist/kit/blueprint';
 import {computed, makeObservable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
 import {TEST_ID} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
 import {filter, isObject} from 'lodash';
-import {ReactElement} from 'react';
 import './SegmentedControl.scss';
 
-type OptionPrimitive = string | number | boolean | LocalDate;
-
 export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     /** True to render in a compact mode with reduced sizing for space-constrained contexts. */
     compact?: boolean;
@@ -51,52 +54,6 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     outlined?: boolean;
 }
 
-export interface SegmentedControlOption {
-    /** Value for this option. */
-    value: OptionPrimitive;
-
-    /** Display label. Defaults to `value.toString()` if omitted. */
-    label?: string;
-
-    /** Icon element, displayed before the label. */
-    icon?: ReactElement;
-
-    /** True to disable this individual option. */
-    disabled?: boolean;
-
-    /**
-     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
-     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
-     * `intent` default. Defaults to the control's `intent`.
-     */
-    intent?: Intent;
-}
-
-/**
- * Variant of SegmentedControlOption for representing a null/"no value" selection.
- * Label is required to force use case to override default js 'null' toString rendering.
- */
-export interface SegmentedControlNullOption {
-    /** Null value for this option. */
-    value: null;
-
-    /** Display label - required for null options. */
-    label: string;
-
-    /** Icon element, displayed before the label. */
-    icon?: ReactElement;
-
-    /** True to disable this individual option. */
-    disabled?: boolean;
-
-    /**
-     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
-     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
-     * `intent` default. Defaults to the control's `intent`.
-     */
-    intent?: Intent;
-}
-
 /**
  * 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

package/desktop/cmp/input/Select.ts

@@ -34,6 +34,7 @@ import classNames from 'classnames';
 import {castArray, escapeRegExp, isEmpty, isEqual, isNil, isPlainObject, keyBy} from 'lodash';
 import {ReactElement, ReactNode} from 'react';
 import {components} from 'react-select';
+import {calcWindowedMenuWidth} from './impl/CalcWindowedMenuWidth';
 import './Select.scss';
 
 export const MENU_PORTAL_ID = 'xh-select-input-portal';
@@ -224,6 +225,8 @@ class SelectInputModel extends HoistInputModel {
     // Maintained for (but not passed to) async select to resolve value string <> option objects.
     @bindable.ref internalOptions = [];
 
+    @observable windowedMenuWidth: number = null;
+
     // Prop-backed convenience getters
     get asyncMode(): boolean {
         return !!this.componentProps.queryFn;
@@ -290,6 +293,13 @@ class SelectInputModel extends HoistInputModel {
             run: opts => {
                 opts = this.normalizeOptions(opts);
                 this.internalOptions = opts;
+                if (this.windowedMode) {
+                    this.windowedMenuWidth = calcWindowedMenuWidth(
+                        opts,
+                        o => this.formatOptionLabel(o, {context: 'menu'}),
+                        this.getOrCreatePortalDiv()
+                    );
+                }
             },
             fireImmediately: true
         });
@@ -780,9 +790,10 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
         rsProps.formatCreateLabel = model.createMessageFn;
     }
 
-    if (props.menuWidth) {
+    const menuWidth = props.menuWidth ?? (model.windowedMode ? model.windowedMenuWidth : null);
+    if (menuWidth != null) {
         rsProps.styles = {
-            menu: provided => ({...provided, width: `${props.menuWidth}px`}),
+            menu: provided => ({...provided, width: menuWidth, minWidth: '100%'}),
             ...props.rsOptions?.styles
         };
     }

package/desktop/cmp/input/impl/CalcWindowedMenuWidth.ts

@@ -0,0 +1,106 @@
+/*
+ * 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 {logWarn, stripTags} from '@xh/hoist/utils/js';
+import {renderToStaticMarkup} from '@xh/hoist/utils/react';
+import {isEmpty, isNil, isString, sortBy, takeRight} from 'lodash';
+import {isValidElement, ReactNode} from 'react';
+
+/** Max number of (widest) options to render and measure when sizing a windowed menu. */
+const SIZE_CALC_SAMPLES = 25;
+/** Allowance for the vertical scrollbar present in windowed (virtualized) menus. */
+const SCROLLBAR_PX = 20;
+
+/**
+ * Compute an explicit pixel width for a windowed (virtualized) `Select` menu.
+ *
+ * Windowed menus can't auto-size via CSS - react-window absolutely-positions rows at width:100%,
+ * so option content never widens the menu and it collapses to the control width. This restores
+ * content-based sizing using Canvas + off-screen DOM, the same render-and-measure approach as the
+ * grid's `ColumnWidthCalculator`: render each option's actual menu markup (via the configured
+ * `optionRenderer`, if any), canvas-estimate its width to pick the widest candidates, then measure
+ * only those candidates' displayed width in a hidden probe - so custom `optionRenderer`s (icons,
+ * multi-element content, etc.) size correctly. Unlike the grid (which may autosize many columns
+ * over thousands of records), this renders one menu's options once per options change.
+ *
+ * @param options - normalized (possibly grouped) Select options.
+ * @param renderOption - renders an option to its menu `ReactNode` (e.g. model.formatOptionLabel).
+ * @param portal - shared menu portal div, used to host probes so menu CSS (font, padding) applies.
+ * @returns explicit menu width in px, or null to fall back to the control width.
+ * @internal
+ */
+export function calcWindowedMenuWidth(
+    options: any[],
+    renderOption: (opt: any) => ReactNode,
+    portal: HTMLElement
+): number {
+    const flatOpts = [],
+        collect = opts => opts.forEach(o => (o.options ? collect(o.options) : flatOpts.push(o)));
+    collect(options);
+    if (isEmpty(flatOpts)) return null;
+
+    // Render a hidden probe (menu > option) into the portal, so menu CSS (font, padding) applies
+    // via its location under document.body.xh-app.
+    const menu = document.createElement('div'),
+        option = document.createElement('div');
+    menu.className = 'xh-select__menu';
+    menu.style.cssText = 'position:absolute; visibility:hidden; height:0; overflow:hidden';
+    option.className = 'xh-select__option';
+    option.style.cssText = 'width:max-content; white-space:nowrap';
+    menu.appendChild(option);
+    portal.appendChild(menu);
+
+    try {
+        // 1) Render each option's menu markup and canvas-estimate its width (tags stripped).
+        const ctx = getCanvasContext(option),
+            estimates = flatOpts.map(o => {
+                const node = renderOption(o),
+                    markup = isValidElement(node)
+                        ? renderToStaticMarkup(node)
+                        : isNil(node)
+                          ? ''
+                          : String(node);
+                return {markup, width: getStringWidth(ctx, stripTags(markup))};
+            });
+
+        // 2) Measure only the widest sample's displayed width in the hidden probe.
+        const sample = takeRight(sortBy(estimates, 'width'), SIZE_CALC_SAMPLES);
+        let ret = 0;
+        sample.forEach(({markup}) => {
+            option.innerHTML = markup;
+            ret = Math.max(ret, Math.ceil(option.clientWidth));
+        });
+
+        // Option padding is already measured; pad only for the windowed scrollbar.
+        return ret ? ret + SCROLLBAR_PX : null;
+    } catch (e) {
+        // E.g. an optionRenderer that can't be statically rendered - fall back to control width.
+        logWarn(['Error calculating windowed menu width.', e], 'Select');
+        return null;
+    } finally {
+        portal.removeChild(menu);
+    }
+}
+
+//------------------
+// Canvas-based width estimation - mirrors grid's ColumnWidthCalculator.
+//------------------
+let _canvas: HTMLCanvasElement;
+function getCanvasContext(measureEl: HTMLElement): CanvasRenderingContext2D {
+    if (!_canvas) _canvas = document.createElement('canvas');
+
+    const ctx = _canvas.getContext('2d'),
+        style = window.getComputedStyle(measureEl),
+        fontSize = style.getPropertyValue('font-size'),
+        fontFamily = style.getPropertyValue('font-family');
+
+    ctx.font = `${fontSize} ${fontFamily}`;
+    return ctx;
+}
+
+function getStringWidth(ctx: CanvasRenderingContext2D, string: any): number {
+    return isString(string) ? ctx.measureText(string).width : 0;
+}

package/desktop/cmp/rest/impl/RestFormField.ts

@@ -68,7 +68,7 @@ function renderDefaultInput(name: string, model: RestFormModel) {
         case 'number':
             return numberInput();
         case 'json':
-            return jsonInput({enableSearch: true, height: 250});
+            return jsonInput({autoFormat: true, enableSearch: true, height: 250});
         case 'date':
             return dateInput();
         case 'localDate':

package/desktop/cmp/tab/Tabs.scss

@@ -10,13 +10,17 @@
   max-width: 100%;
   max-height: 100%;
   flex-direction: column;
-  flex: 1 1 0;
+  //noinspection CssRedundantUnit
+  flex: 1 1 0%;
+  // % unit used to avoid browser fallback to px,
+  // which prevents container expansion
 
   .xh-tab-wrapper {
     display: flex;
     min-width: 0;
     min-height: 0;
-    flex: 1 1 0;
+    //noinspection CssRedundantUnit
+    flex: 1 1 0%;
   }
 }
 
@@ -32,9 +36,36 @@
     }
   }
 
+  // Generic tab defaults - orientation-specific blocks below layer on top of these.
+  .bp6-tab {
+    color: var(--xh-tab-text-color);
+
+    &[aria-disabled='true'] {
+      color: var(--xh-tab-disabled-text-color);
+    }
+
+    // Tooltip
+    .bp6-popover-target {
+      width: 100%;
+    }
+  }
+
+  // Active/hover color override
+  .bp6-tab[aria-selected='true'],
+  .bp6-tab:not([aria-disabled='true']):hover {
+    .xh-tab-switcher__tab {
+      color: var(--xh-tab-active-text-color);
+    }
+  }
+
   &--top {
     padding-left: var(--xh-pad-px);
     max-width: 100%;
+
+    // Active indicator sits on the bottom edge of the tab, adjacent to the content below.
+    .bp6-tab[aria-selected='true'] {
+      box-shadow: inset 0 -3px 0 var(--xh-tab-active-text-color);
+    }
   }
 
   &--bottom {
@@ -52,6 +83,8 @@
   &--right {
     flex-direction: column;
     max-height: 100%;
+    min-width: var(--xh-tab-switcher-vertical-min-width);
+    padding: var(--xh-tab-switcher-vertical-padding);
 
     // Make overflow button full width
     .bp6-popover-target {
@@ -61,6 +94,49 @@
         width: 100%;
       }
     }
+
+    // Modern vertical rail: rounded, padded items with a muted resting color, a clear hover
+    // affordance, and a filled active "pill". Fully driven off the --xh-tab-switcher-vertical-*
+    // tokens so it stays light/dark-theme safe and is easily customized or disabled per-app.
+    .bp6-tab {
+      margin-bottom: var(--xh-tab-switcher-vertical-item-gap);
+      padding: var(--xh-tab-switcher-vertical-item-padding);
+      border-radius: var(--xh-tab-switcher-vertical-item-border-radius);
+      color: var(--xh-tab-switcher-vertical-item-text-color);
+      font-weight: var(--xh-tab-switcher-vertical-item-font-weight);
+      transition:
+        background-color 0.15s ease,
+        color 0.15s ease,
+        box-shadow 0.15s ease;
+    }
+
+    .bp6-tab:not([aria-disabled='true']):hover {
+      background-color: var(--xh-tab-switcher-vertical-item-hover-bg);
+    }
+
+    .bp6-tab[aria-selected='true'] {
+      background-color: var(--xh-tab-switcher-vertical-item-active-bg);
+      font-weight: var(--xh-tab-switcher-vertical-item-active-font-weight);
+    }
+
+    // Hover + active labels take the active/intent text color, re-applied to both the tab and its
+    // inner label so it overrides the muted resting color set on the item above.
+    .bp6-tab[aria-selected='true'],
+    .bp6-tab:not([aria-disabled='true']):hover {
+      color: var(--xh-tab-switcher-vertical-item-active-text-color);
+
+      .xh-tab-switcher__tab {
+        color: var(--xh-tab-switcher-vertical-item-active-text-color);
+      }
+    }
+  }
+
+  &--left {
+    border-right: var(--xh-tab-switcher-vertical-border);
+  }
+
+  &--right {
+    border-left: var(--xh-tab-switcher-vertical-border);
   }
 
   &__tab {
@@ -100,29 +176,4 @@
       min-height: 20px !important;
     }
   }
-
-  .bp6-tab {
-    color: var(--xh-tab-text-color);
-
-    &[aria-disabled='true'] {
-      color: var(--xh-tab-disabled-text-color);
-    }
-
-    // Tooltip
-    .bp6-popover-target {
-      width: 100%;
-    }
-  }
-
-  // Active/hover color override
-  .bp6-tab[aria-selected='true'],
-  .bp6-tab:not([aria-disabled='true']):hover {
-    .xh-tab-switcher__tab {
-      color: var(--xh-tab-active-text-color);
-    }
-  }
-
-  .bp6-tab[aria-selected='true'] {
-    box-shadow: inset 0 -3px 0 var(--xh-tab-active-text-color);
-  }
 }

package/desktop/cmp/tab/dynamic/DynamicTabSwitcher.ts

@@ -24,7 +24,7 @@ import {Icon} from '@xh/hoist/icon';
 import {tooltip as bpTooltip, showContextMenu} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
 import {wait} from '@xh/hoist/promise';
-import {consumeEvent} from '@xh/hoist/utils/js';
+import {consumeEvent, getTestId} from '@xh/hoist/utils/js';
 import {composeRefs, getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {first, isFinite, last} from 'lodash';
@@ -41,13 +41,14 @@ export const [DynamicTabSwitcher, dynamicTabSwitcher] = hoistCmp.withFactory<Tab
     className: 'xh-dynamic-tab-switcher',
     displayName: 'DynamicTabSwitcher',
     model: uses(TabContainerModel),
-    render({className, orientation, ...props}) {
+    render({className, orientation, testId, ...props}) {
         const impl = useLocalModel(DynamicTabSwitcherLocalModel);
         return scroller({
             className: classNames(className, impl.isVertical && `${className}--vertical`),
             content: tabs,
             contentProps: {localModel: impl},
             orientation: ['left', 'right'].includes(orientation) ? 'vertical' : 'horizontal',
+            testId,
             ...getLayoutProps(props)
         });
     }
@@ -127,7 +128,8 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
         {disabled, icon, tooltip} = tab,
         isFavorite = model.isTabFavorite(tab.id),
         {isVertical, props} = localModel,
-        {tabWidth, tabMinWidth, tabMaxWidth} = props;
+        {tabWidth, tabMinWidth, tabMaxWidth} = props,
+        tabTestId = getTestId(props, tab.id);
 
     // Handle tab sizing props
     const tabStyle: CSSProperties = {};
@@ -172,6 +174,7 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
                     );
                 },
                 ref: composeRefs(provided.innerRef, tabRef),
+                testId: tabTestId,
                 ...provided.draggableProps,
                 ...provided.dragHandleProps,
                 style: getStyles(isVertical, provided.draggableProps.style),
@@ -199,6 +202,7 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
                                     button({
                                         className:
                                             'xh-dynamic-tab-switcher__tabs__tab__close-button',
+                                        testId: getTestId(tabTestId, 'remove-btn'),
                                         icon: Icon.x({size: 'sm'}),
                                         title: 'Remove Tab',
                                         minimal: true,