@xh/hoist 74.0.0-SNAPSHOT.1749050851202 → 74.0.0-SNAPSHOT.1749232318711

package/build/types/desktop/cmp/filter/FilterChooser.d.ts

@@ -22,6 +22,8 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
     menuWidth?: number;
     /** Text to display when control is empty. */
     placeholder?: string;
+    /** Icon clicked to launch favorites menu. (Defaults to Icon.favorite()) */
+    favoritesIcon?: ReactElement;
 }
 /**
  * A Select based control for searching and choosing filters.

package/build/types/desktop/cmp/grouping/GroupingChooser.d.ts

@@ -1,6 +1,7 @@
 import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
 import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
+import { ReactElement } from 'react';
 import './GroupingChooser.scss';
 export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel> {
     /** Text to represent empty state (i.e. value = null or []) */
@@ -15,6 +16,8 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
     popoverWidth?: number;
     /** True (default) to style target button as an input field - blends better in toolbars. */
     styleButtonAsInput?: boolean;
+    /** Icon clicked to launch favorites menu. Defaults to Icon.favorite() */
+    favoritesIcon?: ReactElement;
 }
 /**
  * Control for selecting a list of dimensions for grouping APIs, with built-in support for

package/desktop/cmp/filter/FilterChooser.ts

@@ -17,7 +17,7 @@ import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isEmpty, sortBy} from 'lodash';
 import {badge} from '@xh/hoist/cmp/badge';
-import {ReactElement} from 'react';
+import {cloneElement, ReactElement} from 'react';
 import './FilterChooser.scss';
 
 export interface FilterChooserProps extends HoistProps<FilterChooserModel>, LayoutProps {
@@ -39,6 +39,8 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
     menuWidth?: number;
     /** Text to display when control is empty. */
     placeholder?: string;
+    /** Icon clicked to launch favorites menu. (Defaults to Icon.favorite()) */
+    favoritesIcon?: ReactElement;
 }
 
 /**
@@ -65,7 +67,8 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
                 leftIcon,
                 maxMenuHeight,
                 menuPlacement,
-                menuWidth
+                menuWidth,
+                favoritesIcon
             } = chooserProps,
             disabled = unsupportedFilter || chooserProps.disabled,
             placeholder = unsupportedFilter
@@ -115,7 +118,7 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
                                 })
                             },
                             components: {
-                                DropdownIndicator: () => favoritesIcon(model)
+                                DropdownIndicator: () => favoritesIconCmp(model, favoritesIcon)
                             }
                         }
                     })
@@ -210,15 +213,18 @@ const messageOption = hoistCmp.factory({
 //-----------------
 // Favorites
 //------------------
-function favoritesIcon(model) {
+function favoritesIconCmp(model, favoritesIcon) {
     if (!model.persistFavorites) return null;
-    return Icon.favorite({
+
+    const iconProps = {
         className: classNames('xh-select__indicator', 'xh-filter-chooser-favorite-icon'),
         onMouseDown: e => {
             model.openFavoritesMenu();
             e.stopPropagation();
         }
-    });
+    };
+
+    return favoritesIcon ? cloneElement(favoritesIcon, iconProps) : Icon.favorite(iconProps);
 }
 
 const favoritesMenu = hoistCmp.factory<FilterChooserModel>({

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -16,6 +16,7 @@ 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 {ReactElement} from 'react';
 import classNames from 'classnames';
 import {compact, isEmpty, sortBy} from 'lodash';
 import './GroupingChooser.scss';
@@ -38,6 +39,9 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
 
     /** True (default) to style target button as an input field - blends better in toolbars. */
     styleButtonAsInput?: boolean;
+
+    /** Icon clicked to launch favorites menu. Defaults to Icon.favorite() */
+    favoritesIcon?: ReactElement;
 }
 
 /**
@@ -62,6 +66,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             popoverPosition = 'bottom',
             styleButtonAsInput = true,
             testId,
+            favoritesIcon,
             ...rest
         },
         ref
@@ -101,7 +106,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                         onClick: () => model.toggleEditor(),
                         testId
                     }),
-                    favoritesIcon({testId: favoritesIconTestId})
+                    favoritesIconCmp({testId: favoritesIconTestId, favoritesIcon})
                 ),
                 content: favoritesIsOpen
                     ? favoritesMenu({testId: favoritesMenuTestId})
@@ -315,11 +320,11 @@ function getDimOptions(dims, model) {
 //------------------
 // Favorites
 //------------------
-const favoritesIcon = hoistCmp.factory<GroupingChooserModel>({
-    render({model, testId}) {
+const favoritesIconCmp = hoistCmp.factory<GroupingChooserModel>({
+    render({model, testId, favoritesIcon}) {
         if (!model.persistFavorites) return null;
         return div({
-            item: Icon.favorite(),
+            item: favoritesIcon ?? Icon.favorite(),
             className: 'xh-grouping-chooser__favorite-icon',
             [TEST_ID]: testId,
             onClick: e => {

package/package.json

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