@xh/hoist 87.1.1 → 87.2.0

package/desktop/cmp/daterange/impl/RelativeTab.ts

@@ -0,0 +1,108 @@
+/*
+ * 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 {DATE_RANGE_UNITS, getDateRangeUnitLabel} from '@xh/hoist/cmp/daterange';
+import type {DateRangePickerLocalModel} from './DateRangePickerLocalModel';
+import {div, hbox, span, vbox} from '@xh/hoist/cmp/layout';
+import {hoistCmp} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {numberInput, segmentedControl} from '@xh/hoist/desktop/cmp/input';
+import {controlGroup} from '@xh/hoist/kit/blueprint';
+import {getTestId, TEST_ID} from '@xh/hoist/utils/js';
+import {sectionHeader} from './TabUtils';
+
+/** Relative tab - a lookback of N units ending on the anchor date, drafted until applied. */
+export const relativeTab = hoistCmp.factory<DateRangePickerLocalModel>(({model, testId}) => {
+    const {parentModel, relativeRange} = model;
+
+    return vbox({
+        className: 'xh-date-range-picker-popover__tab',
+        items: [
+            sectionHeader('Relative Lookback'),
+            hbox({
+                className: 'xh-date-range-picker-popover__rel-row',
+                items: [
+                    span({className: 'xh-date-range-picker-popover__rel-prefix', item: 'Prev'}),
+                    controlGroup({
+                        items: [
+                            button({
+                                text: '−',
+                                minWidth: 20,
+                                testId: getTestId(testId, 'count-down'),
+                                onClick: () => model.stepCount(-1)
+                            }),
+                            numberInput({
+                                model,
+                                bind: 'relativeCount',
+                                min: 1,
+                                max: 999,
+                                width: 56,
+                                textAlign: 'center',
+                                commitOnChange: true,
+                                testId: getTestId(testId, 'count')
+                            }),
+                            button({
+                                text: '+',
+                                minWidth: 20,
+                                testId: getTestId(testId, 'count-up'),
+                                onClick: () => model.stepCount(1)
+                            })
+                        ]
+                    }),
+                    segmentedControl({
+                        model,
+                        bind: 'relativeUnit',
+                        testId: getTestId(testId, 'unit'),
+                        options: DATE_RANGE_UNITS.map(unit => ({
+                            value: unit,
+                            label: getDateRangeUnitLabel(unit)
+                        }))
+                    })
+                ]
+            }),
+            div({
+                className: 'xh-date-range-picker-popover__snap-box',
+                items: [
+                    // Two ways of counting, named as peers rather than as a checkbox modifier.
+                    // Days have nothing to round out, so no choice at that grain.
+                    segmentedControl({
+                        omit: !model.snapApplies,
+                        model,
+                        bind: 'relativeSnap',
+                        fill: false,
+                        testId: getTestId(testId, 'snap'),
+                        options: [
+                            {value: false, label: 'Rolling'},
+                            {value: true, label: 'Calendar'}
+                        ]
+                    }),
+                    div({
+                        className: 'xh-date-range-picker-popover__snap-help',
+                        [TEST_ID]: getTestId(testId, 'snap-help'),
+                        item: model.relativeModeHelpText
+                    })
+                ]
+            }),
+            div({
+                className: 'xh-date-range-picker-popover__preview',
+                items: [
+                    div({
+                        className: 'xh-date-range-picker-popover__preview-label',
+                        item: 'Resolves To'
+                    }),
+                    div({
+                        className: 'xh-date-range-picker-popover__preview-range',
+                        item: parentModel.fmtRange(relativeRange)
+                    }),
+                    div({
+                        className: 'xh-date-range-picker-popover__preview-days',
+                        item: model.relativePreviewCountText
+                    })
+                ]
+            })
+        ]
+    });
+});

