pnp#1763 Fix wrong FluentUI imports

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "3.17.0";
+export const version: string = "3.17.0";

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -3,7 +3,7 @@ import { sp } from '@pnp/sp/presets/all';
 import '@pnp/sp/webs';
 import * as strings from 'ControlStrings';
 import { ActionButton } from '@fluentui/react/lib/Button';
-import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/components/Dropdown';
+import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/Dropdown';
 import { DatePicker } from '@fluentui/react/lib/DatePicker';
 import { Icon } from '@fluentui/react/lib/Icon';
 import { Image } from '@fluentui/react/lib/Image';

src/controls/fieldCollectionData/FieldCollectionData.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as telemetry from '../../common/telemetry';
 import { DefaultButton } from '@fluentui/react/lib/Button';
-import { Panel, PanelType } from '@fluentui/react/lib/components/Panel';
-import { Label } from '@fluentui/react/lib/components/Label';
+import { Panel, PanelType } from '@fluentui/react/lib/Panel';
+import { Label } from '@fluentui/react/lib/Label';
 import { CollectionDataViewer } from './collectionDataViewer';
 import { IFieldCollectionDataProps, IFieldCollectionDataState } from "./IFieldCollectionData";
 import * as strings from 'ControlStrings';

src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx

@@ -2,16 +2,16 @@ import * as React from 'react';
 import styles from '../FieldCollectionData.module.scss';
 import { ICollectionDataItemProps } from './ICollectionDataItemProps';
 import { ICollectionDataItemState } from './ICollectionDataItemState';
-import { TextField } from '@fluentui/react/lib/components/TextField';
-import { Icon } from '@fluentui/react/lib/components/Icon';
-import { Link } from '@fluentui/react/lib/components/Link';
-import { Checkbox } from '@fluentui/react/lib/components/Checkbox';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Icon } from '@fluentui/react/lib/Icon';
+import { Link } from '@fluentui/react/lib/Link';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import * as strings from 'ControlStrings';
 import { CustomCollectionFieldType, ICustomCollectionField } from '../ICustomCollectionField';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
-import { ComboBox, IComboBoxOption } from '@fluentui/react/lib/components/ComboBox';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
+import { ComboBox, IComboBoxOption } from '@fluentui/react/lib/ComboBox';
 import { PeoplePicker, PrincipalType } from "../../peoplepicker";
-import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { CollectionIconField } from '../collectionIconField';
 import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
 import { Guid } from '@microsoft/sp-core-library';

src/controls/fieldCollectionData/collectionDataViewer/CollectionDataViewer.tsx

@@ -4,11 +4,11 @@ import { ICollectionDataViewerProps } from './ICollectionDataViewerProps';
 import { ICollectionDataViewerState } from './ICollectionDataViewerState';
 import { CollectionDataItem } from '../collectionDataItem';
 import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 import * as strings from 'ControlStrings';
 import { cloneDeep, sortBy, isEmpty, findIndex } from '@microsoft/sp-lodash-subset';
 import { Pagination } from '../../pagination';
