@xh/hoist 59.2.0 → 59.3.0

package/desktop/cmp/form/FormField.ts

@@ -4,22 +4,23 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {PopoverPosition, PopperBoundary} from '@blueprintjs/core';
 import composeRefs from '@seznam/compose-react-refs/composeRefs';
-import {FieldModel, FormContext, FormContextType, BaseFormFieldProps} from '@xh/hoist/cmp/form';
+import {BaseFormFieldProps, FieldModel, FormContext, FormContextType} from '@xh/hoist/cmp/form';
 import {box, div, label as labelEl, li, span, ul} from '@xh/hoist/cmp/layout';
 import {DefaultHoistProps, hoistCmp, HSide, uses, XH} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
+import {instanceManager} from '@xh/hoist/core/impl/InstanceManager';
 import {fmtDate, fmtDateTime, fmtJson, fmtNumber} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {tooltip} from '@xh/hoist/kit/blueprint';
 import {isLocalDate} from '@xh/hoist/utils/datetime';
-import {errorIf, throwIf, withDefault} from '@xh/hoist/utils/js';
-import {getLayoutProps, getReactElementName} from '@xh/hoist/utils/react';
+import {errorIf, getTestId, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
+import {getLayoutProps, getReactElementName, useOnMount, useOnUnmount} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isBoolean, isDate, isEmpty, isFinite, isNil, isUndefined, kebabCase} from 'lodash';
 import {Children, cloneElement, ReactElement, ReactNode, useContext, useState} from 'react';
 import './FormField.scss';
