@xh/hoist 59.0.0 → 59.0.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 59.0.2 - 2023-08-24
+
+### 🐞 Bug Fixes
+
+* Restored support for `Select.selectOnFocus` (had broken with upgrade to `react-select` in v59.0).
+* Fixed `DateInput` bug caused by changes in Chrome v116 - clicking on inputs
+  with `enableTextInput: false` now open the date picker popup as expected.
+* Flex inner title element added to `Panel` headers in v59.0, and set `display:flex` on the new
+  element itself. Restores previous flexbox container behavior (when not L/R collapsed) for apps
+  that are providing custom components as titles.
+* `DashCanvas` now properly updates its layout when shown if the browser window had been resized
+  while the component was hidden (e.g. in an inactive tab).
+* Reverted upgrade to `react-select` in v59.0.0 due to issues found with `selectEditor` / inline
+  grid editing. We will revisit this upgrade in a future release.
+
+### 📚 Libraries
+
+* react-select `5.7 -> 4.3`
+* react-windowed-select `5.1 -> 3.1`
+
+## 59.0.1 - 2023-08-17
+
+### 🎁 New Features
+
+* Added new `Panel.collapsedTitle` prop to make it easier to display a different title when the
+  panel is collapsed.
+
 ## 59.0.0 - 2023-08-17
 
 ### 💥 Breaking Changes
@@ -42,10 +69,6 @@
   the latest Chrome v115.
     * Note this required some adjustments to the internal DOM structure of `PanelHeader` - highly
       specific CSS selectors or visual tests may be affected.
-    * Note Panels accept a *custom component* as titles, not just a strings. No transforms
-      are applied in this case when the panel is collapsed to the left or right - the custom title
-      component is responsible for its own styling. Please avoid custom component titles for
-      left/right collapsible panels, at least when in a collapsed state.
 * Fixed bug where `manuallySized` was not being set properly on column state.
 * Fixed bug where mobile `Dialog` max height was not properly constrained to the viewport.
 * Fixed bug where mobile `NumberInput` would clear when trying to enter decimals on certain devices.
@@ -61,8 +84,8 @@
 * semver `7.3 -> 7.5`
 * typescript `4.9 -> 5.1`
 * highcharts `10.3 -> 11.1`
-* react-select `4.3.1 -> 5.7.4`
-* react-windowed-select `3.1.2 -> 5.1.0`
+* react-select `4.3 -> 5.7`
+* react-windowed-select `3.1 -> 5.1`
 
 ## 58.0.1 - 2023-07-13
 

package/desktop/cmp/dash/canvas/DashCanvas.ts

@@ -5,11 +5,13 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {ContextMenu} from '@blueprintjs/core';
+import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
 import {elementFactory, hoistCmp, HoistProps, refreshContextView, uses, XH} from '@xh/hoist/core';
 import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAddViewButton';
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
+import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
@@ -36,10 +38,16 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     className: 'xh-dash-canvas',
     model: uses(DashCanvasModel),
 
-    render({className, model}) {
+    render({className, model}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked;
 
+        ref = composeRefs(
+            ref,
+            model.ref,
+            useOnVisibleChange(viz => model.onVisibleChange(viz))
+        );
+
         return refreshContextView({
             model: model.refreshContextModel,
             item: div({
@@ -48,7 +56,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isDraggable ? `${className}--draggable` : null,
                     isResizable ? `${className}--resizable` : null
                 ),
-                ref: model.ref,
+                ref,
                 onContextMenu: e => onContextMenu(e, model),
                 items: [
                     reactGridLayout({

package/desktop/cmp/dash/canvas/DashCanvasModel.ts

@@ -198,18 +198,19 @@ export class DashCanvasModel extends DashModel<
         this.loadState(persistState?.state ?? initialState);
         this.state = this.buildState();
 
-        this.addReaction({
-            track: () => this.viewState,
-            run: () => this.publishState()
-        });
-
-        this.addReaction({
-            when: () => !!this.ref.current,
-            run: () => {
-                const {current: node} = this.ref;
-                this.scrollbarVisible = node.offsetWidth > node.clientWidth;
+        this.addReaction(
+            {
+                track: () => this.viewState,
+                run: () => this.publishState()
+            },
+            {
+                when: () => !!this.ref.current,
+                run: () => {
+                    const {current: node} = this.ref;
+                    this.scrollbarVisible = node.offsetWidth > node.clientWidth;
+                }
             }
-        });
+        );
     }
 
     /** Removes all views from the canvas */
@@ -377,6 +378,12 @@ export class DashCanvasModel extends DashModel<
         return model;
     }
 
+    // Trigger window resize event when component becomes visible to ensure layout adjusted to
+    // current window size - fixes https://github.com/xh/hoist-react/issues/3215
+    onVisibleChange(visible: boolean) {
+        if (visible) this.fireWindowResizeEvent();
+    }
+
     onRglLayoutChange(rglLayout) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
         this.setLayout(rglLayout);
@@ -396,7 +403,7 @@ export class DashCanvasModel extends DashModel<
         if (!node) return;
         const scrollbarVisible = node.offsetWidth > node.clientWidth;
         if (scrollbarVisible !== this.scrollbarVisible) {
-            window.dispatchEvent(new Event('resize'));
+            this.fireWindowResizeEvent();
             this.scrollbarVisible = scrollbarVisible;
         }
     }
@@ -522,4 +529,8 @@ export class DashCanvasModel extends DashModel<
 
         return {x: defaultX, y: endY ?? rows};
     }
+
+    private fireWindowResizeEvent() {
+        window.dispatchEvent(new Event('resize'));
+    }
 }

package/desktop/cmp/input/DateInput.scss

@@ -30,4 +30,10 @@
     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

@@ -485,6 +485,7 @@ const cmp = hoistCmp.factory<DateInputModel>(({model, className, ...props}, ref)
                     ref: model.textInputRef,
                     ...getLayoutProps(props)
                 }),
+                className: 'xh-date-input__click-target',
                 onClick: !enableTextInput && !disabled ? model.onOpenPopoverClick : null
             })
         }),

