Changed to termPickerProps to allow more styling

Author: patrikhellgren

docs/documentation/docs/controls/ModernTaxonomyPicker.md

@@ -68,8 +68,7 @@ The ModernTaxonomyPicker control can be configured with the following properties
 | placeHolder | string | no | Short text hint to display in picker. |
 | required | boolean | no | Specifies if to display an asterisk near the label. Default value is false. |
 | customPanelWidth | number | no | Custom panel width in pixels. |
-| onRenderItem | function | no | Modify the display of the items in the picker. |
-| onRenderSuggestionsItem | function | no | Modify the display of the items in the pickers suggestions list. |
+| termPickerProps | IModernTermPickerProps | no | Custom properties for the term picker (More info: [IBasePickerProps interface](https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers#IBasePickerProps)).  |
 | themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TaxonomyPicker)

src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

@@ -33,9 +33,12 @@ import { ITermInfo,
        } from '@pnp/sp/taxonomy';
 import { TermItemSuggestion } from './termItem/TermItemSuggestion';
 import { ModernTermPicker } from './modernTermPicker/ModernTermPicker';
-import { ITermItemProps } from './modernTermPicker/ModernTermPicker.types';
+import { IModernTermPickerProps, ITermItemProps } from './modernTermPicker/ModernTermPicker.types';
 import { TermItem } from './termItem/TermItem';
 import { IReadonlyTheme } from "@microsoft/sp-component-base";
+import { isUndefined } from 'lodash';
+
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
 export interface IModernTaxonomyPickerProps {
   allowMultipleSelections?: boolean;
@@ -53,6 +56,7 @@ export interface IModernTaxonomyPickerProps {
   placeHolder?: string;
   customPanelWidth?: number;
   themeVariant?: IReadonlyTheme;
+  termPickerProps?: Optional<IModernTermPickerProps, 'onResolveSuggestions'>;
 }
 
 export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
@@ -181,27 +185,28 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
   const tooltipId = useId('tooltip');
   const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
   const addTermButtonStyles: IButtonStyles = {rootHovered: {backgroundColor: "inherit"}, rootPressed: {backgroundColor: "inherit"}};
-  const tagPickerStyles: IStyleFunctionOrObject<IBasePickerStyleProps, IBasePickerStyles> = { input: {minheight: 34}, text: {minheight: 34} };
+  const termPickerStyles: IStyleFunctionOrObject<IBasePickerStyleProps, IBasePickerStyles> = { input: {minheight: 34}, text: {minheight: 34} };
 
   return (
     <div className={styles.modernTaxonomyPicker}>
       {props.label && <Label required={props.required}>{props.label}</Label>}
       <div className={styles.termField}>
         <div className={styles.termFieldInput}>
           <ModernTermPicker
+            {...props.termPickerProps}
             removeButtonAriaLabel={strings.ModernTaxonomyPickerRemoveButtonText}
-            onResolveSuggestions={onResolveSuggestions}
+            onResolveSuggestions={props.termPickerProps?.onResolveSuggestions ?? onResolveSuggestions}
             itemLimit={props.allowMultipleSelections ? undefined : 1}
             selectedItems={selectedOptions}
             disabled={props.disabled}
-            styles={tagPickerStyles}
+            styles={props.termPickerProps?.styles ?? termPickerStyles}
             onChange={(itms?: ITermInfo[]) => {
               setSelectedOptions(itms || []);
               setSelectedPanelOptions(itms || []);
             }}
             getTextFromItem={getTextFromItem}
-            pickerSuggestionsProps={{noResultsFoundText: strings.ModernTaxonomyPickerNoResultsFound}}
-            inputProps={{
+            pickerSuggestionsProps={props.termPickerProps?.pickerSuggestionsProps ?? {noResultsFoundText: strings.ModernTaxonomyPickerNoResultsFound}}
+            inputProps={props.termPickerProps?.inputProps ?? {
               'aria-label': props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder,
               placeholder: props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder
             }}
@@ -248,7 +253,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
             <div key={props.termSetId} >
               <TaxonomyPanelContents
                 allowMultipleSelections={props.allowMultipleSelections}
-                onResolveSuggestions={onResolveSuggestions}
+                onResolveSuggestions={props.termPickerProps?.onResolveSuggestions ?? onResolveSuggestions}
                 onLoadMoreData={taxonomyService.getTerms}
                 anchorTermInfo={currentAnchorTermInfo}
                 termSetInfo={currentTermSetInfo}
@@ -264,6 +269,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
                 getTextFromItem={getTextFromItem}
                 languageTag={currentLanguageTag}
                 themeVariant={props.themeVariant}
+                termPickerProps={props.termPickerProps}
               />
             </div>
           )

src/controls/modernTaxonomyPicker/taxonomyPanelContents/TaxonomyPanelContents.tsx

@@ -47,6 +47,8 @@ import * as strings from 'ControlStrings';
 import { useForceUpdate } from '@uifabric/react-hooks';
 import { ModernTermPicker } from '../modernTermPicker/ModernTermPicker';
 import { IReadonlyTheme } from "@microsoft/sp-component-base";
+import { IModernTermPickerProps } from '../modernTermPicker/ModernTermPicker.types';
+import { Optional } from '../ModernTaxonomyPicker';
 
 export interface ITaxonomyPanelContentsProps {
   context: BaseComponentContext;
@@ -66,6 +68,7 @@ export interface ITaxonomyPanelContentsProps {
   getTextFromItem: (item: ITermInfo, currentValue?: string) => string;
   languageTag: string;
   themeVariant?: IReadonlyTheme;
+  termPickerProps?: Optional<IModernTermPickerProps, 'onResolveSuggestions'>;
 }
 
 export function TaxonomyPanelContents(props: ITaxonomyPanelContentsProps): React.ReactElement<ITaxonomyPanelContentsProps> {
@@ -423,27 +426,28 @@ export function TaxonomyPanelContents(props: ITaxonomyPanelContentsProps): React
     }
   };
 
-  const tagPickerStyles: IStyleFunctionOrObject<IBasePickerStyleProps, IBasePickerStyles> = { root: {paddingTop: 4, paddingBottom: 4, paddingRight: 4, minheight: 34}, input: {minheight: 34}, text: { minheight: 34, borderStyle: 'none', borderWidth: '0px' } };
+  const termPickerStyles: IStyleFunctionOrObject<IBasePickerStyleProps, IBasePickerStyles> = { root: {paddingTop: 4, paddingBottom: 4, paddingRight: 4, minheight: 34}, input: {minheight: 34}, text: { minheight: 34, borderStyle: 'none', borderWidth: '0px' } };
 
   return (
     <div className={styles.taxonomyPanelContents}>
       <div className={styles.taxonomyTreeSelector}>
         <div>
           <ModernTermPicker
+            {...props.termPickerProps}
             removeButtonAriaLabel={strings.ModernTaxonomyPickerRemoveButtonText}
-            onResolveSuggestions={props.onResolveSuggestions}
+            onResolveSuggestions={props.termPickerProps?.onResolveSuggestions ?? props.onResolveSuggestions}
             itemLimit={props.allowMultipleSelections ? undefined : 1}
             selectedItems={props.selectedPanelOptions}
-            styles={tagPickerStyles}
+            styles={props.termPickerProps?.styles ?? termPickerStyles}
             onChange={onPickerChange}
             getTextFromItem={props.getTextFromItem}
-            pickerSuggestionsProps={{noResultsFoundText: strings.ModernTaxonomyPickerNoResultsFound}}
-            inputProps={{
+            pickerSuggestionsProps={props.termPickerProps?.pickerSuggestionsProps ?? {noResultsFoundText: strings.ModernTaxonomyPickerNoResultsFound}}
+            inputProps={props.termPickerProps?.inputProps ?? {
               'aria-label': props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder,
               placeholder: props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder
             }}
-            onRenderSuggestionsItem={props.onRenderSuggestionsItem}
-            onRenderItem={props.onRenderItem}
+            onRenderSuggestionsItem={props.termPickerProps?.onRenderSuggestionsItem ?? props.onRenderSuggestionsItem}
+            onRenderItem={props.onRenderItem ?? props.onRenderItem}
             themeVariant={props.themeVariant}
           />
         </div>