@xh/hoist 87.2.0 → 87.3.0

package/CHANGELOG.md

@@ -12,6 +12,25 @@
   3. Plain ASCII punctuation only. Use " - " for in-sentence breaks, never an em dash.
 -->
 
+## 87.3.0 - 2026-09-10
+
+### 🐞 Bug Fixes
+
+* Fixed `SegmentedControl` clipping an option's label when `equalSegmentWidths` divided the tray
+  too narrowly - options now hold their own content width, sharing equally only where there is room.
+* Fixed `useHotkeys()` throwing a React hook-count error when its arguments changed across
+  renders - a collapsible `Panel` given `hotkeys` no longer crashes when first expanded. Hotkeys
+  may now also be changed after the first render.
+* Fixed mobile `Navigator` back-navigation leaving the page stack and the route permanently out of
+  sync when a stale `allowSlidePrev` caused Swiper to silently skip the transition.
+* Fixed `RadioInput` and `Checkbox` options overhanging the top of the `Toolbar` - they
+  are now centered within the compact item height, sharing one rule with `SwitchInput`.
+* Fixed an unlabeled `Slider` (`labelRenderer: false`) sitting high in a compact `Toolbar`.
+* Fixed `SegmentedControl` overflowing a compact `Toolbar` - it now takes its compact sizing from
+  the toolbar, without needing its own `compact: true`.
+* Fixed `dateEditor` crashing when opening its picker on a column backed by a `localDate` field -
+  the editor now defaults its `valueType` from the Store field type.
+
 ## 87.2.0 - 2026-09-08
 
 ### 🎁 New Features
@@ -30,9 +49,6 @@
   trace spans (new `xh.name` tag), and the Inspector. Set it on any Hoist model config to tell peers
   of the same class apart - instances log as `ClassName [xhName]`, or `ClassName [id]` when unnamed.
   Hoist names services, `XH.appModel`, and models created by a named parent automatically.
-* Added Favorites to the Inspector's Instances grid - star any instance with an `xhName` to pin it,
-  and toggle the new `Favorites` quick filter to show only pinned instances. Favorites persist
-  across reloads, showing as placeholder rows when no instance is live.
 * Added read-only detail panels to the Admin Console's Config, User Preferences, and JSON Blobs
   tabs. The Config panel shows every view of a config's value - resolved, instance override,
   database, and typedClass defaults - and renders notes as Markdown. Editing is now confined to the

package/build/types/cmp/grid/impl/ColumnWidthCalculator.d.ts