-import { SearchBox } from '@fluentui/react/lib/components/SearchBox';
+import { SearchBox } from '@fluentui/react/lib/SearchBox';
 import { Guid } from '@microsoft/sp-core-library';
 
 export class CollectionDataViewer extends React.Component<ICollectionDataViewerProps, ICollectionDataViewerState> {

src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styles from '../FieldCollectionData.module.scss';
 import { ICollectionIconFieldProps } from '.';
-import { TextField } from '@fluentui/react/lib/components/TextField';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Icon } from '@fluentui/react/lib/Icon';
 
 export class CollectionIconField extends React.Component<ICollectionIconFieldProps, {}> {
 

src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@fluentui/react/lib/Utilities';
 import clone from 'lodash/clone';
 import { IExpandingCardProps } from '@fluentui/react/lib/HoverCard';
-import { DirectionalHint } from '@fluentui/react/lib/common/DirectionalHint';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { Persona, PersonaSize } from '@fluentui/react/lib/Persona';
 import { IconButton, Button, ButtonType } from '@fluentui/react/lib/Button';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';

src/controls/fileTypeIcon/FileTypeIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { findIndex } from '@microsoft/sp-lodash-subset';
 import { IFileTypeIconProps, ApplicationType, ApplicationIconList, IconType, IconSizes, ImageSize, IImageResult, ICON_GENERIC_16, ICON_GENERIC_48, ICON_GENERIC_96, ImageInformation } from './IFileTypeIcon';
 import * as telemetry from '../../common/telemetry';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 import { ICON_GENERIC_20 } from '.';
 
 const ICON_GENERIC = 'Page';

src/controls/listItemPicker/ListItemPicker.tsx

@@ -1,14 +1,13 @@
 import * as strings from 'ControlStrings';
 import * as React from "react";
 import SPservice from "../../services/SPService";
-import { TagPicker } from '@fluentui/react/lib/Pickers';
+import { ITag, TagPicker } from '@fluentui/react/lib/Pickers';
 import { Label } from "@fluentui/react/lib/Label";
 import { getId } from '@fluentui/react/lib/Utilities';
 import { IListItemPickerProps } from "./IListItemPickerProps";
 import { IListItemPickerState } from "./IListItemPickerState";
 import * as telemetry from '../../common/telemetry';
 import isEqual from 'lodash/isEqual';
-import { ITag } from '@fluentui/react/lib/components/pickers/TagPicker/TagPicker.types';
 import { SPHelper } from '../../common/utilities/SPHelper';
 import { Guid } from "@microsoft/sp-core-library"
 

src/controls/listPicker/ListPicker.tsx

@@ -1,6 +1,6 @@
 import { cloneDeep } from '@microsoft/sp-lodash-subset';
-import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/components/Dropdown';
-import { Spinner, SpinnerSize } from '@fluentui/react/lib/components/Spinner';
+import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/Dropdown';
+import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 import * as React from 'react';
 
 import * as telemetry from '../../common/telemetry';

src/controls/listView/IListView.ts

@@ -1,4 +1,4 @@
-import { IColumn, IGroup, SelectionMode, IDetailsRowProps } from '@fluentui/react/lib/components/DetailsList';
+import { IColumn, IGroup, SelectionMode, IDetailsRowProps } from '@fluentui/react/lib/DetailsList';
 
 export { SelectionMode };
 

src/controls/listView/ListView.tsx

@@ -6,7 +6,7 @@ import { IRenderFunction } from '@fluentui/react/lib/Utilities';
 import { mergeStyleSets } from '@fluentui/react/lib/Styling';
 import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup, IDetailsHeaderProps } from '@fluentui/react/lib/DetailsList';
 import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView';
-import { IColumn, IGroupRenderProps } from '@fluentui/react/lib/components/DetailsList';
+import { IColumn, IGroupRenderProps } from '@fluentui/react/lib/DetailsList';
 import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
 import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';

src/controls/map/Map.tsx

@@ -4,7 +4,7 @@ import styles from './Maps.module.scss';
 import { IMapProps } from './IMapProps';
 import { IMapState } from './IMapState';
 import { ICoordinates, MapType, LocationInfo } from './IMap';
-import { Label } from '@fluentui/react/lib/components/Label';
+import { Label } from '@fluentui/react/lib/Label';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 import { Icon } from "@fluentui/react/lib/Icon";
 import { PrimaryButton } from "@fluentui/react/lib/Button";

src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

@@ -11,7 +11,7 @@ import * as strings from 'ControlStrings';
 import {
   DefaultButton, IButtonStyles, IconButton, PrimaryButton
 } from '@fluentui/react/lib/Button';
