Site picker changes

package.json

@@ -80,7 +80,7 @@
     "@types/react-dom": "17.0.17",
     "@types/react-addons-shallow-compare": "0.14.17",
     "@types/react-addons-test-utils": "0.14.15",
-    "@types/react-addons-update": "0.14.14",
+    "@types/react-addons-update": "0.14.21",
     "@types/react-mentions": "^4.1.3",
     "@types/sinon": "2.3.4",
     "@types/webpack-env": "~1.15.2",

src/controls/sitePicker/ISitePicker.ts

@@ -1,4 +1,7 @@
+import { IDropdownStyles } from 'office-ui-fabric-react';
+
 import { BaseComponentContext } from '@microsoft/sp-component-base';
+
 import { ISite } from '../../services/SPSitesService';
 
 export interface ISitePickerProps {
@@ -95,4 +98,6 @@ export interface ISitePickerProps {
    * If mode is set to associatedsites and no hubsiteId is provided, the current site's hub ID will be used.
    */
   hubsiteId?: string;
+  styles?: IDropdownStyles ;
 }
+export { ISite };

src/controls/sitePicker/SitePicker.tsx

@@ -1,17 +1,35 @@
-import { Async } from '@uifabric/utilities/lib/Async';
+import * as React from 'react';
+
 import findIndex from 'lodash/findIndex';
 import orderBy from 'lodash/orderBy';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import {
+  Dropdown,
+  IDropdownOption,
+} from 'office-ui-fabric-react/lib/Dropdown';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import {
+  Spinner,
+  SpinnerSize,
+} from 'office-ui-fabric-react/lib/Spinner';
 import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
-import { ISelectableOption, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
-import * as React from 'react';
+import {
+  ISelectableOption,
+  SelectableOptionMenuItemType,
+} from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
+
+import { Async } from '@uifabric/utilities/lib/Async';
 
 import * as telemetry from '../../common/telemetry';
 import { toRelativeUrl } from '../../common/utilities/GeneralHelper';
-import { getAllSites, getHubSites, ISite, getAssociatedSites } from '../../services/SPSitesService';
-import { ISitePickerProps } from './ISitePicker';
+import {
+  getAllSites,
+  getAssociatedSites,
+  getHubSites,
+} from '../../services/SPSitesService';
+import {
+  ISite,
+  ISitePickerProps,
+} from './ISitePicker';
 
 const styles = mergeStyleSets({
   loadingSpinnerContainer: {
@@ -73,7 +91,7 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     className,
     selectedSites,
     trimDuplicates,
-    additionalQuery, 
+    additionalQuery,
     hubsiteId
   } = props;
 
@@ -238,11 +256,11 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
       case 'hub':
         promise = getHubSites(context);
         break;
-        
+
       case 'associatedsites':
         promise = getAssociatedSites(context, trimDuplicates === true, hubsiteId);
         break;
-    
+
       default:
         promise = getAllSites(context, mode !== 'site', limitToCurrentSiteCollection, trimDuplicates === true, additionalQuery);
         break;
@@ -291,6 +309,7 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
         onChange={onSelectionChange}
         notifyOnReselect={true}
         className={className}
+        styles={props.styles}
       />
     </>
   );