@@ -32,7 +32,7 @@ export declare class ColumnWidthCalculator {
     resetClassNames(): void;
     setClassNames(sizingMode: any, rowClass: any, cellClass: any): void;
     getCellEl(): any;
-    getCellClass(gridModel: any, column: any, record: any, value: any): string;
+    getCellClass(column: any, record: any, value: any): string;
     getRowEl(): any;
     getRowClass(gridModel: any, record: any): string;
     getIndentation(depth: any): number;

package/build/types/desktop/hooks/UseHotkeys.d.ts

@@ -6,9 +6,10 @@ import { HotkeyConfig } from '@blueprintjs/core/src/hooks/hotkeys/hotkeyConfig';
  * The implementation of this hook is based on BlueprintJS.
  * See their docs {@link https://blueprintjs.com/docs/#core/components/hotkeys} for more info.
  *
+ * Both args may change across renders - keys are (de)registered as they do.
+ *
  * @param child - element to be given hotkey support.  Must specify Component
  *      that takes react key events as props (e.g. boxes, panel, div, etc).
- * @param hotkeys - An array of hotkeys, or configs for hotkeys,
- *      as prescribed by blueprint. A Hotkeys element may also be provided.
+ * @param hotkeys - configs for the hotkeys to be installed, as prescribed by blueprint.
  */
-export declare function useHotkeys(child?: ReactElement<any>, hotkeys?: HotkeyConfig[]): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function useHotkeys(child?: ReactElement<any>, hotkeys?: HotkeyConfig[]): ReactElement;

package/build/types/mobile/cmp/navigator/NavigatorModel.d.ts

@@ -45,6 +45,11 @@ export interface NavigatorConfig {
 export declare class NavigatorModel extends HoistModel {
     disableAppRefreshButton: boolean;
     stack: PageModel[];
+    /**
+     * Index of the active page, synced from Swiper as each transition completes. Observable so
+     * `allowSlideNext`/`allowSlidePrev` stay current - Swiper silently skips locked directions.
+     */
+    activePageIdx: number;
     pages: PageConfig[];
     track: boolean;
     pullDownToRefresh: boolean;
@@ -56,7 +61,6 @@ export declare class NavigatorModel extends HoistModel {
     private _touchStartX;
     get activePageId(): string;
     get activePage(): PageModel;
-    get activePageIdx(): number;
     get allowSlideNext(): boolean;
     get allowSlidePrev(): boolean;
     constructor({ pages, track, pullDownToRefresh, transitionMs, renderMode, refreshMode, xhName }: NavigatorConfig);

package/cmp/clock/Clock.ts

@@ -83,7 +83,7 @@ class ClockLocalModel extends HoistModel {
 
     override onLinked() {
         this.addReaction({
-            track: () => this.componentProps.timeZone,
+            track: () => this.componentProps.timezone,
             run: () => this.loadTimezoneOffsetAsync(),
             fireImmediately: true
         });

package/cmp/grid/impl/ColumnWidthCalculator.ts

@@ -111,8 +111,7 @@ export class ColumnWidthCalculator {
     }
 
     async calcLevelWidthAsync(gridModel, records, column, options, indentationPx = 0) {
-        const {field, getValueFn, renderer, rendererIsComplex, cellClassFn, cellClassRules} =
-                column,
+        const {field, getValueFn, renderer, rendererIsComplex, cellClassRules} = column,
             {store, sizingMode, rowClassFn, rowClassRules} = gridModel,
             bufferPx = column.autosizeBufferPx ?? options.bufferPx;
 
@@ -163,11 +162,11 @@ export class ColumnWidthCalculator {
         await forEachAsync(sample, ({value, records}) => {
             // Get unique combinations of row and cell classes applied
             const classNames = new Set<string>();
-            if (rowClassFn || cellClassFn || !isEmpty(rowClassRules) || !isEmpty(cellClassRules)) {
+            if (rowClassFn || !isEmpty(rowClassRules) || !isEmpty(cellClassRules)) {
                 records.forEach(record => {
                     const rawValue = getValueFn({record, field, column, gridModel, store}),
                         rowClass = this.getRowClass(gridModel, record),
-                        cellClass = this.getCellClass(gridModel, column, record, rawValue);
+                        cellClass = this.getCellClass(column, record, rawValue);
                     classNames.add(rowClass + '|' + cellClass);
                 });
             } else {
@@ -342,14 +341,10 @@ export class ColumnWidthCalculator {
         return this._cellEl;
     }
 
-    getCellClass(gridModel, column, record, value) {
-        const {cellClassFn, cellClassRules} = column,
+    getCellClass(column, record, value) {
+        const {cellClassRules} = column,
             ret = [];
 
-        if (cellClassFn) {
-            ret.push(cellClassFn({record, column, gridModel}));
-        }
-
         if (cellClassRules) {
             forOwn(cellClassRules, (fn, className) => {
                 if (fn({value, data: record})) {

package/desktop/cmp/grid/editors/DateEditor.ts

@@ -5,6 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {hoistCmp} from '@xh/hoist/core';
+import {FieldType} from '@xh/hoist/data';
 import {dateInput, DateInputProps} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
 import {warnIf} from '@xh/hoist/utils/js';
@@ -21,12 +22,19 @@ export const [DateEditor, dateEditor] = hoistCmp.withFactory<DateEditorProps>({
     memo: false,
     observer: false,
     render(props, ref) {
+        const {gridModel, column, inputProps} = props;
+
         // We need to render the day picker popover inside the grid viewport in order for
         // `stopEditingWhenCellsLoseFocus` to work properly - otherwise the day picker becomes
         // unusable due to the grid losing focus and stopping editing when clicking inside picker
-        const portalContainer = props.gridModel.bodyViewport;
+        const portalContainer = gridModel.bodyViewport;
         warnIf(!portalContainer, 'Could not find the grid viewport for rendering DateEditor');
 
+        const valueType =
+            gridModel.store.getField(column.field)?.type === FieldType.LOCAL_DATE
+                ? 'localDate'
+                : 'date';
+
         props = {
             ...props,
             inputProps: {
@@ -34,7 +42,8 @@ export const [DateEditor, dateEditor] = hoistCmp.withFactory<DateEditorProps>({
                 enablePicker: !!portalContainer,
                 showPickerOnFocus: !!portalContainer,
                 portalContainer,
-                ...props.inputProps
+                valueType,
+                ...inputProps
             }
         };
         return useInlineEditorModel(dateInput, props, ref);

package/desktop/cmp/input/SegmentedControl.scss

@@ -74,8 +74,14 @@
 
   // Equal segment widths - zeroing the flex basis makes each option take an identical share of the
   // tray. BP's flex-grow alone divides only the leftover space, leaving options at differing widths.
+  // The min-width keeps that equal share from shrinking an option below its own label. A zero
+  // basis otherwise lets each option fall to BP's fixed 30px floor, which is unrelated to its
+  // content: the horizontal padding is eaten first, then a single-word label spills past the
+  // border, since it can neither wrap nor ellipsize. Options only stop sharing equally once there
+  // is genuinely not enough room, and then only the ones that need the space keep it.
   &--fill#{&}--equal-widths .bp6-segmented-control > .bp6-button {
     flex-basis: 0;
+    min-width: min-content;
   }
 
   // Tray background suppressed - a lighter presentation, with no fill behind the options.
@@ -114,8 +120,10 @@
     }
   }
 
-  // Compact mode - reduced sizing for toolbars and space-constrained contexts.
-  &--compact .bp6-segmented-control {
+  // Compact mode - via the `compact` prop, or implicitly within a compact Toolbar, whose
+  // item height the standard sizing above would overflow.
+  &--compact .bp6-segmented-control,
+  .xh-toolbar--compact & .bp6-segmented-control {
     padding: 0;
     gap: 0;
 
@@ -132,7 +140,8 @@
   }
 
   // Compact + outlined - shrink buttons to account for the border.
-  &--compact#{&}--outlined .bp6-segmented-control > .bp6-button {
+  &--compact#{&}--outlined .bp6-segmented-control > .bp6-button,
+  .xh-toolbar--compact &#{&}--outlined .bp6-segmented-control > .bp6-button {
     --compact-btn-h: calc(var(--xh-tbar-compact-item-height-px) - 2px);
     min-height: var(--compact-btn-h);
     max-height: var(--compact-btn-h);

package/desktop/cmp/toolbar/Toolbar.scss

@@ -155,19 +155,33 @@
         }
       }
 
-      &.xh-switch-input {
+      // BP baseline-aligns control indicators, overhanging the bar when compact - flex to center.
+      &.xh-switch-input,
+      &.xh-check-box,
+      &.xh-radio-input .xh-radio-input-option {
         display: flex;
         align-items: center;
+        padding-inline-start: 0;
 
         .bp6-control-indicator {
-          margin-top: 1px;
-          margin-right: var(--xh-pad-half-px);
+          margin: 0 var(--xh-pad-half-px) 0 0;
+        }
+
+        &.bp6-align-right {
+          flex-direction: row-reverse;
+          padding-right: 0;
+
+          .bp6-control-indicator {
+            float: none;
+            margin: 0 0 0 var(--xh-pad-half-px);
+          }
         }
       }
 
-      &.xh-switch-input.bp6-align-right {
-        flex-direction: row-reverse;
-        padding-right: 0;
+      // BP's unlabeled slider (labelRenderer: false) is 16px - center it. Labeled ones are 40px
+      // and overhang the bar.
+      &.xh-slider .bp6-slider-unlabeled {
+        margin-top: calc((var(--xh-tbar-compact-item-height-px) - 16px) / 2);
       }
 
       &.xh-select {

package/desktop/hooks/UseHotkeys.ts

@@ -4,29 +4,58 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {hoistCmp, HoistProps} from '@xh/hoist/core';
 import {useHotkeys as useHotkeysBp} from '@xh/hoist/kit/blueprint';
-import {isEmpty} from 'lodash';
-import {cloneElement, ReactElement, useMemo} from 'react';
+import {isEqualWith, isFunction} from 'lodash';
+import {cloneElement, ReactElement, useRef} from 'react';
 import {HotkeyConfig} from '@blueprintjs/core/src/hooks/hotkeys/hotkeyConfig';
 
-/* eslint-disable react-hooks/exhaustive-deps */
-
 /**
  * Hook to add Key handling support to a component.
  *
  * The implementation of this hook is based on BlueprintJS.
  * See their docs {@link https://blueprintjs.com/docs/#core/components/hotkeys} for more info.
  *
+ * Both args may change across renders - keys are (de)registered as they do.
+ *
  * @param child - element to be given hotkey support.  Must specify Component
  *      that takes react key events as props (e.g. boxes, panel, div, etc).
- * @param hotkeys - An array of hotkeys, or configs for hotkeys,
- *      as prescribed by blueprint. A Hotkeys element may also be provided.
+ * @param hotkeys - configs for the hotkeys to be installed, as prescribed by blueprint.
  */
-export function useHotkeys(child?: ReactElement<any>, hotkeys?: HotkeyConfig[]) {
-    if (!child || isEmpty(hotkeys)) return child;
-
-    const memoHotkeys = useMemo(() => hotkeys, []),
-        {handleKeyDown, handleKeyUp} = useHotkeysBp(memoHotkeys);
+export function useHotkeys(child?: ReactElement<any>, hotkeys?: HotkeyConfig[]): ReactElement {
+    return child && hotkeys ? hotkeysHost({child, hotkeys}) : child;
+}
 
-    return cloneElement(child, {onKeyDown: handleKeyDown, onKeyUp: handleKeyUp});
+//------------------------
+// Implementation
+//------------------------
+interface HotkeysHostProps extends HoistProps {
+    child: ReactElement<any>;
+    hotkeys: HotkeyConfig[];
 }
+
+// Hosts BP's hooks, mounted only for callers that pass hotkeys, and only while they have a child
+// to bind them to - BP adds document listeners and warns re. its missing `HotkeysProvider` for
+// every caller of its hook, so it is not run on behalf of the many `Panel`s that specify no keys.
+const hotkeysHost = hoistCmp.factory<HotkeysHostProps>({
+    displayName: 'HotkeysHost',
+    model: false,
+    memo: false,
+    observer: false,
+
+    render({child, hotkeys}) {
+        // Hold configs stable, refreshing handlers in place - BP re-registers on array identity.
+        const ref = useRef<HotkeyConfig[]>(null),
+            prev = ref.current;
+        if (prev && isEqualWith(prev, hotkeys, fnEquals)) {
+            prev.forEach((hk, idx) => Object.assign(hk, hotkeys[idx]));
+        } else {
+            ref.current = hotkeys.map(hk => ({...hk}));
+        }
+
+        const {handleKeyDown, handleKeyUp} = useHotkeysBp(ref.current);
+        return cloneElement(child, {onKeyDown: handleKeyDown, onKeyUp: handleKeyUp});
+    }
+});
+
+const fnEquals = (a, b) => (isFunction(a) && isFunction(b) ? true : undefined);

package/mobile/cmp/navigator/NavigatorModel.ts

@@ -67,6 +67,12 @@ export class NavigatorModel extends HoistModel {
     @bindable.ref
     stack: PageModel[] = [];
 
+    /**
+     * Index of the active page, synced from Swiper as each transition completes. Observable so
+     * `allowSlideNext`/`allowSlidePrev` stay current - Swiper silently skips locked directions.
+     */
+    @bindable activePageIdx: number = 0;
+
     pages: PageConfig[] = [];
     track: boolean;
     pullDownToRefresh: boolean;
@@ -86,10 +92,6 @@ export class NavigatorModel extends HoistModel {
         return this.stack[this.activePageIdx];
     }
 
-    get activePageIdx(): number {
-        return this._swiper?.activeIndex ?? 0;
-    }
-
     get allowSlideNext(): boolean {
         return this.activePageIdx < this.stack.length - 1;
     }
@@ -218,8 +220,9 @@ export class NavigatorModel extends HoistModel {
     /** @internal */
     @action
     onPageChange = () => {
-        // 1) Clear any pages after the active page. These can be left over from a back swipe.
-        this.stack = this.stack.slice(0, this._swiper.activeIndex + 1);
+        // 1) Sync the active index, then clear any pages after it - left over from a back swipe.
+        this.activePageIdx = this._swiper.activeIndex;
+        this.stack = this.stack.slice(0, this.activePageIdx + 1);
 
         // 2) Sync route to match the current page stack
         const newRouteName = this.stack.map(it => it.id).join('.'),
@@ -303,7 +306,8 @@ export class NavigatorModel extends HoistModel {
         if (init) {
             this.stack = stack;
             this._swiper.update();
-            this._swiper.activeIndex = this.stack.length - 1;
+            this.activePageIdx = this.stack.length - 1;
+            this._swiper.activeIndex = this.activePageIdx;
             return;
         }
 
@@ -315,6 +319,9 @@ export class NavigatorModel extends HoistModel {
             forwardOnePage = isEqual(newKeyStack.slice(0, -1), currKeyStack);
 
         if (backOnePage) {
+            // Set directly - a stale `false` here makes slidePrev() a silent no-op.
+            this._swiper.allowSlidePrev = true;
+
             // Don't update the stack yet. Instead, wait until after the animation has
             // completed in onPageChange().
             this._swiper.slidePrev(transitionMs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "87.2.0",
+  "version": "87.3.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",