@xh/hoist 59.0.0 → 59.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 59.0.1 - 2023-08-17
+
+### 🎁 New Features
+
+* Added new `collapsedTitle` prop to `Panel` to make it easier to display different a title
+  when the panel is collapsed.
+
 ## 59.0.0 - 2023-08-17
 
 ### 💥 Breaking Changes
@@ -42,10 +49,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.

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.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/package.json

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