-import {PopoverPosition, PopperBoundary} from '@blueprintjs/core';
 
 export interface FormFieldProps extends BaseFormFieldProps {
     /**
@@ -162,10 +163,18 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
         if (disabled) classes.push('xh-form-field-disabled');
         if (displayNotValid) classes.push('xh-form-field-invalid');
 
+        const testId = getFormFieldTestId(props, formContext, model.name);
+        useOnMount(() => instanceManager.registerModelWithTestId(testId, model));
+        useOnUnmount(() => instanceManager.unregisterModelWithTestId(testId));
+
         // generate actual element child to render
         let childEl: ReactElement =
             !child || readonly
-                ? readonlyChild({model, readonlyRenderer})
+                ? readonlyChild({
+                      model,
+                      readonlyRenderer,
+                      testId: getTestId(testId, 'readonly-display')
+                  })
                 : editableChild({
                       model,
                       child,
@@ -174,7 +183,8 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
                       disabled,
                       displayNotValid,
                       leftErrorIcon,
-                      commitOnChange
+                      commitOnChange,
+                      testId: getTestId(testId, 'input')
                   });
 
         if (minimal) {
@@ -195,6 +205,7 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
             key: model?.xhId,
             className: classNames(className, classes),
             ...getLayoutProps(props),
+            testId,
             items: [
                 labelEl({
                     omit: !label,
@@ -236,9 +247,13 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
 const readonlyChild = hoistCmp.factory({
     model: false,
 
-    render({model, readonlyRenderer}) {
+    render({model, readonlyRenderer, testId}) {
         const value = model ? model['value'] : null;
-        return div({className: 'xh-form-field-readonly-display', item: readonlyRenderer(value)});
+        return div({
+            className: 'xh-form-field-readonly-display',
+            [TEST_ID]: testId,
+            item: readonlyRenderer(value)
+        });
     }
 });
 
@@ -253,7 +268,8 @@ const editableChild = hoistCmp.factory<FieldModel>({
         disabled,
         displayNotValid,
         leftErrorIcon,
-        commitOnChange
+        commitOnChange,
+        testId
     }) {
         const {props} = child;
 
@@ -263,7 +279,8 @@ const editableChild = hoistCmp.factory<FieldModel>({
             bind: 'value',
             id: childId,
             disabled: props.disabled || disabled,
-            ref: composeRefs(model?.boundInputRef, child.ref)
+            ref: composeRefs(model?.boundInputRef, child.ref),
+            testId: props.testId ?? testId
         };
 
         // If a sizeable child input doesn't specify its own dimensions,
@@ -347,3 +364,10 @@ function defaultProp(
     const fieldDefault = formContext.fieldDefaults ? formContext.fieldDefaults[name] : null;
     return withDefault(props[name], fieldDefault, defaultVal);
 }
+function getFormFieldTestId(
+    props: Partial<FormFieldProps>,
+    formContext: FormContextType,
+    fieldName: string
+): string {
+    return props.testId ?? (formContext.testId ? `${formContext.testId}-${fieldName}` : undefined);
+}

package/desktop/cmp/grid/columns/Actions.ts

@@ -8,7 +8,7 @@ import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 import {RecordAction} from '@xh/hoist/data';
 import {button, buttonGroup} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
-import {throwIf} from '@xh/hoist/utils/js';
+import {getTestId, throwIf} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
 import {isEmpty} from 'lodash';
 
@@ -64,6 +64,7 @@ export const actionCol: ColumnSpec = {
             if (hidden) return null;
 
             return button({
+                testId: getTestId(action.testId, `${record.id}`),
                 icon,
                 disabled,
                 tooltip,

package/desktop/cmp/grid/impl/colchooser/ColChooser.ts

@@ -43,7 +43,7 @@ export const colChooser = hoistCmp.factory<ColChooserProps>({
                     filler(),
                     button({
                         omit: !showRestoreDefaults,
-                        text: 'Restore Grid Defaults',
+                        text: 'Restore Defaults',
                         icon: Icon.undo({className: 'xh-red'}),
                         onClick: () => model.restoreDefaultsAsync()
                     }),
@@ -57,7 +57,8 @@ export const colChooser = hoistCmp.factory<ColChooserProps>({
                     button({
                         omit: commitOnChange,
                         text: 'Save',
-                        icon: Icon.check({className: 'xh-green'}),
+                        icon: Icon.check(),
+                        intent: 'success',
                         onClick: () => {
                             model.commit();
                             model.close();

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -8,12 +8,13 @@ import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {box, div, filler, fragment, hbox, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
-import {select, MENU_PORTAL_ID} from '@xh/hoist/desktop/cmp/input';
+import {select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
+import {elemWithin, getTestId, TEST_ID} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {compact, isEmpty, sortBy} from 'lodash';
@@ -58,6 +59,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             popoverTitle = 'Group By',
             popoverPosition = 'bottom',
             styleButtonAsInput = true,
+            testId,
             ...rest
         },
         ref
@@ -65,7 +67,10 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
         const {editorIsOpen, favoritesIsOpen, persistFavorites, value, allowEmpty} = model,
             isOpen = editorIsOpen || favoritesIsOpen,
             label = isEmpty(value) && allowEmpty ? emptyText : model.getValueLabel(value),
-            [layoutProps, buttonProps] = splitLayoutProps(rest);
+            [layoutProps, buttonProps] = splitLayoutProps(rest),
+            favoritesMenuTestId = getTestId(testId, 'favorites-menu'),
+            favoritesIconTestId = getTestId(testId, 'favorites-icon'),
+            editorTestId = getTestId(testId, 'editor');
 
         return box({
             ref,
@@ -91,21 +96,28 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                         ),
                         minimal: styleButtonAsInput,
                         ...buttonProps,
-                        onClick: () => model.toggleEditor()
+                        onClick: () => model.toggleEditor(),
+                        testId
                     }),
-                    favoritesIcon()
+                    favoritesIcon({testId: favoritesIconTestId})
                 ),
                 content: favoritesIsOpen
-                    ? favoritesMenu()
+                    ? favoritesMenu({testId: favoritesMenuTestId})
                     : editorIsOpen
-                    ? editor({popoverWidth, popoverMinHeight, popoverTitle, emptyText})
+                    ? editor({
+                          popoverWidth,
+                          popoverMinHeight,
+                          popoverTitle,
+                          emptyText,
+                          testId: editorTestId
+                      })
                     : null,
                 onInteraction: (nextOpenState, e) => {
                     if (
                         isOpen &&
                         nextOpenState === false &&
                         e?.target &&
-                        !targetIsControlButtonOrPortal(e.target)
+                        !elemWithin(e.target, 'xh-grouping-chooser-button--with-favorites')
                     ) {
                         model.commitPendingValueAndClose();
                     }
@@ -119,7 +131,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
 // Editor
 //------------------
 const editor = hoistCmp.factory<GroupingChooserModel>({
-    render({popoverWidth, popoverMinHeight, popoverTitle, emptyText}) {
+    render({popoverWidth, popoverMinHeight, popoverTitle, emptyText, testId}) {
         return panel({
             width: popoverWidth,
             minHeight: popoverMinHeight,
@@ -128,7 +140,8 @@ const editor = hoistCmp.factory<GroupingChooserModel>({
                 dimensionList({emptyText}),
                 addDimensionControl(),
                 filler()
-            ]
+            ],
+            testId
         });
     }
 });
@@ -292,32 +305,16 @@ function getDimOptions(dims, model) {
     return sortBy(ret, 'label');
 }
 
-function targetIsControlButtonOrPortal(target) {
-    const selectPortal = document.getElementById(MENU_PORTAL_ID)?.contains(target),
-        selectClick = targetWithin(target, 'xh-select__single-value'),
-        editorClick = targetWithin(target, 'xh-grouping-chooser-button--with-favorites');
-    return selectPortal || selectClick || editorClick;
-}
-
-/**
- * Determines whether any of the target's parents have a specific class name
- */
-function targetWithin(target, className): boolean {
-    for (let elem = target; elem; elem = elem.parentElement) {
-        if (elem.classList.contains(className)) return true;
-    }
-    return false;
-}
-
 //------------------
 // Favorites
 //------------------
 const favoritesIcon = hoistCmp.factory<GroupingChooserModel>({
-    render({model}) {
+    render({model, testId}) {
         if (!model.persistFavorites) return null;
         return div({
             item: Icon.favorite(),
             className: 'xh-grouping-chooser__favorite-icon',
+            [TEST_ID]: testId,
             onClick: e => {
                 model.toggleFavoritesMenu();
                 e.stopPropagation();
@@ -327,7 +324,7 @@ const favoritesIcon = hoistCmp.factory<GroupingChooserModel>({
 });
 
 const favoritesMenu = hoistCmp.factory<GroupingChooserModel>({
-    render({model}) {
+    render({model, testId}) {
         const options = model.favoritesOptions,
             isFavorite = model.isFavorite(model.value),
             omitAdd = isEmpty(model.value) || isFavorite,
@@ -349,7 +346,10 @@ const favoritesMenu = hoistCmp.factory<GroupingChooserModel>({
             })
         );
 
-        return vbox(div({className: 'xh-popup__title', item: 'Favorites'}), menu({items}));
+        return vbox({
+            testId,
+            items: [div({className: 'xh-popup__title', item: 'Favorites'}), menu({items})]
+        });
     }
 });
 

package/desktop/cmp/input/ButtonGroupInput.ts

@@ -10,7 +10,7 @@ import {Button, buttonGroup, ButtonGroupProps} from '@xh/hoist/desktop/cmp/butto
 import '@xh/hoist/desktop/register';
 import {throwIf, warnIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
-import {isEmpty, filter, without, castArray} from 'lodash';
+import {castArray, filter, isEmpty, without} from 'lodash';
 import {Children, cloneElement, isValidElement} from 'react';
 
 export interface ButtonGroupInputProps

package/desktop/cmp/input/Checkbox.ts

@@ -5,10 +5,10 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hoistCmp, StyleProps, HoistProps, HSide} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, HSide, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {checkbox as bpCheckbox} from '@xh/hoist/kit/blueprint';
-import {withDefault} from '@xh/hoist/utils/js';
+import {TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {isNil} from 'lodash';
 import {ReactNode} from 'react';
 
@@ -73,8 +73,8 @@ const cmp = hoistCmp.factory<CheckboxInputModel>(({model, className, ...props},
         inline: withDefault(props.inline, true),
         label: props.label,
         tabIndex: props.tabIndex,
-
         id: props.id,
+        [TEST_ID]: props.testId,
         className,
         style: props.style,
 

package/desktop/cmp/input/CodeInput.ts

@@ -35,8 +35,8 @@ import 'codemirror/addon/selection/mark-selection.js';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/dracula.css';
 import {compact, defaultsDeep, isEqual, isFunction} from 'lodash';
-import {findDOMNode} from 'react-dom';
 import {ReactElement} from 'react';
+import {findDOMNode} from 'react-dom';
 import './CodeInput.scss';
 
 export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
@@ -455,6 +455,7 @@ const cmp = hoistCmp.factory<CodeInputModel>(({model, className, ...props}, ref)
         item: modalSupport({
             model: model.modalSupportModel,
             item: inputCmp({
+                testId: props.testId,
                 width: '100%',
                 height: '100%',
                 className,

package/desktop/cmp/input/DateInput.ts

@@ -4,28 +4,28 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {PopperBoundary, PopperModifiers} from '@blueprintjs/core';
+import {ITimePickerProps} from '@blueprintjs/datetime';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {div} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HSide, Some, HoistProps, LayoutProps} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, HSide, LayoutProps, Some} from '@xh/hoist/core';
 import {button, buttonGroup} from '@xh/hoist/desktop/cmp/button';
-import {TextInputModel, textInput} from '@xh/hoist/desktop/cmp/input';
+import {textInput, TextInputModel} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
 import {fmtDate} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {datePicker as bpDatePicker, popover, Position} from '@xh/hoist/kit/blueprint';
-import {makeObservable, bindable} from '@xh/hoist/mobx';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
-import {consumeEvent, warnIf, withDefault} from '@xh/hoist/utils/js';
+import {consumeEvent, getTestId, warnIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {assign, castArray, clone, trim} from 'lodash';
 import moment from 'moment';
 import {createRef, ReactElement, ReactNode} from 'react';
-import './DateInput.scss';
-import {PopperBoundary, PopperModifiers} from '@blueprintjs/core';
-import {ITimePickerProps} from '@blueprintjs/datetime';
 import {DayPickerProps} from 'react-day-picker';
+import './DateInput.scss';
 
 export interface DateInputProps extends HoistProps, LayoutProps, HoistInputProps {
     value?: Date | LocalDate;
@@ -375,123 +375,128 @@ class DateInputModel extends HoistInputModel {
     }
 }
 
-const cmp = hoistCmp.factory<DateInputModel>(({model, className, ...props}, ref) => {
-    warnIf(
-        (props.enableClear || props.enablePicker) && props.rightElement,
-        'Cannot specify enableClear or enablePicker along with custom rightElement - built-in clear/picker button will not be shown.'
-    );
-
-    const enablePicker = props.enablePicker ?? true,
-        enableTextInput = props.enableTextInput ?? true,
-        enableClear = props.enableClear ?? false,
-        disabled = props.disabled ?? false,
-        isClearable = model.internalValue !== null,
-        isOpen = enablePicker && model.popoverOpen && !disabled;
-
-    const buttons = buttonGroup({
-        padding: 0,
-        items: [
-            button({
-                className: 'xh-date-input__clear-icon',
-                omit: !enableClear || !isClearable || disabled,
-                icon: Icon.cross(),
-                tabIndex: -1,
-                onClick: model.onClearBtnClick
-            }),
-            button({
-                className: classNames(
-                    'xh-date-input__picker-icon',
-                    enablePicker ? null : 'xh-date-input__picker-icon--disabled'
-                ),
-                icon: Icon.calendar(),
-                tabIndex: enableTextInput || disabled ? -1 : undefined,
-                elementRef: model.buttonRef,
-                onClick: enablePicker && !disabled ? model.onOpenPopoverClick : null
-            })
-        ]
-    });
-    const rightElement = withDefault(props.rightElement, buttons);
-
-    let {minDate, maxDate, initialMonth, renderValue} = model;
-
-    // If app has set an out-of-range date, we render it -- these bounds govern *manual* entry
-    // But need to relax constraints on the picker, to prevent BP from breaking badly
-    if (renderValue) {
-        if (minDate && renderValue < minDate) minDate = renderValue;
-        if (maxDate && renderValue > maxDate) maxDate = renderValue;
-    }
-
-    // BP chooses annoying mid-point if forced to guess initial month. Use closest bound instead
-    if (!initialMonth && !renderValue) {
-        const today = new Date();
-        if (minDate && today < minDate) initialMonth = minDate;
-        if (maxDate && today > maxDate) initialMonth = maxDate;
-    }
-
-    return div({
-        className: 'xh-date-input__wrapper',
-        item: popover({
-            isOpen,
-            minimal: true,
-            usePortal: true,
-            autoFocus: false,
-            enforceFocus: false,
-            modifiers: props.popoverModifiers,
-            position: props.popoverPosition ?? 'auto',
-            boundary: props.popoverBoundary ?? 'viewport',
-            portalContainer: props.portalContainer ?? document.body,
-            popoverRef: model.popoverRef,
-            onClose: model.onPopoverClose,
-            onInteraction: nextOpenState => {
-                if (props.showPickerOnFocus) {
-                    model.popoverOpen = nextOpenState;
-                } else if (!nextOpenState) {
-                    model.popoverOpen = false;
-                }
-            },
-
-            content: bpDatePicker({
-                value: renderValue,
-                onChange: model.onDatePickerChange,
-                maxDate,
-                minDate,
-                initialMonth,
-                showActionsBar: props.showActionsBar,
-                dayPickerProps: assign({fixedWeeks: true}, props.dayPickerProps),
-                timePrecision: model.timePrecision,
-                timePickerProps: model.timePrecision
-                    ? assign({selectAllOnFocus: true}, props.timePickerProps)
-                    : undefined
-            }),
+const cmp = hoistCmp.factory<DateInputProps & {model: DateInputModel}>(
+    ({model, className, ...props}, ref) => {
+        warnIf(
+            (props.enableClear || props.enablePicker) && props.rightElement,
+            'Cannot specify enableClear or enablePicker along with custom rightElement - built-in clear/picker button will not be shown.'
+        );
 
-            item: div({
-                item: textInput({
-                    value: model.formatDate(renderValue) as string,
+        const enablePicker = props.enablePicker ?? true,
+            enableTextInput = props.enableTextInput ?? true,
+            enableClear = props.enableClear ?? false,
+            disabled = props.disabled ?? false,
+            isClearable = model.internalValue !== null,
+            isOpen = enablePicker && model.popoverOpen && !disabled;
+
+        const buttons = buttonGroup({
+            padding: 0,
+            items: [
+                button({
+                    className: 'xh-date-input__clear-icon',
+                    omit: !enableClear || !isClearable || disabled,
+                    icon: Icon.cross(),
+                    tabIndex: -1,
+                    onClick: model.onClearBtnClick,
+                    testId: getTestId(props, 'clear')
+                }),
+                button({
                     className: classNames(
-                        className,
-                        !enableTextInput && !disabled ? 'xh-date-input--picker-only' : null
+                        'xh-date-input__picker-icon',
+                        enablePicker ? null : 'xh-date-input__picker-icon--disabled'
                     ),
-                    onCommit: model.onInputCommit,
-                    onChange: model.onInputChange,
-                    onKeyDown: model.onInputKeyDown,
-                    rightElement,
-                    disabled: disabled || !enableTextInput,
-                    leftIcon: props.leftIcon,
-                    tabIndex: props.tabIndex,
-                    placeholder: props.placeholder,
-                    textAlign: props.textAlign,
-                    selectOnFocus: props.selectOnFocus,
-                    inputRef: model.inputRef,
-                    ref: model.textInputRef,
-                    ...getLayoutProps(props)
+                    icon: Icon.calendar(),
+                    tabIndex: enableTextInput || disabled ? -1 : undefined,
+                    elementRef: model.buttonRef,
+                    onClick: enablePicker && !disabled ? model.onOpenPopoverClick : null,
+                    testId: getTestId(props, 'picker')
+                })
+            ]
+        });
+        const rightElement = withDefault(props.rightElement, buttons);
+
+        let {minDate, maxDate, initialMonth, renderValue} = model;
+
+        // If app has set an out-of-range date, we render it -- these bounds govern *manual* entry
+        // But need to relax constraints on the picker, to prevent BP from breaking badly
+        if (renderValue) {
+            if (minDate && renderValue < minDate) minDate = renderValue;
+            if (maxDate && renderValue > maxDate) maxDate = renderValue;
+        }
+
+        // BP chooses annoying mid-point if forced to guess initial month. Use closest bound instead
+        if (!initialMonth && !renderValue) {
+            const today = new Date();
+            if (minDate && today < minDate) initialMonth = minDate;
+            if (maxDate && today > maxDate) initialMonth = maxDate;
+        }
+
+        return div({
+            className: 'xh-date-input__wrapper',
+            item: popover({
+                isOpen,
+                minimal: true,
+                usePortal: true,
+                autoFocus: false,
+                enforceFocus: false,
+                modifiers: props.popoverModifiers,
+                position: props.popoverPosition ?? 'auto',
+                boundary: props.popoverBoundary ?? 'viewport',
+                portalContainer: props.portalContainer ?? document.body,
+                popoverRef: model.popoverRef,
+                onClose: model.onPopoverClose,
+                onInteraction: nextOpenState => {
+                    if (props.showPickerOnFocus) {
+                        model.popoverOpen = nextOpenState;
+                    } else if (!nextOpenState) {
+                        model.popoverOpen = false;
+                    }
+                },
+
+                content: bpDatePicker({
+                    value: renderValue,
+                    onChange: model.onDatePickerChange,
+                    maxDate,
+                    minDate,
+                    initialMonth,
+                    showActionsBar: props.showActionsBar,
+                    dayPickerProps: assign({fixedWeeks: true}, props.dayPickerProps),
+                    timePrecision: model.timePrecision,
+                    timePickerProps: model.timePrecision
+                        ? assign({selectAllOnFocus: true}, props.timePickerProps)
+                        : undefined
                 }),
-                className: 'xh-date-input__click-target',
-                onClick: !enableTextInput && !disabled ? model.onOpenPopoverClick : null
-            })
-        }),
-        onBlur: model.onBlur,
-        onFocus: model.onFocus,
-        onKeyDown: model.onKeyDown,
-        ref
-    });
-});
+
+                item: div({
+                    item: textInput({
+                        value: model.formatDate(renderValue) as string,
+                        className: classNames(
+                            className,
+                            !enableTextInput && !disabled ? 'xh-date-input--picker-only' : null
+                        ),
+                        onCommit: model.onInputCommit,
+                        onChange: model.onInputChange,
+                        onKeyDown: model.onInputKeyDown,
+                        rightElement,
+                        disabled: disabled || !enableTextInput,
+                        leftIcon: props.leftIcon,
+                        tabIndex: props.tabIndex,
+                        placeholder: props.placeholder,
+                        textAlign: props.textAlign,
+                        selectOnFocus: props.selectOnFocus,
+                        inputRef: model.inputRef,
+                        ref: model.textInputRef,
+                        testId: getTestId(props),
+                        ...getLayoutProps(props)
+                    }),
+                    className: 'xh-date-input__click-target',
+                    onClick: !enableTextInput && !disabled ? model.onOpenPopoverClick : null
+                })
+            }),
+            onBlur: model.onBlur,
+            onFocus: model.onFocus,
+            onKeyDown: model.onKeyDown,
+            ref
+        });
+    }
+);

package/desktop/cmp/input/JsonInput.ts

@@ -6,9 +6,9 @@
  */
 import {hoistCmp} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
+import {fmtJson} from '@xh/hoist/format';
 import * as codemirror from 'codemirror';
 import 'codemirror/mode/javascript/javascript';
-import {fmtJson} from '@xh/hoist/format';
 import {codeInput, CodeInputProps} from './CodeInput';
 import {jsonlint} from './impl/jsonlint';
 

package/desktop/cmp/input/NumberInput.ts

@@ -6,12 +6,12 @@
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hoistCmp, HoistProps, StyleProps, LayoutProps, HSide} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, HSide, LayoutProps, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {fmtNumber, parseNumber} from '@xh/hoist/format';
 import {numericInput} from '@xh/hoist/kit/blueprint';
 import {wait} from '@xh/hoist/promise';
-import {apiRemoved, debounced, throwIf, withDefault} from '@xh/hoist/utils/js';
+import {apiRemoved, debounced, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import {isNaN, isNil, isNumber, round} from 'lodash';
 import {ReactElement, ReactNode, Ref, useLayoutEffect} from 'react';
@@ -275,6 +275,7 @@ const cmp = hoistCmp.factory<NumberInputModel>(({model, className, ...props}, re
             flex: withDefault(flex, null),
             textAlign: withDefault(props.textAlign, 'right')
         },
+        [TEST_ID]: props.testId,
         onBlur: model.onBlur,
         onFocus: model.onFocus,
         onKeyDown: model.onKeyDown,