package/desktop/cmp/daterange/impl/TabUtils.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 {div} from '@xh/hoist/cmp/layout';
+import type {KeyboardEvent} from 'react';
+
+export const sectionHeader = (text: string) =>
+    div({className: 'xh-date-range-picker-popover__section-hdr', item: text});
+
+/** Props making a styled div act as a keyboard-accessible button. Pass null to disable. */
+export const clickable = (onClick: () => void) =>
+    onClick
+        ? {
+              role: 'button',
+              tabIndex: 0,
+              onClick,
+              onKeyDown: (e: KeyboardEvent) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onClick();
+                  }
+              }
+          }
+        : {role: 'button', 'aria-disabled': true};
+
+/**
+ * Spread arbitrary `data-*` attributes onto a plain element spec. Needed only for attributes
+ * `ElementSpec` does not declare - `data-testid` is declared, so pass that as `[TEST_ID]` directly.
+ */
+export const dataAttrs = (attrs: Record<string, string>) => attrs as object;

package/desktop/cmp/daterange/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+export * from './DateRangePicker';
+export * from '@xh/hoist/cmp/daterange';

package/desktop/cmp/dock/DockContainerModel.ts

@@ -20,6 +20,9 @@ interface DockContainerConfig {
     renderMode?: RenderMode;
     /** Strategy for refreshing DockViews. Can also be set per-view via `DockViewModelConfig.refreshMode` */
     refreshMode?: RefreshMode;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -38,10 +41,12 @@ export class DockContainerModel extends HoistModel {
         views = [],
         direction = 'rtl',
         renderMode = 'lazy',
-        refreshMode = 'onShowLazy'
+        refreshMode = 'onShowLazy',
+        xhName = null
     }: DockContainerConfig = {}) {
         super();
         makeObservable(this);
+        this.xhName = xhName;
         views = views.filter(v => !isOmitted(v));
 
         ensureUniqueBy(views as [], 'id', 'Multiple DockContainerModel views have the same id.');

package/desktop/cmp/dock/DockViewModel.ts

@@ -66,6 +66,9 @@ export interface DockViewConfig {
     allowDialog?: boolean;
     /** Awaitable callback invoked on close. Return false to prevent close. */
     onClose?: () => Awaitable<boolean | void>;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -128,7 +131,8 @@ export class DockViewModel extends HoistModel {
         collapsed = false,
         allowClose = true,
         allowDialog = true,
-        onClose
+        onClose,
+        xhName = null
     }: DockViewConfig) {
         super();
         makeObservable(this);
@@ -136,6 +140,7 @@ export class DockViewModel extends HoistModel {
 
         this.id = id;
         this.containerModel = containerModel;
+        this.xhName = xhName ?? containerModel?.childXhName(id);
         this.title = title;
         this.icon = icon;
         this.content = content;

package/desktop/cmp/filechooser/FileChooser.ts

@@ -112,6 +112,8 @@ export const [FileChooser, fileChooser] = hoistCmp.withFactory<FileChooserProps>
                         container = isTop ? vframe : hframe;
                     return container({
                         className,
+                        testId: props.testId,
+                        domAttrs: props.domAttrs,
                         items: [
                             // `box` (flex: none) so the rail keeps a fixed size beside the grid;
                             // `frame` would grow and crowd it out.
@@ -149,6 +151,8 @@ export const [FileChooser, fileChooser] = hoistCmp.withFactory<FileChooserProps>
                         !hasFiles ? 'xh-file-chooser__target--empty' : null,
                         clickable ? 'xh-file-chooser__target--clickable' : null
                     ),
+                    testId: props.testId,
+                    domAttrs: props.domAttrs,
                     items: [dropzoneItem, targetMask, input({...getInputProps()})],
                     ...getRootProps(),
                     ...getLayoutProps(props)

package/desktop/cmp/form/FormField.ts

@@ -273,6 +273,7 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
             className: classNames(className, classes),
             ...getLayoutProps(props),
             testId,
+            domAttrs: props.domAttrs,
             items: [
                 labelEl({
                     omit: !label,

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -62,7 +62,10 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
      */
     popoverWidth?: number;
 
-    /** True (default) to style trigger button background and borders to match inputs. */
+    /**
+     * True (default) to style trigger button background and borders to match inputs. Set to false
+     * to render an outlined button instead.
+     */
     styleButtonAsInput?: boolean;
 }
 
@@ -125,7 +128,10 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                             'xh-grouping-chooser-button',
                             styleButtonAsInput ? 'xh-grouping-chooser-button--as-input' : null
                         ),
-                        minimal: styleButtonAsInput,
+                        // Input mode relies on the `--as-input` class for its chrome, so renders
+                        // minimal. Button mode renders outlined, to match the ViewManager trigger.
+                        ...(styleButtonAsInput ? {minimal: true} : {outlined: true}),
+                        active: isOpen,
                         ...buttonProps,
                         onClick: () => impl.toggleEditor(),
                         testId

package/desktop/cmp/input/Checkbox.ts

@@ -75,6 +75,7 @@ const cmp = hoistCmp.factory<CheckboxInputModel>(({model, className, ...props},
         tabIndex: props.tabIndex,
         id: props.id,
         [TEST_ID]: props.testId,
+        ...props.domAttrs,
         className,
         style: props.style,
 

package/desktop/cmp/input/CodeInput.ts

@@ -671,6 +671,7 @@ const cmp = hoistCmp.factory<CodeInputModel>(({model, className, ...props}, ref)
             model: model.modalSupportModel,
             item: inputCmp({
                 testId: props.testId,
+                domAttrs: props.domAttrs,
                 width: '100%',
                 height: '100%',
                 className,

package/desktop/cmp/input/DateInput.scss

@@ -10,7 +10,7 @@
     height: 100%;
   }
 
-  .bp6-input-group .xh-icon {
+  .bp6-input-action .xh-icon {
     position: relative;
     margin: 0 !important;
   }

package/desktop/cmp/input/DateInput.ts

@@ -468,6 +468,7 @@ const cmp = hoistCmp.factory<DateInputProps & {model: DateInputModel}>(
                         inputRef: model.inputRef,
                         ref: model.textInputRef,
                         testId: getTestId(props),
+                        domAttrs: props.domAttrs,
                         ...getLayoutProps(props)
                     }),
                     className: 'xh-date-input__click-target',

package/desktop/cmp/input/IntentInput.scss

@@ -0,0 +1,202 @@
+/*
+ * 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-intent-input {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--xh-intent-input-gap-px);
+
+  // Selection ring geometry. Drawn as an outline on the swatch fill, so it takes no part in
+  // layout - the container reserves room for it with matching padding, derived from these two
+  // values so the two cannot drift apart.
+  --ring-offset: 2px;
+  --ring-width: 1px;
+
+  padding: calc(var(--ring-offset) + var(--ring-width));
+  // Pin the box against the line rather than letting its own baseline drive the line box. An
+  // inline-flex box takes its baseline from its first flex item, so the baseline would otherwise
+  // shift as the first swatch gains or loses the check - moving neighboring content (e.g. a
+  // FormField label) by a couple of pixels on every selection change.
+  vertical-align: middle;
+
+  &__swatch {
+    // Inset hairline color, shared by every fill state below. Overridden by the --none variant,
+    // whose transparent fill needs a visible outline rather than a darkening edge.
+    --swatch-hairline-color: rgba(0, 0, 0, 0.15);
+
+    // Reset the UA button styling - the swatch fill below is the entire control.
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-pad-half-px);
+    cursor: pointer;
+    color: var(--xh-text-color);
+    font-family: inherit;
+    font-size: var(--xh-font-size-px);
+    line-height: 1;
+
+    // Focus ring - drawn in the primary intent so it reads as focus rather than as selection.
+    // Higher specificity than the selected/hover rules below, so focus wins where they coincide.
+    &:focus-visible {
+      outline: none;
+
+      .xh-intent-input__swatch__fill {
+        outline: var(--ring-width) solid var(--xh-intent-primary);
+        outline-offset: var(--ring-offset);
+      }
+    }
+
+    // The color chip itself. Sized identically whether or not it holds the check, so selecting
+    // an option never shifts the row.
+    &__fill {
+      flex: none;
+      width: var(--xh-intent-input-swatch-size-px);
+      height: var(--xh-intent-input-swatch-size-px);
+      border-radius: var(--xh-intent-input-border-radius-px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // Inner hairline keeps a swatch legible where its color sits close to the surface behind it.
+      box-shadow: inset 0 0 0 1px var(--swatch-hairline-color);
+      transition:
+        box-shadow 100ms,
+        outline-color 100ms;
+    }
+
+    // Check is rendered for every swatch and merely hidden when unselected. This keeps each
+    // swatch's box AND its baseline identical in both states: a flex container takes its baseline
+    // from its first flex item, so a fill that gained/lost the check would move the whole control's
+    // baseline, shifting baseline-aligned siblings - most visibly an inline FormField label, which
+    // aligns its row with `align-items: baseline`.
+    &__check {
+      color: var(--xh-white);
+      font-size: calc(var(--xh-intent-input-swatch-size-px) * 0.6);
+
+      &--hidden {
+        visibility: hidden;
+      }
+    }
+
+    &__name {
+      white-space: nowrap;
+    }
+
+    // Selected / hover - a ring offset from the swatch, echoing its own color. Drawn as an
+    // outline rather than a second box-shadow: the offset gap then shows the actual surface
+    // behind the control, instead of a band painted in --xh-bg that would be the wrong color on
+    // any other surface (a panel, a toolbar, a grid cell).
+    &--selected .xh-intent-input__swatch__fill,
+    &:hover:not(:disabled) .xh-intent-input__swatch__fill {
+      outline: var(--ring-width) solid currentColor;
+      outline-offset: var(--ring-offset);
+    }
+
+    &:disabled {
+      cursor: default;
+      color: var(--xh-input-disabled-text-color);
+
+      .xh-intent-input__swatch__fill {
+        opacity: 0.5;
+      }
+    }
+
+    // The null option, shown when `enableClear` is set - an empty outlined box standing in for
+    // "no intent". Keeps the shared geometry, so it selects and checks exactly like the others.
+    &--none {
+      // With no fill behind it, this outline IS the swatch, so it needs real contrast against the
+      // surface - the standard border color is too faint to read as a selectable target. Mixed
+      // from the text color so it adapts per theme; --xh-text-color-muted resolves to the same
+      // mid-gray in both, which lands too light against a white background.
+      --swatch-hairline-color: color-mix(in srgb, var(--xh-text-color) 60%, var(--xh-bg));
+
+      color: var(--xh-text-color-muted);
+
+      .xh-intent-input__swatch__fill {
+        background-color: transparent;
+      }
+
+      // No colored fill to sit on, so the check takes the normal text color instead of white.
+      .xh-intent-input__swatch__check {
+        color: var(--xh-text-color);
+      }
+    }
+
+    // Per-intent coloring. `color` carries the intent so the selected ring and the label can
+    // both pick it up via currentColor - the check reasserts white against the fill.
+    @each $intent in (primary, success, warning, danger) {
+      &--#{$intent} {
+        color: var(--xh-intent-#{$intent});
+
+        .xh-intent-input__swatch__fill {
+          background-color: var(--xh-intent-#{$intent});
+        }
+      }
+    }
+  }
+
+  // Names shown - label text returns to the standard text color, leaving the swatch to carry
+  // the intent's color. Selected names are emphasized instead.
+  &--with-names .xh-intent-input__swatch {
+    margin-right: var(--xh-pad-half-px);
+
+    &__name {
+      color: var(--xh-text-color);
+    }
+
+    &--selected .xh-intent-input__swatch__name {
+      font-weight: 600;
+    }
+
+    &:disabled .xh-intent-input__swatch__name {
+      color: var(--xh-input-disabled-text-color);
+    }
+  }
+
+  // Compact mode - reduced sizing for toolbars and space-constrained contexts. The ring offset
+  // tightens too, keeping the control inside the compact toolbar's item height.
+  &--compact {
+    --ring-offset: 1px;
+
+    gap: calc(var(--xh-intent-input-gap-px) / 2);
+
+    .xh-intent-input__swatch {
+      font-size: var(--xh-tbar-compact-font-size-px);
+
+      &__fill {
+        width: var(--xh-intent-input-compact-swatch-size-px);
+        height: var(--xh-intent-input-compact-swatch-size-px);
+      }
+
+      &__check {
+        font-size: calc(var(--xh-intent-input-compact-swatch-size-px) * 0.6);
+      }
+    }
+  }
+
+  // Validation borders - drawn on the container, as the swatches themselves are borderless.
+  &.xh-input--invalid,
+  &.xh-input--warning,
+  &.xh-input--info {
+    border-radius: var(--xh-intent-input-border-radius-px);
+  }
+
+  &.xh-input--invalid {
+    border: var(--xh-form-field-invalid-border);
+  }
+
+  &.xh-input--warning {
+    border: var(--xh-form-field-warning-border);
+  }
+
+  &.xh-input--info {
+    border: var(--xh-form-field-info-border);
+  }
+}