@xh/hoist 71.0.0 → 72.0.0-SNAPSHOT.1736552780387

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## v72.0.0-SNAPSHOT - unreleased
+
 ## v71.0.0 - 2025-01-08
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - Hoist core update, import adjustments)

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

@@ -35,7 +35,6 @@ export const [DateEditor, dateEditor] = hoistCmp.withFactory<DateEditorProps>({
             ...props,
             inputProps: {
                 rightElement: null,
-
                 enablePicker: !!portalContainer,
                 showPickerOnFocus: !!portalContainer,
                 portalContainer,

package/desktop/cmp/input/DateInput.scss

@@ -5,35 +5,46 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-.xh-date-input {
-  // Style input in picker-only mode
-  &--picker-only {
-    input {
-      color: var(--xh-input-text-color) !important;
-      background-color: var(--xh-input-bg) !important;
-      cursor: pointer !important;
-    }
-
-    .bp5-input-group.bp5-disabled {
-      cursor: pointer !important;
-    }
+.xh-date-input__wrapper {
+  .bp5-input-action {
+    height: 100%;
   }
 
-  // Style picker icon in input-only mode
-  &__picker-icon--disabled:hover {
-    background-color: transparent !important;
-    cursor: not-allowed;
+  .bp5-input-group .xh-icon {
+    position: relative;
+    margin: 0 !important;
   }
 
-  // Style buttons when disabled
-  &.xh-input-disabled:not(.xh-date-input--picker-only) button:hover {
-    background-color: transparent !important;
-    cursor: not-allowed;
-  }
+  .xh-date-input {
+    // Style input in picker-only mode
+    &--picker-only {
+      input {
+        color: var(--xh-input-text-color) !important;
+        background-color: var(--xh-input-bg) !important;
+        cursor: pointer !important;
+      }
+
+      .bp5-input-group.bp5-disabled {
+        cursor: pointer !important;
+      }
+    }
 
-  // Prevent browser from capturing click events when input is disabled due to use of
-  // enableTextInput: false prop. See https://github.com/xh/hoist-react/issues/3460
-  input[disabled] {
-    pointer-events: none;
+    // Style picker icon in input-only mode
+    &__picker-icon--disabled:hover {
+      background-color: transparent !important;
+      cursor: not-allowed;
+    }
+
+    // Style buttons when disabled
+    &.xh-input-disabled:not(.xh-date-input--picker-only) button:hover {
+      background-color: transparent !important;
+      cursor: not-allowed;
+    }
+
+    // Prevent browser from capturing click events when input is disabled due to use of
+    // enableTextInput: false prop. See https://github.com/xh/hoist-react/issues/3460
+    input[disabled] {
+      pointer-events: none;
+    }
   }
 }

package/desktop/cmp/input/DateInput.ts

@@ -8,9 +8,9 @@ import {PopperBoundary, PopperModifierOverrides} from '@blueprintjs/core';
 import {TimePickerProps} from '@blueprintjs/datetime';
 import {ReactDayPickerSingleProps} from '@blueprintjs/datetime2/src/common/reactDayPickerProps';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {div} from '@xh/hoist/cmp/layout';
+import {div, hbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, HSide, LayoutProps, Some} from '@xh/hoist/core';
-import {button, buttonGroup} from '@xh/hoist/desktop/cmp/button';
+import {button} from '@xh/hoist/desktop/cmp/button';
 import {textInput, TextInputModel} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
 import {fmtDate} from '@xh/hoist/format';
@@ -19,10 +19,10 @@ import {datePicker as bpDatePicker, popover, Position} from '@xh/hoist/kit/bluep
 import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
-import {consumeEvent, getTestId, warnIf, withDefault} from '@xh/hoist/utils/js';
+import {consumeEvent, getTestId, 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 {assign, castArray, clone, isEmpty, trim} from 'lodash';
 import moment from 'moment';
 import {createRef, ReactElement, ReactNode} from 'react';
 import './DateInput.scss';
@@ -375,44 +375,11 @@ class DateInputModel extends HoistInputModel {
 
 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.'
-        );
-
         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(
-                        'xh-date-input__picker-icon',
-                        enablePicker ? null : 'xh-date-input__picker-icon--disabled'
-                    ),
-                    icon: Icon.calendar(),
-                    tabIndex: enableTextInput || disabled ? -1 : undefined,
-                    ref: 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
@@ -475,9 +442,15 @@ const cmp = hoistCmp.factory<DateInputProps & {model: DateInputModel}>(
                         onCommit: model.onInputCommit,
                         onChange: model.onInputChange,
                         onKeyDown: model.onInputKeyDown,
-                        rightElement: rightElement as ReactElement,
                         disabled: disabled || !enableTextInput,
                         leftIcon: props.leftIcon,
+                        rightElement: rightIcons({
+                            model,
+                            ...props,
+                            disabled,
+                            enableTextInput,
+                            enablePicker
+                        }),
                         tabIndex: props.tabIndex,
                         placeholder: props.placeholder,
                         textAlign: props.textAlign,
@@ -498,3 +471,44 @@ const cmp = hoistCmp.factory<DateInputProps & {model: DateInputModel}>(
         });
     }
 );
+
+const rightIcons = hoistCmp.factory<DateInputModel>({
+    render({model, disabled, enableTextInput, enablePicker, ...props}) {
+        const buttonLayoutProps = {padding: 0, margin: 0, height: '100%'},
+            enableClear = props.enableClear ?? false,
+            isClearable = model.internalValue !== null,
+            items = [];
+
+        // 1) First potential icon is clear button
+        if (enableClear && isClearable && !disabled) {
+            items.push(
+                button({
+                    className: 'xh-date-input__clear-icon',
+                    icon: Icon.cross(),
+                    tabIndex: -1,
+                    onClick: model.onClearBtnClick,
+                    testId: getTestId(props, 'clear'),
+                    ...buttonLayoutProps
+                })
+            );
+        }
+
+        // 2) Second potential icon is app-specified, or default calendar icon.  Set prop to null to hide.
+        const rightElement = withDefault(
+            props.rightElement,
+            button({
+                className: 'xh-date-input__picker-icon',
+                icon: Icon.calendar(),
+                tabIndex: enableTextInput || disabled ? -1 : undefined,
+                onClick: enablePicker && !disabled ? model.onOpenPopoverClick : null,
+                testId: getTestId(props, 'picker'),
+                disabled,
+                ref: model.buttonRef,
+                ...buttonLayoutProps
+            })
+        );
+        if (rightElement) items.push(rightElement);
+
+        return hbox({height: '100%', paddingRight: 3, items, omit: isEmpty(items)});
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "71.0.0",
+  "version": "72.0.0-SNAPSHOT.1736552780387",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",