package/desktop/cmp/input/Select.ts

@@ -373,9 +373,12 @@ class SelectInputModel extends HoistInputModel {
         const {reactSelect} = this;
         if (!reactSelect) return;
 
-        // Use of windowedMode, creatable and async variants will create levels of nesting we must
-        // traverse to get to the underlying Select comp and its inputRef.
-        let selectComp = reactSelect.select;
+        // TODO - after update to react-select v5 in HR v59, could not identify any cases that
+        //  still required the while loop below. Had been required due to nested layers of
+        //  components when using enableWindowed, enableCreate, and/or queryFn. Leaving in place to
+        //  avoid breaking some edge-case we're not finding, but could review/simplify once update
+        //  is baked in a bit more.
+        let selectComp = reactSelect;
         while (selectComp && !selectComp.inputRef) {
             selectComp = selectComp.select;
         }

package/desktop/cmp/panel/Panel.ts

@@ -82,6 +82,9 @@ export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'titl
 
     /** Title text added to the panel's header. */
     title?: ReactNode;
+
+    /** Title to be used when the panel is collapsed. Defaults to `title`. */
+    collapsedTitle?: ReactNode;
 }
 
 /**
@@ -114,6 +117,7 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
             title,
             icon,
             compactHeader,
+            collapsedTitle,
             headerItems,
             mask: maskProp,
             loadingIndicator: loadingIndicatorProp,
@@ -183,7 +187,7 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
         let item = vbox({
             className: 'xh-panel__content',
             items: [
-                panelHeader({title, icon, compact: compactHeader, headerItems}),
+                panelHeader({title, icon, compact: compactHeader, collapsedTitle, headerItems}),
                 coreContents,
                 parseLoadDecorator(maskProp, 'mask', contextModel),
                 parseLoadDecorator(loadingIndicatorProp, 'loadingIndicator', contextModel)

package/desktop/cmp/panel/impl/PanelHeader.scss

@@ -12,6 +12,11 @@
     white-space: nowrap;
     font-family: var(--xh-panel-title-font-family);
     font-size: var(--xh-panel-title-font-size-px);
+
+    &__inner {
+      display: flex;
+      flex: 1;
+    }
   }
 
   &__items {
@@ -45,6 +50,8 @@
       height: 100%;
 
       &__inner {
+        display: block;
+        flex: none;
         margin-top: 50%;
         transform: rotate(90deg);
         height: calc(1em + 5px);

package/desktop/cmp/panel/impl/PanelHeader.ts

@@ -8,8 +8,9 @@ import {box, filler, hbox, span, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, useContextModel} from '@xh/hoist/core';
 import {button, modalToggleButton} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
+import {withDefault} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
-import {isEmpty, isNil, isString} from 'lodash';
+import {isEmpty, isNil} from 'lodash';
 import {PanelModel} from '../PanelModel';
 import './PanelHeader.scss';
 
@@ -22,6 +23,8 @@ export const panelHeader = hoistCmp.factory({
         const panelModel = useContextModel(PanelModel),
             {collapsed, collapsible, isModal, vertical, side} = panelModel,
             {title, icon, compact} = props,
+            collapsedTitle = withDefault(props.collapsedTitle, title),
+            displayedTitle = collapsed ? collapsedTitle : title,
             headerItems = props.headerItems ?? [];
 
         if (isNil(title) && isNil(icon) && isEmpty(headerItems)) return null;
@@ -44,13 +47,11 @@ export const panelHeader = hoistCmp.factory({
                 className: classNames(className, compactCls),
                 items: [
                     icon || null,
-                    title
+                    displayedTitle
                         ? box({
                               className: titleCls,
                               flex: 1,
-                              item: isString(title)
-                                  ? span({className: `${titleCls}__inner`, item: title})
-                                  : title
+                              item: span({className: `${titleCls}__inner`, item: displayedTitle})
                           })
                         : filler(),
                     hbox({
@@ -74,12 +75,10 @@ export const panelHeader = hoistCmp.factory({
             items: [
                 collapseButton({panelModel}),
                 icon || null,
-                title
+                displayedTitle
                     ? box({
                           className: titleCls,
-                          item: isString(title)
-                              ? span({className: `${titleCls}__inner`, item: title})
-                              : title
+                          item: span({className: `${titleCls}__inner`, item: displayedTitle})
                       })
                     : null
             ],

package/inspector/Inspector.scss

@@ -1,5 +1,10 @@
 .xh-inspector {
-  .xh-modal-support__host > .xh-panel__content > .xh-panel-header {
+  & > .xh-panel__content > .xh-panel-header {
+    background-color: hsl(33, 93%, 40%);
+    color: white;
+  }
+
+  .xh-modal-support__host > div > .xh-panel__content > .xh-panel-header {
     background-color: hsl(33, 93%, 40%);
     color: white;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "59.0.0",
+  "version": "59.0.2",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -68,9 +68,9 @@
     "react-grid-layout": "^1.3.4",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",
-    "react-select": "~5.7.4",
+    "react-select": "~4.3.1",
     "react-transition-group": "~4.4.2",
-    "react-windowed-select": "~5.1.0",
+    "react-windowed-select": "~3.1.2",
     "regenerator-runtime": "~0.13.11",
     "resize-observer-polyfill": "~1.5.1",
     "router5": "~7.0.2",