-import { IIconProps } from '@fluentui/react/lib/components/Icon';
+import { IIconProps } from '@fluentui/react/lib/Icon';
 import { Label } from '@fluentui/react/lib/Label';
 import {
   Panel,

src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { BasePicker } from '@fluentui/react/lib/components/pickers/BasePicker';
 import { IModernTermPickerProps,
          ITermItemProps
        } from './ModernTermPicker.types';
 import { TermItem } from '../termItem/TermItem';
 import { TermItemSuggestion } from '../termItem/TermItemSuggestion';
-import { IBasePickerStyleProps,
-         IBasePickerStyles
-       } from '@fluentui/react/lib/components/pickers/BasePicker.types';
-import { getStyles } from '@fluentui/react/lib/components/pickers/BasePicker.styles';
+
 import { initializeComponentRef,
          styled
        } from '@fluentui/react/lib/Utilities';
-import { ISuggestionItemProps } from '@fluentui/react/lib/components/pickers/Suggestions/SuggestionsItem.types';
+
 import { ITermInfo } from '@pnp/sp/taxonomy';
+import { BasePicker, IBasePickerStyleProps, IBasePickerStyles, ISuggestionItemProps } from '@fluentui/react/lib/Pickers';
+import { getStyles } from '@fluentui/react/lib/components/pickers/BasePicker.styles';
 
 export class ModernTermPickerBase extends BasePicker<ITermInfo, IModernTermPickerProps> {
   public static defaultProps = {

src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts

@@ -1,9 +1,8 @@
 import { ITermInfo, ITermStoreInfo } from '@pnp/sp/taxonomy';
-import { IBasePickerProps } from '@fluentui/react/lib/components/pickers/BasePicker.types';
-import { IPickerItemProps } from '@fluentui/react/lib/components/pickers/PickerItem.types';
 import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { IBasePickerProps, IPickerItemProps } from '@fluentui/react/lib/Pickers';
 
 export interface IModernTermPickerProps extends IBasePickerProps<ITermInfo> {
   themeVariant?: IReadonlyTheme;

src/controls/modernTaxonomyPicker/termItem/TermItem.tsx

@@ -1,8 +1,9 @@
-import { IconButton } from '@fluentui/react/lib/components/Button/IconButton/IconButton';
+
 import { classNamesFunction, styled } from '@fluentui/react/lib/Utilities';
 import * as React from 'react';
 import { ITermItemProps, ITermItemStyleProps, ITermItemStyles } from '../modernTermPicker/ModernTermPicker.types';
 import { getStyles } from './TermItem.styles';
+import { IconButton } from '@fluentui/react/lib/Button';
 
 const getClassNames = classNamesFunction<ITermItemStyleProps, ITermItemStyles>();
 

src/controls/peoplepicker/IPeoplePicker.ts

@@ -1,6 +1,6 @@
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 import { IBasePickerStyles, IPersonaProps } from "@fluentui/react";
-import { DirectionalHint } from "@fluentui/react/lib/common/DirectionalHint";
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { PrincipalType } from ".";
 
 /**

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -6,13 +6,12 @@ import SPPeopleSearchService from "../../services/PeopleSearchService";
 import { IPeoplePickerProps, IPeoplePickerState } from './IPeoplePicker';
 import { TooltipHost } from '@fluentui/react/lib/Tooltip';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { NormalPeoplePicker } from '@fluentui/react/lib/components/pickers/PeoplePicker/PeoplePicker';
-import { Label } from '@fluentui/react/lib/components/Label';
+import { Label } from '@fluentui/react/lib/Label';
 import FieldErrorMessage from '../errorMessage/ErrorMessage';
 import isEqual from 'lodash/isEqual';
 import uniqBy from 'lodash/uniqBy';
 import { IPersonaProps } from '@fluentui/react/lib/Persona';
-import { IBasePickerSuggestionsProps } from '@fluentui/react/lib/Pickers';
+import { IBasePickerSuggestionsProps, NormalPeoplePicker} from '@fluentui/react/lib/Pickers';
 
 /**
  * PeoplePicker component

src/controls/placeholder/PlaceholderComponent.tsx

@@ -1,7 +1,7 @@
 import { ThemeContext } from '@fluentui/react-theme-provider/lib/ThemeContext';
 import { Theme } from '@fluentui/react-theme-provider/lib/types';
 import { PrimaryButton } from '@fluentui/react/lib/Button';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 import * as React from 'react';
 import { IPlaceholderState } from '.';
 import * as telemetry from '../../common/telemetry';

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { PrimaryButton, DefaultButton, IconButton } from '@fluentui/react/lib/Button';
 import { Panel, PanelType } from '@fluentui/react/lib/Panel';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
-import { Autofill } from '@fluentui/react/lib/components/Autofill/Autofill';
 import { Label } from '@fluentui/react/lib/Label';
 import TermPicker from './TermPicker';
 import { IPickerTerms, IPickerTerm } from './ITermPicker';
@@ -18,6 +17,7 @@ import FieldErrorMessage from '../errorMessage/ErrorMessage';
 import { initializeIcons } from '@uifabric/icons';
 import * as telemetry from '../../common/telemetry';
 import { EmptyGuid } from '../../common/Constants';
+import { Autofill } from '@fluentui/react/lib/Autofill';
 
 /**
  * Image URLs / Base64

src/controls/taxonomyPicker/TermPicker.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BasePicker, IBasePickerProps, IInputProps, IPickerItemProps } from '@fluentui/react/lib/Pickers';
+import { Autofill, BasePicker, IBasePickerProps, IInputProps, IPickerItemProps } from '@fluentui/react/lib/Pickers';
 import { IPickerTerm, IPickerTerms } from './ITermPicker';
 import SPTermStorePickerService from './../../services/SPTermStorePickerService';
 import styles from './TaxonomyPicker.module.scss';
@@ -8,7 +8,6 @@ import { BaseComponentContext } from '@microsoft/sp-component-base';
 import * as strings from 'ControlStrings';
 import { Icon } from '@fluentui/react/lib/Icon';
 import { ITermSet } from "../../services/ISPTermStorePickerService";
-import { Autofill } from '@fluentui/react/lib/components/Autofill/Autofill';
 import { LegacyRef, KeyboardEvent } from 'react';
 
 export class TermBasePicker extends BasePicker<IPickerTerm, IBasePickerProps<IPickerTerm>>

src/webparts/controlsTest/propertyPane/controls/ListPicker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
-import { Spinner } from '@fluentui/react/lib/components/Spinner';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
+import { Spinner } from '@fluentui/react/lib/Spinner';
 import { SPHttpClient } from "@microsoft/sp-http";
 import { WebPartContext } from '@microsoft/sp-webpart-base';
 import { ISPList } from '../../../../common/SPEntities';