bump to 1.18.1

pnp · Nov 18, 2023 · 46edef6 · 46edef6
1 parent 8ae38f4
commit 46edef6
Show file tree

Hide file tree

Showing 134 changed files with 22,790 additions and 53,750 deletions.
diff --git a/.yo-rc.json b/.yo-rc.json
@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.17.3",
+    "version": "1.18.1",
     "libraryName": "sp-dev-fx-property-controls",
     "libraryId": "0253ef52-be23-4282-b00f-e5a9350eb408",
     "environment": "spo",
@@ -11,7 +11,7 @@
     "nodeVersion": "16.15.0",
     "sdksVersions": {
       "@microsoft/microsoft-graph-client": "3.0.2",
-      "@microsoft/teams-js": "2.9.1"
+      "@microsoft/teams-js": "2.12.0"
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "description": "Reusable property pane controls for SharePoint Framework solutions",
   "version": "3.15.0",
   "engines": {
-    "node": ">=16.13.0 <17.0.0"
+    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
   },
   "scripts": {
     "build": "gulp build",
@@ -20,13 +20,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@fluentui/react": "^7.199.1",
-    "@microsoft/sp-adaptive-card-extension-base": "1.17.3",
-    "@microsoft/sp-core-library": "1.17.3",
-    "@microsoft/sp-lodash-subset": "1.17.3",
-    "@microsoft/sp-office-ui-fabric-core": "1.17.3",
-    "@microsoft/sp-property-pane": "1.17.3",
-    "@microsoft/sp-webpart-base": "1.17.3",
+    "@fluentui/react": "8.106.4",
+    "@microsoft/sp-adaptive-card-extension-base": "1.18.1",
+    "@microsoft/sp-core-library": "1.18.1",
+    "@microsoft/sp-lodash-subset": "1.18.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.18.1",
+    "@microsoft/sp-property-pane": "1.18.1",
+    "@microsoft/sp-webpart-base": "1.18.1",
     "@monaco-editor/loader": "^1.2.0",
     "@pnp/common": "1.3.11",
     "@pnp/logging": "1.3.11",
@@ -40,17 +40,17 @@
     "lodash.omit": "4.5.0",
     "markdown-to-jsx": "^6.11.4",
     "monaco-editor": "^0.32.1",
-    "office-ui-fabric-react": "^7.199.1",
     "react": "17.0.1",
     "react-ace": "10.1.0",
     "react-dom": "17.0.1"
   },
   "devDependencies": {
-    "@microsoft/eslint-config-spfx": "1.17.3",
-    "@microsoft/eslint-plugin-spfx": "1.17.3",
+    "@microsoft/eslint-config-spfx": "1.18.1",
+    "@microsoft/eslint-plugin-spfx": "1.18.1",
     "@microsoft/rush-stack-compiler-4.5": "0.5.0",
-    "@microsoft/sp-build-web": "1.17.3",
-    "@microsoft/sp-module-interfaces": "1.17.3",
+    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
+    "@microsoft/sp-build-web": "1.18.1",
+    "@microsoft/sp-module-interfaces": "1.18.1",
     "@rushstack/eslint-config": "2.5.1",
     "@types/chai": "4.3.4",
     "@types/lodash": "4.14.191",
@@ -70,7 +70,7 @@
     "request-promise": "4.2.6",
     "sonarqube-scanner": "2.8.2",
     "spfx-fast-serve-helpers": "~1.17.3",
-    "typescript": "4.5.5"
+    "typescript": "4.7.4"
   },
   "repository": {
     "type": "git",

diff --git a/src/common/iconSelector/IconSelector.tsx b/src/common/iconSelector/IconSelector.tsx
@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { IPanelProps, Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { IPanelProps, Panel, PanelType } from '@fluentui/react/lib/Panel';
 import { IconSelectorRenderOption } from '../Types';
 import { IconsList } from '../iconsList/IconsList';
 import * as strings from 'PropertyControlStrings';
-import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
-import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { SearchBox } from '@fluentui/react/lib/SearchBox';
+import { IRenderFunction } from '@fluentui/react/lib/Utilities';
 import debounce from 'lodash/debounce';
 import styles from './IconSelector.module.scss';
 import { FluentIconsService } from '../../services/FluentIconsService';
-import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import Dialog, { DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
-import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
+import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button';
+import { Icon } from '@fluentui/react/lib/Icon';
+import Dialog, { DialogFooter, DialogType } from '@fluentui/react/lib/Dialog';
+import { initializeIcons } from '@fluentui/react/lib/Icons';
 
 initializeIcons();
 

diff --git a/src/common/iconsList/IconsList.tsx b/src/common/iconsList/IconsList.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { getId } from 'office-ui-fabric-react/lib/Utilities';
+import { Icon } from '@fluentui/react/lib/Icon';
+import { getId } from '@fluentui/react/lib/Utilities';
 import styles from './IconsList.module.scss';
 
 const radioIdBase: string = getId('radio');

diff --git a/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx b/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/components/Callout';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
 import { IPlaceholderWithCalloutProps, IPlaceholderWithCalloutState } from './IPlaceholderWithCallout';
 import { CalloutTriggers } from '../callout/Callout';
-import { getIconClassName } from 'office-ui-fabric-react/lib/Styling';
+import { getIconClassName } from '@fluentui/react/lib/Styling';
 
 import styles from './PlaceholderWithCallout.module.scss';
 

diff --git a/src/common/propertyFieldHeader/PropertyFieldHeader.tsx b/src/common/propertyFieldHeader/PropertyFieldHeader.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/components/Callout';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
 import { IPropertyFieldHeaderProps, IPropertyFieldHeaderState, CalloutTriggers } from './IPropertyFieldHeader';
-import { getIconClassName } from 'office-ui-fabric-react/lib/Styling';
-import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { getIconClassName } from '@fluentui/react/lib/Styling';
+import { css } from '@fluentui/react/lib/Utilities';
 
 import styles from './PropertyFieldHeader.module.scss';
 

diff --git a/src/common/propertyPaneSpinner/PropertyPaneSpinner.tsx b/src/common/propertyPaneSpinner/PropertyPaneSpinner.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ISpinnerProps, Spinner } from "office-ui-fabric-react/lib/Spinner";
+import { ISpinnerProps, Spinner } from "@fluentui/react/lib/Spinner";
 
 export const PropertyPaneSpinner: React.SFC<ISpinnerProps> = (props) => {
   return (

diff --git a/src/helpers/PropertyPaneHelpers.ts b/src/helpers/PropertyPaneHelpers.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { PropertyPaneSpinner } from '../common/propertyPaneSpinner';
-import { ISpinnerProps } from 'office-ui-fabric-react/lib/Spinner';
+import { ISpinnerProps } from '@fluentui/react/lib/Spinner';
 
 export interface IPropertyPaneSpinner {
   /**

diff --git a/src/propertyFields/buttonWithCallout/IPropertyFieldButtonWithCalloutHost.ts b/src/propertyFields/buttonWithCallout/IPropertyFieldButtonWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
-import { IButtonProps } from 'office-ui-fabric-react/lib/components/Button';
+import { IButtonProps } from '@fluentui/react/lib/components/Button';
 
 /**
  * PropertyFieldButtonWithCalloutHost properties interface

diff --git a/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts b/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts
@@ -8,7 +8,7 @@ import {
 import PropertyFieldButtonHost from './PropertyFieldButtonWithCalloutHost';
 
 import { IPropertyFieldButtonWithCalloutPropsInternal, IPropertyFieldButtonWithCalloutProps } from './IPropertyFieldButtonWithCallout';
-import { ButtonType } from 'office-ui-fabric-react/lib/components/Button';
+import { ButtonType } from '@fluentui/react/lib/components/Button';
 
 import omit from 'lodash/omit';
 

diff --git a/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx b/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from 'office-ui-fabric-react/lib/components/Button';
+import { Button } from '@fluentui/react/lib/components/Button';
 
 import PlaceholderWithCallout from '../../common/placeholderWithCallout/PlaceholderWithCallout';
 

diff --git a/src/propertyFields/checkboxWithCallout/IPropertyFieldCheckboxWithCalloutHost.ts b/src/propertyFields/checkboxWithCallout/IPropertyFieldCheckboxWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
-import { ICheckboxProps } from 'office-ui-fabric-react/lib/components/Checkbox';
+import { ICheckboxProps } from '@fluentui/react/lib/components/Checkbox';
 
 /**
  * PropertyFieldCheckboxWithCalloutHost properties interface

diff --git a/src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx b/src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
 import PlaceholderWithCallout from '../../common/placeholderWithCallout/PlaceholderWithCallout';
+import type { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
 
 import { IPropertyFieldCheckboxWithCalloutHostProps } from './IPropertyFieldCheckboxWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { Checkbox } from 'office-ui-fabric-react/lib/components/Checkbox';
+import { Checkbox } from '@fluentui/react/lib/components/Checkbox';
 
 /**
  * Renders the control for PropertyFieldCheckboxWithCallout component
@@ -21,7 +22,7 @@ export default class PropertyFieldCheckboxHost extends React.Component<IProperty
     public render(): JSX.Element {
         return (
             <div>
-                <PlaceholderWithCallout {...this.props}>
+                <PlaceholderWithCallout {...(this.props as IPlaceholderWithCalloutProps)}>
                     <Checkbox {...this.props} label={this.props.text} />
                 </PlaceholderWithCallout>
             </div>

diff --git a/src/propertyFields/choiceGroupWithCallout/IPropertyFieldChoiceGroupWithCalloutHost.ts b/src/propertyFields/choiceGroupWithCallout/IPropertyFieldChoiceGroupWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldHeaderCalloutProps } from '../../common/propertyFieldHeader/IPropertyFieldHeader';
-import { IChoiceGroupProps } from 'office-ui-fabric-react/lib/components/ChoiceGroup';
+import { IChoiceGroupProps } from '@fluentui/react/lib/components/ChoiceGroup';
 
 /**
  * PropertyFieldChoiceGroupWithCalloutHost properties interface

diff --git a/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCallout.ts b/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCallout.ts
@@ -9,7 +9,7 @@ import omit from 'lodash/omit';
 import PropertyFieldToggleWithCalloutHost from './PropertyFieldChoiceGroupWithCalloutHost';
 
 import {IPropertyFieldChoiceGroupWithCalloutPropsInternal, IPropertyFieldChoiceGroupWithCalloutProps} from './IPropertyFieldChoiceGroupWithCallout';
-import { IChoiceGroupOption } from 'office-ui-fabric-react/lib/components/ChoiceGroup';
+import { IChoiceGroupOption } from '@fluentui/react/lib/components/ChoiceGroup';
 
 class PropertyFieldChoiceGroupWithCalloutBuilder implements IPropertyPaneField<IPropertyFieldChoiceGroupWithCalloutPropsInternal> {
     public targetProperty: string;
@@ -42,7 +42,7 @@ class PropertyFieldChoiceGroupWithCalloutBuilder implements IPropertyPaneField<I
         const element = React.createElement(PropertyFieldToggleWithCalloutHost, {
             ...omit(props, ['options']),
             options: options,
-            onChanged: this._onChanged.bind(this)
+            onChange: this._onChanged.bind(this)
         });
 
         ReactDOM.render(element, elem);

diff --git a/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx b/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx
@@ -2,10 +2,11 @@ import * as React from 'react';
 import omit from 'lodash/omit';
 
 import PropertyFieldHeader from '../../common/propertyFieldHeader/PropertyFieldHeader';
+import type { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
 
 import { IPropertyFieldChoiceGroupWithCalloutHostProps } from './IPropertyFieldChoiceGroupWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { ChoiceGroup } from 'office-ui-fabric-react/lib/components/ChoiceGroup';
+import { ChoiceGroup } from '@fluentui/react/lib/components/ChoiceGroup';
 
 export default class PropertyFieldToggleWithCalloutHost extends React.Component<IPropertyFieldChoiceGroupWithCalloutHostProps, null> {
     constructor(props: IPropertyFieldChoiceGroupWithCalloutHostProps) {
@@ -19,7 +20,7 @@ export default class PropertyFieldToggleWithCalloutHost extends React.Component<
     public render(): JSX.Element {
         return (
             <div>
-                <PropertyFieldHeader {...this.props} />
+                <PropertyFieldHeader {...(this.props as IPlaceholderWithCalloutProps)} />
                 <ChoiceGroup {...omit(this.props, ['label'])} />
             </div>
         );

diff --git a/src/propertyFields/codeEditor/PropertyFieldCodeEditorHost.tsx b/src/propertyFields/codeEditor/PropertyFieldCodeEditorHost.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Async } from 'office-ui-fabric-react/lib/Utilities';
-import { PrimaryButton, DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button';
-import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { Async } from '@fluentui/react/lib/Utilities';
+import { PrimaryButton, DefaultButton, IconButton } from '@fluentui/react/lib/Button';
+import { Panel, PanelType } from '@fluentui/react/lib/Panel';
 import { PropertyFieldCodeEditorLanguages } from './IPropertyFieldCodeEditor';
-import { Label } from 'office-ui-fabric-react/lib/Label';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { Label } from '@fluentui/react/lib/Label';
+import { TextField } from '@fluentui/react/lib/TextField';
 import { IPropertyFieldCodeEditorHostProps, IPropertyFieldCodeEditorHostState } from './IPropertyFieldCodeEditorHost';
 import { CodeFormatter } from './CodeFormatter';
 import styles from './PropertyFieldCodeEditorHost.module.scss';

diff --git a/src/propertyFields/collectionData/ICustomCollectionField.ts b/src/propertyFields/collectionData/ICustomCollectionField.ts
@@ -1,6 +1,6 @@
-import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { ISelectableOption } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
-import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
+import { ISelectableOption } from '@fluentui/react/lib/utilities/selectableOption/SelectableOption.types';
+import { IRenderFunction } from '@fluentui/react/lib/Utilities';
 import { CollectionIconFieldRenderMode } from './collectionIconField';
 
 

diff --git a/src/propertyFields/collectionData/IPropertyFieldCollectionData.ts b/src/propertyFields/collectionData/IPropertyFieldCollectionData.ts
@@ -1,6 +1,6 @@
 import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-property-pane";
 import { ICustomCollectionField } from "./ICustomCollectionField";
-import { IPanelProps } from "office-ui-fabric-react/lib/Panel";
+import { IPanelProps } from "@fluentui/react/lib/Panel";
 
 
 export interface IPropertyFieldCollectionDataProps {

diff --git a/src/propertyFields/collectionData/PropertyFieldCollectionDataHost.tsx b/src/propertyFields/collectionData/PropertyFieldCollectionDataHost.tsx
@@ -4,9 +4,9 @@ import {
   IPropertyFieldCollectionDataHostProps,
   IPropertyFieldCollectionDataHostState,
 } from "./IPropertyFieldCollectionDataHost";
-import { DefaultButton } from "office-ui-fabric-react/lib/components/Button";
-import { Panel, PanelType } from "office-ui-fabric-react/lib/components/Panel";
-import { Label } from "office-ui-fabric-react/lib/components/Label";
+import { DefaultButton } from "@fluentui/react/lib/components/Button";
+import { Panel, PanelType } from "@fluentui/react/lib/components/Panel";
+import { Label } from "@fluentui/react/lib/components/Label";
 import { CollectionDataViewer } from "./collectionDataViewer";
 import FieldErrorMessage from "../errorMessage/FieldErrorMessage";
 import * as strings from "PropertyControlStrings";

diff --git a/src/propertyFields/collectionData/collectionCheckboxField/CollectionCheckboxField.tsx b/src/propertyFields/collectionData/collectionCheckboxField/CollectionCheckboxField.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from '../PropertyFieldCollectionDataHost.module.scss';
-import { Checkbox } from 'office-ui-fabric-react/lib/components/Checkbox';
+import { Checkbox } from '@fluentui/react/lib/components/Checkbox';
 import { IBaseCollectionFieldProps } from '../IBaseCollectionFIeldsProps';
 
 export interface ICollectionCheckboxFieldProps extends IBaseCollectionFieldProps { }

diff --git a/src/propertyFields/collectionData/collectionColorField/CollectionColorField.tsx b/src/propertyFields/collectionData/collectionColorField/CollectionColorField.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styles from '../PropertyFieldCollectionDataHost.module.scss';
 import { ICollectionColorFieldProps } from './ICollectionColorFieldProps';
-import { Async } from 'office-ui-fabric-react/lib/Utilities';
-import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
-import { ColorPicker } from 'office-ui-fabric-react/lib/ColorPicker';
+import { Async } from '@fluentui/react/lib/Utilities';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
+import { ColorPicker } from '@fluentui/react/lib/ColorPicker';
 import { ICustomCollectionField } from '../ICustomCollectionField';
 
 interface ICollectionColorFieldState {

diff --git a/src/propertyFields/collectionData/collectionDataItem/CollectionDataItem.tsx b/src/propertyFields/collectionData/collectionDataItem/CollectionDataItem.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import styles from '../PropertyFieldCollectionDataHost.module.scss';
 import { ICollectionDataItemProps, ICollectionDataItemState } from '.';
-import { TextField } from 'office-ui-fabric-react/lib/components/TextField';
-import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
-import { Link } from 'office-ui-fabric-react/lib/components/Link';
+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 * as strings from 'PropertyControlStrings';
 import { ICustomCollectionField, CustomCollectionFieldType } from '../ICustomCollectionField';
 import { FieldValidator } from '../FieldValidator';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
-import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/components/Callout';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
 import { CollectionIconField } from '../collectionIconField';
 import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
 import { CollectionNumberField } from '../collectionNumberField';

diff --git a/src/propertyFields/collectionData/collectionDataViewer/CollectionDataViewer.tsx b/src/propertyFields/collectionData/collectionDataViewer/CollectionDataViewer.tsx
@@ -3,8 +3,8 @@ import styles from '../PropertyFieldCollectionDataHost.module.scss';
 import { ICollectionDataViewerProps } from './ICollectionDataViewerProps';
 import { ICollectionDataViewerState } from './ICollectionDataViewerState';
 import { CollectionDataItem } from '../collectionDataItem';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
-import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { Icon } from '@fluentui/react/lib/components/Icon';
 import * as strings from 'PropertyControlStrings';
 import { cloneDeep, sortBy } from '@microsoft/sp-lodash-subset';
 

diff --git a/src/propertyFields/collectionData/collectionDropdownField/CollectionDropdownField.tsx b/src/propertyFields/collectionData/collectionDropdownField/CollectionDropdownField.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
 import * as React from 'react';
 import { ICustomDropdownOption } from '../ICustomCollectionField';
 import { IBaseCollectionFieldProps } from '../IBaseCollectionFIeldsProps';

diff --git a/src/propertyFields/collectionData/collectionIconField/CollectionIconField.tsx b/src/propertyFields/collectionData/collectionIconField/CollectionIconField.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styles from '../PropertyFieldCollectionDataHost.module.scss';
 import { ICollectionIconFieldProps } from '.';
-import { TextField } from 'office-ui-fabric-react/lib/components/TextField';
-import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
-import { ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { TextField } from '@fluentui/react/lib/components/TextField';
+import { Icon } from '@fluentui/react/lib/components/Icon';
+import { ActionButton } from '@fluentui/react/lib/Button';
 import { IconSelector } from '../../../common/iconSelector/IconSelector';
 
 interface ICollectionIconFieldState {

diff --git a/src/propertyFields/collectionData/collectionNumberField/CollectionNumberField.tsx b/src/propertyFields/collectionData/collectionNumberField/CollectionNumberField.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from '../PropertyFieldCollectionDataHost.module.scss';
-import { Async } from 'office-ui-fabric-react/lib/Utilities';
+import { Async } from '@fluentui/react/lib/Utilities';
 import { ICollectionNumberFieldProps } from './ICollectionNumberFieldProps';
 import { ICollectionNumberFieldState } from './ICollectionNumberFieldState';
 import { ICustomCollectionField } from '../ICustomCollectionField';

diff --git a/src/propertyFields/colorPicker/IPropertyFieldColorPicker.ts b/src/propertyFields/colorPicker/IPropertyFieldColorPicker.ts
@@ -1,5 +1,5 @@
 import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-property-pane';
-import { IColor } from 'office-ui-fabric-react/lib/utilities/color';
+import { IColor } from '@fluentui/react/lib/utilities/color';
 
 /**
  * Enum for specifying how the control should be shown

diff --git a/src/propertyFields/colorPicker/PropertyFieldColorPicker.ts b/src/propertyFields/colorPicker/PropertyFieldColorPicker.ts
@@ -1,5 +1,5 @@
 import { IPropertyPaneField, PropertyPaneFieldType } from '@microsoft/sp-property-pane';
-import { getColorFromString, IColor } from 'office-ui-fabric-react/lib/utilities/color';
+import { getColorFromString, IColor } from '@fluentui/react/lib/utilities/color';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { setPropertyValue } from '../../helpers/GeneralHelper';